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

feat: update loyalty overview table ui

Browse Source
This commit is contained in:
Matilda Landström
2024-06-28 10:13:32 +02:00
parent 1c76725b4c
commit 1186511038
35 changed files with 433 additions and 396 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
components/Loyalty/Blocks/DynamicContent/OverviewTable/LevelSummary/index.tsx
View File

@@ -1,14 +1,17 @@
import Image from "@/components/Image"
import styles from "./levelSummary.module.css"
import { LevelSummaryProps } from "@/types/components/loyalty/blocks"
export default function LevelSummary({ level }: LevelSummaryProps) {
export default function LevelSummary({
level,
showDescription = true,
}: LevelSummaryProps) {
return (
<div className={styles.levelSummary}>
<span className={styles.levelRequirements}>{level.requirement}</span>
<p className={styles.levelSummaryText}>{level.description}</p>
{showDescription && (
<p className={styles.levelSummaryText}>{level.description}</p>
)}
</div>
)
}

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

@@ -3,22 +3,27 @@
flex-direction: column;
align-items: center;
gap: var(--Spacing-x3);
padding-bottom: var(--Spacing-x1);
}
.levelRequirements {
border-radius: var(--Corner-radius-Medium);
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-x5);
}
.levelSummaryText {
color: var(--Main-Brand-Burgundy);
font-size: var(--typography-Caption-Regular-fontSize);
line-height: var(--typography-Body-Regular-lineHeight);
margin: 0;
}
@media screen and (min-width: 950px) {
.levelRequirements {
padding: var(--Spacing-x-half) var(--Spacing-x1);
}
}
@media screen and (min-width: 1367px) {
.levelRequirements {
font-size: var(--typography-Footnote-Regular-fontSize);