fix: align styles

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>
-          Good morning
+        <Title as="h3" level="h2" uppercase className={styles.title}>
+          {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;