From e6a7e921bb18486dfbf42c7e404c8b72b0a8b463 Mon Sep 17 00:00:00 2001
From: "Chuma Mcphoy (We Ahead)" <chuma.mcphoy@scandichotels.com>
Date: Wed, 9 Apr 2025 12:38:19 +0000
Subject: [PATCH] Merged in fix/SW-2243-RateCard-Icon-UI (pull request #1770)

fix(SW-2243): update RateCard checkIcon UI

* fix(SW-2243): update RateCard checkIcon UI


Approved-by: Christian Andolf
---
 .../lib/components/RateCard/Campaign/index.tsx  |  2 +-
 .../lib/components/RateCard/Code/index.tsx      |  2 +-
 .../lib/components/RateCard/Regular/index.tsx   |  2 +-
 .../components/RateCard/rate-card.module.css    | 17 ++++++++++-------
 4 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/packages/design-system/lib/components/RateCard/Campaign/index.tsx b/packages/design-system/lib/components/RateCard/Campaign/index.tsx
index 12743e2cd..0ddfb7228 100644
--- a/packages/design-system/lib/components/RateCard/Campaign/index.tsx
+++ b/packages/design-system/lib/components/RateCard/Campaign/index.tsx
@@ -104,7 +104,7 @@ export default function CampaignRateCard({
               </h3>
             </Typography>
             <div className={styles.checkIcon}>
-              <MaterialIcon icon="check" color="CurrentColor" />
+              <MaterialIcon icon="check" size={22} color="Icon/Inverted" />
             </div>
           </header>
           <div className={styles.content}>
diff --git a/packages/design-system/lib/components/RateCard/Code/index.tsx b/packages/design-system/lib/components/RateCard/Code/index.tsx
index db1cc3301..12c77885e 100644
--- a/packages/design-system/lib/components/RateCard/Code/index.tsx
+++ b/packages/design-system/lib/components/RateCard/Code/index.tsx
@@ -100,7 +100,7 @@ export default function CodeRateCard({
               </h3>
             </Typography>
             <div className={styles.checkIcon}>
-              <MaterialIcon icon="check" color="CurrentColor" />
+              <MaterialIcon icon="check" size={22} color="Icon/Inverted" />
             </div>
           </header>
           <div className={styles.content}>
diff --git a/packages/design-system/lib/components/RateCard/Regular/index.tsx b/packages/design-system/lib/components/RateCard/Regular/index.tsx
index 6d853cfa1..cc4020a43 100644
--- a/packages/design-system/lib/components/RateCard/Regular/index.tsx
+++ b/packages/design-system/lib/components/RateCard/Regular/index.tsx
@@ -93,7 +93,7 @@ export default function RegularRateCard({
               </h3>
             </Typography>
             <div className={styles.checkIcon}>
-              <MaterialIcon icon="check" color="CurrentColor" />
+              <MaterialIcon icon="check" size={22} color="Icon/Inverted" />
             </div>
           </header>
           <div>
diff --git a/packages/design-system/lib/components/RateCard/rate-card.module.css b/packages/design-system/lib/components/RateCard/rate-card.module.css
index 497f468cd..ecdd651be 100644
--- a/packages/design-system/lib/components/RateCard/rate-card.module.css
+++ b/packages/design-system/lib/components/RateCard/rate-card.module.css
@@ -11,7 +11,7 @@
 }
 
 .checkIcon {
-  --size: 24px;
+  --size: 32px;
   width: var(--size);
   height: var(--size);
 
@@ -19,10 +19,13 @@
   top: -10px;
   right: -10px;
 
-  background-color: var(--Surface-UI-Fill-Active-Hover);
-  border-radius: 50%;
-  color: var(--Scandic-Blue-70);
-  display: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid var(--Border-Inverted);
+  border-radius: var(--Corner-radius-rounded);
+  background-color: var(--Surface-Feedback-Succes-Accent);
+  color: var(--Icon-Inverted);
 }
 
 .rateCard {
@@ -41,8 +44,8 @@
   border: 1px solid var(--Scandic-Peach-80, 'black');
 }
 
-.radio:checked ~ .rateCard .checkIcon {
-  display: initial;
+label:not(:has(.radio:checked)) .checkIcon {
+  display: none;
 }
 
 .banner {