feat(WEB-250): overview hero final ui

components/MyPages/Blocks/Overview/Buttons/btn.module.css

@@ -1,4 +1,4 @@
-@media screen and (max-width: 950px) {
+@media screen and (max-width: 1366px) {
   .membershipBtn {
     display: none;
   }

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

@@ -2,67 +2,61 @@
   align-items: center;
   display: flex;
   flex-direction: column;
+  gap: var(--Spacing-x4);
   justify-content: center;
 }
 
+.header {
+  display: flex;
+  flex-direction: column;
+}
+
+.levelLabel {
+  position: relative;
+  transform: rotate(-13deg) translate(0px, -15px);
+}
+
 .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;
+  height: 105px;
+  width: 219px;
 }
 
 .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;
+  text-align: center;
+}
+
+.membership {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+  justify-content: center;
 }
 
 .membershipContainer {
   align-items: center;
-  display: flex;
-  gap: 0.8rem;
+  background: var(--Scandic-Brand-Burgundy);
+  border-radius: var(--Corner-radius-Small);
+  display: grid;
+  gap: var(--Spacing-x1);
+  grid-template-columns: 1fr;
+  justify-items: center;
+  padding: var(--Spacing-x1) var(--Spacing-x2);
 }
 
 .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;
+  color: var(--Scandic-Brand-Pale-Peach);
+  /* TODO: Not yet exported by the design team, change to variable l8r */
+  font-family: var(--ff-fira-mono, "fira mono");
+  font-size: 14px;
+  font-weight: 400;
+  letter-spacing: 0.168px;
+  line-height: 140%;
   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;
+@media screen and (min-width: 768px) {
+  .membershipContainer {
+    grid-template-columns: auto auto;
   }
 }

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

@@ -1,25 +1,32 @@
-import Image from "@/components/Image"
+import { _ } from "@/lib/translation"
+
+import { GoodFriend } from "@/components/Levels"
+import BiroScript from "@/components/TempDesignSystem/BiroScript"
+import Title from "@/components/TempDesignSystem/Title"
 
 import styles from "./friend.module.css"
 
-import type { FriendProps } from "@/types/components/myPages/myPage/friend"
+import type { UserProps } from "@/types/components/myPages/user"
 
