Bug 1524632 – Design refinements for 66 components (#4764)

content-src/components/DiscoveryStreamBase/_DiscoveryStreamBase.scss

@@ -29,5 +29,5 @@
   font-weight: 600;
   line-height: 24px;
   color: $grey-90;
-  margin: 16px 0;
+  margin: 24px 0 12px;
 }

content-src/components/DiscoveryStreamComponents/CardGrid/_CardGrid.scss

@@ -1,5 +1,5 @@
 $col4-header-line-height: 20;
-$col4-header-font-size: 13;
+$col4-header-font-size: 14;
 
 .ds-card-grid {
   display: grid;

content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss

@@ -1,7 +1,7 @@
 // Type sizes
 $header-font-size: 17;
 $header-line-height: 24;
-$excerpt-font-size: 13;
+$excerpt-font-size: 14;
 $excerpt-line-height: 20;
 
 .ds-card {
@@ -50,6 +50,11 @@ $excerpt-line-height: 20;
       // show only 4 lines of copy
       @include limit-visibile-lines(4, $excerpt-line-height, $excerpt-font-size);
     }
+
+    .context,
+    .source {
+      font-size: 13px;
+    }
   }
 
   header {
@@ -65,8 +70,4 @@ $excerpt-line-height: 20;
     color: $grey-50;
     margin: 8px 0 0;
   }
-
-  .context {
-    color: $teal-70;
-  }
 }

content-src/components/DiscoveryStreamComponents/Hero/Hero.jsx

@@ -74,7 +74,7 @@ export class Hero extends React.PureComponent {
             </div>
             <div className="meta">
               <header>{heroRec.title}</header>
-              <p>{heroRec.excerpt}</p>
+              <p className="excerpt">{heroRec.excerpt}</p>
               {heroRec.context ? (
                 <p className="context">{heroRec.context}</p>
               ) : (

content-src/components/DiscoveryStreamComponents/Hero/_Hero.scss

@@ -1,4 +1,4 @@
-$card-header-in-hero-font-size: 13;
+$card-header-in-hero-font-size: 14;
 $card-header-in-hero-line-height: 20;
 
 .ds-hero {
@@ -12,6 +12,12 @@ $card-header-in-hero-line-height: 20;
 
   p {
     line-height: 1.538;
+    margin: 8px 0;
+  }
+
+  .excerpt {
+    @include limit-visibile-lines(4, 23, 15);
+    margin: 4px 0 8px;
   }
 
   .ds-list {
@@ -22,6 +28,10 @@ $card-header-in-hero-line-height: 20;
   .ds-card {
     border: 0;
 
+    p {
+      margin-top: 4px;
+    }
+
     &:hover {
       border: 0;
       box-shadow: none;
@@ -50,15 +60,15 @@ $card-header-in-hero-line-height: 20;
   .wrapper {
     color: $grey-50;
     display: block;
-    margin: 16px 0 24px;
+    margin: 12px 0 16px;
-    padding: 24px 0;
+    padding: 16px 0;
     border-top: $border-secondary;
     border-bottom: $border-secondary;
 
     @at-root .ds-hero-no-border .wrapper {
       border-top: 0;
       border-bottom: 0;
-      padding: 0;
+      padding: 0 0 8px;
     }
 
     &:hover .meta header {
@@ -80,12 +90,12 @@ $card-header-in-hero-line-height: 20;
 
     .meta {
       header {
-        font-size: 22px;
+        @include limit-visibile-lines(2, 28, 22);
         color: $grey-90;
       }
 
       p {
-        font-size: 13px;
+        font-size: 14px;
 
         &.context {
           color: $teal-70;
@@ -93,7 +103,10 @@ $card-header-in-hero-line-height: 20;
       }
 
       .source {
+        font-size: 13px;
         margin-bottom: 0;
+        overflow-x: hidden;
+        text-overflow: ellipsis;
       }
     }
   }
@@ -157,11 +170,11 @@ $card-header-in-hero-line-height: 20;
         padding: 0 24px 0 0;
 
         header {
-          font-size: 22px;
+          @include limit-visibile-lines(6, 28, 22);
+          margin: 0 0 4px;
         }
 
         p {
-          font-size: 15px;
           line-height: 1.6;
         }
       }

content-src/components/DiscoveryStreamComponents/List/_List.scss

@@ -1,6 +1,6 @@
 // Type sizes
 $bordered-spacing: 16px;
-$item-font-size: 13;
+$item-font-size: 14;
 $item-image-size: 72px;
 $item-line-height: 20;
 
@@ -167,7 +167,7 @@ $item-line-height: 20;
   .ds-list-item-excerpt {
     @include limit-visibile-lines(2, $item-line-height, $item-font-size);
     color: var(--newtab-text-secondary-color);
-    margin-bottom: 8px;
+    margin: 4px 0 8px;
   }
 
   .ds-list-item-info {
@@ -178,7 +178,7 @@ $item-line-height: 20;
 
   .ds-list-item-title {
     font-weight: 600;
-    margin-bottom: 8px;
+    margin-bottom: 4px;
   }
 
   .ds-list-item-text {

content-src/components/DiscoveryStreamComponents/Navigation/_Navigation.scss

@@ -1,7 +1,7 @@
 .ds-navigation {
   line-height: 32px;
   padding: 4px 0;
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 600;
 
   &.ds-navigation-centered {

content-src/components/DiscoveryStreamComponents/SectionTitle/_SectionTitle.scss

@@ -1,5 +1,6 @@
 .ds-section-title {
   text-align: center;
+  margin-top: 24px;
 
   .title {
     line-height: 48px;
@@ -10,7 +11,7 @@
 
   .subtitle {
     line-height: 24px;
-    font-size: 15px;
+    font-size: 14px;
     color: $grey-50;
     margin-top: 4px;
   }