chore: update my stays to new MVP design

app/[lang]/(live)/(protected)/my-pages/stays/page.module.css

@@ -9,7 +9,7 @@
 
 @media screen and (min-width: 950px) {
   .container {
-    gap: 10rem;
+    gap: 6rem;
     padding-left: 0;
     padding-right: 0;
     margin: 0;

components/MyPages/Blocks/Stays/Container/container.module.css

@@ -4,6 +4,6 @@
 }
 @media screen and (min-width: 950px) {
   .container {
-    gap: 7rem;
+    gap: 3.5rem;
   }
 }

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

@@ -1,18 +1,4 @@
-.subtitle {
-  margin: 0;
-}
-
 .header {
   display: grid;
   gap: 0.5rem;
 }
-
-@media screen and (min-width: 950px) {
-  .subtitle {
-    width: 60%;
-  }
-
-  .header {
-    gap: 2rem;
-  }
-}

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

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

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

@@ -7,14 +7,9 @@ import styles from "./stay.module.css"
 
 import type { StayCardProps } from "@/types/components/myPages/myStays/stayCard"
 
-export default function StayCard({
-  stay,
-  lang,
-  shouldShowDayCount = false,
-}: StayCardProps) {
+export default function StayCard({ stay, lang }: StayCardProps) {
   const { dateArrive, dateDepart, guests, hotel } = stay
 
-  const daysUntilArrival = dt(dateArrive).diff(dt(), "days")
   const arrival = dt(dateArrive).locale(lang)
   const arrivalDate = arrival.format("DD MMM")
   const arrivalDateTime = arrival.format("YYYY-MM-DD")
@@ -24,21 +19,14 @@ export default function StayCard({
 
   return (
     <article className={styles.stay}>
-      <div className={styles.imageContainer}>
-        {shouldShowDayCount ? (
-          <div className={styles.badge}>
-            <time className={styles.time}>In {daysUntilArrival} days</time>
-          </div>
-        ) : null}
-        <Image
-          alt="Placeholder image flower"
-          height={73}
-          src="/_static/icons/flower-image.svg"
-          width={73}
-        />
-      </div>
       <footer className={styles.footer}>
-        <Title as="h5" level="h3" uppercase className={styles.hotel}>
+        <Title
+          as="h5"
+          level="h3"
+          weight="semiBold"
+          uppercase
+          className={styles.hotel}
+        >
           {hotel}
         </Title>
         <section className={styles.container}>

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

@@ -1,64 +1,39 @@
 .stay {
-  background-color: var(--some-grey-color, #ababab);
+  background-color: var(--some-grey-color, #c2bdba);
   border-radius: 0.8rem;
   display: grid;
   flex-grow: 1;
   flex-shrink: 0;
   flex-basis: 32rem;
-  grid-template-rows: 1fr 9rem;
-  height: 28rem;
-}
-
-.imageContainer {
-  align-items: center;
-  display: grid;
-  justify-content: center;
-  position: relative;
-}
-
-.badge {
-  background-color: var(--some-white-color, #fff);
-  border-radius: 4rem;
-  left: 1.5rem;
-  padding: 0.6rem 1.4rem;
-  position: absolute;
-  top: 1.5rem;
-}
-
-.time {
-  color: var(--some-black-color, #000);
-  font-family: var(--ff-fira-sans);
-  font-size: 1.2rem;
-  font-weight: 400;
+  height: 34rem;
 }
 
 .footer {
-  background-color: var(--some-white-color, #fff);
+  background-color: var(--some-grey-color, #ebe8e6);
   border-bottom: 0.1rem solid var(--some-grey-color, #d9d9d9);
   border-left: 0.1rem solid var(--some-grey-color, #d9d9d9);
   border-right: 0.1rem solid var(--some-grey-color, #d9d9d9);
   border-radius: 0 0 0.8rem 0.8rem;
-  display: inline-block;
-  height: 9rem;
-  padding: 1.5rem 2rem;
+  height: 12rem;
+  padding: 4rem 2.5rem;
   overflow: hidden;
+  margin-top: auto;
+  text-align: center;
+  width: 100%;
 }
 
 .hotel {
   overflow: hidden;
   text-wrap: nowrap;
   text-overflow: ellipsis;
-  font-size: 1.5rem;
   padding: 0;
   margin: 0;
 }
 
 .container {
-  align-items: center;
-  display: grid;
+  display: flex;
   gap: 2rem;
-  grid-template-columns: auto 1fr;
-  justify-content: flex-start;
+  justify-content: center;
 }
 
 .date,
@@ -66,4 +41,11 @@
   align-items: center;
   display: flex;
   gap: 0.6rem;
+  font-size: small;
+}
+
+@media screen and (min-width: 950px) {
+  .footer {
+    padding: 2rem 2.5rem;
+  }
 }

components/MyPages/Blocks/Stays/StayList/stayList.module.css

@@ -1,7 +1,6 @@
 .stays {
   display: grid;
-  row-gap: 1.5rem;
-  column-gap: 2.2rem;
+  gap: 1.5rem;
   grid-template-columns: auto;
 
   /* Hide scrollbar IE and Edge */
@@ -17,6 +16,6 @@
 
 @media screen and (min-width: 950px) {
   .stays {
-    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
   }
 }

types/components/myPages/myStays/stayCard.ts

@@ -3,6 +3,5 @@ import type { Stay } from "../myPage/stay"
 
 export type StayCardProps = {
   lang: Lang
-  shouldShowDayCount?: boolean
   stay: Stay
 }