feat(WEB-162): final design for my profile page

components/TempDesignSystem/Button/button.module.css

@@ -14,8 +14,8 @@
 
 .primary,
 a.primary {
-  color: var(--font-color);
   background-color: var(--background-color);
+  color: var(--font-color);
 }
 
 .primary:hover,
@@ -82,6 +82,7 @@ a.default {
 
 .large {
   font-size: 16px;
+  height: 50px;
   gap: var(--Spacing-x-half);
   padding: var(--Spacing-x2) var(--Spacing-x3);
 }
@@ -108,6 +109,17 @@ a.default {
   --disabled-color: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Disabled);
 }
 
+.primaryStrong {
+  --background-color: var(--Theme-Primary-Strong-Button-Primary-Fill-Normal);
+  --disabled-background-color: var(
+    --Theme-Primary-Strong-Button-Primary-Fill-Disabled
+  );
+  --disabled-color: var(--Theme-Primary-Strong-Button-Primary-On-Fill-Disabled);
+  --font-color: var(--Theme-Primary-Strong-Button-Primary-On-Fill-Normal);
+  --hover-background: var(--Theme-Primary-Strong-Button-Primary-Fill-Hover);
+  --hover-color: var(--Theme-Primary-Strong-Button-Primary-On-Fill-Hover);
+}
+
 .secondaryLight {
   --font-color: var(--Theme-Secondary-Light-Button-Primary-On-Fill-Normal);
   --background-color: var(--Theme-Secondary-Light-Button-Primary-Fill-Normal);

components/TempDesignSystem/Button/variants.ts

@@ -14,8 +14,9 @@ export const buttonVariants = cva(styles.btn, {
       large: styles.large,
     },
     theme: {
-      primaryLight: styles.primaryLight,
       primaryDark: styles.primaryDark,
+      primaryLight: styles.primaryLight,
+      primaryStrong: styles.primaryStrong,
       secondaryLight: styles.secondaryLight,
       secondaryDark: styles.secondaryDark,
       tertiaryLight: styles.tertiaryLight,

components/TempDesignSystem/Card/card.module.css

@@ -60,4 +60,4 @@ p.bodyText {
   display: flex;
   gap: var(--Spacing-x1);
   justify-content: center;
-}
+}

components/TempDesignSystem/CardGrid/cardGrid.module.css

@@ -0,0 +1,55 @@
+.gridContainer {
+  display: grid;
+  gap: var(--Spacing-x2);
+}
+
+.carousel {
+  display: grid;
+  grid-auto-columns: 80dvw;
+  grid-auto-flow: column;
+  gap: var(--Spacing-x2);
+  margin-left: calc(0 - var(--Spacing-x2));
+  margin-right: calc(0 - var(--Spacing-x2));
+  padding-left: var(--Spacing-x2);
+  overflow-x: scroll;
+  scroll-padding-left: var(--Spacing-x2);
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+  /* Hide scrollbar IE and Edge */
+  -ms-overflow-style: none;
+  /* Hide Scrollbar Firefox */
+}
+
+.carousel:last-child {
+  margin-right: var(--Spacing-x2);
+}
+
+.carousel > * {
+  scroll-snap-align: start;
+}
+
+/* Hide Scrollbar Chrome, Safari and Opera */
+.gridContainer::-webkit-scrollbar {
+  display: none;
+}
+
+@media screen and (min-width: 1367px) {
+  .twoColumnGrid,
+  .twoPlusOne {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .threeColumnGrid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .twoPlusOne > *:last-child {
+    grid-column: span 2;
+  }
+
+  .carousel {
+    grid-auto-flow: unset;
+    margin: 0;
+    padding: 0;
+  }
+}

components/TempDesignSystem/Divider/divider.module.css

@@ -16,3 +16,11 @@
 .peach {
   border-bottom-color: var(--Theme-Primary-Light-On-Surface-Divider);
 }
+
+.opacity100 {
+  opacity: 1;
+}
+
+.opacity8 {
+  opacity: 0.08;
+}

components/TempDesignSystem/Divider/index.tsx

@@ -2,7 +2,12 @@ import { dividerVariants } from "./variants"
 
 import type { DividerProps } from "./divider"
 
-export default function Divider({ className, color, variant }: DividerProps) {
-  const classNames = dividerVariants({ className, color, variant })
+export default function Divider({
+  className,
+  color,
+  opacity,
+  variant,
+}: DividerProps) {
+  const classNames = dividerVariants({ className, color, opacity, variant })
   return <div className={classNames} />
 }

components/TempDesignSystem/Divider/variants.ts

@@ -8,6 +8,10 @@ export const dividerVariants = cva(styles.divider, {
       burgundy: styles.burgundy,
       peach: styles.peach,
     },
+    opacity: {
+      100: styles.opacity100,
+      8: styles.opacity8,
+    },
     variant: {
       default: styles.default,
       dotted: styles.dotted,
@@ -15,6 +19,7 @@ export const dividerVariants = cva(styles.divider, {
   },
   defaultVariants: {
     color: "burgundy",
+    opacity: 100,
     variant: "default",
   },
 })

components/TempDesignSystem/Form/Country/country.module.css

@@ -41,11 +41,10 @@
   border: var(--select-border);
   border-radius: var(--Corner-radius-Small);
   overflow: auto;
-  padding: var(--Spacing-x2) var(--Spacing-x2) var(--Spacing-x2)
-    var(--Spacing-x1);
+  padding: var(--Spacing-x2) var(--Spacing-x2) var(--Spacing-x2) var(--Spacing-x1);
   width: var(--select-width);
 }
 
 .listBoxItem {
   padding: 0 var(--Spacing-x1);
-}
+}

components/TempDesignSystem/Form/ErrorMessage/error.module.css

@@ -1,4 +1,4 @@
 .message {
   color: var(--Scandic-Red-60);
   margin: var(--Spacing-x-half) 0 0;
-}
+}

components/TempDesignSystem/Form/Input/input.module.css

@@ -5,4 +5,4 @@
   height: 40px;
   padding: var(--Spacing-x1) var(--Spacing-x2);
   width: min(280px, 100%);
-}
+}

