scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in fix/SW-2243-RateCard-Icon-UI (pull request #1770)

Browse Source 
fix(SW-2243): update RateCard checkIcon UI

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


Approved-by: Christian Andolf
This commit is contained in:
Chuma Mcphoy (We Ahead)
2025-04-09 12:38:19 +00:00
parent 32ac7c8a3d
commit e6a7e921bb
4 changed files with 13 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/design-system/lib/components/RateCard/Campaign/index.tsx
View File

@@ -104,7 +104,7 @@ export default function CampaignRateCard({
</h3> </h3>
</Typography> </Typography>
<div className={styles.checkIcon}> <div className={styles.checkIcon}>
<MaterialIcon icon="check" color="CurrentColor" /> <MaterialIcon icon="check" size={22} color="Icon/Inverted" />
</div> </div>
</header> </header>
<div className={styles.content}> <div className={styles.content}>

2
packages/design-system/lib/components/RateCard/Code/index.tsx
View File

@@ -100,7 +100,7 @@ export default function CodeRateCard({
</h3> </h3>
</Typography> </Typography>
<div className={styles.checkIcon}> <div className={styles.checkIcon}>
<MaterialIcon icon="check" color="CurrentColor" /> <MaterialIcon icon="check" size={22} color="Icon/Inverted" />
</div> </div>
</header> </header>
<div className={styles.content}> <div className={styles.content}>

2
packages/design-system/lib/components/RateCard/Regular/index.tsx
View File

@@ -93,7 +93,7 @@ export default function RegularRateCard({
</h3> </h3>
</Typography> </Typography>
<div className={styles.checkIcon}> <div className={styles.checkIcon}>
<MaterialIcon icon="check" color="CurrentColor" /> <MaterialIcon icon="check" size={22} color="Icon/Inverted" />
</div> </div>
</header> </header>
<div> <div>

17
packages/design-system/lib/components/RateCard/rate-card.module.css
View File

@@ -11,7 +11,7 @@
} }
.checkIcon { .checkIcon {
--size: 24px; --size: 32px;
width: var(--size); width: var(--size);
height: var(--size); height: var(--size);
@@ -19,10 +19,13 @@
top: -10px; top: -10px;
right: -10px; right: -10px;
background-color: var(--Surface-UI-Fill-Active-Hover); display: flex;
border-radius: 50%; align-items: center;
color: var(--Scandic-Blue-70); justify-content: center;
display: none; border: 2px solid var(--Border-Inverted);
border-radius: var(--Corner-radius-rounded);
background-color: var(--Surface-Feedback-Succes-Accent);
color: var(--Icon-Inverted);
} }
.rateCard { .rateCard {
@@ -41,8 +44,8 @@
border: 1px solid var(--Scandic-Peach-80, 'black'); border: 1px solid var(--Scandic-Peach-80, 'black');
} }
.radio:checked ~ .rateCard .checkIcon { label:not(:has(.radio:checked)) .checkIcon {
display: initial; display: none;
} }
.banner { .banner {