feat: implement ui for empty stay

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

@@ -3,12 +3,11 @@
   background-color: var(--Scandic-Brand-Pale-Peach);
   border-radius: var(--Corner-radius-Medium);
   display: flex;
-  gap: var(--Spacing-x3);
+  gap: var(--Spacing-x9);
   flex-direction: column;
-  justify-content: center;
   margin-bottom: var(--Spacing-x-half);
   min-height: 250px;
-  padding: var(--Spacing-x0) var(--Spacing-x3);
+  justify-content: end;
 }
 
 .burgundyTitle {
@@ -16,3 +15,13 @@
   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) 0;
+  border-radius: 0 0 var(--Corner-radius-Medium) var(--Corner-radius-Medium);
+}

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

@@ -1,6 +1,7 @@
 import { homeHrefs } from "@/constants/homeHrefs"
 import { env } from "@/env/server"
 
+import { ArrowRightIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import Title from "@/components/TempDesignSystem/Text/Title"
@@ -21,11 +22,14 @@ export default async function EmptyUpcomingStaysBlock({ lang }: LangParams) {
           {formatMessage({ id: "Where will you go next?" })}
         </span>
       </Title>
-      <Button asChild intent="primary" type="button">
+      <Link
-        <Link href={homeHrefs[env.NODE_ENV][lang]}>
+        href={homeHrefs[env.NODE_ENV][lang]}
-          {formatMessage({ id: "Get inspired" })}
+        className={styles.link}
-        </Link>
+        color="peach80"
-      </Button>
+      >
+        {formatMessage({ id: "Get inspired" })}
+        <ArrowRightIcon color="peach80" />
+      </Link>
     </section>
   )
 }

components/TempDesignSystem/Button/button.module.css

@@ -97,6 +97,25 @@ a.default {
   color: var(--Base-Button-Primary-On-Fill-Disabled);
 }
 