components/TempDesignSystem/Form/Phone/index.tsx

@@ -3,8 +3,12 @@ import "react-international-phone/style.css"
 
 import { useCallback, useEffect, useRef } from "react"
 import { useController, useFormContext, useWatch } from "react-hook-form"
-import { defaultCountries, getCountry } from "react-international-phone"
-import { PhoneInput, type PhoneInputRefType } from "react-international-phone"
+import {
+  defaultCountries,
+  getCountry,
+  PhoneInput,
+  type PhoneInputRefType,
+} from "react-international-phone"
 
 import ErrorMessage from "@/components/TempDesignSystem/Form/ErrorMessage"
 

components/TempDesignSystem/Link/link.module.css

@@ -14,6 +14,12 @@
   line-height: var(--typography-Footnote-Bold-lineHeight);
 }
 
+.icon {
+  align-items: center;
+  display: flex;
+  gap: var(--Spacing-x1);
+}
+
 .myPage {
   font-family: var(--typography-Body-Underlined-fontFamily);
   font-size: var(--typography-Body-Underlined-fontSize);

components/TempDesignSystem/Link/variants.ts

@@ -20,6 +20,7 @@ export const linkVariants = cva(styles.link, {
     variant: {
       breadcrumb: styles.breadcrumb,
       default: styles.default,
+      icon: styles.icon,
       myPage: styles.myPage,
       shortcut: styles.shortcut,
       sidebar: styles.sidebar,

components/TempDesignSystem/Text/BiroScript/biroScript.module.css

@@ -5,22 +5,18 @@
 }
 
 .one {
-  font-size: clamp(
-    var(--typography-Script-1-Mobile-fontSize),
-    1.3vw + 14px,
-    var(--typography-Script-1-Desktop-fontSize)
-  );
+  font-size: clamp(var(--typography-Script-1-Mobile-fontSize),
+      1.3vw + 14px,
+      var(--typography-Script-1-Desktop-fontSize));
   font-weight: var(--typography-Script-1-fontWeight);
   letter-spacing: var(--typography-Script-1-letterSpacing);
   line-height: var(--typography-Script-1-lineHeight);
 }
 
 .two {
-  font-size: clamp(
-    var(--typography-Script-2-Mobile-fontSize),
-    0.6vw + 15px,
-    var(--typography-Script-2-Desktop-fontSize)
-  );
+  font-size: clamp(var(--typography-Script-2-Mobile-fontSize),
+      0.6vw + 15px,
+      var(--typography-Script-2-Desktop-fontSize));
   font-weight: var(--typography-Script-2-fontWeight);
   letter-spacing: var(--typography-Script-2-letterSpacing);
   line-height: var(--typography-Script-2-lineHeight);
@@ -48,4 +44,4 @@
 
 .plosa {
   color: var(--Theme-Primary-Light-On-Surface-Accent);
-}
+}

components/TempDesignSystem/Text/Body/body.module.css

@@ -54,3 +54,7 @@
 .pale {
   color: var(--Scandic-Brand-Pale-Peach);
 }
+
+.red {
+  color: var(--Scandic-Brand-Scandic-Red);
+}

components/TempDesignSystem/Text/Body/body.ts

@@ -4,7 +4,7 @@ import type { VariantProps } from "class-variance-authority"
 
 export interface BodyProps
   extends Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
-    VariantProps<typeof bodyVariants> {
+  VariantProps<typeof bodyVariants> {
   asChild?: boolean
   fontOnly?: boolean
 }

components/TempDesignSystem/Text/Body/index.tsx

@@ -16,15 +16,15 @@ export default function Body({
   const Comp = asChild ? Slot : "p"
   const classNames = fontOnly
     ? bodyFontOnlyVariants({
-        className,
-        textAlign,
-        textTransform,
-      })
+      className,
+      textAlign,
+      textTransform,
+    })
     : bodyVariants({
-        className,
-        color,
-        textAlign,
-        textTransform,
-      })
+      className,
+      color,
+      textAlign,
+      textTransform,
+    })
   return <Comp className={classNames} {...props} />
 }

components/TempDesignSystem/Text/Body/variants.ts

@@ -8,6 +8,7 @@ const config = {
       black: styles.black,
       burgundy: styles.burgundy,
       pale: styles.pale,
+      red: styles.red,
     },
     textAlign: {
       center: styles.textAlignCenter,

components/TempDesignSystem/Text/Caption/caption.ts

@@ -4,7 +4,7 @@ import type { VariantProps } from "class-variance-authority"
 
 export interface CaptionProps
   extends Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
-    VariantProps<typeof captionVariants> {
+  VariantProps<typeof captionVariants> {
   asChild?: boolean
   fontOnly?: boolean
 }

components/TempDesignSystem/Text/Caption/index.tsx

@@ -15,13 +15,13 @@ export default function Caption({
   const Comp = asChild ? Slot : "p"
   const classNames = fontOnly
     ? fontOnlycaptionVariants({
-        className,
-        textTransform,
-      })
+      className,
+      textTransform,
+    })
     : captionVariants({
-        className,
-        color,
-        textTransform,
-      })
+      className,
+      color,
+      textTransform,
+    })
   return <Comp className={classNames} {...props} />
 }

