From a3f162a2ea9cfb1ceaf024427501062624ca0427 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 12 Sep 2021 19:33:00 -0500
Subject: [PATCH] Add 10px gap between statuses

---
 app/soapbox/pages/home_page.js             |  4 ++--
 app/soapbox/pages/status_page.js           |  4 ++--
 app/styles/components/columns.scss         | 27 ++++++++++++++++++++++
 app/styles/components/detailed-status.scss |  6 ++---
 app/styles/components/drawer.scss          |  1 -
 app/styles/components/notification.scss    |  4 ++++
 app/styles/components/promo-panel.scss     |  3 ++-
 app/styles/components/status.scss          | 15 +++++-------
 app/styles/ui.scss                         |  6 +++++
 9 files changed, 52 insertions(+), 18 deletions(-)

diff --git a/app/soapbox/pages/home_page.js b/app/soapbox/pages/home_page.js
index bebfe40c2..8ec889b11 100644
--- a/app/soapbox/pages/home_page.js
+++ b/app/soapbox/pages/home_page.js
@@ -62,8 +62,8 @@ class HomePage extends ImmutablePureComponent {
               </div>
             </div>
 
-            <div className='columns-area__panels__main'>
-              <div className='columns-area columns-area--mobile'>
+            <div className='columns-area__panels__main columns-area__panels__main--transparent'>
+              <div className='columns-area columns-area--mobile columns-area--transparent'>
                 {me && <div className='timeline-compose-block' ref={this.composeBlock}>
                   <Link className='timeline-compose-block__avatar' to={`/@${acct}`}>
                     <Avatar account={account} size={46} />
diff --git a/app/soapbox/pages/status_page.js b/app/soapbox/pages/status_page.js
index 6560cef0d..9e1ba0399 100644
--- a/app/soapbox/pages/status_page.js
+++ b/app/soapbox/pages/status_page.js
@@ -38,8 +38,8 @@ class StatusPage extends ImmutablePureComponent {
               </div>
             </div>
 
-            <div className='columns-area__panels__main'>
-              <div className='columns-area columns-area--mobile'>
+            <div className='columns-area__panels__main columns-area__panels__main--transparent'>
+              <div className='columns-area columns-area--mobile columns-area--transparent'>
                 {children}
               </div>
             </div>
diff --git a/app/styles/components/columns.scss b/app/styles/components/columns.scss
index 205546845..d8de9657e 100644
--- a/app/styles/components/columns.scss
+++ b/app/styles/components/columns.scss
@@ -333,6 +333,32 @@
   @include standard-panel;
 }
 
+.columns-area--transparent .column {
+  background: transparent;
+  border-radius: 0;
+  box-shadow: none;
+  margin-top: -10px;
+
+  .column-back-button {
+    background: transparent;
+    margin-bottom: -10px;
+  }
+
+  .slist {
+    margin-top: -10px;
+  }
+
+  .account__section-headline {
+    background: transparent;
+    border: 0;
+  }
+
+  .empty-column-indicator,
+  .error-column {
+    background: transparent;
+  }
+}
+
 .column-header__wrapper {
   position: relative;
   flex: 0 0 auto;
@@ -411,6 +437,7 @@
       border-radius: 10px;
       transition: 0.2s;
       opacity: 0;
+      z-index: -1;
     }
 
     @media screen and (max-width: $nav-breakpoint-2) {
diff --git a/app/styles/components/detailed-status.scss b/app/styles/components/detailed-status.scss
index 3daac0805..3761bc91e 100644
--- a/app/styles/components/detailed-status.scss
+++ b/app/styles/components/detailed-status.scss
@@ -7,7 +7,6 @@
 }
 
 .detailed-status {
-  background: hsla(var(--brand-color_hsl), 0.03);
   padding: 14px 10px;
 
   &--flex {
@@ -64,7 +63,6 @@
 }
 
 .detailed-status__action-bar {
-  background: hsla(var(--brand-color_hsl), 0.03);
   border-top: 1px solid var(--brand-color--faint);
   border-bottom: 1px solid var(--brand-color--faint);
   display: flex;
@@ -91,7 +89,6 @@
     .icon_button__text {
       font-size: 14px;
       padding-left: 3px;
-      transform: translateY(-1px);
     }
   }
 
@@ -113,7 +110,10 @@
 }
 
 .detailed-status__wrapper {
+  @include standard-panel;
+  margin: 10px 0;
   position: relative;
+  overflow: hidden;
 }
 
 .detailed-status__application,
diff --git a/app/styles/components/drawer.scss b/app/styles/components/drawer.scss
index 7dc5a1a10..fe50fb50a 100644
--- a/app/styles/components/drawer.scss
+++ b/app/styles/components/drawer.scss
@@ -20,7 +20,6 @@
 .column,
 .drawer {
   flex: 1 1 100%;
-  overflow: hidden;
 }
 
 .drawer__pager {
diff --git a/app/styles/components/notification.scss b/app/styles/components/notification.scss
index fe216cadf..bf4376d65 100644
--- a/app/styles/components/notification.scss
+++ b/app/styles/components/notification.scss
@@ -51,3 +51,7 @@
 .notification__relative_time {
   float: right;
 }
+
+.notification .status__wrapper {
+  box-shadow: none;
+}
diff --git a/app/styles/components/promo-panel.scss b/app/styles/components/promo-panel.scss
index e6e97a047..df2827ef6 100644
--- a/app/styles/components/promo-panel.scss
+++ b/app/styles/components/promo-panel.scss
@@ -6,7 +6,8 @@
 
 .promo-panel-item {
   @include standard-panel-shadow;
-  display: block;
+  display: flex;
+  align-items: center;
   height: 42px;
   line-height: 42px;
   color: var(--primary-text-color);
diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss
index 3ceec3962..df8761d70 100644
--- a/app/styles/components/status.scss
+++ b/app/styles/components/status.scss
@@ -126,6 +126,11 @@
   vertical-align: middle;
 }
 
+.status__wrapper {
+  @include standard-panel;
+  margin: 10px 0;
+}
+
 .status__wrapper--filtered {
   color: var(--primary-text-color);
   border: 0;
@@ -150,7 +155,6 @@
   padding-left: 68px;
   position: relative;
   min-height: 54px;
-  border-bottom: 1px solid var(--brand-color--faint);
   cursor: default;
 
   @supports (-ms-overflow-style: -ms-autohiding-scrollbar) {
@@ -472,20 +476,13 @@
 .focusable {
   &:focus {
     outline: 0;
-    background: var(--brand-color--faint);
+    box-shadow: 0 0 6px 0 hsla(var(--brand-color_hsl), 0.7);
 
     .status.status-direct {
-      background: var(--brand-color--med);
-
       &.muted {
         background: transparent;
       }
     }
-
-    .detailed-status,
-    .detailed-status__action-bar {
-      background: var(--brand-color--med);
-    }
   }
 }
 
diff --git a/app/styles/ui.scss b/app/styles/ui.scss
index 760122aae..47b41148f 100644
--- a/app/styles/ui.scss
+++ b/app/styles/ui.scss
@@ -363,6 +363,7 @@
   width: 61px;
   height: 61px;
   background-color: var(--brand-color);
+  color: white;
   border: 0;
   border-radius: 999px;
   box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.5);
@@ -388,6 +389,11 @@
     color: #fff;
     margin: 0;
   }
+
+  .svg-icon {
+    width: 26px;
+    height: 26px;
+  }
 }
 
 @media screen and (min-width: 360px) {