feat:SW-1422 Updated Tablet mode

components/Forms/BookingWidget/FormContent/Voucher/index.tsx

@@ -14,7 +14,6 @@ import styles from "./voucher.module.css"
 export default function Voucher() {
   const intl = useIntl()
 
-  const useVouchers = intl.formatMessage({ id: "Use code/voucher" })
   const bonus = intl.formatMessage({ id: "Use bonus cheque" })
   const reward = intl.formatMessage({ id: "Book reward night" })
 
@@ -32,14 +31,6 @@ export default function Voucher() {
         <BookingCode />
       </div>
       <div className={styles.options}>
-        <div className={`${styles.option} ${styles.checkboxVoucher}`}>
-          <Checkbox name="useVouchers" registerOptions={{ disabled: true }}>
-            <Caption color="disabled" asChild>
-              <span>{useVouchers}</span>
-            </Caption>
-          </Checkbox>
-          {/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
-        </div>
         <div className={styles.option}>
           <Tooltip
             heading={disabledBookingOptionsHeader}
@@ -91,17 +82,16 @@ export function VoucherSkeleton() {
       <div className={styles.optionsContainer}>
         <div className={styles.vouchers}>
           <label>
-            <Caption color="disabled" type="bold" asChild>
+            <Caption type="bold" asChild>
               <span>{vouchers}</span>
             </Caption>
-            {/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
           </label>
           <Input type="text" placeholder={addVouchers} disabled />
         </div>
         <div className={styles.options}>
           <div className={`${styles.option} ${styles.checkboxVoucher}`}>
-            <Checkbox name="useVouchers" registerOptions={{ disabled: true }}>
-              <Caption color="disabled" asChild>
+            <Checkbox name="useVouchers">
+              <Caption asChild>
                 <span>{useVouchers}</span>
               </Caption>
             </Checkbox>

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

@@ -28,10 +28,6 @@
   height: 24px;
 }
 
-.checkboxVoucher {
-  display: none;
-}
-
 @media screen and (max-width: 767px) {
   .vouchers {
     margin-bottom: var(--Spacing-x5);
@@ -39,9 +35,6 @@
 }
 
 @media screen and (min-width: 768px) {
-  .vouchers {
-    display: none;
-  }
   .options {
     flex-direction: row;
     gap: var(--Spacing-x4);
@@ -50,8 +43,15 @@
     margin-top: 0;
     gap: var(--Spacing-x-one-and-half);
   }
-  .checkboxVoucher {
-    display: flex;
+  .optionsContainer {
+    display: grid;
+    grid-template-columns: auto auto;
+    column-gap: var(--Spacing-x2);
+  }
+  .vouchers:hover,
+  .vouchers:focus-within,
+  .vouchers:has([data-focused="true"], [data-pressed="true"]) {
+    background-color: var(--Base-Surface-Primary-light-Hover-alt);
   }
 }
 
@@ -72,15 +72,7 @@
     max-width: 190px;
     gap: var(--Spacing-x-half);
   }
-  .vouchers:hover,
   .option:hover {
     cursor: not-allowed;
   }
-  .optionsContainer {
-    flex-direction: row;
-    align-items: center;
-  }
-  .checkboxVoucher {
-    display: none;
-  }
 }