components/TempDesignSystem/Text/Footnote/footnote.module.css

@@ -44,4 +44,4 @@
 
 .pale {
   color: var(--Scandic-Brand-Pale-Peach);
-}
+}

components/TempDesignSystem/Text/Footnote/footnote.ts

@@ -4,7 +4,7 @@ import type { VariantProps } from "class-variance-authority"
 
 export interface FootnoteProps
   extends Omit<React.HTMLAttributes<HTMLParagraphElement>, "color">,
-    VariantProps<typeof footnoteVariants> {
+  VariantProps<typeof footnoteVariants> {
   asChild?: boolean
   fontOnly?: boolean
 }

components/TempDesignSystem/Text/Footnote/index.tsx

@@ -16,15 +16,15 @@ export default function Footnote({
   const Comp = asChild ? Slot : "p"
   const classNames = fontOnly
     ? footnoteFontOnlyVariants({
-        className,
-        textAlign,
-        textTransform,
-      })
+      className,
+      textAlign,
+      textTransform,
+    })
     : footnoteVariants({
-        className,
-        color,
-        textAlign,
-        textTransform,
-      })
+      className,
+      color,
+      textAlign,
+      textTransform,
+    })
   return <Comp className={classNames} {...props} />
 }

components/TempDesignSystem/Text/Title/title.module.css

@@ -84,6 +84,10 @@
   text-align: left;
 }
 
+.black {
+  color: #000;
+}
+
 .burgundy {
   color: var(--Scandic-Brand-Burgundy);
 }
@@ -91,3 +95,7 @@
 .pale {
   color: var(--Scandic-Brand-Pale-Peach);
 }
+
+.red {
+  color: var(--Scandic-Brand-Scandic-Red);
+}

components/TempDesignSystem/Text/Title/variants.ts

@@ -5,8 +5,10 @@ import styles from "./title.module.css"
 const config = {
   variants: {
     color: {
+      black: styles.black,
       burgundy: styles.burgundy,
       pale: styles.pale,
+      red: styles.red,
     },
     textAlign: {
       center: styles.center,