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>
</Typography>
<div className={styles.checkIcon}>
<MaterialIcon icon="check" color="CurrentColor" />
<MaterialIcon icon="check" size={22} color="Icon/Inverted" />
</div>
</header>
<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>
</Typography>
<div className={styles.checkIcon}>
<MaterialIcon icon="check" color="CurrentColor" />
<MaterialIcon icon="check" size={22} color="Icon/Inverted" />
</div>
</header>
<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>
</Typography>
<div className={styles.checkIcon}>
<MaterialIcon icon="check" color="CurrentColor" />
<MaterialIcon icon="check" size={22} color="Icon/Inverted" />
</div>
</header>
<div>

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

@@ -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 {