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,