feat(WEB-304): remaning UI from design system primitives

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

@@ -1,25 +1,17 @@
-.button {
-  background-color: var(--some-red-color, #ed2027);
-}
-
-.link {
-  text-decoration: none;
+.container {
+  align-items: center;
+  background-color: var(--Scandic-Brand-Warm-White);
+  border-radius: var(--Corner-radius-Medium);
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x3);
+  justify-content: center;
+  margin-bottom: var(--Spacing-x1);
+  min-height: 250px;
+  padding: var(--Spacing-x0) var(--Spacing-x3);
 }
 
 .grayTitle {
-  color: var(--some-grey-color, #727272);
+  color: var(--UI-Grey-60);
   display: block;
 }
-
-.container {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  min-height: 25rem;
-  gap: 2.5rem;
-  background-color: var(--some-grey-color, #f2f2f2);
-  border-radius: 0.8rem;
-  margin-bottom: 0.5rem;
-  padding: 0 2rem;
-}

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

@@ -17,9 +17,7 @@ export default async function EmptyUpcomingStaysBlock() {
         </span>
       </Title>
       <Button asChild intent="primary" type="button">
-        <Link className={styles.link} href="#" key="getInspired">
-          {formatMessage({ id: "Get inspired" })}
-        </Link>
+        <Link href="#">{formatMessage({ id: "Get inspired" })}</Link>
       </Button>
     </section>
   )

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

@@ -1,6 +1,6 @@
 import { serverClient } from "@/lib/trpc/server"
 
-import CardGrid from "@/components/TempDesignSystem/CardGrid"
+import Grids from "@/components/TempDesignSystem/Grids"
 
 import Header from "../../Header"
 import StayCard from "../StayCard"
@@ -22,7 +22,7 @@ export default async function SoonestStays({
     <section className={styles.container}>
       <Header title={title} subtitle={subtitle} link={link} />
       {stays.length ? (
-        <CardGrid>
+        <Grids.Stackable>
           {stays.map((stay) => (
             <StayCard
               key={stay.attributes.confirmationNumber}
@@ -30,7 +30,7 @@ export default async function SoonestStays({
               stay={stay}
             />
           ))}
-        </CardGrid>
+        </Grids.Stackable>
       ) : (
         <EmptyUpcomingStaysBlock />
       )}

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

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