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

feat(SW-243): implement mobile design

Browse Source
This commit is contained in:
Fredrik Thorsson
2024-08-19 14:37:17 +02:00
parent 8dae837ef2
commit bdafef492f
9 changed files with 257 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@@ -0,0 +1,48 @@
import ConfirmationCard from "@/components/HotelReservation/BookingConfirmation/ConfirmationCard"
import ConfirmationSummary from "@/components/HotelReservation/BookingConfirmation/ConfirmationSummary"
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"
export default function BookingConfirmationPage() {
return (
<main className={styles.main}>
<section className={styles.section}>
<div>
<Title textAlign="center">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>
<ConfirmationCard />
<ConfirmationTimes />
<ConfirmationSummary />
</main>
)
}