From b9410327a43138998c1932a218d3dfe437d85c6b Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Wed, 2 Oct 2024 15:36:58 +0200
Subject: [PATCH] feat(SW-350): Update design for booking widget

---
 app/[lang]/(live)/@bookingwidget/page.tsx                     | 2 +-
 app/[lang]/(live)/layout.tsx                                  | 1 +
 app/[lang]/(live-current)/layout.tsx                          | 2 +-
 .../Forms/BookingWidget/FormContent/formContent.module.css    | 1 +
 components/Forms/BookingWidget/form.module.css                | 2 +-
 components/TempDesignSystem/Text/Caption/caption.module.css   | 4 ++++
 6 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/app/[lang]/(live)/@bookingwidget/page.tsx b/app/[lang]/(live)/@bookingwidget/page.tsx
index 13a414cba..b2dd7e1b6 100644
--- a/app/[lang]/(live)/@bookingwidget/page.tsx
+++ b/app/[lang]/(live)/@bookingwidget/page.tsx
@@ -13,5 +13,5 @@ export default async function BookingWidgetPage() {
     return null
   }
 
-  return <BookingWidget />
+  return <BookingWidget type="full" />
 }
diff --git a/app/[lang]/(live)/layout.tsx b/app/[lang]/(live)/layout.tsx
index 3704178c4..fffe0a0b0 100644
--- a/app/[lang]/(live)/layout.tsx
+++ b/app/[lang]/(live)/layout.tsx
@@ -2,6 +2,7 @@ import "@/app/globals.css"
 import "@scandic-hotels/design-system/style.css"
 
 import Script from "next/script"
+import React from "react"
 
 import { env } from "@/env/server"
 import TrpcProvider from "@/lib/trpc/Provider"
diff --git a/app/[lang]/(live-current)/layout.tsx b/app/[lang]/(live-current)/layout.tsx
index ec3be8b3c..ac6deaf17 100644
--- a/app/[lang]/(live-current)/layout.tsx
+++ b/app/[lang]/(live-current)/layout.tsx
@@ -65,7 +65,7 @@ export default async function RootLayout({
         <SkipToMainContent />
         <ServerIntlProvider intl={{ defaultLocale, locale, messages }}>
           {header}
-          <BookingWidget />
+          <BookingWidget type="full" />
           {children}
           <Footer />
           <TokenRefresher />
diff --git a/components/Forms/BookingWidget/FormContent/formContent.module.css b/components/Forms/BookingWidget/FormContent/formContent.module.css
index 4789fd6a6..9fa827979 100644
--- a/components/Forms/BookingWidget/FormContent/formContent.module.css
+++ b/components/Forms/BookingWidget/FormContent/formContent.module.css
@@ -75,6 +75,7 @@
   }
 
   .rooms,
+  .vouchers,
   .when {
     padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
     border-radius: var(--Corner-radius-Small);
diff --git a/components/Forms/BookingWidget/form.module.css b/components/Forms/BookingWidget/form.module.css
index 0c784b797..f0e4184d1 100644
--- a/components/Forms/BookingWidget/form.module.css
+++ b/components/Forms/BookingWidget/form.module.css
@@ -27,7 +27,7 @@
   }
 }
 
-@media screen and (min-width: 1367px) {
+@media screen and (min-width: 767px) {
   .section {
     padding: var(--Spacing-x1) var(--Spacing-x5);
   }
diff --git a/components/TempDesignSystem/Text/Caption/caption.module.css b/components/TempDesignSystem/Text/Caption/caption.module.css
index d8487f06c..e481d45cd 100644
--- a/components/TempDesignSystem/Text/Caption/caption.module.css
+++ b/components/TempDesignSystem/Text/Caption/caption.module.css
@@ -79,6 +79,10 @@ p.caption {
   color: var(--UI-Text-High-contrast);
 }
 
+.disabled {
+  color: var(--Base-Text-Disabled);
+}
+
 .center {
   text-align: center;
 }