Merged in feat/mvp-overview-wireframe (pull request #88)

feat(WEB-167): update my pages layout to MVP wireframes

Approved-by: Michael Zetterberg

app/[lang]/(live)/(protected)/my-pages/_constants.ts

@@ -28,32 +28,40 @@ export const challenges = {
 export const shortcuts = [
   {
     href: "#",
-    title: "Scandic Friends shop",
+    title: "My Benefit",
   },
   {
     href: "#",
-    title: "Fire and safety",
-  },
-  {
-    href: "#",
-    title: "Our sustainability work",
-  },
-  {
-    href: "#",
-    title: "How you earn points",
-  },
-  {
-    href: "#",
-    title: "How you use points",
-  },
-  {
-    href: "#",
-    title: "Missing points",
-  },
-  {
-    href: "#",
-    title: "Our term and conditions",
+    title: "Program overview",
   },
+  // {
+  //   href: "#",
+  //   title: "Scandic Friends shop",
+  // },
+  // {
+  //   href: "#",
+  //   title: "Fire and safety",
+  // },
+  // {
+  //   href: "#",
+  //   title: "Our sustainability work",
+  // },
+  // {
+  //   href: "#",
+  //   title: "How you earn points",
+  // },
+  // {
+  //   href: "#",
+  //   title: "How you use points",
+  // },
+  // {
+  //   href: "#",
+  //   title: "Missing points",
+  // },
+  // {
+  //   href: "#",
+  //   title: "Our term and conditions",
+  // },
 ]
 
 export const stays = [

app/[lang]/(live)/(protected)/my-pages/layout.module.css

@@ -10,7 +10,7 @@
 .content {
   display: grid;
   padding: 0 0 17.5rem;
-  padding-bottom: 2.4rem;
+  padding-bottom: 7.7rem;
   padding-left: 0;
   padding-right: 0;
   padding-top: 0;
@@ -18,7 +18,7 @@
 
 @media screen and (min-width: 950px) {
   .page {
-    gap: 4.4rem;
+    gap: 5.8rem;
   }
 
   .content {

app/[lang]/(live)/(protected)/my-pages/layout.tsx

@@ -1,6 +1,5 @@
 import { firaMono, firaSans } from "@/app/[lang]/(live)/fonts"
 
-import Breadcrumbs from "@/components/MyPages/Header/Breadcrumbs"
 import Header from "@/components/MyPages/Header"
 import Sidebar from "@/components/MyPages/Sidebar"
 
@@ -13,14 +12,12 @@ export default function MyPagesLayout({
   params,
 }: React.PropsWithChildren<LayoutArgs<LangParams>>) {
   return (
-    <section
-      className={`${firaMono.variable} ${firaSans.variable} ${styles.page}`}
-    >
+    <div className={`${firaMono.variable} ${firaSans.variable} ${styles.page}`}>
       <Header lang={params.lang} />
-      <section className={styles.content}>
+      <div className={styles.content}>
         <Sidebar />
-        <main>{children}</main>
-      </section>
-    </section>
+        {children}
+      </div>
+    </div>
   )
 }

app/[lang]/(live)/(protected)/my-pages/page.module.css

@@ -1,6 +1,7 @@
 .blocks {
   display: grid;
   gap: 4.2rem;
+  max-width: var(--max-width);
   padding-left: 2rem;
   padding-right: 2rem;
 }

app/[lang]/(live)/(protected)/my-pages/page.tsx

@@ -2,7 +2,6 @@ import { serverClient } from "@/lib/trpc/server"
 
 import { challenges, shortcuts, stays } from "./_constants"
 
-import Challenges from "@/components/MyPages/Blocks/Challenges"
 import Overview from "@/components/MyPages/Blocks/Overview"
 import Shortcuts from "@/components/MyPages/Blocks/Shortcuts"
 import UpcomingStays from "@/components/MyPages/Blocks/UpcomingStays"
@@ -25,12 +24,10 @@ export default async function MyPage({ params }: PageArgs<LangParams>) {
     victories: challenges.victories,
   }
   return (
-    <section className={styles.blocks}>
+    <main className={styles.blocks}>
       <Overview user={user} />
       <UpcomingStays lang={params.lang} stays={user.stays} />
-      {/* Deals You Can't Miss - TBD */}
-      <Challenges journeys={user.journeys} victories={user.victories} />
       <Shortcuts shortcuts={user.shortcuts} />
-    </section>
+    </main>
   )
 }

components/MyPages/Blocks/Challenges/challenges.module.css

@@ -9,7 +9,6 @@
     "header"
     "section"
     "aside";
-  max-width: var(--max-width);
 }
 
 .header {

components/MyPages/Blocks/Overview/Friend/friend.module.css

@@ -0,0 +1,68 @@
+.friend {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.level {
+  color: var(--some-black-color, #000);
+  /* font-family: var(--ff-biro-script-plus); */
+  font-size: 2.1rem;
+  font-weight: 400;
+  letter-spacing: 4%;
+  line-height: 3.6rem;
+  margin: 0;
+}
+
+.name {
+  color: var(--some-black-color, #111);
+  /* font-family: var(--ff-brandon-text); */
+  font-size: 2.8rem;
+  font-weight: 900;
+  letter-spacing: -3%;
+  line-height: 2.8rem;
+  margin: 0;
+  text-transform: uppercase;
+}
+
+.membershipContainer {
+  align-items: center;
+  display: flex;
+  gap: 0.8rem;
+}
+
+.membershipId {
+  color: var(--some-black-color, #1e1e1e);
+  font-family: var(--ff-fira-mono);
+  font-size: 1.5rem;
+  font-weight: 500;
+  letter-spacing: 6%;
+  line-height: 1.8rem;
+  margin: 0;
+}
+
+@media screen and (max-width: 950px) {
+  .friend {
+    gap: 1.2rem;
+  }
+
+  .level {
+    transform: translate(-60%, 40%) rotate(-20deg);
+  }
+}
+
+@media screen and (min-width: 950px) {
+  .friend {
+    justify-self: flex-end;
+  }
+
+  .image {
+    margin-bottom: 2.6rem;
+    margin-top: 1.1rem;
+  }
+
+  .name {
+    margin-bottom: 1.2rem;
+  }
+}

components/MyPages/Blocks/Overview/Friend/index.tsx

@@ -0,0 +1,24 @@
+import Image from "@/components/Image"
+
+import styles from "./friend.module.css"
+
+import type { FriendProps } from "@/types/components/myPages/friend"
+
+export default function Friend({ user }: FriendProps) {
+  return (
+    <section className={styles.friend}>
+      <p className={styles.level}>Current level:</p>
+      <Image
+        alt="Good Friend"
+        className={styles.image}
+        height={70}
+        src="/good-friend.svg"
+        width={228}
+      />
+      <h3 className={styles.name}>{user.name}</h3>
+      <div className={styles.membershipContainer}>
+        <p className={styles.membershipId}>{user.membershipId}</p>
+      </div>
+    </section>
+  )
+}

components/MyPages/Blocks/Overview/Mobile/index.tsx

@@ -1,13 +0,0 @@
-import Breadcrumbs from "@/components/MyPages/Header/Breadcrumbs"
-import Title from "@/components/MyPages/Title"
-
-import styles from "./mobile.module.css"
-
-export default function OverviewMobile() {
-  return (
-    <section className={styles.overviewMobile}>
-      <Breadcrumbs />
-      <Title uppercase>Good Morning [NAME]</Title>
-    </section>
-  )
-}

components/MyPages/Blocks/Overview/Mobile/mobile.module.css

@@ -1,16 +0,0 @@
-.overviewMobile {
-  background-color: var(--some-grey-color, #f2f2f2);
-  left: 50%;
-  margin-left: -50vw;
-  margin-right: -50vw;
-  padding: 3.5rem 2rem 2rem;
-  position: relative;
-  right: 50%;
-  width: 100dvw;
-}
-
-@media screen and (min-width: 950px) {
-  .overviewMobile {
-    display: none;
-  }
-}

components/MyPages/Blocks/Overview/Stats/Progress/index.tsx

@@ -0,0 +1,20 @@
+import Divider from "@/components/TempDesignSystem/Divider"
+import Title from "../Title"
+
+import styles from "./progress.module.css"
+
+export default function Progress() {
+  return (
+    <section className={styles.progress}>
+      <header className={styles.header}>
+        <Title>14 680 points until next level</Title>
+        <Title>Progress</Title>
+      </header>
+      <Divider className={styles.divider} variant="dotted" />
+      <div className={styles.container}>
+        <p className={styles.nextLevel}>14 680 points until next level</p>
+        <p className={styles.target}>Close friend</p>
+      </div>
+    </section>
+  )
+}

components/MyPages/Blocks/Overview/Stats/Progress/progress.module.css

@@ -0,0 +1,62 @@
+.header :first-child {
+  display: none;
+}
+
+.divider {
+  display: none;
+}
+
+.container {
+  align-items: baseline;
+  display: flex;
+  gap: 0.7rem;
+}
+
+.nextLevel {
+  color: var(--some-black-color, #000);
+  /* font-family: var(--ff-brandon-text); */
+  font-size: 1.2rem;
+  font-weight: 400;
+  letter-spacing: 0.6%;
+  margin: 0;
+}
+
+.target {
+  color: var(--some-black-color, #000);
+  /* font-family: var(--ff-biro-script-plus); */
+  font-size: 1.8rem;
+  font-weight: 400;
+  letter-spacing: 4%;
+  margin: 0;
+}
+
+@media screen and (max-width: 950px) {
+  .progress {
+    display: grid;
+    gap: 0.2rem;
+  }
+}
+
+@media screen and (min-width: 950px) {
+  .header :first-child {
+    display: block;
+  }
+
+  .header :nth-child(2n) {
+    display: none;
+  }
+
+  .divider {
+    display: block;
+    margin: 0.3rem 0 1.2rem;
+  }
+
+  .nextLevel {
+    display: none;
+  }
+
+  .target {
+    font-size: 1.8rem;
+    line-height: 3rem;
+  }
+}

components/MyPages/Blocks/Overview/Stats/QualifyingPoints/index.tsx

@@ -0,0 +1,37 @@
+import Divider from "@/components/TempDesignSystem/Divider"
+import Image from "@/components/Image"
+
+import styles from "./points.module.css"
+
+import type { QualifyingPointsProps } from "@/types/components/myPages/qualifyingPoints"
+
+export default function QualifyingPoints({ user }: QualifyingPointsProps) {
+  return (
+    <div className={styles.qualifyingPoints}>
+      <h4 className={styles.title}>Progress</h4>
+      <Divider variant="dotted" />
+      <div className={styles.container}>
+        <div className={styles.points}>
+          <Image
+            alt="Arrow Up Icon"
+            height={24}
+            src="/arrow_upward.svg"
+            width={24}
+          />
+          <p className={styles.point}>{user.qualifyingPoints}</p>
+          <h5 className={styles.pointTitle}>Qualifying points</h5>
+        </div>
+        <div className={styles.points}>
+          <Image
+            alt="Arrow Up Icon"
+            height={24}
+            src="/arrow_upward.svg"
+            width={24}
+          />
+          <p className={styles.point}>{user.nights}</p>
+          <h5 className={styles.pointTitle}>Nights</h5>
+        </div>
+      </div>
+    </div>
+  )
+}

components/MyPages/Blocks/Overview/Stats/QualifyingPoints/points.module.css

@@ -0,0 +1,56 @@
+.qualifyingPoints {
+  display: none;
+}
+
+.title {
+  color: var(--some-grey-color, #000);
+  /* font-family: var(--ff-brandon-text); */
+  font-size: 1.5rem;
+  font-weight: 500;
+  letter-spacing: 0.6%;
+  line-height: 1.7rem;
+  margin: 0 0 0.7rem;
+}
+
+@media screen and (min-width: 950px) {
+  .qualifyingPoints {
+    display: block;
+  }
+
+  .container {
+    display: grid;
+    gap: 3.8rem;
+    grid-template-columns: auto 1fr;
+    margin-top: 1.5rem;
+  }
+
+  .title {
+    color: var(--some-grey-color, #4f4f4f);
+    font-size: 1.2rem;
+  }
+
+  .points {
+    align-items: center;
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: auto 1fr;
+  }
+
+  .point {
+    /* font-family: var(--ff-brandon-text); */
+    font-size: 2.7rem;
+    font-weight: 900;
+    line-height: 2.7rem;
+    margin: 0;
+  }
+
+  .pointTitle {
+    font-family: var(--ff-fira-sans);
+    font-size: 1.2rem;
+    font-weight: 400;
+    letter-spacing: 0.6%;
+    line-height: 1.4rem;
+    grid-column: 1/-1;
+    margin: 0;
+  }
+}

components/MyPages/Blocks/Overview/Stats/Title/index.tsx

@@ -0,0 +1,5 @@
+import styles from "./title.module.css"
+
+export default function Title({ children }: React.PropsWithChildren) {
+  return <h4 className={styles.title}>{children}</h4>
+}

components/MyPages/Blocks/Overview/Stats/Title/title.module.css

@@ -0,0 +1,16 @@
+.title {
+  color: var(--some-grey-color, #000);
+  /* font-family: var(--ff-brandon-text); */
+  font-size: 1.5rem;
+  font-weight: 500;
+  letter-spacing: 0.6%;
+  line-height: 1.7rem;
+  margin: 0;
+}
+
+@media screen and (min-width: 950px) {
+  .title {
+    color: var(--some-grey-color, #4f4f4f);
+    font-size: 1.2rem;
+  }
+}

components/MyPages/Blocks/Overview/Stats/TotalPoints/index.tsx

@@ -0,0 +1,16 @@
+import Divider from "@/components/TempDesignSystem/Divider"
+import Title from "../Title"
+
+import styles from "./totalPoints.module.css"
+
+import type { TotalPointsProps } from "@/types/components/myPages/totalPoints"
+
+export default function TotalPoints({ user }: TotalPointsProps) {
+  return (
+    <div>
+      <Title>Total Points</Title>
+      <Divider className={styles.divider} variant="dotted" />
+      <p className={styles.points}>{user.points}</p>
+    </div>
+  )
+}

components/MyPages/Blocks/Overview/Stats/TotalPoints/totalPoints.module.css

@@ -0,0 +1,20 @@
+.divider {
+  margin-bottom: 1rem;
+  margin-top: 0.3rem;
+}
+
+.points {
+  color: var(--some-black-color, #111);
+  /* font-family: var(--ff-brandon-text); */
+  font-size: 3.7rem;
+  font-weight: 900;
+  letter-spacing: -3%;
+  line-height: 3.7rem;
+  margin: 0;
+}
+
+@media screen and (min-width: 950px) {
+  .divider {
+    margin-bottom: 1.2rem;
+  }
+}

components/MyPages/Blocks/Overview/Stats/index.tsx

@@ -0,0 +1,15 @@
+import Progress from "./Progress"
+import TotalPoints from "./TotalPoints"
+
+import styles from "./stats.module.css"
+
+import type { StatsProps } from "@/types/components/myPages/stats"
+
+export default function Stats({ user }: StatsProps) {
+  return (
+    <section className={styles.stats}>
+      <TotalPoints user={user} />
+      <Progress />
+    </section>
+  )
+}

components/MyPages/Blocks/Overview/Stats/stats.module.css

@@ -0,0 +1,13 @@
+.stats {
+  display: flex;
+  flex-direction: column;
+  gap: 0.7rem;
+}
+
+@media screen and (min-width: 950px) {
+  .stats {
+    gap: 1.4rem;
+    justify-content: center;
+    max-width: 32rem;
+  }
+}

components/MyPages/Blocks/Overview/index.tsx

@@ -1,83 +1,20 @@
-import CopyButton from "./CopyButton"
-import Divider from "@/components/TempDesignSystem/Divider"
-import Image from "@/components/Image"
-import MembershipCardButton from "./MembershipCardButton"
-import ProgressBar from "@/components/TempDesignSystem/ProgressBar"
+import Friend from "./Friend"
+import Stats from "./Stats"
 import Title from "@/components/MyPages/Title"
 
 import styles from "./overview.module.css"
 
 import type { OverviewProps } from "@/types/components/myPages/overview"
-import Link from "next/link"
 
 export default function Overview({ user }: OverviewProps) {
   return (
     <section className={styles.container}>
-      <header className={styles.header}>
-        <Title uppercase>Good morning {user.name}</Title>
+      <header>
+        <Title uppercase>Good morning</Title>
       </header>
       <section className={styles.overview}>
-        <section className={styles.friend}>
-          <p className={styles.level}>Current level:</p>
-          <Image
-            alt="Good Friend"
-            height={70}
-            src="/good-friend.svg"
-            width={228}
-          />
-          <h3 className={styles.name}>{user.name}</h3>
-          <div className={styles.membershipContainer}>
-            <p className={styles.membershipId}>{user.membershipId}</p>
-            <CopyButton membershipId={user.membershipId} />
-          </div>
-          <MembershipCardButton />
-        </section>
-        <section className={styles.stats}>
-          <div>
-            <h4 className={styles.pointsTitle}>Total Points</h4>
-            <Divider variant="dotted" />
-            <p className={styles.points}>{user.points}</p>
-          </div>
-          <div className={styles.qualifyingPoints}>
-            <h4 className={styles.pointsTitle}>Progress</h4>
-            <Divider variant="dotted" />
-            <div className={styles.pointsContainer}>
-              <div className={styles.pointsProgress}>
-                <Image
-                  alt="Arrow Up Icon"
-                  height={24}
-                  src="/arrow_upward.svg"
-                  width={24}
-                />
-                <p className={styles.point}>{user.qualifyingPoints}</p>
-                <h5 className={styles.pointsProgressTitle}>
-                  Qualifying points
-                </h5>
-              </div>
-              <div className={styles.pointsProgress}>
-                <Image
-                  alt="Arrow Up Icon"
-                  height={24}
-                  src="/arrow_upward.svg"
-                  width={24}
-                />
-                <p className={styles.point}>{user.nights}</p>
-                <h5 className={styles.pointsProgressTitle}>Nights</h5>
-              </div>
-            </div>
-          </div>
-          <div className={styles.progress}>
-            <ProgressBar className={styles.progressbar} progress={70} />
-            <h4 className={styles.progressTitle}>Progress</h4>
-            <p className={styles.pointsRemaining}>
-              14 680 points until next level
-            </p>
-            <p className={styles.target}>Close friend</p>
-          </div>
-        </section>
-        <Link className={styles.link} href="#">
-          Go to my points
-        </Link>
+        <Friend user={user} />
+        <Stats user={user} />
       </section>
     </section>
   )

components/MyPages/Blocks/Overview/overview.module.css

@@ -1,121 +1,12 @@
 .container {
   background-color: var(--some-grey-color, #f2f2f2);
+  display: grid;
+  gap: 0.8rem;
 }
 
 .overview {
   display: grid;
-}
-
-.friend {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-}
-
-.level {
-  color: var(--some-black-color, #000);
-  /* font-family: var(--ff-biro-script-plus); */
-  font-size: 2.1rem;
-  font-weight: 400;
-  letter-spacing: 4%;
-  line-height: 3.6rem;
-  margin-bottom: 0;
-  margin-top: 0;
-}
-
-.name {
-  color: var(--some-black-color, #111);
-  /* font-family: var(--ff-brandon-text); */
-  font-size: 2.8rem;
-  font-weight: 900;
-  letter-spacing: -3%;
-  line-height: 2.8rem;
-  margin: 1.6rem 0 1.8rem;
-  text-transform: uppercase;
-}
-
-.membershipContainer {
-  align-items: center;
-  display: flex;
-  gap: 0.8rem;
-  margin-bottom: 2.2rem;
-}
-
-.membershipId {
-  color: var(--some-black-color, #1e1e1e);
-  font-family: var(--ff-fira-mono);
-  font-size: 1.5rem;
-  font-weight: 500;
-  letter-spacing: 6%;
-  line-height: 1.8rem;
-  margin: 0;
-}
-
-.qualifyingPoints {
-  display: none;
-}
-
-.pointsTitle {
-  color: var(--some-grey-color, #000);
-  /* font-family: var(--ff-brandon-text); */
-  font-size: 1.5rem;
-  font-weight: 500;
-  letter-spacing: 0.6%;
-  line-height: 1.7rem;
-  margin: 0 0 0.7rem;
-}
-
-.points {
-  color: var(--some-black-color, #111);
-  /* font-family: var(--ff-brandon-text); */
-  font-size: 3.7rem;
-  font-weight: 900;
-  letter-spacing: -3%;
-  line-height: 3.7rem;
-  margin: 1.4rem 0;
-}
-
-.progressTitle {
-  color: var(--some-black-color, #000);
-  /* font-family: var(--ff-brandon-text); */
-  font-size: 1.5rem;
-  font-weight: 500;
-  letter-spacing: 0.6%;
-  line-height: 1.7rem;
-  margin: 0;
-}
-
-.pointsRemaining {
-  color: var(--some-grey-color, #4f4f4f);
-  /* font-family: var(--ff-brandon-text); */
-  font-size: 1.5rem;
-  font-weight: 500;
-  letter-spacing: 0.6%;
-  line-height: 1.7rem;
-  margin: 1rem 0 0;
-}
-
-.link {
-  color: var(--some-black-color, #111);
-  font-family: var(--ff-fira-sans);
-  font-size: 1.4rem;
-  font-weight: 600;
-  justify-self: flex-end;
-  letter-spacing: 1.2%;
-  line-height: 2rem;
-  margin-top: 2.8rem;
-  text-decoration: none;
-}
-
-.target {
-  color: var(--some-black-color, #000);
-  /* font-family: var(--ff-biro-script-plus); */
-  font-size: 1.8rem;
-  font-weight: 400;
-  letter-spacing: 4%;
-  line-height: 3rem;
-  margin: 0;
-  text-align: right;
+  gap: 1.7rem;
 }
 
 @media screen and (max-width: 950px) {
@@ -124,52 +15,17 @@
     left: 50%;
     margin-left: -50vw;
     margin-right: -50vw;
-    padding: 0 2rem 2rem;
+    padding: 0 2rem 3.6rem;
     position: relative;
     right: 50%;
     width: 100dvw;
   }
-
-  .header {
-    margin-bottom: 1rem;
-  }
-
-  .level {
-    margin-bottom: 1rem;
-    transform: translate(-60%, 40%) rotate(-20deg);
-  }
-
-  .progress {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .progressTitle {
-    order: 0;
-  }
-
-  .pointsRemaining {
-    margin-bottom: 0.8rem;
-    margin-top: 0.6rem;
-    order: 1;
-  }
-
-  .progressbar {
-    order: 2;
-  }
-
-  .target {
-    position: absolute;
-    right: 2rem;
-    transform: rotate(-15deg) translateY(-50%);
-  }
 }
 
 @media screen and (min-width: 950px) {
   .container {
     background-color: var(--some-white-color, #fff);
-    display: grid;
-    gap: 2.2rem;
+    gap: 1.5rem;
   }
 
   .overview {
@@ -181,114 +37,16 @@
     left: unset;
     margin-left: unset;
     margin-right: unset;
-    max-width: var(--max-width);
     padding: 3.5rem 2rem;
     position: static;
     right: unset;
     width: 100%;
   }
-
-  .friend {
-    justify-self: flex-end;
-  }
-
-  .level {
-    margin-bottom: 2.4rem;
-  }
-
-  .name {
-    margin: 3rem 0 1.8rem;
-  }
-
-  .membershipContainer {
-    margin-bottom: 4rem;
-  }
-
-  .stats {
-    display: flex;
-    flex-direction: column;
-    gap: 3rem;
-    max-width: 32rem;
-  }
-
-  .qualifyingPoints {
-    display: block;
-  }
-
-  .pointsTitle {
-    color: var(--some-grey-color, #4f4f4f);
-    font-size: 1.2rem;
-  }
-
-  .points {
-    margin: 1.4rem 0 0;
-  }
-
-  .pointsContainer {
-    display: grid;
-    gap: 3.8rem;
-    grid-template-columns: auto 1fr;
-    margin-top: 1.5rem;
-  }
-
-  .pointsProgress {
-    align-items: center;
-    display: grid;
-    gap: 1rem;
-    grid-template-columns: auto 1fr;
-  }
-
-  .point {
-    /* font-family: var(--ff-brandon-text); */
-    font-size: 2.7rem;
-    font-weight: 900;
-    line-height: 2.7rem;
-    margin: 0;
-  }
-
-  .pointsProgressTitle {
-    font-family: var(--ff-fira-sans);
-    font-size: 1.2rem;
-    font-weight: 400;
-    letter-spacing: 0.6%;
-    line-height: 1.4rem;
-    grid-column: 1/-1;
-    margin: 0;
-  }
-
-  .progressTitle {
-    display: none;
-  }
-
-  .pointsRemaining {
-    font-size: 1.2rem;
-  }
-
-  .target {
-    position: relative;
-  }
-
-  .target::after {
-    --height: 3.2rem;
-    --width: 4.5rem;
-
-    background-image: url("/arrow_biro.svg");
-    background-repeat: no-repeat;
-    content: " ";
-    display: inline-block;
-    height: var(--height);
-    position: relative;
-    top: calc(var(--height) - var(--width));
-    width: var(--width);
-  }
-
-  .link {
-    display: none;
-  }
 }
 
 @media screen and (min-width: 1100px) {
   .overview {
     gap: 10rem;
+    min-height: 35rem;
   }
 }

components/MyPages/Blocks/Shortcuts/shortcuts.module.css

@@ -1,7 +1,6 @@
 .shortcuts {
   display: grid;
   gap: 2rem;
-  max-width: var(--max-width);
 }
 
 .header {

components/MyPages/Blocks/UpcomingStays/index.tsx

@@ -5,6 +5,7 @@ import styles from "./upcoming.module.css"
 
 import type { LangParams } from "@/types/params"
 import type { StaysProps } from "@/types/components/myPages/stays"
+import Link from "next/link"
 
 export default function UpcomingStays({
   lang,
@@ -12,10 +13,13 @@ export default function UpcomingStays({
 }: StaysProps & LangParams) {
   return (
     <section className={styles.container}>
-      <header>
+      <header className={styles.header}>
         <Title level="h2" uppercase>
           Your upcoming stays
         </Title>
+        <Link className={styles.link} href="#">
+          See all
+        </Link>
       </header>
       <section className={styles.stays}>
         {stays.map((stay) => (

components/MyPages/Blocks/UpcomingStays/upcoming.module.css

@@ -2,15 +2,23 @@
   display: grid;
   gap: 2.2rem;
   margin-right: -2rem;
-  max-width: var(--max-width);
   overflow: hidden;
 }
 
+.header {
+  align-items: baseline;
+  display: flex;
+  justify-content: space-between;
+}
+
+.link {
+  display: none;
+}
+
 .stays {
   display: flex;
   gap: 2rem;
   overflow-x: auto;
-  padding-right: 2rem;
 
   /* Hide scrollbar IE and Edge */
   -ms-overflow-style: none;
@@ -23,8 +31,25 @@
   display: none;
 }
 
+@media screen and (max-width: 950px) {
+  .stays {
+    padding-right: 2rem;
+  }
+}
+
 @media screen and (min-width: 950px) {
   .container {
     margin-right: 0;
   }
+
+  .link {
+    color: var(--some-black-color, #111);
+    display: inline-block;
+    font-family: var(--ff-fira-sans);
+    font-size: 1.4rem;
+    font-weight: 600;
+    letter-spacing: 1.2%;
+    line-height: 140%;
+    text-decoration: none;
+  }
 }

components/MyPages/Header/Breadcrumbs/breadcrumbs.module.css

@@ -19,3 +19,7 @@
 .link {
   text-decoration: none;
 }
+
+.currentPage {
+  margin: 0;
+}

components/MyPages/Header/Breadcrumbs/index.tsx

@@ -15,7 +15,7 @@ export default function Breadcrumbs() {
           <span>/</span>
         </li>
         <li className={styles.listItem}>
-          <p>My Scandic</p>
+          <p className={styles.currentPage}>My Scandic</p>
         </li>
       </ul>
     </nav>

components/MyPages/Header/header.module.css

@@ -18,7 +18,9 @@
 .breadcrumbs {
   background-color: var(--some-grey-color, #f2f2f2);
   display: block;
+  padding-bottom: 0.8rem;
   padding-left: 2rem;
+  padding-top: 3rem;
 }
 
 @media screen and (min-width: 950px) {
@@ -35,5 +37,6 @@
   .breadcrumbs {
     background-color: var(--some-white-color, #fff);
     padding-left: 2.4rem;
+    padding-top: 2rem;
   }
 }

components/MyPages/Sidebar/index.tsx

@@ -8,7 +8,7 @@ export default function Sidebar() {
     <aside className={styles.sidebar}>
       <nav className={styles.nav}>
         <Link className={`${styles.link} ${styles.active}`} href="#">
-          My Scandic
+          My Pages
         </Link>
         <Link className={styles.link} href="#">
           My Stays
@@ -19,12 +19,6 @@ export default function Sidebar() {
         <Link className={styles.link} href="#">
           My Benefits
         </Link>
-        <Link className={styles.link} href="#">
-          My Challenges
-        </Link>
-        <Link className={styles.link} href="#">
-          My Favourites
-        </Link>
         <Link className={styles.link} href="#">
           About Scandic Friends
         </Link>

components/TempDesignSystem/Divider/index.tsx

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

types/components/myPages/friend.ts

@@ -0,0 +1,5 @@
+import type { User } from "@/types/user"
+
+export type FriendProps = {
+  user: User
+}

types/components/myPages/qualifyingPoints.ts

@@ -0,0 +1,5 @@
+import type { User } from "@/types/user"
+
+export type QualifyingPointsProps = {
+  user: User
+}

types/components/myPages/stats.ts

@@ -0,0 +1,5 @@
+import type { User } from "@/types/user"
+
+export type StatsProps = {
+  user: User
+}

types/components/myPages/totalPoints.ts

@@ -0,0 +1,5 @@
+import type { User } from "@/types/user"
+
+export type TotalPointsProps = {
+  user: User
+}