From a689f12965a362f7ef3b15e47b8c0d05c7aebcad Mon Sep 17 00:00:00 2001 From: Fredrik Thorsson Date: Mon, 19 Aug 2024 16:49:28 +0200 Subject: [PATCH] feat(SW-243): add breakpoints --- .../booking-confirmation/page.module.css | 27 ++++-------- .../booking-confirmation/page.tsx | 39 +++------------- .../confirmationCard.module.css | 1 - .../confirmationHead.module.css | 26 +++++++++++ .../ConfirmationHead/index.tsx | 44 +++++++++++++++++++ .../confirmationSummary.module.css | 1 - .../confirmationTimes.module.css | 1 - 7 files changed, 84 insertions(+), 55 deletions(-) create mode 100644 components/HotelReservation/BookingConfirmation/ConfirmationHead/confirmationHead.module.css create mode 100644 components/HotelReservation/BookingConfirmation/ConfirmationHead/index.tsx diff --git a/app/[lang]/(live)/(public)/hotelreservation/booking-confirmation/page.module.css b/app/[lang]/(live)/(public)/hotelreservation/booking-confirmation/page.module.css index cb5b6f63e..7d7358427 100644 --- a/app/[lang]/(live)/(public)/hotelreservation/booking-confirmation/page.module.css +++ b/app/[lang]/(live)/(public)/hotelreservation/booking-confirmation/page.module.css @@ -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; + } } diff --git a/app/[lang]/(live)/(public)/hotelreservation/booking-confirmation/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/booking-confirmation/page.tsx index 7d2000906..eee6e513d 100644 --- a/app/[lang]/(live)/(public)/hotelreservation/booking-confirmation/page.tsx +++ b/app/[lang]/(live)/(public)/hotelreservation/booking-confirmation/page.tsx @@ -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 (
-
- Thank you - - We look forward to your visit! - -
- - We have sent a detailed confirmation of your booking to your email: - lisa.andersson@gmail.com. - -
- - -
+ + + +
- - -
) } diff --git a/components/HotelReservation/BookingConfirmation/ConfirmationCard/confirmationCard.module.css b/components/HotelReservation/BookingConfirmation/ConfirmationCard/confirmationCard.module.css index cca9b44a4..f8cdd76d3 100644 --- a/components/HotelReservation/BookingConfirmation/ConfirmationCard/confirmationCard.module.css +++ b/components/HotelReservation/BookingConfirmation/ConfirmationCard/confirmationCard.module.css @@ -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; diff --git a/components/HotelReservation/BookingConfirmation/ConfirmationHead/confirmationHead.module.css b/components/HotelReservation/BookingConfirmation/ConfirmationHead/confirmationHead.module.css new file mode 100644 index 000000000..5b79c3796 --- /dev/null +++ b/components/HotelReservation/BookingConfirmation/ConfirmationHead/confirmationHead.module.css @@ -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; + } +} diff --git a/components/HotelReservation/BookingConfirmation/ConfirmationHead/index.tsx b/components/HotelReservation/BookingConfirmation/ConfirmationHead/index.tsx new file mode 100644 index 000000000..bc227c7cc --- /dev/null +++ b/components/HotelReservation/BookingConfirmation/ConfirmationHead/index.tsx @@ -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 ( +
+
+ + Thank you + + + We look forward to your visit! + +
+ + We have sent a detailed confirmation of your booking to your email: + lisa.andersson@gmail.com. + +
+ + +
+
+ ) +} diff --git a/components/HotelReservation/BookingConfirmation/ConfirmationSummary/confirmationSummary.module.css b/components/HotelReservation/BookingConfirmation/ConfirmationSummary/confirmationSummary.module.css index 929113390..447ff673e 100644 --- a/components/HotelReservation/BookingConfirmation/ConfirmationSummary/confirmationSummary.module.css +++ b/components/HotelReservation/BookingConfirmation/ConfirmationSummary/confirmationSummary.module.css @@ -1,6 +1,5 @@ .section { width: 100%; - max-width: 365px; } .summary { diff --git a/components/HotelReservation/BookingConfirmation/ConfirmationTimes/confirmationTimes.module.css b/components/HotelReservation/BookingConfirmation/ConfirmationTimes/confirmationTimes.module.css index 67b33ac0d..2b905c7c5 100644 --- a/components/HotelReservation/BookingConfirmation/ConfirmationTimes/confirmationTimes.module.css +++ b/components/HotelReservation/BookingConfirmation/ConfirmationTimes/confirmationTimes.module.css @@ -5,7 +5,6 @@ border-radius: var(--Corner-radius-Small); background-color: var(--Base-Surface-Primary-dark-Normal); width: 100%; - max-width: 365px; } .breakfast,