From 8c339fa5936b1db39cd1990413edcd52adb64583 Mon Sep 17 00:00:00 2001 From: Fredrik Thorsson Date: Tue, 13 Aug 2024 14:13:02 +0200 Subject: [PATCH] feat(SW-240): add basic styling --- .../hotelreservation/select-hotel/page.tsx | 7 +- .../BookingWidget/bookingWidget.module.css | 30 +++++++- components/BookingWidget/index.tsx | 71 +++++++++++++++++-- .../Text/Body/body.module.css | 2 +- i18n/dictionaries/da.json | 6 +- i18n/dictionaries/de.json | 6 +- i18n/dictionaries/en.json | 6 +- i18n/dictionaries/fi.json | 6 +- i18n/dictionaries/no.json | 6 +- i18n/dictionaries/sv.json | 6 +- 10 files changed, 125 insertions(+), 21 deletions(-) diff --git a/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx index c28f415bb..b75ba0aaf 100644 --- a/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx +++ b/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx @@ -40,12 +40,7 @@ export default async function SelectHotelPage({ zoomLevel={11} mapType="roadmap" /> - + {intl.formatMessage({ id: "Show map" })} diff --git a/components/BookingWidget/bookingWidget.module.css b/components/BookingWidget/bookingWidget.module.css index f642b37aa..dee9aff98 100644 --- a/components/BookingWidget/bookingWidget.module.css +++ b/components/BookingWidget/bookingWidget.module.css @@ -1,29 +1,55 @@ .container { border-top: 1px solid var(--Base-Border-Subtle); - /* display: none; */ } .form { display: flex; + justify-content: space-between; + max-width: 1432px; padding: var(--Spacing-x2) var(--Spacing-x5); } .input { display: flex; + gap: var(--Spacing-x2); width: 100%; max-width: 1250px; } +.button { + width: 118px; + justify-content: center; +} + +.bodyFontSize { + font-size: var(--typography-Caption-Bold-Desktop-fontSize); +} + .where { width: 100%; max-width: 280px; + height: 100%; + max-height: 46px; } -.when { +.when, +.rooms { width: 100%; max-width: 240px; } +.vouchers { + width: 100%; + max-width: 200px; +} + +.options { + display: flex; + flex-direction: column; + width: 100%; + max-width: 158px; +} + /** * Update the styles after mobile UX is ready */ diff --git a/components/BookingWidget/index.tsx b/components/BookingWidget/index.tsx index c8d60fe91..b51e5d51a 100644 --- a/components/BookingWidget/index.tsx +++ b/components/BookingWidget/index.tsx @@ -6,6 +6,7 @@ import { useIntl } from "react-intl" import { dt } from "@/lib/dt" import Button from "../TempDesignSystem/Button" +import Body from "../TempDesignSystem/Text/Body" import { bookingWidgetSchema } from "./schema" import styles from "./bookingWidget.module.css" @@ -13,7 +14,7 @@ import styles from "./bookingWidget.module.css" import { type BookingWidgetSchema } from "@/types/components/bookingWidget" export function BookingWidget() { - const { formatMessage } = useIntl() + const intl = useIntl() const methods = useForm({ defaultValues: { @@ -54,17 +55,75 @@ export function BookingWidget() {
- {formatMessage({ id: "Where to" })} + + {intl.formatMessage({ id: "Where to" })} + +
+
+ + {intl.formatMessage({ id: "When" })} +
-
{formatMessage({ id: "When" })}
- {formatMessage({ id: "Rooms & Guests" })} + + {intl.formatMessage({ id: "Rooms & Guests" })} +
- {formatMessage({ id: "Booking codes and vouchers" })} + + {intl.formatMessage({ id: "Booking codes and vouchers" })} + +
+
+
+ + {intl.formatMessage({ id: "Use bonus cheque" })} + +
+
+ + {intl.formatMessage({ id: "Book reward night" })} + +
- + diff --git a/components/TempDesignSystem/Text/Body/body.module.css b/components/TempDesignSystem/Text/Body/body.module.css index d25e80ea2..045e0886d 100644 --- a/components/TempDesignSystem/Text/Body/body.module.css +++ b/components/TempDesignSystem/Text/Body/body.module.css @@ -63,7 +63,7 @@ } .textMediumContrast { - color: var(--Base-Text-UI-Medium-contrast); + color: var(--UI-Text-Medium-contrast); } .white { diff --git a/i18n/dictionaries/da.json b/i18n/dictionaries/da.json index 0c767e51d..d61a32605 100644 --- a/i18n/dictionaries/da.json +++ b/i18n/dictionaries/da.json @@ -138,5 +138,9 @@ "Where to": "Hvorhen", "When": "Hvornår", "Rooms & Guests": "Værelser & gæster", - "Booking codes and vouchers": "Bestillingskoder og værdibeviser" + "Booking codes and vouchers": "Bestillingskoder og værdibeviser", + "Add code": "Tilføj kode", + "Use bonus cheque": "Brug bonuscheck", + "Book reward night": "Book belønningsaften", + "Find hotels": "Find hoteller" } diff --git a/i18n/dictionaries/de.json b/i18n/dictionaries/de.json index a29347278..6f3363fff 100644 --- a/i18n/dictionaries/de.json +++ b/i18n/dictionaries/de.json @@ -132,5 +132,9 @@ "Where to": "Wohin", "When": "Wann", "Rooms & Guests": "Zimmer & Gäste", - "Booking codes and vouchers": "Buchungscodes und Gutscheine" + "Booking codes and vouchers": "Buchungscodes und Gutscheine", + "Add code": "Code hinzufügen", + "Use bonus cheque": "Bonusscheck nutzen", + "Book reward night": "Bonusnacht buchen", + "Find hotels": "Hotels finden" } diff --git a/i18n/dictionaries/en.json b/i18n/dictionaries/en.json index 365535e30..28af28045 100644 --- a/i18n/dictionaries/en.json +++ b/i18n/dictionaries/en.json @@ -143,5 +143,9 @@ "Where to": "Where to", "When": "When", "Rooms & Guests": "Rooms & Guests", - "Booking codes and vouchers": "Booking codes and vouchers" + "Booking codes and vouchers": "Booking codes and vouchers", + "Add code": "Add code", + "Use bonus cheque": "Use bonus cheque", + "Book reward night": "Book reward night", + "Find hotels": "Find hotels" } diff --git a/i18n/dictionaries/fi.json b/i18n/dictionaries/fi.json index 5b516890b..3e84c0e6a 100644 --- a/i18n/dictionaries/fi.json +++ b/i18n/dictionaries/fi.json @@ -138,5 +138,9 @@ "Where to": "Minne", "When": "Kun", "Rooms & Guestss": "Huoneet & Vieraat", - "Booking codes and vouchers": "Varauskoodit ja kupongit" + "Booking codes and vouchers": "Varauskoodit ja kupongit", + "Add code": "Lisää koodi", + "Use bonus cheque": "Käytä bonussekkiä", + "Book reward night": "Kirjapalkinto-ilta", + "Find hotels": "Etsi hotelleja" } diff --git a/i18n/dictionaries/no.json b/i18n/dictionaries/no.json index 87993b450..d903be4f4 100644 --- a/i18n/dictionaries/no.json +++ b/i18n/dictionaries/no.json @@ -138,5 +138,9 @@ "Where to": "Hvor skal du", "When": "Når", "Rooms & Guests": "Rom og gjester", - "Booking codes and vouchers": "Bestillingskoder og kuponger" + "Booking codes and vouchers": "Bestillingskoder og kuponger", + "Add code": "Legg til kode", + "Use bonus cheque": "Bruk bonussjekk", + "Book reward night": "Bestill belønningskveld", + "Find hotels": "Finn hotell" } diff --git a/i18n/dictionaries/sv.json b/i18n/dictionaries/sv.json index 1641d8fb2..0f3a4e9e1 100644 --- a/i18n/dictionaries/sv.json +++ b/i18n/dictionaries/sv.json @@ -140,5 +140,9 @@ "Where to": "Vart", "When": "När", "Rooms & Guests": "Rum och gäster", - "Booking codes and vouchers": "Bokningskoder och kuponger" + "Booking codes and vouchers": "Bokningskoder och kuponger", + "Add code": "Add code", + "Use bonus cheque": "Use bonus cheque", + "Book reward night": "Book reward night", + "Find hotels": "Hitta hotell" }