feat(WEB-250): overview hero final ui

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>
   )