Bug 1965944 - Revert "Bug 1965944 - Visual updates for medium card UI. "

This reverts commit c94714433dc639941f392ec3ceb656a3ce0b81b2.

Differential Revision: https://phabricator.services.mozilla.com/D250596

UltraBlame original commit: 2740d3e3f1f0c14adeb61399803016c54e4bae25

Author: marco-c

browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/CardGrid.jsx

@@ -31,7 +31,6 @@ const PREF_BILLBOARD_ENABLED = "newtabAdSize.billboard";
 const PREF_LEADERBOARD_ENABLED = "newtabAdSize.leaderboard";
 const PREF_LEADERBOARD_POSITION = "newtabAdSize.leaderboard.position";
 const PREF_BILLBOARD_POSITION = "newtabAdSize.billboard.position";
-const PREF_REFINED_CARDS_ENABLED = "discoverystream.refinedCardsLayout.enabled";
 const INTERSECTION_RATIO = 0.5;
 const VISIBLE = "visible";
 const VISIBILITY_CHANGE_EVENT = "visibilitychange";
@@ -362,8 +361,6 @@ export class _CardGrid extends React.PureComponent {
     const listFeedSelectedFeed = prefs[PREF_LIST_FEED_SELECTED_FEED];
     const billboardEnabled = prefs[PREF_BILLBOARD_ENABLED];
     const leaderboardEnabled = prefs[PREF_LEADERBOARD_ENABLED];
-    const refinedCardsLayout = prefs[PREF_REFINED_CARDS_ENABLED];
-
     // filter out recs that should be in ListFeed
     const recs = this.props.data.recommendations
       .filter(item => !item.feedName)
@@ -398,8 +395,8 @@ export class _CardGrid extends React.PureComponent {
             features={rec.features}
             showTopics={showTopics}
             selectedTopics={selectedTopics}
-            excerpt={refinedCardsLayout && rec.excerpt}
             availableTopics={availableTopics}
+            excerpt={rec.excerpt}
             url={rec.url}
             id={rec.id}
             shim={rec.shim}

browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/_CardGrid.scss

@@ -7,20 +7,15 @@
     border-radius: var(--border-radius-medium);
     box-shadow: $shadow-card;
 
-    img,
-    .placeholder-image {
-      border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
+    .img-wrapper .img {
+      img,
+      .placeholder-image {
+        border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
+      }
     }
   }
 }
 
-.ds-card.refined-cards:not(.placeholder) {
-  .img-wrapper .img {
-    height: 172px;
-    width: 100%;
-  }
-}
-
 .ds-onboarding-container {
   padding-inline-start: 16px;
   padding-inline-end: 16px;
@@ -126,17 +121,14 @@
   display: grid;
   grid-gap: 24px;
   position: relative;
+  // Bug 1926056: Row/column Gap spacing to allow for IAB fixed ad sizes
+  row-gap: 24px;
+  column-gap: 18px;
 
   &.ds-card-grid-compact {
     grid-gap: 20px;
   }
 
-  &.ad-sizing-variant-a,
-  &.ad-sizing-variant-b {
-    row-gap: 24px;
-    column-gap: 18px;
-  }
-
   &.ds-card-grid-recent-saves {
     .ds-card {
       // Hide the second row orphan on narrow screens.

browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardSections/CardSections.jsx

@@ -32,9 +32,8 @@ const PREF_BILLBOARD_ENABLED = "newtabAdSize.billboard";
 const PREF_LEADERBOARD_ENABLED = "newtabAdSize.leaderboard";
 const PREF_LEADERBOARD_POSITION = "newtabAdSize.leaderboard.position";
 const PREF_BILLBOARD_POSITION = "newtabAdSize.billboard.position";
-const PREF_REFINED_CARDS_ENABLED = "discoverystream.refinedCardsLayout.enabled";
 
-function getLayoutData(responsiveLayouts, index, refinedCardsLayout) {
+function getLayoutData(responsiveLayouts, index) {
   let layoutData = {
     classNames: [],
     imageSizes: {},
@@ -52,15 +51,7 @@ function getLayoutData(responsiveLayouts, index, refinedCardsLayout) {
         // The API tells us whether the tile should show the excerpt or not.
         // Apply extra styles accordingly.
         if (tile.hasExcerpt) {
-          if (tile.size === "medium" && refinedCardsLayout) {
-            layoutData.classNames.push(
-              `col-${layout.columnCount}-hide-excerpt`
-            );
-          } else {
-            layoutData.classNames.push(
-              `col-${layout.columnCount}-show-excerpt`
-            );
-          }
+          layoutData.classNames.push(`col-${layout.columnCount}-show-excerpt`);
         } else {
           layoutData.classNames.push(`col-${layout.columnCount}-hide-excerpt`);
         }
@@ -123,7 +114,6 @@ function CardSection({
   const mayHaveThumbsUpDown = prefs[PREF_THUMBS_UP_DOWN_ENABLED];
   const selectedTopics = prefs[PREF_TOPICS_SELECTED];
   const availableTopics = prefs[PREF_TOPICS_AVAILABLE];
-  const refinedCardsLayout = prefs[PREF_REFINED_CARDS_ENABLED];
 
   const { saveToPocketCard } = useSelector(state => state.DiscoveryStream);
   const mayHaveSectionsPersonalization =
@@ -270,8 +260,7 @@ function CardSection({
         {section.data.slice(0, maxTile).map((rec, index) => {
           const { classNames, imageSizes } = getLayoutData(
             responsiveLayouts,
-            index,
-            refinedCardsLayout
+            index
           );
 
           if (!rec || rec.placeholder) {

browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardSections/_CardSections.scss

@@ -5,21 +5,6 @@
   grid-column: span 1;
   padding: var(--space-large);
 
-  &.refined-cards.ds-card.sections-card-ui {
-    height: fit-content;
-  }
-
-  &.refined-cards {
-    .ds-card-link {
-      padding: var(--space-xsmall) var(--space-small);
-      flex-grow: 0;
-    }
-
-    .img-wrapper {
-      width: 110px;
-      height: 117px;
-    }
-  }
 
   &.ds-card.sections-card-ui {
     padding: unset;
@@ -36,6 +21,7 @@
     align-items: center;
     gap: var(--space-medium);
     padding: var(--space-large);
+
   }
 
   .img-wrapper {
@@ -91,6 +77,7 @@
   }
 }
 
+
 @mixin section-card-medium {
   grid-row: span 2;
   grid-column: span 1;
@@ -99,23 +86,6 @@
   align-items: initial;
   gap: initial;
 
-  &.refined-cards.ds-card.sections-card-ui {
-    height: unset;
-  }
-
-  // .refined-medium-card only appears if refinedCardsLayout.enabled pref is set to true
-  &.refined-cards {
-    .ds-card-link {
-      padding: unset;
-      flex-grow: unset;
-    }
-
-    .img-wrapper {
-      width: 100%;
-      height: 172px;
-    }
-  }
-
   .card-stp-button-position-wrapper {
     inset-inline-end: 10px;
   }
@@ -150,8 +120,6 @@
     padding: var(--space-medium) var(--space-large);
 
     .info-wrap {
-      flex-grow: initial;
-
       .title {
         -webkit-line-clamp: 3;
         margin-block: 0 var(--space-small);
@@ -163,10 +131,6 @@
         -webkit-line-clamp: 3;
       }
     }
-
-    .sections-card-footer {
-      margin-top: auto;
-    }
   }
 }
 
@@ -189,14 +153,11 @@
 
       .img-wrapper {
         width: 265px;
-        height: 100%;
       }
 
       .ds-image.img {
         // Square ratio
         aspect-ratio: 1/1;
-        width: 100%;
-        height: 100%;
 
         img {
           border-radius: var(--border-radius-medium);

browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSCard/DSCard.jsx

@@ -208,8 +208,6 @@ export class _DSCard extends React.PureComponent {
     this.onMenuShow = this.onMenuShow.bind(this);
     this.onThumbsUpClick = this.onThumbsUpClick.bind(this);
     this.onThumbsDownClick = this.onThumbsDownClick.bind(this);
-    const refinedCardsLayout =
-      this.props.Prefs.values["discoverystream.refinedCardsLayout.enabled"];
 
     this.setContextMenuButtonHostRef = element => {
       this.contextMenuButtonHostElement = element;
@@ -286,7 +284,7 @@ export class _DSCard extends React.PureComponent {
       },
       medium: {
         width: 300,
-        height: refinedCardsLayout ? 172 : 150,
+        height: 150,
       },
       large: {
         width: 265,

browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss

@@ -87,17 +87,12 @@ $ds-card-image-gradient-solid: rgba(0, 0, 0, 100%);
     position: relative;
   }
 
-  &.refined-cards {
-    .card-stp-button-hover-background {
-      height: 172px;
-    }
-  }
-
   .card-stp-button-hover-background {
     opacity: 0;
     width: 100%;
     position: absolute;
     top: 0;
+    height: 0;
     transition: opacity;
     transition-duration: 0s;
     padding-block-start: 50%;