minor css fixes as per figma

adobecom · Nov 6, 2024 · 62e2ec2 · 62e2ec2
1 parent f0a65a6
commit 62e2ec2
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 25 deletions.
diff --git a/libs/blocks/merch-card/merch-card.js b/libs/blocks/merch-card/merch-card.js
@@ -429,9 +429,10 @@ const decorateFooterRows = (merchCard, footerRows) => {
     footerRows.forEach((row) => {
       const rowIcon = row.firstElementChild.querySelector('picture');
       const rowText = row.querySelector('div > div:nth-child(2)').innerHTML;
-      const rowTextParagraph = createTag('div', { class: 'footer-row-cell-description' }, rowText);
+      const footerRowCellDescStyle = merchCard.classList.contains('checkmark') ? 'footer-row-cell-description-checkmark' : 'footer-row-cell-description';
       const footerRowCellClass = merchCard.classList.contains('checkmark') ? 'footer-row-cell-checkmark' : 'footer-row-cell';
       const footerRowIconClass = merchCard.classList.contains('checkmark') ? 'footer-row-icon-checkmark' : 'footer-row-icon';
+      const rowTextParagraph = createTag('div', { class: footerRowCellDescStyle }, rowText);
       const footerRowCell = createTag('div', { class: footerRowCellClass });
       if (rowIcon) {
         rowIcon.classList.add(footerRowIconClass);

diff --git a/libs/deps/mas/mas.js b/libs/deps/mas/mas.js
@@ -606,10 +606,11 @@ merch-card[variant="ccd-action"] .price-strikethrough {
   }
 
   merch-card[variant="mini-compare-chart"] .footer-rows-title {
-    color: var(--Text-text, #2C2C2C); */
-    font-family: var(--Font-adobe-clean, "Adobe Clean");
+    font-color: #2C2C2C;
     font-weight: 700;
-    padding: var(--consonant-merch-spacing-xxs) 0px;
+    padding-block-end: var(--consonant-merch-spacing-xxs);
+    line-height: var(--consonant-merch-card-body-xs-line-height);
+    font-size: var(--consonant-merch-card-body-xs-font-size);
   }
 
   merch-card[variant="mini-compare-chart"] .footer-row-cell {
@@ -628,7 +629,7 @@ merch-card[variant="ccd-action"] .price-strikethrough {
   merch-card[variant="mini-compare-chart"] .footer-row-icon-checkmark {
     display: flex;
     align-items: center;
-    height: 24px;
+    height: 20px;
   }
 
   merch-card[variant="mini-compare-chart"] .footer-row-cell-checkmark {
@@ -638,6 +639,12 @@ merch-card[variant="ccd-action"] .price-strikethrough {
     align-items: flex-start;
   }
 
+  merch-card[variant="mini-compare-chart"] .footer-row-cell-description-checkmark {
+    font-size: var(--consonant-merch-card-body-xs-font-size);
+    font-weight: 400;
+    line-height: var(--consonant-merch-card-body-xs-line-height);
+  }
+
   merch-card[variant="mini-compare-chart"] .footer-row-cell-description {
     font-size: var(--consonant-merch-card-body-s-font-size);
     line-height: var(--consonant-merch-card-body-s-line-height);