diff --git a/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/emptyUpcomingStays.module.css b/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/emptyUpcomingStays.module.css
index 941f3be5e..acd456ee8 100644
--- a/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/emptyUpcomingStays.module.css
+++ b/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);
+}
diff --git a/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/index.tsx b/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/index.tsx
index a6799c7b9..9ffeeea60 100644
--- a/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/index.tsx
+++ b/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?" })}
-
+
+ {formatMessage({ id: "Get inspired" })}
+
+
)
}
diff --git a/components/TempDesignSystem/Button/button.module.css b/components/TempDesignSystem/Button/button.module.css
index 0de3dbc29..c4a6699a5 100644
--- a/components/TempDesignSystem/Button/button.module.css
+++ b/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);
+}