From c3184821be567ceb31cb94c1dcb4ecd24ba2205e Mon Sep 17 00:00:00 2001
From: Ed Lee <edilee@mozilla.com>
Date: Fri, 25 Jan 2019 14:47:27 -0800
Subject: [PATCH] (no bug) - Adjust hero / list spacing

---
 .../components/DiscoveryStreamComponents/Hero/Hero.jsx |  2 +-
 .../DiscoveryStreamComponents/Hero/_Hero.scss          | 10 ++++++++--
 .../DiscoveryStreamComponents/List/_List.scss          | 10 ++++------
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/content-src/components/DiscoveryStreamComponents/Hero/Hero.jsx b/content-src/components/DiscoveryStreamComponents/Hero/Hero.jsx
index 281839e92..ca353e553 100644
--- a/content-src/components/DiscoveryStreamComponents/Hero/Hero.jsx
+++ b/content-src/components/DiscoveryStreamComponents/Hero/Hero.jsx
@@ -78,7 +78,7 @@ export class Hero extends React.PureComponent {
               {heroRec.context ? (
                 <p className="context">{truncateText(heroRec.context, 22)}</p>
               ) : (
-                <p>{truncateText(heroRec.domain, 22)}</p>
+                <p className="source">{truncateText(heroRec.domain, 22)}</p>
               )}
             </div>
           </a>
diff --git a/content-src/components/DiscoveryStreamComponents/Hero/_Hero.scss b/content-src/components/DiscoveryStreamComponents/Hero/_Hero.scss
index 5c4d54568..1ad113176 100644
--- a/content-src/components/DiscoveryStreamComponents/Hero/_Hero.scss
+++ b/content-src/components/DiscoveryStreamComponents/Hero/_Hero.scss
@@ -49,14 +49,16 @@ $card-header-in-hero-line-height: 20;
   // "1/3 width layout" (aka "Mobile First")
   .wrapper {
     color: $grey-50;
-    margin: 18px 0;
-    padding: 20px 0;
+    display: block;
+    margin: 16px 0 24px;
+    padding: 24px 0;
     border-top: $border-secondary;
     border-bottom: $border-secondary;
 
     @at-root .ds-hero-no-border .wrapper {
       border-top: 0;
       border-bottom: 0;
+      padding: 0;
     }
 
     &:hover .meta header {
@@ -89,6 +91,10 @@ $card-header-in-hero-line-height: 20;
           color: $teal-70;
         }
       }
+
+      .source {
+        margin-bottom: 0;
+      }
     }
   }
 
diff --git a/content-src/components/DiscoveryStreamComponents/List/_List.scss b/content-src/components/DiscoveryStreamComponents/List/_List.scss
index 4d04048e3..8d8de6dd3 100644
--- a/content-src/components/DiscoveryStreamComponents/List/_List.scss
+++ b/content-src/components/DiscoveryStreamComponents/List/_List.scss
@@ -1,4 +1,5 @@
 // Type sizes
+$bordered-spacing: 16px;
 $item-font-size: 13;
 $item-image-size: 72px;
 $item-line-height: 20;
@@ -11,8 +12,7 @@ $item-line-height: 20;
   .ds-list-item:not(:nth-last-child(-n+#{$columns})) {
     border-bottom: $border-secondary;
     margin-bottom: -1px;  // cancel out the pixel we used for the border
-
-    padding-bottom: 2px;
+    padding-bottom: $bordered-spacing;
   }
 }
 
@@ -67,7 +67,6 @@ $item-line-height: 20;
     .ds-column-11 &,
     .ds-column-12 & {
       grid-template-columns: repeat(3, 1fr);
-      grid-row-gap: 18px;
     }
 
     .ds-list-item-excerpt {
@@ -126,7 +125,8 @@ $item-line-height: 20;
 
 .ds-list-borders {
   border-top: $border-secondary;
-  padding-top: $item-line-height * 1px;
+  grid-row-gap: $bordered-spacing;
+  padding-top: $bordered-spacing;
 
   &.ds-list-full-width,
   .ds-column-1 &,
@@ -168,8 +168,6 @@ $item-line-height: 20;
   .ds-list-item-link {
     mix-blend-mode: normal;
 
-    padding-bottom: 16px;
-
     display: flex;
     justify-content: space-between;
   }