diff --git a/components/Forms/BookingWidget/FormContent/formContent.module.css b/components/Forms/BookingWidget/FormContent/formContent.module.css index 5bcbc15c8..1d7e96672 100644 --- a/components/Forms/BookingWidget/FormContent/formContent.module.css +++ b/components/Forms/BookingWidget/FormContent/formContent.module.css @@ -5,11 +5,6 @@ max-width: 1250px; } -.button { - width: 118px; - justify-content: center; -} - .bodyFontSize { font-size: var(--typography-Caption-Bold-Desktop-fontSize); } @@ -19,9 +14,6 @@ } .where { - display: flex; - gap: var(--Spacing-x-quarter); - flex-direction: column; width: 100%; max-width: 280px; } @@ -43,3 +35,7 @@ width: 100%; max-width: 158px; } + +.option { + display: flex; +} diff --git a/components/Forms/BookingWidget/FormContent/index.tsx b/components/Forms/BookingWidget/FormContent/index.tsx index 8ae011a21..74d8fc4ba 100644 --- a/components/Forms/BookingWidget/FormContent/index.tsx +++ b/components/Forms/BookingWidget/FormContent/index.tsx @@ -2,7 +2,6 @@ import { useIntl } from "react-intl" -import Button from "@/components/TempDesignSystem/Button" import Body from "@/components/TempDesignSystem/Text/Body" import styles from "./formContent.module.css" @@ -16,75 +15,51 @@ export default function FormContent() { const vouchers = intl.formatMessage({ id: "Booking codes and vouchers" }) const bonus = intl.formatMessage({ id: "Use bonus cheque" }) const reward = intl.formatMessage({ id: "Book reward night" }) - const search = intl.formatMessage({ id: "Find hotels" }) return ( - <> -
-
- - {where} - -
-
- - {when} - -
-
- - {rooms} - -
-
- - {vouchers} - -
-
-
- - {bonus} - -
-
- - {reward} - -
-
+
+
+ + {where} + +
- - + +
+
+
+ + + {bonus} + +
+
+ + + {reward} + +
+
+
) } diff --git a/components/Forms/BookingWidget/form.module.css b/components/Forms/BookingWidget/form.module.css index 67a91b3c0..962eb3fec 100644 --- a/components/Forms/BookingWidget/form.module.css +++ b/components/Forms/BookingWidget/form.module.css @@ -1,7 +1,18 @@ -.form { +.section { display: flex; - justify-content: space-between; - width: 100%; max-width: 1432px; padding: var(--Spacing-x2) var(--Spacing-x5); } + +.form { + width: 100%; +} + +.button { + width: 118px; + justify-content: center; +} + +.bodyFontSize { + font-size: var(--typography-Caption-Bold-Desktop-fontSize); +} diff --git a/components/Forms/BookingWidget/index.tsx b/components/Forms/BookingWidget/index.tsx index 6d1c43cd9..2e40003cb 100644 --- a/components/Forms/BookingWidget/index.tsx +++ b/components/Forms/BookingWidget/index.tsx @@ -1,9 +1,13 @@ "use client" import { zodResolver } from "@hookform/resolvers/zod" import { FormProvider, useForm } from "react-hook-form" +import { useIntl } from "react-intl" import { dt } from "@/lib/dt" +import Button from "@/components/TempDesignSystem/Button" +import Body from "@/components/TempDesignSystem/Text/Body" + import FormContent from "./FormContent" import { bookingWidgetSchema } from "./schema" @@ -14,6 +18,7 @@ import { BookingWidgetSchema } from "@/types/components/bookingWidget" const formId = "booking-widget" export default function Form() { + const intl = useIntl() const methods = useForm({ defaultValues: { search: { @@ -48,14 +53,31 @@ export default function Form() { } return ( -
- - - -
+
+
+ + + +
+ +
) }