From 265f55ca9af6fa2f71672ea2e5eb629a5142e2b0 Mon Sep 17 00:00:00 2001
From: Arvid Norlin <arvid.norlin@scandichotels.com>
Date: Wed, 24 Apr 2024 10:47:09 +0200
Subject: [PATCH] fix: correct conditional header content styles

---
 .../Benefits/CurrentLevel/current.module.css  |  9 +++++++--
 .../Blocks/Benefits/CurrentLevel/index.tsx    |  8 +++++---
 .../Blocks/Benefits/NextLevel/index.tsx       | 19 ++++++++++--------
 .../Blocks/Benefits/NextLevel/next.module.css | 14 +++++++++++--
 .../Blocks/Stays/Header/header.module.css     | 12 ++++++++++-
 .../MyPages/Blocks/Stays/Header/index.tsx     | 20 ++++++++++---------
 6 files changed, 57 insertions(+), 25 deletions(-)

diff --git a/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css b/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css
index 9cedea259..a4d66e4fa 100644
--- a/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css
+++ b/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css
@@ -4,14 +4,19 @@
 }
 
 .header {
-  display: flex;
-  justify-content: space-between;
+  display: grid;
+  grid-template-areas: "title link";
+  grid-template-columns: 1fr max-content;
 }
 
 .title {
+  grid-area: title;
   font-weight: 600;
 }
 
+.link {
+  grid-area: link;
+}
 .subtitle {
   margin: 0;
   font-size: 2rem;
diff --git a/components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx b/components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx
index f3ec500b1..876d62eff 100644
--- a/components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx
+++ b/components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx
@@ -18,9 +18,11 @@ export default async function CurrentBenefitsBlock({
   return (
     <section className={styles.container}>
       <header className={styles.header}>
-        <Title as="h3" level="h2" className={styles.title} uppercase>
-          {title}
-        </Title>
+        {title && (
+          <Title as="h3" level="h2" className={styles.title} uppercase>
+            {title}
+          </Title>
+        )}
         {link && (
           <Link className={styles.link} href={link.href}>
             {link.text}
diff --git a/components/MyPages/Blocks/Benefits/NextLevel/index.tsx b/components/MyPages/Blocks/Benefits/NextLevel/index.tsx
index 03c7a417f..500aa6881 100644
--- a/components/MyPages/Blocks/Benefits/NextLevel/index.tsx
+++ b/components/MyPages/Blocks/Benefits/NextLevel/index.tsx
@@ -7,6 +7,7 @@ import Button from "@/components/TempDesignSystem/Button"
 import Title from "@/components/Title"
 
 import styles from "./next.module.css"
+
 import { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
 
 export default async function NextLevelBenefitsBlock({
@@ -19,14 +20,16 @@ export default async function NextLevelBenefitsBlock({
   return (
     <section className={styles.container}>
       <header className={styles.header}>
-        <Title as="h3" level="h2" uppercase className={styles.title}>
-          {title}
-          {link && (
-            <Link className={styles.link} href={link.href}>
-              {link.text}
-            </Link>
-          )}
-        </Title>
+        {title && (
+          <Title as="h3" level="h2" uppercase className={styles.title}>
+            {title}
+          </Title>
+        )}
+        {link && (
+          <Link className={styles.link} href={link.href}>
+            {link.text}
+          </Link>
+        )}
       </header>
       {subtitle && <p className={styles.subtitle}>{subtitle}</p>}
       <div className={styles.cardContainer}>
diff --git a/components/MyPages/Blocks/Benefits/NextLevel/next.module.css b/components/MyPages/Blocks/Benefits/NextLevel/next.module.css
index ae0f44a3d..dea0bf6f9 100644
--- a/components/MyPages/Blocks/Benefits/NextLevel/next.module.css
+++ b/components/MyPages/Blocks/Benefits/NextLevel/next.module.css
@@ -4,8 +4,18 @@
 }
 
 .header {
-  display: flex;
-  justify-content: space-between;
+  display: grid;
+  grid-template-areas: "title link";
+  grid-template-columns: 1fr max-content;
+}
+
+.title {
+  grid-area: title;
+  font-weight: 600;
+}
+
+.link {
+  grid-area: link;
 }
 
 .cardContainer {
diff --git a/components/MyPages/Blocks/Stays/Header/header.module.css b/components/MyPages/Blocks/Stays/Header/header.module.css
index a7787c9c9..5593d8025 100644
--- a/components/MyPages/Blocks/Stays/Header/header.module.css
+++ b/components/MyPages/Blocks/Stays/Header/header.module.css
@@ -1,6 +1,16 @@
 .header {
   display: grid;
-  gap: 0.5rem;
+  grid-template-areas: "title link";
+  grid-template-columns: 1fr max-content;
+}
+
+.title {
+  grid-area: title;
+  font-weight: 600;
+}
+
+.link {
+  grid-area: link;
 }
 
 .subtitle {
diff --git a/components/MyPages/Blocks/Stays/Header/index.tsx b/components/MyPages/Blocks/Stays/Header/index.tsx
index e753889ba..dda083916 100644
--- a/components/MyPages/Blocks/Stays/Header/index.tsx
+++ b/components/MyPages/Blocks/Stays/Header/index.tsx
@@ -10,15 +10,17 @@ export default function Header({ title, subtitle, link }: HeaderProps) {
   return (
     <>
       <header className={styles.header}>
-        <Title
-          as="h3"
-          level="h2"
-          className={styles.title}
-          weight="semiBold"
-          uppercase
-        >
-          {title}
-        </Title>
+        {title && (
+          <Title
+            as="h3"
+            level="h2"
+            className={styles.title}
+            weight="semiBold"
+            uppercase
+          >
+            {title}
+          </Title>
+        )}
         {link && (
           <Link className={styles.link} href={link.href}>
             {link.text}