diff --git a/components/Current/Header/LanguageSwitcher/Desktop/desktop.module.css b/components/Current/Header/LanguageSwitcher/Desktop/desktop.module.css
index f4909883c..72d5da3ea 100644
--- a/components/Current/Header/LanguageSwitcher/Desktop/desktop.module.css
+++ b/components/Current/Header/LanguageSwitcher/Desktop/desktop.module.css
@@ -1,3 +1,7 @@
+.desktop {
+ display: none;
+}
+
.container {
position: relative;
@@ -30,6 +34,7 @@
height: 1px;
overflow: hidden;
}
+
.caret {
display: inline-block;
width: 0;
@@ -100,3 +105,9 @@
outline: 0;
text-decoration: none;
}
+
+@media (min-width: 950px) {
+ .desktop {
+ display: block;
+ }
+}
diff --git a/components/Current/Header/LanguageSwitcher/Desktop/index.tsx b/components/Current/Header/LanguageSwitcher/Desktop/index.tsx
index d79f2480b..f85d9571e 100644
--- a/components/Current/Header/LanguageSwitcher/Desktop/index.tsx
+++ b/components/Current/Header/LanguageSwitcher/Desktop/index.tsx
@@ -56,42 +56,44 @@ export default function Desktop({
}
return (
-
-
-
- {urlKeys.map((key) => {
- const url = urls[key as Lang]?.url
- if (url) {
- return (
- -
- {urls[key as Lang]?.isExternal ? (
-
- {languages[key as Lang]}
-
- ) : (
-
- {languages[key as Lang]}
-
- )}
-
- )
- }
- })}
-
-
+
+
+
+
+ {urlKeys.map((key) => {
+ const url = urls[key as Lang]?.url
+ if (url) {
+ return (
+ -
+ {urls[key as Lang]?.isExternal ? (
+
+ {languages[key as Lang]}
+
+ ) : (
+
+ {languages[key as Lang]}
+
+ )}
+
+ )
+ }
+ })}
+
+
)
}
diff --git a/components/Current/Header/LanguageSwitcher/Mobile/index.tsx b/components/Current/Header/LanguageSwitcher/Mobile/index.tsx
index 5a5e9c4de..68ff766c8 100644
--- a/components/Current/Header/LanguageSwitcher/Mobile/index.tsx
+++ b/components/Current/Header/LanguageSwitcher/Mobile/index.tsx
@@ -27,30 +27,34 @@ export default function Mobile({
}
return (
-
-
-
-
+
+
+
+
+
)
}
diff --git a/components/Current/Header/LanguageSwitcher/Mobile/mobile.module.css b/components/Current/Header/LanguageSwitcher/Mobile/mobile.module.css
index 7afa8f549..7175026e3 100644
--- a/components/Current/Header/LanguageSwitcher/Mobile/mobile.module.css
+++ b/components/Current/Header/LanguageSwitcher/Mobile/mobile.module.css
@@ -1,5 +1,9 @@
-.languageSwitcher {
+.mobile {
+ display: block;
font-family: Helvetica, Arial, sans-serif;
+}
+
+.toggle {
font-size: 14px;
padding: 5px 0;
display: block;
@@ -62,3 +66,9 @@
color: #7f7369;
text-decoration: none;
}
+
+@media (min-width: 950px) {
+ .mobile {
+ display: none;
+ }
+}
diff --git a/components/Current/Header/index.tsx b/components/Current/Header/index.tsx
index 457dbad09..03072e6dd 100644
--- a/components/Current/Header/index.tsx
+++ b/components/Current/Header/index.tsx
@@ -16,7 +16,7 @@ export default async function Header({
lang,
languageSwitcher,
}: LangParams & { languageSwitcher: React.ReactNode }) {
- const data = await serverClient().contentstack.config.header()
+ const data = await serverClient().contentstack.base.header()
const session = await auth()
const homeHref = homeHrefs[env.NODE_ENV][lang]
diff --git a/components/Current/LangPopup/index.tsx b/components/Current/LangPopup/index.tsx
index 95546d6fd..66b3d050c 100644
--- a/components/Current/LangPopup/index.tsx
+++ b/components/Current/LangPopup/index.tsx
@@ -67,7 +67,7 @@ export default function LangPopup({ lang }: { lang: Lang }) {
}}
>
Close
-
+
diff --git a/components/Icons/AccountCircle.tsx b/components/Icons/AccountCircle.tsx
new file mode 100644
index 000000000..5dfd606ee
--- /dev/null
+++ b/components/Icons/AccountCircle.tsx
@@ -0,0 +1,27 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function AccountCircleIcon({
+ className,
+ color,
+ ...props
+}: IconProps) {
+ const classNames = iconVariants({ className, color })
+ return (
+
+ )
+}
diff --git a/components/Icons/ArrowRight.tsx b/components/Icons/ArrowRight.tsx
new file mode 100644
index 000000000..907a87d7a
--- /dev/null
+++ b/components/Icons/ArrowRight.tsx
@@ -0,0 +1,36 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function ArrowRight({ className, color, ...props }: IconProps) {
+ const classNames = iconVariants({ className, color })
+ return (
+
+ )
+}
diff --git a/components/Icons/Calendar.tsx b/components/Icons/Calendar.tsx
index beac0fcea..eaa8f42ac 100644
--- a/components/Icons/Calendar.tsx
+++ b/components/Icons/Calendar.tsx
@@ -1,14 +1,40 @@
-import Image from "@/components/Image"
+import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
-export default function CalendarIcon({ height = 20, width = 20 }: IconProps) {
+export default function CalendarIcon({
+ className,
+ color,
+ ...props
+}: IconProps) {
+ const classNames = iconVariants({ className, color })
return (
-
+
)
}
diff --git a/components/Icons/Check.tsx b/components/Icons/Check.tsx
new file mode 100644
index 000000000..254dae82b
--- /dev/null
+++ b/components/Icons/Check.tsx
@@ -0,0 +1,36 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function CheckIcon({ className, color, ...props }: IconProps) {
+ const classNames = iconVariants({ className, color })
+ return (
+
+ )
+}
diff --git a/components/Icons/CheckCircle.tsx b/components/Icons/CheckCircle.tsx
index 432f4ad68..f8278019b 100644
--- a/components/Icons/CheckCircle.tsx
+++ b/components/Icons/CheckCircle.tsx
@@ -1,17 +1,40 @@
-import Image from "@/components/Image"
+import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
export default function CheckCircleIcon({
- height = 20,
- width = 20,
+ className,
+ color,
+ ...props
}: IconProps) {
+ const classNames = iconVariants({ className, color })
return (
-
+
)
}
diff --git a/components/Icons/ChevronDown.tsx b/components/Icons/ChevronDown.tsx
index 525017099..b9ce5544e 100644
--- a/components/Icons/ChevronDown.tsx
+++ b/components/Icons/ChevronDown.tsx
@@ -1,17 +1,40 @@
-import Image from "@/components/Image"
+import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
export default function ChevronDownIcon({
- height = 20,
- width = 20,
+ className,
+ color,
+ ...props
}: IconProps) {
+ const classNames = iconVariants({ className, color })
return (
-
+
)
}
diff --git a/components/Icons/ChevronRight.tsx b/components/Icons/ChevronRight.tsx
new file mode 100644
index 000000000..1b66b90a3
--- /dev/null
+++ b/components/Icons/ChevronRight.tsx
@@ -0,0 +1,43 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function ChevronRightIcon({
+ className,
+ color,
+ ...props
+}: IconProps) {
+ const classNames = iconVariants({ className, color })
+ return (
+
+ )
+}
diff --git a/components/Icons/Email.tsx b/components/Icons/Email.tsx
index abaaa400a..e72efd751 100644
--- a/components/Icons/Email.tsx
+++ b/components/Icons/Email.tsx
@@ -1,14 +1,36 @@
-import Image from "@/components/Image"
+import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
-export default function EmailIcon({ height = 20, width = 20 }: IconProps) {
+export default function EmailIcon({ className, color, ...props }: IconProps) {
+ const classNames = iconVariants({ className, color })
return (
-
+
)
}
diff --git a/components/Icons/House.tsx b/components/Icons/House.tsx
index e71aa2958..1ddcf0f74 100644
--- a/components/Icons/House.tsx
+++ b/components/Icons/House.tsx
@@ -1,14 +1,41 @@
-import Image from "@/components/Image"
+import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
-export default function HouseIcon({ height = 20, width = 20 }: IconProps) {
+export default function HouseIcon({ className, color, ...props }: IconProps) {
+ const classNames = iconVariants({ className, color })
return (
-
+
)
}
diff --git a/components/Icons/Phone.tsx b/components/Icons/Phone.tsx
index 7f1b6fa30..cb00f3d09 100644
--- a/components/Icons/Phone.tsx
+++ b/components/Icons/Phone.tsx
@@ -1,14 +1,36 @@
-import Image from "@/components/Image"
+import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
-export default function PhoneIcon({ height = 20, width = 20 }: IconProps) {
+export default function PhoneIcon({ className, color, ...props }: IconProps) {
+ const classNames = iconVariants({ className, color })
return (
-
+
)
}
diff --git a/components/Icons/icon.module.css b/components/Icons/icon.module.css
new file mode 100644
index 000000000..2f76d1778
--- /dev/null
+++ b/components/Icons/icon.module.css
@@ -0,0 +1,29 @@
+.icon {
+ height: 20px;
+ width: 20px;
+}
+
+.black,
+.black * {
+ fill: #000;
+}
+
+.burgundy,
+.burgundy * {
+ fill: var(--Scandic-Brand-Burgundy);
+}
+
+.pale,
+.pale * {
+ fill: var(--Scandic-Brand-Pale-Peach);
+}
+
+.peach80,
+.peach80 * {
+ fill: var(--Scandic-Peach-80);
+}
+
+.plosa,
+.plosa * {
+ fill: var(--Theme-Primary-Light-On-Surface-Accent);
+}
diff --git a/components/Icons/index.tsx b/components/Icons/index.tsx
index 5104937a2..780d23a5f 100644
--- a/components/Icons/index.tsx
+++ b/components/Icons/index.tsx
@@ -1,5 +1,10 @@
+export { default as AccountCircleIcon } from "./AccountCircle"
+export { default as ArrowRightIcon } from "./ArrowRight"
export { default as CalendarIcon } from "./Calendar"
+export { default as CheckIcon } from "./Check"
+export { default as CheckCircleIcon } from "./CheckCircle"
export { default as ChevronDownIcon } from "./ChevronDown"
+export { default as ChevronRightIcon } from "./ChevronRight"
export { default as EmailIcon } from "./Email"
export { default as HouseIcon } from "./House"
export { default as PhoneIcon } from "./Phone"
diff --git a/components/Icons/variants.ts b/components/Icons/variants.ts
new file mode 100644
index 000000000..173d9bfd8
--- /dev/null
+++ b/components/Icons/variants.ts
@@ -0,0 +1,21 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./icon.module.css"
+
+const config = {
+ variants: {
+ color: {
+ black: styles.black,
+ burgundy: styles.burgundy,
+ pale: styles.pale,
+ peach80: styles.peach80,
+ primaryLightOnSurfaceAccent: styles.plosa,
+ red: styles.red,
+ },
+ },
+ defaultVariants: {
+ color: "black",
+ },
+} as const
+
+export const iconVariants = cva(styles.icon, config)
diff --git a/components/Image/index.tsx b/components/Image.tsx
similarity index 100%
rename from components/Image/index.tsx
rename to components/Image.tsx
diff --git a/components/JsonToHtml/jsontohtml.module.css b/components/JsonToHtml/jsontohtml.module.css
index aacc9f38c..2e564ffac 100644
--- a/components/JsonToHtml/jsontohtml.module.css
+++ b/components/JsonToHtml/jsontohtml.module.css
@@ -1,6 +1,6 @@
.image {
height: auto;
- margin-bottom: 16px;
+ margin-bottom: var(--Spacing-x2);
max-width: 100%;
object-fit: cover;
}
diff --git a/components/Levels/Level/BestFriend.tsx b/components/Levels/Level/BestFriend.tsx
index 23b310340..c0febca29 100644
--- a/components/Levels/Level/BestFriend.tsx
+++ b/components/Levels/Level/BestFriend.tsx
@@ -2,7 +2,7 @@ import { levelVariants } from "../variants"
import type { LevelProps } from "../levels"
-export default function BestFriend({ className, color }: LevelProps) {
+export default function BestFriend({ className, color, ...props }: LevelProps) {
const classNames = levelVariants({
className,
color,
@@ -10,152 +10,155 @@ export default function BestFriend({ className, color }: LevelProps) {
return (
)
}
diff --git a/components/Levels/Level/CloseFriend.tsx b/components/Levels/Level/CloseFriend.tsx
index 22d4c4ff2..0f80c344a 100644
--- a/components/Levels/Level/CloseFriend.tsx
+++ b/components/Levels/Level/CloseFriend.tsx
@@ -2,7 +2,11 @@ import { levelVariants } from "../variants"
import type { LevelProps } from "../levels"
-export default function CloseFriend({ className, color }: LevelProps) {
+export default function CloseFriend({
+ className,
+ color,
+ ...props
+}: LevelProps) {
const classNames = levelVariants({
className,
color,
@@ -10,160 +14,163 @@ export default function CloseFriend({ className, color }: LevelProps) {
return (
)
}
diff --git a/components/Levels/Level/DearFriend.tsx b/components/Levels/Level/DearFriend.tsx
index 237d694ba..96bf1cd58 100644
--- a/components/Levels/Level/DearFriend.tsx
+++ b/components/Levels/Level/DearFriend.tsx
@@ -2,7 +2,7 @@ import { levelVariants } from "../variants"
import type { LevelProps } from "../levels"
-export default function DearFriend({ className, color }: LevelProps) {
+export default function DearFriend({ className, color, ...props }: LevelProps) {
const classNames = levelVariants({
className,
color,
@@ -10,148 +10,151 @@ export default function DearFriend({ className, color }: LevelProps) {
return (
)
}
diff --git a/components/Levels/Level/GoodFriend.tsx b/components/Levels/Level/GoodFriend.tsx
index 9a39c654f..09339d614 100644
--- a/components/Levels/Level/GoodFriend.tsx
+++ b/components/Levels/Level/GoodFriend.tsx
@@ -1,10 +1,8 @@
-import GoodFriendSVG from "@/public/_static/icons/good-friend.svg"
-
import { levelVariants } from "../variants"
import type { LevelProps } from "../levels"
-export default function GoodFriend({ className, color }: LevelProps) {
+export default function GoodFriend({ className, color, ...props }: LevelProps) {
const classNames = levelVariants({
className,
color,
@@ -12,156 +10,159 @@ export default function GoodFriend({ className, color }: LevelProps) {
return (
)
}
diff --git a/components/Levels/Level/LoyalFriend.tsx b/components/Levels/Level/LoyalFriend.tsx
index 72b152dd1..9e79b18a3 100644
--- a/components/Levels/Level/LoyalFriend.tsx
+++ b/components/Levels/Level/LoyalFriend.tsx
@@ -2,7 +2,11 @@ import { levelVariants } from "../variants"
import type { LevelProps } from "../levels"
-export default function LoyalFriend({ className, color }: LevelProps) {
+export default function LoyalFriend({
+ className,
+ color,
+ ...props
+}: LevelProps) {
const classNames = levelVariants({
className,
color,
@@ -10,148 +14,151 @@ export default function LoyalFriend({ className, color }: LevelProps) {
return (
)
}
diff --git a/components/Levels/Level/NewFriend.tsx b/components/Levels/Level/NewFriend.tsx
index 8bddd945a..70b312d51 100644
--- a/components/Levels/Level/NewFriend.tsx
+++ b/components/Levels/Level/NewFriend.tsx
@@ -2,7 +2,7 @@ import { levelVariants } from "../variants"
import type { LevelProps } from "../levels"
-export default function NewFriend({ className, color }: LevelProps) {
+export default function NewFriend({ className, color, ...props }: LevelProps) {
const classNames = levelVariants({
className,
color,
@@ -10,140 +10,143 @@ export default function NewFriend({ className, color }: LevelProps) {
return (
)
}
diff --git a/components/Levels/Level/TrueFriend.tsx b/components/Levels/Level/TrueFriend.tsx
index bf3c69cc5..22515e9b5 100644
--- a/components/Levels/Level/TrueFriend.tsx
+++ b/components/Levels/Level/TrueFriend.tsx
@@ -2,7 +2,7 @@ import { levelVariants } from "../variants"
import type { LevelProps } from "../levels"
-export default function TrueFriend({ className, color }: LevelProps) {
+export default function TrueFriend({ className, color, ...props }: LevelProps) {
const classNames = levelVariants({
className,
color,
@@ -10,144 +10,147 @@ export default function TrueFriend({ className, color }: LevelProps) {
return (
)
}
diff --git a/components/Levels/levels.module.css b/components/Levels/levels.module.css
index 9a2c46111..c1f246a03 100644
--- a/components/Levels/levels.module.css
+++ b/components/Levels/levels.module.css
@@ -13,6 +13,11 @@
fill: var(--Scandic-Brand-Pale-Peach);
}
+.plosa,
+.plosa * {
+ fill: var(--Theme-Primary-Light-On-Surface-Accent);
+}
+
.red,
.red * {
fill: var(--Scandic-Brand-Scandic-Red);
diff --git a/components/Levels/variants.ts b/components/Levels/variants.ts
index 59c1948f3..7cb2901b4 100644
--- a/components/Levels/variants.ts
+++ b/components/Levels/variants.ts
@@ -7,6 +7,7 @@ const config = {
color: {
burgundy: styles.burgundy,
pale: styles.pale,
+ primaryLightOnSurfaceAccent: styles.plosa,
red: styles.red,
},
},
diff --git a/components/Loyalty/Blocks/CardsGrid/cardsGrid.module.css b/components/Loyalty/Blocks/CardsGrid/cardsGrid.module.css
index cf54d5eb3..35fb852f4 100644
--- a/components/Loyalty/Blocks/CardsGrid/cardsGrid.module.css
+++ b/components/Loyalty/Blocks/CardsGrid/cardsGrid.module.css
@@ -1,4 +1,4 @@
.section {
display: grid;
- gap: 2.4rem;
+ gap: var(--Spacing-x2);
}
diff --git a/components/Loyalty/Blocks/CardsGrid/index.tsx b/components/Loyalty/Blocks/CardsGrid/index.tsx
index 4715ebde2..3f2199da2 100644
--- a/components/Loyalty/Blocks/CardsGrid/index.tsx
+++ b/components/Loyalty/Blocks/CardsGrid/index.tsx
@@ -1,6 +1,6 @@
import Header from "@/components/MyPages/Blocks/Header"
import Card from "@/components/TempDesignSystem/Card"
-import CardGrid from "@/components/TempDesignSystem/CardGrid"
+import Grids from "@/components/TempDesignSystem/Grids"
import styles from "./cardsGrid.module.css"
@@ -10,7 +10,7 @@ export default function CardsGrid({ cards_grid }: CardsGridProps) {
return (
-
+
{cards_grid.cards.map((card) => (
))}
-
+
)
}
diff --git a/components/Loyalty/Blocks/DynamicContent/HowItWorks/howItWorks.module.css b/components/Loyalty/Blocks/DynamicContent/HowItWorks/howItWorks.module.css
index 686ee75b7..b9a1afac8 100644
--- a/components/Loyalty/Blocks/DynamicContent/HowItWorks/howItWorks.module.css
+++ b/components/Loyalty/Blocks/DynamicContent/HowItWorks/howItWorks.module.css
@@ -1,11 +1,9 @@
.container {
- display: flex;
- justify-content: center;
align-items: center;
- width: 100%;
- height: 37rem;
- border-radius: 1.6rem;
background-color: var(--UI-Grey-10);
- text-align: center;
- margin-right: 1.6rem;
+ border-radius: var(--Corner-radius-xLarge);
+ display: flex;
+ height: 370px;
+ justify-content: center;
+ width: 100%;
}
diff --git a/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/index.tsx b/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/index.tsx
index 29d57ba94..dde3685b1 100644
--- a/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/index.tsx
+++ b/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/index.tsx
@@ -1,14 +1,23 @@
"use client"
import { useParams } from "next/navigation"
-import { Check } from "react-feather"
import { useIntl } from "react-intl"
import { Lang } from "@/constants/languages"
-import Image from "@/components/Image"
+import { CheckIcon } from "@/components/Icons"
+import {
+ BestFriend,
+ CloseFriend,
+ DearFriend,
+ GoodFriend,
+ LoyalFriend,
+ NewFriend,
+ TrueFriend,
+} from "@/components/Levels"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
+import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"
import levelsData from "./data"
@@ -35,13 +44,11 @@ export default function LoyaltyLevels() {
/>
))}