chore: update loyalty level table

components/Icons/icon.module.css

@@ -17,6 +17,11 @@
   fill: var(--UI-Grey-80);
 }
 
+.green,
+.green * {
+  fill: var(--UI-Green-60);
+}
+
 .pale,
 .pale * {
   fill: var(--Scandic-Brand-Pale-Peach);

components/Icons/variants.ts

@@ -12,6 +12,7 @@ const config = {
       peach80: styles.peach80,
       primaryLightOnSurfaceAccent: styles.plosa,
       red: styles.red,
+      green: styles.green,
     },
   },
   defaultVariants: {

components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard/benefitCard.module.css

@@ -1,5 +1,5 @@
 .benefitCard {
-  background-color: var(--Main-Grey-White);
+  background-color: var(--Scandic-Opacity-White-100);
   border: 1px solid var(--Base-Border-Subtle);
   border-radius: var(--Corner-radius-Small);
   color: var(--Main-Brand-Burgundy);

components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitList/benefitList.module.css

@@ -8,7 +8,6 @@
 }
 
 .firstColumn {
-  background-color: var(--Main-Brand-PalePeach);
   position: absolute;
   top: 0;
   bottom: 0;

components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitValue/index.tsx

@@ -11,7 +11,7 @@ export default function BenefitValue({ benefit }: BenefitValueProps) {
     return <Minus />
   }
   if (!benefit.value) {
-    return <CheckCircle height={32} width={32} />
+    return <CheckCircle height={32} width={32} color="green" />
   }
   return (
     <div className={styles.benefitValueContainer}>

components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/index.tsx

@@ -16,7 +16,7 @@ import {
 export default function LargeTable({ levels }: LargeTableProps) {
   return (
     <table className={styles.table}>
-      <thead className={styles.thead}>
+      <thead>
         <tr className={styles.iconRow}>
           <th className={styles.verticalTableHeader} />
 

components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css

@@ -4,12 +4,7 @@
   color: var(--Theme-Primary-Dark-Surface-Normal);
 }
 
-.thead {
-  background-color: var(--Base-Surface-Secondary-Normal);
-}
-
 .iconRow {
-  background-color: var(--Base-Surface-Secondary-Normal);
   border-bottom: none;
   position: sticky;
   top: 0;
@@ -41,10 +36,6 @@
   text-align: center;
 }
 
-.tr:nth-child(odd) {
-  background-color: var(--Base-Background-Primary-Elevated, #faf6f2);
-}
-
 .benefitTh {
   border: 1px solid var(--Base-Border-Subtle);
   padding: var(--Spacing-x3) var(--Spacing-x2);

components/Loyalty/Blocks/DynamicContent/OverviewTable/data/EN.json

@@ -264,7 +264,7 @@
           "name": "Friendship boost",
           "description": "Now here’s something pretty sweet: every time you get a boost of friendship points, you get 25% extra – a boost on the boost! So you know, start racking up those points on stays, meals and more and you’ll get a free night in no time. Get the full scoop <a href=''>here</a>.",
           "unlocked": true,
-          "value": "25%"
+          "value": "+25%"
         },
         {
           "name": "Early check-in when available",
@@ -341,7 +341,7 @@
           "name": "Friendship boost",
           "description": "Now here’s something pretty sweet: every time you get a boost of friendship points, you get 25% extra – a boost on the boost! So you know, start racking up those points on stays, meals and more and you’ll get a free night in no time. Get the full scoop <a href=''>here</a>.",
           "unlocked": true,
-          "value": "25%"
+          "value": "+25%"
         },
         {
           "name": "Early check-in when available",
@@ -418,7 +418,7 @@
           "name": "Friendship boost",
           "description": "Oh, you’re in for a treat. Every time you get a boost of friendship points, you get 50% extra – a boost on the boost! So you know, start racking up those points on stays, meals and more and you’ll get a free night in no time. Get the full scoop <a href=''>here</a>.",
           "unlocked": true,
-          "value": "50%"
+          "value": "+50%"
         },
         {
           "name": "Early check-in when available",
@@ -495,7 +495,7 @@
           "name": "Friendship boost",
           "description": "Oh, you’re in for a treat. Every time you get a boost of friendship points, you get 50% extra – a boost on the boost! So you know, start racking up those points on stays, meals and more and you’ll get a free night in no time. Get the full scoop <a href=''>here</a>.",
           "unlocked": true,
-          "value": "50%"
+          "value": "+50%"
         },
         {
           "name": "Early check-in when available",

components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css

@@ -1,5 +1,4 @@
 .container {
-  background-color: var(--Main-Brand-PalePeach);
   margin-top: calc(var(--Spacing-x2) * -1);
   margin-left: calc(var(--Spacing-x2) * -1);
   margin-right: calc(var(--Spacing-x2) * -1);