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,
.green * { .green * {
fill: var(--UI-Green-60); fill: var(--Scandic-Green-50);
} }
.pale, .pale,

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

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

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

@@ -2,18 +2,18 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: var(--Spacing-x-one-and-half); gap: var(--Spacing-x-half);
padding: 0 1rem 0 1rem;
text-wrap: balance;
} }
.benefitValue { .benefitValue {
background-color: var(--Main-Brand-Burgundy); font-size: var(--typography-Body-Bold-fontSize);
border-radius: var(--Corner-radius-xLarge); font-weight: var(--typography-Body-Bold-fontWeight);
color: var(--Base-Surface-Primary-Hover-alt, #fff);
font-size: var(--typography-Footnote-Regular-fontSize);
padding: var(--Spacing-x-half) var(--Spacing-x1);
} }
.benefitValueDetails { .benefitValueDetails {
font-size: var(--typography-Caption-Regular-fontSize); font-size: var(--typography-Footnote-Regular-fontSize);
text-align: center; 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) { export default function BenefitValue({ benefit }: BenefitValueProps) {
if (!benefit.unlocked) { if (!benefit.unlocked) {
return <Minus /> return <Minus color="var(--UI-Grey-40)" />
} }
if (!benefit.value) { if (!benefit.value) {
return <CheckCircle height={32} width={32} color="green" /> 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 { .table {
border: 1px solid var(--Base-Border-Subtle); border: none;
border-collapse: collapse; border-collapse: collapse;
color: var(--Theme-Primary-Dark-Surface-Normal); background-color: var(--Scandic-Opacity-White-100);
border-radius: var(--Corner-radius-Medium);
} }
.iconRow { .iconRow {
@@ -16,14 +17,10 @@
} }
.iconTh { .iconTh {
border: 1px solid var(--Base-Border-Subtle); padding: var(--Spacing-x3) var(--Spacing-x2) var(--Spacing-x2);
border-bottom: none;
padding: var(--Spacing-x3) var(--Spacing-x2) var(--Spacing-x-one-and-half);
} }
.summaryTh { .summaryTh {
border: 1px solid var(--Base-Border-Subtle);
border-top: none;
font-size: var(--typography-Caption-Regular-fontSize); font-size: var(--typography-Caption-Regular-fontSize);
font-weight: 400; font-weight: 400;
padding: 0 var(--Spacing-x3) var(--Spacing-x2); padding: 0 var(--Spacing-x3) var(--Spacing-x2);
@@ -31,13 +28,16 @@
} }
.td { .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); font-size: var(--typography-Footnote-Regular-fontSize);
text-align: center; text-align: center;
} }
.benefitTh { .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); padding: var(--Spacing-x3) var(--Spacing-x2);
font-size: var(--typography-Caption-Regular-fontSize); font-size: var(--typography-Caption-Regular-fontSize);
font-weight: 400; font-weight: 400;

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

@@ -2,13 +2,13 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: var(--Spacing-x2); gap: var(--Spacing-x3);
} }
.levelRequirements { .levelRequirements {
background-color: var(--Main-Brand-Burgundy);
border-radius: var(--Corner-radius-Medium); 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); padding: var(--Spacing-x-half) var(--Spacing-x1);
} }

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

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