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); +}