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

chore: update styling for loyalty table

Browse Source
This commit is contained in:
Matilda Landström
2024-06-19 10:34:05 +02:00
committed by Michael Zetterberg
parent 81c7a60eff
commit 401b019f41
7 changed files with 24 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/Icons/icon.module.css
View File

@@ -19,7 +19,7 @@
.green,
.green * {
fill: var(--UI-Green-60);
fill: var(--Scandic-Green-50);
}
.pale,

1
components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitList/benefitList.module.css
View File

@@ -17,7 +17,6 @@
}
.secondColumn {
background-color: var(--Base-Background-Normal);
position: absolute;
position: absolute;
top: 0;

14
components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitValue/benefitValue.module.css
View File

@@ -2,18 +2,18 @@
display: flex;
flex-direction: column;
align-items: center;
gap: var(--Spacing-x-one-and-half);
gap: var(--Spacing-x-half);
padding: 0 1rem 0 1rem;
text-wrap: balance;
}
.benefitValue {
background-color: var(--Main-Brand-Burgundy);
border-radius: var(--Corner-radius-xLarge);
color: var(--Base-Surface-Primary-Hover-alt, #fff);
font-size: var(--typography-Footnote-Regular-fontSize);
padding: var(--Spacing-x-half) var(--Spacing-x1);
font-size: var(--typography-Body-Bold-fontSize);
font-weight: var(--typography-Body-Bold-fontWeight);
}
.benefitValueDetails {
font-size: var(--typography-Caption-Regular-fontSize);
font-size: var(--typography-Footnote-Regular-fontSize);
text-align: center;
color: var(--UI-Grey-80);
}

2
components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitValue/index.tsx
View File

@@ -8,7 +8,7 @@ import { BenefitValueProps } from "@/types/components/loyalty/blocks"
export default function BenefitValue({ benefit }: BenefitValueProps) {
if (!benefit.unlocked) {
return <Minus />
return <Minus color="var(--UI-Grey-40)" />
}
if (!benefit.value) {
return <CheckCircle height={32} width={32} color="green" />

18
components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css
View File

@@ -1,7 +1,8 @@
.table {
border: 1px solid var(--Base-Border-Subtle);
border: none;
border-collapse: collapse;
color: var(--Theme-Primary-Dark-Surface-Normal);
background-color: var(--Scandic-Opacity-White-100);
border-radius: var(--Corner-radius-Medium);
}
.iconRow {
@@ -16,14 +17,10 @@
}
.iconTh {
border: 1px solid var(--Base-Border-Subtle);
border-bottom: none;
padding: var(--Spacing-x3) var(--Spacing-x2) var(--Spacing-x-one-and-half);
padding: var(--Spacing-x3) var(--Spacing-x2) var(--Spacing-x2);
}
.summaryTh {
border: 1px solid var(--Base-Border-Subtle);
border-top: none;
font-size: var(--typography-Caption-Regular-fontSize);
font-weight: 400;
padding: 0 var(--Spacing-x3) var(--Spacing-x2);
@@ -31,13 +28,16 @@
}
.td {
border: 1px solid var(--Base-Border-Subtle);
border: 1px solid var(--Scandic-Brand-Pale-Peach);
border-left: none;
border-right: none;
font-size: var(--typography-Footnote-Regular-fontSize);
text-align: center;
}
.benefitTh {
border: 1px solid var(--Base-Border-Subtle);
border: 1px solid var(--Scandic-Brand-Pale-Peach);
border-right: none;
padding: var(--Spacing-x3) var(--Spacing-x2);
font-size: var(--typography-Caption-Regular-fontSize);
font-weight: 400;

8
components/Loyalty/Blocks/DynamicContent/OverviewTable/LevelSummary/levelSummary.module.css
View File

@@ -2,13 +2,13 @@
display: flex;
flex-direction: column;
align-items: center;
gap: var(--Spacing-x2);
gap: var(--Spacing-x3);
}
.levelRequirements {
background-color: var(--Main-Brand-Burgundy);
border-radius: var(--Corner-radius-Medium);
color: var(--Scandic-Brand-Pale-Peach);
background-color: var(--Scandic-Brand-Pale-Peach);
color: var(--Scandic-Peach-80);
padding: var(--Spacing-x-half) var(--Spacing-x1);
}
@@ -27,4 +27,4 @@
.levelSummaryText {
font-size: var(--typography-Caption-Regular-fontSize);
}
}
}

2
components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css
View File

@@ -31,6 +31,7 @@
.columns {
display: none;
position: relative;
background-color: var(--Scandic-Opacity-White-100);
}
.mobileColumns {
@@ -39,6 +40,7 @@
margin: 0 calc(var(--Spacing-x2) * -1);
padding-top: var(--Spacing-x2);
position: relative;
background-color: var(--Scandic-Opacity-White-100);
}
.columnHeaderContainer {