Merge pull request #53 from sf-industries/release-242/W-12119719

W-12119719 : ESM Mass discount panel styling changes
vlocityinc · Nov 28, 2022 · 43f8e6b · 43f8e6b
2 parents 0c64fbb + 4170410
commit 43f8e6b
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 17 deletions.
diff --git a/ui/components/b2b/components/_tokens.scss b/ui/components/b2b/components/_tokens.scss
@@ -12,9 +12,16 @@ $b2b-flex-end: flex-end;
 $b2b-text-center: center;
 $b2b-config-promo-wrapper-blue: #a5ccef;
 $b2b-config-promo-details-blue: #1586e8;
+$b2b-config-promo-header-blue: #257BCD;
 $b2b-checkbox-focus: $offset-none $offset-none ($offset-small)+px ($offset-x-small)+px $azure !default;
 $b2b-checkbox-blue: #C0E5FF;
 $b2b-checkbox-red: #FFC2C2;
+$b2b-header-gray: #C4C4C4;
+$b2b-section-title-black: #0B0B0B;
+$b2b-pill-text-orange: #FF8A00;
+$b2b-section-background-gray: rgba(221, 219, 218, 0.33);
+$b2b-section-description-black: #000000;
+$b2b-modal-title-gray: #979797;
 
 @mixin multiLineEllipsis($lineHeight: 1.2em, $lineCount: 1, $bgColor: white) {
   overflow: hidden;

diff --git a/ui/components/b2b/components/cart-summary/_b2bDiscountPanel.scss b/ui/components/b2b/components/cart-summary/_b2bDiscountPanel.scss
@@ -4,7 +4,7 @@
 
   .nds-b2b-discount-panel {
     .nds-b2b-discount-header {
-      border-bottom: 1px solid #C4C4C4;
+      border-bottom: 1px solid $b2b-header-gray;
     }
 
     .nds-b2b-section-tile {
@@ -13,30 +13,17 @@
     }
 
     .nds-b2b-section-tile_title {
-      color: #0B0B0B;
+      color: $b2b-section-title-black;
     }
 
     .nds-b2b-section-tile_pill {
-      background: rgba(221, 219, 218, 0.33);
-      color: #FF8A00;
+      background: $b2b-section-background-gray;
+      color: $b2b-pill-text-orange;
       font-weight: 700;
       padding: 0.2rem;
       border-radius: 0.75rem
     }
 
-    .nds-b2b-discount-modal_title {
-      color: #979797;
-    }
-
-    .nds-b2b-discount-promo_header {
-      background: #257BCD;
-      color: $white-primary;
-    }
-
-    .nds-b2b-discount-promo_description {
-      color: #000000;
-    }
-
     .nds-accordion__section {
       position: relative;
       margin: 0.5rem 0;
@@ -52,4 +39,21 @@
       overflow-y: auto;
     }
   }
+
+  .nds-b2b-promo-modal_title {
+    color: $b2b-section-title-black;
+  }
+
+  .nds-b2b-discount-modal_title {
+    color: $b2b-modal-title-gray;
+  }
+
+  .nds-b2b-discount-promo_header {
+    background: $b2b-config-promo-header-blue;
+    color: $white-primary;
+  }
+
+  .nds-b2b-discount-promo_description {
+    color: $b2b-section-description-black;
+  }
 }