chore: align styles

components/MyPages/AccountPage/Content.tsx

@@ -74,8 +74,8 @@ export default function Content({ lang, content }: ContentProps) {
             return (
               <Shortcuts
                 shortcuts={shortcuts}
-                subtitle={item.preamble}
-                title={item.title}
+                subtitle={item.shortcuts.preamble}
+                title={item.shortcuts.title}
               />
             )
           case ContentEntries.AccountPageContentTextContent:

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

@@ -19,7 +19,13 @@ export default async function CurrentBenefitsBlock({
     <section className={styles.container}>
       <header className={styles.header}>
         {title && (
-          <Title as="h3" level="h2" className={styles.title} uppercase>
+          <Title
+            as="h3"
+            level="h2"
+            weight={"medium"}
+            className={styles.title}
+            uppercase
+          >
             {title}
           </Title>
         )}

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

@@ -21,7 +21,13 @@ export default async function NextLevelBenefitsBlock({
     <section className={styles.container}>
       <header className={styles.header}>
         {title && (
-          <Title as="h3" level="h2" uppercase className={styles.title}>
+          <Title
+            as="h3"
+            level="h2"
+            uppercase
+            weight="medium"
+            className={styles.title}
+          >
             {title}
           </Title>
         )}

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

@@ -1,11 +1,7 @@
 .container {
   background-color: var(--some-grey-color, #f2f2f2);
   display: grid;
-  gap: 0.8rem;
-}
-
-.title {
-  font-weight: 600;
+  gap: 1.5rem;
 }
 
 .overview {

components/MyPages/Blocks/Shortcuts/index.tsx

@@ -15,7 +15,13 @@ export default function Shortcuts({
   return (
     <section className={styles.shortcuts}>
       <header className={styles.header}>
-        <Title level="h2" as="h5" uppercase>
+        <Title
+          as="h3"
+          level="h2"
+          weight={"medium"}
+          className={styles.title}
+          uppercase
+        >
           {title}
         </Title>
         <p className={styles.subtitle}>{subtitle}</p>

components/MyPages/Blocks/Stays/Header/header.module.css

@@ -1,12 +1,14 @@
 .header {
   display: grid;
-  grid-template-areas: "title link";
+  grid-template-areas:
+    "title link"
+    "subtitle subtitle";
   grid-template-columns: 1fr max-content;
+  gap: 1.5rem;
 }
 
 .title {
   grid-area: title;
-  font-weight: 600;
 }
 
 .link {
@@ -14,15 +16,5 @@
 }
 
 .subtitle {
-  padding-top: 0.5rem;
-  padding-bottom: 2.5rem;
-  margin: 0;
-}
-
-@media screen and (min-width: 950px) {
-  .subtitle {
-    width: 60%;
-    padding-top: 2.5rem;
-    padding-bottom: 5rem;
-  }
+  grid-area: subtitle;
 }

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

@@ -15,7 +15,7 @@ export default function Header({ title, subtitle, link }: HeaderProps) {
             as="h3"
             level="h2"
             className={styles.title}
-            weight="semiBold"
+            weight="medium"
             uppercase
           >
             {title}
@@ -26,12 +26,12 @@ export default function Header({ title, subtitle, link }: HeaderProps) {
             {link.text}
           </Link>
         )}
+        {subtitle && (
+          <Title as="h5" weight="regular" className={styles.subtitle}>
+            {subtitle}
+          </Title>
+        )}
       </header>
-      {subtitle && (
-        <Title as="h5" weight="regular" className={styles.subtitle}>
-          {subtitle}
-        </Title>
-      )}
     </>
   )
 }

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

@@ -1,5 +1,7 @@
 import { serverClient } from "@/lib/trpc/server"
 
+import MaxWidth from "@/components/MaxWidth"
+
 import Header from "../Header"
 import StayList from "../StayList"
 import EmptyUpcomingStaysBlock from "./EmptyUpcomingStays"
@@ -17,13 +19,13 @@ export default async function SoonestStays({
   const stays = await serverClient().user.stays.soonestUpcoming()
 
   return (
-    <section className={styles.container}>
+    <MaxWidth className={styles.container} tag="section">
       <Header title={title} subtitle={subtitle} link={link} />
       {stays.length ? (
         <StayList lang={lang} stays={stays} />
       ) : (
         <EmptyUpcomingStaysBlock />
       )}
-    </section>
+    </MaxWidth>
   )
 }

components/MyPages/Blocks/Stays/Soonest/soonest.module.css

@@ -1,3 +1,4 @@
 .container {
-  max-width: var(--max-width);
+  display: grid;
+  gap: 1.5rem;
 }