feat: use grid on no upcoming component

components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/emptyUpcomingStays.module.css

@@ -1,27 +1,32 @@
 .container {
+  display: grid;
+  grid-template-rows: 1fr min(50px);
+  background-color: var(--Base-Surface-Primary-Normal);
+  border-radius: var(--Corner-radius-Medium);
+  min-height: 250px;
+  margin-bottom: var(--Spacing-x-half);
+  overflow: hidden;
+}
+
+.titleContainer {
+  display: flex;
+  justify-content: center;
   align-items: center;
   background-color: var(--Scandic-Brand-Pale-Peach);
-  border-radius: var(--Corner-radius-Medium);
+}
+
+.title {
   display: flex;
-  gap: var(--Spacing-x9);
   flex-direction: column;
-  margin-bottom: var(--Spacing-x-half);
-  min-height: 250px;
-  justify-content: end;
-  overflow: hidden;
+  align-items: center;
 }
 
 .burgundyTitle {
   color: var(--Scandic-Brand-Burgundy);
-  display: block;
-  text-align: center;
 }
 
 .link {
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 100%;
-  background-color: var(--Base-Surface-Primary-Normal);
-  padding: var(--Spacing-x-one-and-half) var(--Spacing-x0);
 }

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

@@ -14,13 +14,14 @@ export default async function EmptyUpcomingStaysBlock({ lang }: LangParams) {
   const { formatMessage } = await getIntl()
   return (
     <section className={styles.container}>
-      <Title as="h5" level="h3" color="red">
-        {formatMessage({ id: "You have no upcoming stays." })}
-        <span className={styles.burgundyTitle}>
-          {" "}
-          {formatMessage({ id: "Where should you go next?" })}
-        </span>
-      </Title>
+      <div className={styles.titleContainer}>
+        <Title as="h5" level="h3" color="red" className={styles.title}>
+          {formatMessage({ id: "You have no upcoming stays." })}
+          <span className={styles.burgundyTitle}>
+            {formatMessage({ id: "Where should you go next?" })}
+          </span>
+        </Title>
+      </div>
       <Link
         href={homeHrefs[env.NODE_ENV][lang]}
         className={styles.link}

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

@@ -32,7 +32,7 @@ export default function StayCard({ stay, lang }: StayCardProps) {
           {hotelInformation.hotelName}
         </Title>
         <div className={styles.date}>
-          <CalendarIcon color="burgundy" className={styles.icon} />
+          <CalendarIcon color="burgundy" height={24} width={24} />
           <Caption asChild>
             <time dateTime={arrivalDateTime}>{arrivalDate}</time>
           </Caption>

components/MyPages/Blocks/Stays/StayCard/stay.module.css

@@ -37,8 +37,3 @@
   display: flex;
   gap: var(--Spacing-x-half);
 }
-
-.icon {
-  height: 1.5rem;
-  width: 1.5rem;
-}

components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/emptyUpcomingStays.module.css

@@ -1,27 +1,32 @@
 .container {
+  display: grid;
+  grid-template-rows: 1fr min(50px);
+  background-color: var(--Base-Surface-Primary-Normal);
+  border-radius: var(--Corner-radius-Medium);
+  min-height: 250px;
+  margin-bottom: var(--Spacing-x-half);
+  overflow: hidden;
+}
+
+.titleContainer {
+  display: flex;
+  justify-content: center;
   align-items: center;
   background-color: var(--Scandic-Brand-Pale-Peach);
-  border-radius: var(--Corner-radius-Medium);
+}
+
+.title {
   display: flex;
-  gap: var(--Spacing-x9);
   flex-direction: column;
-  margin-bottom: var(--Spacing-x-half);
-  min-height: 250px;
-  justify-content: end;
-  overflow: hidden;
+  align-items: center;
 }
 
 .burgundyTitle {
   color: var(--Scandic-Brand-Burgundy);
-  display: block;
-  text-align: center;
 }
 
 .link {
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 100%;
-  background-color: var(--Base-Surface-Primary-Normal);
-  padding: var(--Spacing-x-one-and-half) var(--Spacing-x0);
 }

components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/index.tsx

@@ -14,13 +14,14 @@ export default async function EmptyUpcomingStaysBlock({ lang }: LangParams) {
   const { formatMessage } = await getIntl()
   return (
     <section className={styles.container}>
-      <Title as="h5" level="h3" color="red">
-        {formatMessage({ id: "You have no upcoming stays." })}
-        <span className={styles.burgundyTitle}>
-          {" "}
-          {formatMessage({ id: "Where will you go next?" })}
-        </span>
-      </Title>
+      <div className={styles.titleContainer}>
+        <Title as="h5" level="h3" color="red" className={styles.title}>
+          {formatMessage({ id: "You have no upcoming stays." })}
+          <span className={styles.burgundyTitle}>
+            {formatMessage({ id: "Where will you go next?" })}
+          </span>
+        </Title>
+      </div>
       <Link
         href={homeHrefs[env.NODE_ENV][lang]}
         className={styles.link}

components/TempDesignSystem/Button/button.module.css

@@ -56,7 +56,9 @@ a.default {
 }
 
 .icon {
-  align-items: baseline;
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x-half);
 }
 
 /* SIZES */