-export default function Friend({ user }: FriendProps) {
+export default function Friend({ user }: UserProps) {
   return (
     <section className={styles.friend}>
-      <p className={styles.level}>Current level:</p>
-      <Image
-        alt="Good Friend"
-        className={styles.image}
-        height={70}
-        src="/_static/icons/good-friend.svg"
-        width={228}
-      />
-      <h3 className={styles.name}>{user.name}</h3>
-      <div className={styles.membershipContainer}>
-        <p className={styles.membershipId}>
-          {user.membership ? user.membership.membershipNumber : "N/A"}
-        </p>
+      <header className={styles.header}>
+        <BiroScript className={styles.levelLabel} color="pale">
+          Current level:
+        </BiroScript>
+        <GoodFriend className={styles.level} color="pale" />
+      </header>
+      <div className={styles.membership}>
+        <Title className={styles.name} color="pale" level="h3">
+          {user.name}
+        </Title>
+        <div className={styles.membershipContainer}>
+          <p className={styles.membershipId}>{_("Membership ID:")}</p>
+          <p className={styles.membershipId}>
+            {user.membership ? user.membership.membershipNumber : "N/A"}
+          </p>
+        </div>
       </div>
     </section>
   )

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

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

components/MyPages/Blocks/Overview/Stats/Label/label.module.css

@@ -0,0 +1,9 @@
+.label {
+  color: var(--Scandic-Brand-Pale-Peach);
+  font-family: var(--typography-Body-Regular-fontFamily);
+  font-size: var(--typography-Body-Regular-fontSize);
+  font-weight: var(--typography-Body-Regular-fontWeight);
+  letter-spacing: var(--typography-Body-Regular-letterSpacing);
+  line-height: var(--typography-Body-Regular-lineHeight);
+  margin: 0;
+}

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

@@ -0,0 +1,22 @@
+import { _ } from "@/lib/translation"
+
+import BiroScript from "@/components/TempDesignSystem/BiroScript"
+import Title from "@/components/TempDesignSystem/Title"
+
+import Label from "../Label"
+
+import styles from "./nextLevel.module.css"
+
+import type { UserProps } from "@/types/components/myPages/user"
+
+export default function NextLevel({}: UserProps) {
+  return (
+    <section>
+      <Label>{_("Next level")}:</Label>
+      <Title className={styles.nextLevel} color="pale" level="h3">
+        {_("Close friend")}
+        <BiroScript>{_("Coming up")}!</BiroScript>
+      </Title>
+    </section>
+  )
+}

components/MyPages/Blocks/Overview/Stats/NextLevel/nextLevel.module.css

@@ -0,0 +1,12 @@
+.nextLevel {
+  align-items: center;
+  display: grid;
+  grid-template-columns: 1fr;
+}
+
+@media screen and (min-width: 768px) {
+  .nextLevel {
+    gap: var(--Spacing-x1);
+    grid-template-columns: 1fr auto;
+  }
+}

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

@@ -0,0 +1,26 @@
+import Title from "@/components/TempDesignSystem/Title"
+
+import Label from "../Label"
+
+import styles from "./totalPoints.module.css"
+
+import type { UserProps } from "@/types/components/myPages/user"
+
+export default function Points({ user }: UserProps) {
+  return (
+    <section className={styles.points}>
+      <article>
+        <Label>Total Points</Label>
+        <Title color="pale" level="h2">
+          {user.membership ? user.membership.currentPoints : "N/A"}
+        </Title>
+      </article>
+      <article>
+        <Label>Points until next level</Label>
+        <Title color="pale" level="h2">
+          {user.membership ? user.membership.currentPoints : "N/A"}
+        </Title>
+      </article>
+    </section>
+  )
+}

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

@@ -0,0 +1,11 @@
+.points {
+  display: grid;
+  gap: var(--Spacing-x2);
+  grid-template-columns: 1fr;
+}
+
+@media screen and (min-width: 768px) {
+  .points {
+    grid-template-columns: 1fr 1fr;
+  }
+}

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

@@ -1,21 +0,0 @@
-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

@@ -1,62 +0,0 @@
-.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/Title/index.tsx

@@ -1,5 +0,0 @@
-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

@@ -1,16 +0,0 @@
-.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

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

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

@@ -1,20 +0,0 @@
-.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

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

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

@@ -1,13 +1,11 @@
 .stats {
-  display: flex;
-  flex-direction: column;
-  gap: 0.7rem;
+  align-content: center;
+  display: grid;
+  gap: var(--Spacing-x2);
 }
 
-@media screen and (min-width: 950px) {
+@media screen and (min-width: 1367px) {
   .stats {
-    gap: 1.4rem;
-    justify-content: center;
-    max-width: 32rem;
+    gap: var(--Spacing-x4);
   }
 }

components/MyPages/Blocks/Overview/index.tsx

@@ -1,28 +1,27 @@
 import { serverClient } from "@/lib/trpc/server"
 
-import Title from "@/components/Title"
+import Divider from "@/components/TempDesignSystem/Divider"
 
+import Header from "../Header"
 import Friend from "./Friend"
 import Stats from "./Stats"
 
 import styles from "./overview.module.css"
 
-import type { OverviewProps } from "@/types/components/myPages/myPage/overview"
+import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
 
-export default async function Overview({ title }: OverviewProps) {
+export default async function Overview({
+  link,
+  subtitle,
+  title,
+}: AccountPageComponentProps) {
   const user = await serverClient().user.get()
-
   return (
     <section className={styles.container}>
-      <header>
-        {title && (
-          <Title as="h3" level="h2" uppercase className={styles.title}>
-            {title}
-          </Title>
-        )}
-      </header>
+      <Header link={link} subtitle={subtitle} title={title} topTitle />
       <section className={styles.overview}>
         <Friend user={user} />
+        <Divider className={styles.divider} />
         <Stats user={user} />
       </section>
     </section>

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

@@ -4,43 +4,38 @@
 }
 
 .overview {
+  background-color: var(--Scandic-Brand-Scandic-Red);
+  border-radius: var(--Corner-radius-xLarge);
   display: grid;
-  gap: 1.7rem;
+  gap: var(--Spacing-x2);
+  grid-template-columns: 1fr;
+  padding: var(--Spacing-x7) var(--Spacing-x6);
 }
 
-@media screen and (max-width: 950px) {
+.divider {
+  padding-top: var(--Spacing-x2);
+}
+
+@media screen and (max-width: 767px) {
   .container {
     /* Full-width override styling */
     left: 50%;
     margin-left: -50vw;
     margin-right: -50vw;
-    padding: 0 2rem 3.6rem;
+    padding: 0 var(--Spacing-x2);
     position: relative;
     right: 50%;
     width: 100dvw;
   }
 }
 
-@media screen and (min-width: 950px) {
+@media screen and (min-width: 768px) {
   .overview {
-    background-color: var(--some-grey-color, #f2f2f2);
-    border-radius: 0.8rem;
-    gap: 4rem;
+    gap: var(--Spacing-x2);
     grid-template-columns: 1fr 1fr;
-    justify-content: center;
-    left: unset;
-    margin-left: unset;
-    margin-right: unset;
-    padding: 3.5rem 2rem;
-    position: static;
-    right: unset;
-    width: 100%;
   }
-}
 
-@media screen and (min-width: 1100px) {
-  .overview {
-    gap: 10rem;
-    min-height: 35rem;
+  .divider {
+    display: none;
   }
 }