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

2024-04-03 10:48:52 +02:00
parent b78998ad21
commit 8f87d6368c
37 changed files with 467 additions and 398 deletions
@@ -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>
+  )
+}
@@ -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;
+  }
+}
@@ -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>
+  )
+}
@@ -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;
+  }
+}
@@ -0,0 +1,5 @@
+import styles from "./title.module.css"
+
+export default function Title({ children }: React.PropsWithChildren) {
+  return <h4 className={styles.title}>{children}</h4>
+}
@@ -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;
+  }
+}
@@ -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>
+  )
+}
@@ -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;
+  }
+}
@@ -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>
+  )
+}
@@ -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;
+  }
+}