feat(SW-350): Fix PR comments

app/[lang]/(live)/@bookingwidget/page.tsx

@@ -13,5 +13,5 @@ export default async function BookingWidgetPage() {
     return null
   }
 
-  return <BookingWidget type="full" />
+  return <BookingWidget />
 }

app/[lang]/(live)/layout.tsx

@@ -2,7 +2,6 @@ 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"

app/[lang]/(live-current)/layout.tsx

@@ -65,7 +65,7 @@ export default async function RootLayout({
         <SkipToMainContent />
         <ServerIntlProvider intl={{ defaultLocale, locale, messages }}>
           {header}
-          <BookingWidget type="full" />
+          <BookingWidget />
           {children}
           <Footer />
           <TokenRefresher />

components/BookingWidget/bookingWidget.module.css

@@ -42,7 +42,7 @@
     box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.05);
     position: sticky;
     top: 0;
-    z-index: 1;
+    z-index: 10000;
     background-color: var(--Base-Surface-Primary-light-Normal);
   }
 

components/DatePicker/Screen/Desktop.tsx

@@ -1,5 +1,5 @@
 "use client"
-import React from "react"
+
 import { DayPicker } from "react-day-picker"
 import { useIntl } from "react-intl"
 

components/Forms/BookingWidget/FormContent/Voucher/voucher.module.css

@@ -1,6 +1,3 @@
-.vouchers {
-  display: block;
-}
 .options {
   display: flex;
   flex-direction: column;
@@ -16,7 +13,7 @@
 }
 .vouchers {
   width: 100%;
-
+  display: block;
   padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
   border-radius: var(--Corner-radius-Small);
 }
@@ -27,8 +24,8 @@
 }
 
 .checkbox {
-  width: var(--Spacing-x3);
+  width: 24px;
-  height: var(--Spacing-x3);
+  height: 24px;
 }
 
 .checkboxVoucher {

components/Forms/BookingWidget/FormContent/formContent.module.css

@@ -8,8 +8,8 @@
 }
 
 .checkbox {
-  width: var(--Spacing-x3);
+  width: 24px;
-  height: var(--Spacing-x3);
+  height: 24px;
 }
 .icon,
 .voucherRow {
@@ -71,7 +71,7 @@
 
   .inputContainer input[type="text"] {
     border: none;
-    height: var(--Spacing-x3);
+    height: 24px;
   }
 
   .rooms,
@@ -104,8 +104,8 @@
   }
   .input .buttonContainer .button {
     padding: var(--Spacing-x1);
-    width: var(--Spacing-x6);
+    width: 48px;
-    height: var(--Spacing-x6);
+    height: 48px;
   }
   .buttonText {
     display: none;

components/Forms/BookingWidget/FormContent/index.tsx

@@ -1,5 +1,4 @@
 "use client"
-import React from "react"
 import { useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 

components/Forms/BookingWidget/variants.ts

@@ -10,6 +10,6 @@ export const bookingWidgetVariants = cva(styles.section, {
     },
   },
   defaultVariants: {
-    type: "default",
+    type: "full",
   },
 })

components/TempDesignSystem/TeaserCard/index.tsx

@@ -1,5 +1,3 @@
-import React from "react"
-
 import { ChevronRightIcon } from "@/components/Icons"
 import Image from "@/components/Image"
 import Button from "@/components/TempDesignSystem/Button"

components/TempDesignSystem/Tooltip/index.tsx

@@ -1,3 +1,5 @@
+import { PropsWithChildren } from "react"
+
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import { tooltipVariants } from "./variants"
@@ -12,7 +14,7 @@ export function Tooltip<P extends TooltipPosition>({
   position,
   arrow,
   children,
-}: TooltipProps<P>) {
+}: PropsWithChildren<TooltipProps<P>>) {
   const className = tooltipVariants({ position, arrow })
   return (
     <div className={styles.tooltipContainer} role="tooltip" aria-label={text}>

types/components/tooltip.ts

@@ -18,5 +18,4 @@ export interface TooltipProps<P extends TooltipPosition = TooltipPosition> {
   text?: string
   position: P
   arrow: ValidArrow<P>
-  children: React.ReactNode
 }