diff --git a/components/Forms/BookingWidget/FormContent/formContent.module.css b/components/Forms/BookingWidget/FormContent/formContent.module.css index d60dcb72b..0193a7ffb 100644 --- a/components/Forms/BookingWidget/FormContent/formContent.module.css +++ b/components/Forms/BookingWidget/FormContent/formContent.module.css @@ -8,33 +8,29 @@ padding: var(--Spacing-x1) var(--Spacing-x0); } -.fontSize { - font-size: var(--typography-Caption-Bold-Desktop-fontSize); -} - -.border { - border-right: 1px solid var(--Base-Surface-Subtle-Normal); -} - .where { width: 100%; max-width: 280px; + border-right: 1px solid var(--Base-Surface-Subtle-Normal); } .when, .rooms { width: 100%; max-width: 240px; + border-right: 1px solid var(--Base-Surface-Subtle-Normal); } .vouchers { width: 100%; max-width: 200px; + border-right: 1px solid var(--Base-Surface-Subtle-Normal); } .options { display: flex; flex-direction: column; + justify-content: center; width: 100%; max-width: 158px; } diff --git a/components/Forms/BookingWidget/FormContent/index.tsx b/components/Forms/BookingWidget/FormContent/index.tsx index 156578aae..c7347e03f 100644 --- a/components/Forms/BookingWidget/FormContent/index.tsx +++ b/components/Forms/BookingWidget/FormContent/index.tsx @@ -1,7 +1,7 @@ "use client" import { useIntl } from "react-intl" -import Body from "@/components/TempDesignSystem/Text/Body" +import Caption from "@/components/TempDesignSystem/Text/Caption" import styles from "./formContent.module.css" @@ -17,46 +17,36 @@ export default function FormContent() { return (
-
- - {where} - +
+ {where}
-
- +
+ {when} - +
-
- +
+ {rooms} - +
-
- +
+ {vouchers} - +
- - {bonus} - + {bonus}
- - {reward} - + {reward}
diff --git a/components/Forms/BookingWidget/form.module.css b/components/Forms/BookingWidget/form.module.css index 6a4248169..37e5471b6 100644 --- a/components/Forms/BookingWidget/form.module.css +++ b/components/Forms/BookingWidget/form.module.css @@ -1,5 +1,6 @@ .section { display: flex; + align-items: center; max-width: 1432px; padding: var(--Spacing-x2) var(--Spacing-x5); } @@ -12,7 +13,3 @@ width: 118px; justify-content: center; } - -.fontSize { - font-size: var(--typography-Caption-Bold-Desktop-fontSize); -} diff --git a/components/Forms/BookingWidget/index.tsx b/components/Forms/BookingWidget/index.tsx index 309f1931c..5df16e817 100644 --- a/components/Forms/BookingWidget/index.tsx +++ b/components/Forms/BookingWidget/index.tsx @@ -6,7 +6,7 @@ import { useIntl } from "react-intl" import { dt } from "@/lib/dt" import Button from "@/components/TempDesignSystem/Button" -import Body from "@/components/TempDesignSystem/Text/Body" +import Caption from "@/components/TempDesignSystem/Text/Caption" import FormContent from "./FormContent" import { bookingWidgetSchema } from "./schema" @@ -71,9 +71,9 @@ export default function Form() { intent="primary" className={styles.button} > - + {intl.formatMessage({ id: "Find hotels" })} - + ) diff --git a/components/TempDesignSystem/Text/Caption/caption.module.css b/components/TempDesignSystem/Text/Caption/caption.module.css index 536fed0a8..b27906dbf 100644 --- a/components/TempDesignSystem/Text/Caption/caption.module.css +++ b/components/TempDesignSystem/Text/Caption/caption.module.css @@ -41,6 +41,14 @@ color: var(--UI-Text-Medium-contrast); } +.red { + color: var(--Scandic-Brand-Scandic-Red); +} + +.white { + color: var(--UI-Opacity-White-100); +} + .center { text-align: center; } diff --git a/components/TempDesignSystem/Text/Caption/variants.ts b/components/TempDesignSystem/Text/Caption/variants.ts index a0188ffee..f1dbafa37 100644 --- a/components/TempDesignSystem/Text/Caption/variants.ts +++ b/components/TempDesignSystem/Text/Caption/variants.ts @@ -9,6 +9,8 @@ const config = { burgundy: styles.burgundy, pale: styles.pale, textMediumContrast: styles.textMediumContrast, + red: styles.red, + white: styles.white, }, textTransform: { bold: styles.bold,