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 {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--Spacing-x4);
padding: var(--Spacing-x4) var(--Spacing-x4);
justify-content: center;
padding: 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 {
gap: var(--Spacing-x4);
width: 100%;
max-width: 240px;
justify-content: center;
max-width: 365px;
}
@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 ConfirmationHead from "@/components/HotelReservation/BookingConfirmation/ConfirmationHead"
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"
@@ -11,38 +9,11 @@ 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>
<ConfirmationHead />
<ConfirmationCard />
<ConfirmationTimes />
<ConfirmationSummary />
</section>
<ConfirmationCard />
<ConfirmationTimes />
<ConfirmationSummary />
</main>
)
}

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

@@ -1,7 +1,6 @@
.test {
display: flex;
width: 100%;
max-width: 365px;
background-color: var(--Base-Surface-Primary-light-Normal);
border-radius: var(--Corner-radius-Small);
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 {
width: 100%;
max-width: 365px;
}
.summary {

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

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