+.icon.basePrimary svg,
+.icon.basePrimary svg * {
+  fill: var(--Base-Button-Primary-On-Fill-Normal);
+}
+
+.icon.basePrimary:active svg,
+.icon.basePrimary:focus svg,
+.icon.basePrimary:hover svg,
+.icon.basePrimary:active svg *,
+.icon.basePrimary:focus svg *,
+.icon.basePrimary:hover svg * {
+  fill: var(--Base-Button-Primary-On-Fill-Hover);
+}
+
+.icon.basePrimary:disabled *,
+.icon.basePrimary:disabled svg * {
+  fill: var(--Base-Button-Primary-On-Fill-Disabled);
+}
+
 .baseSecondary {
   background-color: var(--Base-Button-Secondary-Fill-Normal);
   border-color: var(--Base-Button-Secondary-Border-Normal);
@@ -117,6 +136,25 @@ a.default {
   color: var(--Base-Button-Secondary-On-Fill-Disabled);
 }
 
+.icon.baseSecondary svg,
+.icon.baseSecondary svg * {
+  fill: var(--Base-Button-Secondary-On-Fill-Normal);
+}
+
+.icon.baseSecondary:active svg,
+.icon.baseSecondary:focus svg,
+.icon.baseSecondary:hover svg,
+.icon.baseSecondary:active svg *,
+.icon.baseSecondary:focus svg *,
+.icon.baseSecondary:hover svg * {
+  fill: var(--Base-Button-Secondary-On-Fill-Hover);
+}
+
+.icon.baseSecondary:disabled svg,
+.icon.baseSecondary:disabled svg * {
+  fill: var(--Base-Button-Secondary-On-Fill-Disabled);
+}
+
 .baseTertiary {
   background-color: var(--Base-Button-Tertiary-Fill-Normal);
   color: var(--Base-Button-Tertiary-On-Fill-Normal);
@@ -134,6 +172,25 @@ a.default {
   color: var(--Base-Button-Tertiary-On-Fill-Disabled);
 }
 
+.icon.baseTertiary svg,
+.icon.baseTertiary svg * {
+  fill: var(--Base-Button-Tertiary-On-Fill-Normal);
+}
+
+.icon.baseTertiary:active svg,
+.icon.baseTertiary:focus svg,
+.icon.baseTertiary:hover svg,
+.icon.baseTertiary:active svg *,
+.icon.baseTertiary:focus svg *,
+.icon.baseTertiary:hover svg * {
+  fill: var(--Base-Button-Tertiary-On-Fill-Hover);
+}
+
+.icon.baseTertiary:disabled svg,
+.icon.baseTertiary:disabled svg * {
+  fill: var(--Base-Button-Tertiary-On-Fill-Disabled);
+}
+
 .baseInverted {
   background-color: var(--Base-Button-Inverted-Fill-Normal);
   color: var(--Base-Button-Inverted-On-Fill-Normal);
@@ -151,6 +208,25 @@ a.default {
   color: var(--Base-Button-Inverted-On-Fill-Disabled);
 }
 
+.icon.baseInverted svg,
+.icon.baseInverted svg * {
+  fill: var(--Base-Button-Inverted-On-Fill-Normal);
+}
+
+.icon.baseInverted:active svg,
+.icon.baseInverted:focus svg,
+.icon.baseInverted:hover svg,
+.icon.baseInverted:active svg *,
+.icon.baseInverted:focus svg *,
+.icon.baseInverted:hover svg * {
+  fill: var(--Base-Button-Inverted-On-Fill-Hover);
+}
+
+.icon.baseInverted:disabled svg,
+.icon.baseInverted:disabled svg * {
+  fill: var(--Base-Button-Inverted-On-Fill-Disabled);
+}
+
 .primaryStrongPrimary {
   background-color: var(--Theme-Primary-Strong-Button-Primary-Fill-Normal);
   color: var(--Theme-Primary-Strong-Button-Primary-On-Fill-Normal);
@@ -168,6 +244,25 @@ a.default {
   color: var(--Theme-Primary-Strong-Button-Primary-On-Fill-Disabled);
 }
 
+.icon.primaryStrongPrimary svg,
+.icon.primaryStrongPrimary svg * {
+  fill: var(--Theme-Primary-Strong-Button-Primary-On-Fill-Normal);
+}
+
+.icon.primaryStrongPrimary:active svg,
+.icon.primaryStrongPrimary:focus svg,
+.icon.primaryStrongPrimary:hover svg,
+.icon.primaryStrongPrimary:active svg *,
+.icon.primaryStrongPrimary:focus svg *,
+.icon.primaryStrongPrimary:hover svg * {
+  fill: var(--Theme-Primary-Strong-Button-Primary-On-Fill-Hover);
+}
+
+.icon.primaryStrongPrimary:disabled svg,
+.icon.primaryStrongPrimary:disabled svg * {
+  fill: var(--Theme-Primary-Strong-Button-Primary-On-Fill-Disabled);
+}
+
 .primaryStrongSecondary {
   background-color: var(--Theme-Primary-Strong-Button-Secondary-Fill-Normal);
   border-color: var(--Theme-Primary-Strong-Button-Secondary-Border-Normal);
@@ -188,6 +283,25 @@ a.default {
   color: var(--Theme-Primary-Strong-Button-Secondary-On-Fill-Disabled);
 }
 
+.icon.primaryStrongSecondary svg,
+.icon.primaryStrongSecondary svg * {
+  fill: var(--Theme-Primary-Strong-Button-Secondary-On-Fill-Normal);
+}
+
+.icon.primaryStrongSecondary:active svg,
+.icon.primaryStrongSecondary:focus svg,
+.icon.primaryStrongSecondary:hover svg,
+.icon.primaryStrongSecondary:active svg *,
+.icon.primaryStrongSecondary:focus svg *,
+.icon.primaryStrongSecondary:hover svg * {
+  fill: var(--Theme-Primary-Strong-Button-Secondary-On-Fill-Hover);
+}
+
+.icon.primaryStrongSecondary:disabled svg,
+.icon.primaryStrongSecondary:disabled svg * {
+  fill: var(--Theme-Primary-Strong-Button-Secondary-On-Fill-Disabled);
+}
+
 .primaryDarkPrimary {
   background-color: var(--Theme-Primary-Dark-Button-Primary-Fill-Normal);
   color: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Normal);
@@ -205,6 +319,25 @@ a.default {
   color: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Disabled);
 }
 
+.icon.primaryDarkPrimary svg,
+.icon.primaryDarkPrimary svg * {
+  fill: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Normal);
+}
+
+.icon.primaryDarkPrimary:active svg,
+.icon.primaryDarkPrimary:focus svg,
+.icon.primaryDarkPrimary:hover svg,
+.icon.primaryDarkPrimary:active svg *,
+.icon.primaryDarkPrimary:focus svg *,
+.icon.primaryDarkPrimary:hover svg * {
+  fill: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Hover);
+}
+
+.icon.primaryDarkPrimary:disabled svg,
+.icon.primaryDarkPrimary:disabled svg * {
+  fill: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Disabled);
+}
+
 .primaryDarkSecondary {
   background-color: var(--Theme-Primary-Dark-Button-Secondary-Fill-Normal);
   border-color: var(--Theme-Primary-Dark-Button-Secondary-Border-Normal);
@@ -225,6 +358,25 @@ a.default {
   color: var(--Theme-Primary-Dark-Button-Secondary-On-Fill-Disabled);
 }
 
+.icon.primaryDarkSecondary svg,
+.icon.primaryDarkSecondary svg * {
+  fill: var(--Theme-Primary-Dark-Button-Secondary-On-Fill-Normal);
+}
+
+.icon.primaryDarkSecondary:active svg,
+.icon.primaryDarkSecondary:focus svg,
+.icon.primaryDarkSecondary:hover svg,
+.icon.primaryDarkSecondary:active svg *,
+.icon.primaryDarkSecondary:focus svg *,
+.icon.primaryDarkSecondary:hover svg * {
+  fill: var(--Theme-Primary-Dark-Button-Secondary-On-Fill-Hover);
+}
+
+.icon.primaryDarkSecondary:disabled svg,
+.icon.primaryDarkSecondary:disabled svg * {
+  fill: var(--Theme-Primary-Dark-Button-Secondary-On-Fill-Disabled);
+}
+
 .primaryLightPrimary {
   background-color: var(--Theme-Primary-Light-Button-Primary-Fill-Normal);
   color: var(--Theme-Primary-Light-Button-Primary-On-Fill-Normal);
@@ -242,6 +394,25 @@ a.default {
   color: var(--Theme-Primary-Light-Button-Primary-On-Fill-Disabled);
 }
 
+.icon.primaryLightPrimary svg,
+.icon.primaryLightPrimary svg * {
+  fill: var(--Theme-Primary-Light-Button-Primary-On-Fill-Normal);
+}
+
+.icon.primaryLightPrimary:active svg,
+.icon.primaryLightPrimary:focus svg,
+.icon.primaryLightPrimary:hover svg,
+.icon.primaryLightPrimary:active svg *,
+.icon.primaryLightPrimary:focus svg *,
+.icon.primaryLightPrimary:hover svg * {
+  fill: var(--Theme-Primary-Light-Button-Primary-On-Fill-Hover);
+}
+
+.icon.primaryLightPrimary:disabled svg,
+.icon.primaryLightPrimary:disabled svg * {
+  fill: var(--Theme-Primary-Light-Button-Primary-On-Fill-Disabled);
+}
+
 .primaryLightSecondary {
   background-color: var(--Theme-Primary-Light-Button-Secondary-Fill-Normal);
   border-color: var(--Theme-Primary-Light-Button-Secondary-Border-Normal);
@@ -262,6 +433,25 @@ a.default {
   color: var(--Theme-Primary-Light-Button-Secondary-On-Fill-Disabled);
 }
 
+.icon.primaryLightSecondary svg,
+.icon.primaryLightSecondary svg * {
+  fill: var(--Theme-Primary-Light-Button-Secondary-On-Fill-Normal);
+}
+
+.icon.primaryLightSecondary:active svg,
+.icon.primaryLightSecondary:focus svg,
+.icon.primaryLightSecondary:hover svg,
+.icon.primaryLightSecondary:active svg *,
+.icon.primaryLightSecondary:focus svg *,
+.icon.primaryLightSecondary:hover svg * {
+  fill: var(--Theme-Primary-Light-Button-Secondary-On-Fill-Hover);
+}
+
+.icon.primaryLightSecondary:disabled svg,
+.icon.primaryLightSecondary:disabled svg * {
+  fill: var(--Theme-Primary-Light-Button-Secondary-On-Fill-Disabled);
+}
+
 .secondaryDarkPrimary {
   background-color: var(--Theme-Secondary-Dark-Button-Primary-Fill-Normal);
   color: var(--Theme-Secondary-Dark-Button-Primary-On-Fill-Normal);
@@ -279,6 +469,25 @@ a.default {
   color: var(--Theme-Secondary-Dark-Button-Primary-On-Fill-Disabled);
 }
 
+.icon.secondaryDarkPrimary svg,
+.icon.secondaryDarkPrimary svg * {
+  fill: var(--Theme-Secondary-Dark-Button-Primary-On-Fill-Normal);
+}
+
+.icon.secondaryDarkPrimary:active svg,
+.icon.secondaryDarkPrimary:focus svg,
+.icon.secondaryDarkPrimary:hover svg,
+.icon.secondaryDarkPrimary:active svg *,
+.icon.secondaryDarkPrimary:focus svg *,
+.icon.secondaryDarkPrimary:hover svg * {
+  fill: var(--Theme-Secondary-Dark-Button-Primary-On-Fill-Hover);
+}
+
+.icon.secondaryDarkPrimary:disabled svg,
+.icon.secondaryDarkPrimary:disabled svg * {
+  fill: var(--Theme-Secondary-Dark-Button-Primary-On-Fill-Disabled);
+}
+
 .secondaryDarkSecondary {
   background-color: var(--Theme-Secondary-Dark-Button-Secondary-Fill-Normal);
   border-color: var(--Theme-Secondary-Dark-Button-Secondary-Border-Normal);
@@ -299,6 +508,25 @@ a.default {
   color: var(--Theme-Secondary-Dark-Button-Secondary-On-Fill-Disabled);
 }
 
+.icon.secondaryDarkSecondary svg,
+.icon.secondaryDarkSecondary svg * {
+  fill: var(--Theme-Secondary-Dark-Button-Secondary-On-Fill-Normal);
+}
+
+.icon.secondaryDarkSecondary:active svg,
+.icon.secondaryDarkSecondary:focus svg,
+.icon.secondaryDarkSecondary:hover svg,
+.icon.secondaryDarkSecondary:active svg *,
+.icon.secondaryDarkSecondary:focus svg *,
+.icon.secondaryDarkSecondary:hover svg * {
+  fill: var(--Theme-Secondary-Dark-Button-Secondary-On-Fill-Hover);
+}
+
+.icon.secondaryDarkSecondary:disabled svg,
+.icon.secondaryDarkSecondary:disabled svg * {
+  fill: var(--Theme-Secondary-Dark-Button-Secondary-On-Fill-Disabled);
+}
+
 .secondaryLightPrimary {
   background-color: var(--Theme-Secondary-Light-Button-Primary-Fill-Normal);
   color: var(--Theme-Secondary-Light-Button-Primary-On-Fill-Normal);
@@ -316,6 +544,25 @@ a.default {
   color: var(--Theme-Secondary-Light-Button-Primary-On-Fill-Disabled);
 }
 
+.icon.secondaryLightPrimary svg,
+.icon.secondaryLightPrimary svg * {
+  fill: var(--Theme-Secondary-Light-Button-Primary-On-Fill-Normal);
+}
+
+.icon.secondaryLightPrimary:active svg,
+.icon.secondaryLightPrimary:focus svg,
+.icon.secondaryLightPrimary:hover svg,
+.icon.secondaryLightPrimary:active svg *,
+.icon.secondaryLightPrimary:focus svg *,
+.icon.secondaryLightPrimary:hover svg * {
+  fill: var(--Theme-Secondary-Light-Button-Primary-On-Fill-Hover);
+}
+
+.icon.secondaryLightPrimary:disabled svg,
+.icon.secondaryLightPrimary:disabled svg * {
+  fill: var(--Theme-Secondary-Light-Button-Primary-On-Fill-Disabled);
+}
+
 .secondaryLightSecondary {
   background-color: var(--Theme-Secondary-Light-Button-Secondary-Fill-Normal);
   border-color: var(--Theme-Secondary-Light-Button-Secondary-Border-Normal);
@@ -336,6 +583,25 @@ a.default {
   color: var(--Theme-Secondary-Light-Button-Secondary-On-Fill-Disabled);
 }
 
+.icon.secondaryLightSecondary svg,
+.icon.secondaryLightSecondary svg * {
+  fill: var(--Theme-Secondary-Light-Button-Secondary-On-Fill-Normal);
+}
+
+.icon.secondaryLightSecondary:active svg,
+.icon.secondaryLightSecondary:focus svg,
+.icon.secondaryLightSecondary:hover svg,
+.icon.secondaryLightSecondary:active svg *,
+.icon.secondaryLightSecondary:focus svg *,
+.icon.secondaryLightSecondary:hover svg * {
+  fill: var(--Theme-Secondary-Light-Button-Secondary-On-Fill-Hover);
+}
+
+.icon.secondaryLightSecondary:disabled svg,
+.icon.secondaryLightSecondary:disabled svg * {
+  fill: var(--Theme-Secondary-Light-Button-Secondary-On-Fill-Disabled);
+}
+
 .tertiaryDarkPrimary {
   background-color: var(--Theme-Tertiary-Dark-Button-Primary-Fill-Normal);
   color: var(--Theme-Tertiary-Dark-Button-Primary-On-Fill-Normal);
@@ -353,6 +619,25 @@ a.default {
   color: var(--Theme-Tertiary-Dark-Button-Primary-On-Fill-Disabled);
 }
 
+.icon.tertiaryDarkPrimary svg,
+.icon.tertiaryDarkPrimary svg * {
+  fill: var(--Theme-Tertiary-Dark-Button-Primary-On-Fill-Normal);
+}
+
+.icon.tertiaryDarkPrimary:active svg,
+.icon.tertiaryDarkPrimary:focus svg,
+.icon.tertiaryDarkPrimary:hover svg,
+.icon.tertiaryDarkPrimary:active svg *,
+.icon.tertiaryDarkPrimary:focus svg *,
+.icon.tertiaryDarkPrimary:hover svg * {
+  fill: var(--Theme-Tertiary-Dark-Button-Primary-On-Fill-Hover);
+}
+
+.icon.tertiaryDarkPrimary:disabled svg,
+.icon.tertiaryDarkPrimary:disabled svg * {
+  fill: var(--Theme-Tertiary-Dark-Button-Primary-On-Fill-Disabled);
+}
+
 .tertiaryDarkSecondary {
   background-color: var(--Theme-Tertiary-Dark-Button-Secondary-Fill-Normal);
   border-color: var(--Theme-Tertiary-Dark-Button-Secondary-Border-Normal);
@@ -373,6 +658,25 @@ a.default {
   color: var(--Theme-Tertiary-Dark-Button-Secondary-On-Fill-Disabled);
 }
 
+.icon.tertiaryDarkSecondary svg,
+.icon.tertiaryDarkSecondary svg * {
+  fill: var(--Theme-Tertiary-Dark-Button-Secondary-On-Fill-Normal);
+}
+
+.icon.tertiaryDarkSecondary:active svg,
+.icon.tertiaryDarkSecondary:focus svg,
+.icon.tertiaryDarkSecondary:hover svg,
+.icon.tertiaryDarkSecondary:active svg *,
+.icon.tertiaryDarkSecondary:focus svg *,
+.icon.tertiaryDarkSecondary:hover svg * {
+  fill: var(--Theme-Tertiary-Dark-Button-Secondary-On-Fill-Hover);
+}
+
+.icon.tertiaryDarkSecondary:disabled svg,
+.icon.tertiaryDarkSecondary:disabled svg * {
+  fill: var(--Theme-Tertiary-Dark-Button-Secondary-On-Fill-Disabled);
+}
+
 .tertiaryLightPrimary {
   background-color: var(--Theme-Tertiary-Light-Button-Primary-Fill-Normal);
   color: var(--Theme-Tertiary-Light-Button-Primary-On-Fill-Normal);
@@ -390,6 +694,25 @@ a.default {
   color: var(--Theme-Tertiary-Light-Button-Primary-On-Fill-Disabled);
 }
 
+.icon.tertiaryLightPrimary svg,
+.icon.tertiaryLightPrimary svg * {
+  fill: var(--Theme-Tertiary-Light-Button-Primary-On-Fill-Normal);
+}
+
+.icon.tertiaryLightPrimary:active svg,
+.icon.tertiaryLightPrimary:focus svg,
+.icon.tertiaryLightPrimary:hover svg,
+.icon.tertiaryLightPrimary:active svg *,
+.icon.tertiaryLightPrimary:focus svg *,
+.icon.tertiaryLightPrimary:hover svg * {
+  fill: var(--Theme-Tertiary-Light-Button-Primary-On-Fill-Hover);
+}
+
+.icon.tertiaryLightPrimary:disabled svg,
+.icon.tertiaryLightPrimary:disabled svg * {
+  fill: var(--Theme-Tertiary-Light-Button-Primary-On-Fill-Disabled);
+}
+
 .tertiaryLightSecondary {
   background-color: var(--Tertiary-Light-Button-Secondary-Fill-Normal);
   border-color: var(--Tertiary-Light-Button-Secondary-Border-Normal);
@@ -409,3 +732,22 @@ a.default {
   border-color: var(--Tertiary-Light-Button-Secondary-Border-Disabled);
   color: var(--Tertiary-Light-Button-Secondary-On-Fill-Disabled);
 }
+
+.icon.tertiaryLightSecondary svg,
+.icon.tertiaryLightSecondary svg * {
+  fill: var(--Tertiary-Light-Button-Secondary-On-Fill-Normal);
+}
+
+.icon.tertiaryLightSecondary:active svg,
+.icon.tertiaryLightSecondary:focus svg,
+.icon.tertiaryLightSecondary:hover svg,
+.icon.tertiaryLightSecondary:active svg *,
+.icon.tertiaryLightSecondary:focus svg *,
+.icon.tertiaryLightSecondary:hover svg * {
+  fill: var(--Tertiary-Light-Button-Secondary-On-Fill-Hover);
+}
+
+.icon.tertiaryLightSecondary:disabled svg,
+.icon.tertiaryLightSecondary:disabled svg * {
+  fill: var(--Tertiary-Light-Button-Secondary-On-Fill-Disabled);
+}