scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(SW-243): add breakpoints

Browse Source
This commit is contained in:
Fredrik Thorsson
2024-08-19 16:49:28 +02:00
parent bdafef492f
commit a689f12965
7 changed files with 84 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
app/[lang]/(live)/(public)/hotelreservation/booking-confirmation/page.module.css
View File

@@ -1,30 +1,21 @@
.main { .main {
display: flex; display: flex;
flex-direction: column; justify-content: center;
align-items: center; padding: var(--Spacing-x4);
gap: var(--Spacing-x4);
padding: var(--Spacing-x4) var(--Spacing-x4);
background-color: var(--Scandic-Brand-Warm-White); background-color: var(--Scandic-Brand-Warm-White);
min-height: 100dvh; min-height: 100dvh;
} }
.section { .section {
display: flex;
flex-direction: column;
gap: var(--Spacing-x3);
width: 100%;
max-width: 525px;
}
.buttons {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: var(--Spacing-x2); gap: var(--Spacing-x4);
}
.button {
width: 100%; width: 100%;
max-width: 240px; max-width: 365px;
justify-content: center; }
@media screen and (min-width: 1367px) {
.section {
max-width: 525px;
}
} }

39
app/[lang]/(live)/(public)/hotelreservation/booking-confirmation/page.tsx
View File

@@ -1,9 +1,7 @@
import ConfirmationCard from "@/components/HotelReservation/BookingConfirmation/ConfirmationCard" import ConfirmationCard from "@/components/HotelReservation/BookingConfirmation/ConfirmationCard"
import ConfirmationHead from "@/components/HotelReservation/BookingConfirmation/ConfirmationHead"
import ConfirmationSummary from "@/components/HotelReservation/BookingConfirmation/ConfirmationSummary" import ConfirmationSummary from "@/components/HotelReservation/BookingConfirmation/ConfirmationSummary"
import ConfirmationTimes from "@/components/HotelReservation/BookingConfirmation/ConfirmationTimes" import ConfirmationTimes from "@/components/HotelReservation/BookingConfirmation/ConfirmationTimes"
import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"
import styles from "./page.module.css" import styles from "./page.module.css"
@@ -11,38 +9,11 @@ export default function BookingConfirmationPage() {
return ( return (
<main className={styles.main}> <main className={styles.main}>
<section className={styles.section}> <section className={styles.section}>
<div> <ConfirmationHead />
<Title textAlign="center">Thank you</Title> <ConfirmationCard />
<Title textAlign="center" as="h3"> <ConfirmationTimes />
We look forward to your visit! <ConfirmationSummary />
</Title>
</div>
<Body color="burgundy" textAlign="center">
We have sent a detailed confirmation of your booking to your email:
lisa.andersson@gmail.com.
</Body>
<div className={styles.buttons}>
<Button
size="small"
theme="base"
intent="secondary"
className={styles.button}
>
Download the Scandic app
</Button>
<Button
size="small"
theme="base"
intent="secondary"
className={styles.button}
>
View your booking
</Button>
</div>
</section> </section>
<ConfirmationCard />
<ConfirmationTimes />
<ConfirmationSummary />
</main> </main>
) )
} }

1
components/HotelReservation/BookingConfirmation/ConfirmationCard/confirmationCard.module.css
View File

@@ -1,7 +1,6 @@
.test { .test {
display: flex; display: flex;
width: 100%; width: 100%;
max-width: 365px;
background-color: var(--Base-Surface-Primary-light-Normal); background-color: var(--Base-Surface-Primary-light-Normal);
border-radius: var(--Corner-radius-Small); border-radius: var(--Corner-radius-Small);
overflow: hidden; overflow: hidden;

26
components/HotelReservation/BookingConfirmation/ConfirmationHead/confirmationHead.module.css Normal file
View File

@@ -0,0 +1,26 @@
.section {
display: flex;
flex-direction: column;
gap: var(--Spacing-x3);
width: 100%;
}
.buttons {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--Spacing-x2);
}
.button {
width: 100%;
max-width: 240px;
justify-content: center;
}
@media screen and (min-width: 1367px) {
.buttons {
flex-direction: row;
justify-content: space-around;
}
}

44
components/HotelReservation/BookingConfirmation/ConfirmationHead/index.tsx Normal file
View File

@@ -0,0 +1,44 @@
import React from "react"
import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"
import styles from "./confirmationHead.module.css"
export default function ConfirmationHead() {
return (
<section className={styles.section}>
<div>
<Title textAlign="center" as="h2">
Thank you
</Title>
<Title textAlign="center" as="h3">
We look forward to your visit!
</Title>
</div>
<Body color="burgundy" textAlign="center">
We have sent a detailed confirmation of your booking to your email:
lisa.andersson@gmail.com.
</Body>
<div className={styles.buttons}>
<Button
size="small"
theme="base"
intent="secondary"
className={styles.button}
>
Download the Scandic app
</Button>
<Button
size="small"
theme="base"
intent="secondary"
className={styles.button}
>
View your booking
</Button>
</div>
</section>
)
}

1
components/HotelReservation/BookingConfirmation/ConfirmationSummary/confirmationSummary.module.css
View File

@@ -1,6 +1,5 @@
.section { .section {
width: 100%; width: 100%;
max-width: 365px;
} }
.summary { .summary {

1
components/HotelReservation/BookingConfirmation/ConfirmationTimes/confirmationTimes.module.css
View File

@@ -5,7 +5,6 @@
border-radius: var(--Corner-radius-Small); border-radius: var(--Corner-radius-Small);
background-color: var(--Base-Surface-Primary-dark-Normal); background-color: var(--Base-Surface-Primary-dark-Normal);
width: 100%; width: 100%;
max-width: 365px;
} }
.breakfast, .breakfast,