fix: align styles

components/MyPages/AccountPage/Content.tsx

@@ -36,7 +36,7 @@ function DynamicComponent({ user, lang, content }: AccountPageContentProps) {
 
   switch (content.component) {
     case DynamicContentComponents.membership_overview:
-      return <Overview user={user} />
+      return <Overview user={user} title={content.title} />
     case DynamicContentComponents.previous_stays:
       return <PreviousStays {...componentProps} />
     case DynamicContentComponents.soonest_stays:

components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css

@@ -1,20 +1,29 @@
-.cardContainer {
+.container {
   display: grid;
-  gap: 4px;
+  gap: 1.5rem;
 }
 
 .header {
   display: flex;
   justify-content: space-between;
 }
+
 .title {
   font-weight: 600;
 }
 
+.subtitle {
+  margin: 0;
+  font-size: 2rem;
+}
 .value {
   color: var(--some-red-color, #ed2027);
 }
 
+.cardContainer {
+  display: grid;
+  gap: 4px;
+}
 .cardSubtitle {
   font-family: var(--ff-fira-sans);
   font-size: 12px;

components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx

@@ -21,9 +21,9 @@ export default async function CurrentBenefitsBlock({
   const benefits = await serverClient().user.benefits.current()
 
   return (
-    <section>
+    <section className={styles.container}>
       <header className={styles.header}>
-        <Title as="h4" level="h2" className={styles.title} uppercase>
+        <Title as="h3" level="h2" className={styles.title} uppercase>
           {title}
         </Title>
         {link && (

components/MyPages/Blocks/Benefits/NextLevel/index.tsx

@@ -19,7 +19,7 @@ export default async function NextLevelBenefitsBlock({
   return (
     <section className={styles.container}>
       <header className={styles.header}>
-        <Title as="h4" level="h2" uppercase className={styles.title}>
+        <Title as="h3" level="h2" uppercase className={styles.title}>
           {title}
           {link && (
             <Link className={styles.link} href={link.href}>

components/MyPages/Blocks/Benefits/NextLevel/next.module.css

@@ -7,6 +7,7 @@
   display: flex;
   justify-content: space-between;
 }
+
 .cardContainer {
   display: grid;
   gap: 0.4rem;
@@ -16,6 +17,10 @@
   font-weight: 600;
 }
 
+.subtitle {
+  margin: 0;
+  font-size: 2rem;
+}
 .card {
   text-decoration: none;
   display: flex;

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

@@ -1,39 +0,0 @@
-import { _ } from "@/lib/translation"
-import { serverClient } from "@/lib/trpc/server"
-
-import StayCard from "@/components/MyPages/Blocks/Stays/StayCard"
-import EmptyUpcomingStaysBlock from "@/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays"
-import Link from "@/components/TempDesignSystem/Link"
-import Title from "@/components/Title"
-
-import styles from "./upcoming.module.css"
-
-import type { LangParams } from "@/types/params"
-
-export default async function UpcomingStays({ lang }: LangParams) {
-  const stays = await serverClient().user.stays.upcoming({
-    perPage: 3,
-  })
-
-  return (
-    <section className={styles.container}>
-      <header className={styles.header}>
-        <Title level="h2" as="h5" uppercase>
-          {_("Your upcoming stays")}
-        </Title>
-        <Link className={styles.link} href="#">
-          {_("See all")}
-        </Link>
-      </header>
-      {stays.data.length ? (
-        <section className={styles.stays}>
-          {stays.data.map((stay) => (
-            <StayCard key={stay.uid} stay={stay} lang={lang} />
-          ))}
-        </section>
-      ) : (
-        <EmptyUpcomingStaysBlock />
-      )}
-    </section>
-  )
-}

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

@@ -1,54 +0,0 @@
-.container {
-  display: grid;
-  gap: 2.2rem;
-  overflow: hidden;
-  margin-right: -2rem;
-}
-
-.header {
-  align-items: baseline;
-  display: flex;
-  justify-content: space-between;
-}
-
-.link {
-  display: none;
-}
-
-.stays {
-  display: flex;
-  gap: 2rem;
-  overflow-x: auto;
-
-  /* Hide scrollbar IE and Edge */
-  -ms-overflow-style: none;
-  /* Hide Scrollbar Firefox */
-  scrollbar-width: none;
-}
-
-/* Hide Scrollbar Chrome, Safari and Opera */
-.stays::-webkit-scrollbar {
-  display: none;
-}
-
-@media screen and (min-width: 950px) {
-  .container {
-    margin-right: 0;
-  }
-  @media screen and (max-width: 950px) {
-    .stays {
-      padding-right: 2rem;
-    }
-  }
-
-  .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/Blocks/Overview/index.tsx

@@ -7,12 +7,12 @@ import styles from "./overview.module.css"
 
 import type { OverviewProps } from "@/types/components/myPages/myPage/overview"
 
-export default function Overview({ user }: OverviewProps) {
+export default function Overview({ user, title }: OverviewProps) {
   return (
     <section className={styles.container}>
       <header>
-        <Title as="h2" uppercase>
+        <Title as="h3" level="h2" uppercase className={styles.title}>
-          Good morning
+          {title}
         </Title>
       </header>
       <section className={styles.overview}>

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

@@ -4,6 +4,10 @@
   gap: 0.8rem;
 }
 
+.title {
+  font-weight: 600;
+}
+
 .overview {
   display: grid;
   gap: 1.7rem;

components/MyPages/Blocks/Stays/Header/index.tsx

@@ -10,7 +10,13 @@ export default function Header({ title, subtitle, link }: HeaderProps) {
   return (
     <>
       <header className={styles.header}>
-        <Title className={styles.title} as="h3" weight="semiBold" uppercase>
+        <Title
+          as="h3"
+          level="h2"
+          className={styles.title}
+          weight="semiBold"
+          uppercase
+        >
           {title}
         </Title>
         {link && (

types/components/myPages/myPage/overview.ts

@@ -1,5 +1,6 @@
 import type { User } from "@/types/user"
 
 export type OverviewProps = {
+  title: string
   user: User
 }