Add 10px gap between statuses

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} />

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>

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) {

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,

app/styles/components/drawer.scss

@@ -20,7 +20,6 @@
 .column,
 .drawer {
   flex: 1 1 100%;
-  overflow: hidden;
 }
 
 .drawer__pager {

app/styles/components/notification.scss

@@ -51,3 +51,7 @@
 .notification__relative_time {
   float: right;
 }
+
+.notification .status__wrapper {
+  box-shadow: none;
+}

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);

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);
-    }
   }
 }
 

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) {