feat: add mobile ui to calendar

components/Forms/BookingWidget/FormContent/index.tsx

@@ -19,8 +19,8 @@ export default function FormContent({
   const intl = useIntl()
   const selectedDate = useWatch({ name: "date" })
 
-  const rooms = intl.formatMessage({ id: "Rooms & Guests" })
-  const vouchers = intl.formatMessage({ id: "Booking codes and vouchers" })
+  const rooms = intl.formatMessage({ id: "Guests & Rooms" })
+  const vouchers = intl.formatMessage({ id: "Code / Voucher" })
   const bonus = intl.formatMessage({ id: "Use bonus cheque" })
   const reward = intl.formatMessage({ id: "Book reward night" })
 
@@ -47,20 +47,20 @@ export default function FormContent({
         <input type="text" placeholder={rooms} />
       </div>
       <div className={styles.vouchers}>
-        <Caption color="textMediumContrast" textTransform="bold">
+        <Caption color="uiTextMediumContrast" textTransform="bold">
           {vouchers}
         </Caption>
         <input type="text" placeholder={vouchers} />
       </div>
       <div className={styles.options}>
-        <div className={styles.option}>
+        <label className={styles.option}>
           <input type="checkbox" />
           <Caption color="textMediumContrast">{bonus}</Caption>
-        </div>
-        <div className={styles.option}>
+        </label>
+        <label className={styles.option}>
           <input type="checkbox" />
           <Caption color="textMediumContrast">{reward}</Caption>
-        </div>
+        </label>
       </div>
     </div>
   )