feat(WEB-250): overview hero final ui

2024-05-24 10:13:24 +02:00
parent f884383c3c
commit 16b817f469
164 changed files with 6262 additions and 990 deletions
@@ -0,0 +1,5 @@
+import styles from "./label.module.css"
+
+export default function Label({ children }: React.PropsWithChildren) {
+  return <span className={styles.label}>{children}</span>
+}
@@ -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;
+}
@@ -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>
+  )
+}
@@ -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;
+  }
+}
@@ -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>
+  )
+}
@@ -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;
+  }
+}
@@ -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>
-  )
-}
@@ -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;
-  }
-}
@@ -1,5 +0,0 @@
-import styles from "./title.module.css"
-
-export default function Title({ children }: React.PropsWithChildren) {
-  return <h4 className={styles.title}>{children}</h4>
-}
@@ -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;
-  }
-}
@@ -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>
-  )
-}
@@ -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;
-  }
-}
@@ -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>
  )
 }
@@ -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);
  }
 }