feat: SW-1422 Updated UI

components/Forms/BookingWidget/FormContent/BookingCode/booking-code.module.css

@@ -72,5 +72,6 @@
     padding: var(--Spacing-x2);
     width: 320px;
     top: calc(100% + 24px);
+    left: calc(0% - var(--Spacing-x-one-and-half));
   }
 }

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

@@ -115,7 +115,7 @@ export default function BookingCode() {
               },
             })}
           >
-            <Caption color="uiTextMediumContrast" type="bold" asChild>
+            <Caption color="red" type="bold" asChild>
               <span>{codeVoucher}</span>
             </Caption>
           </Checkbox>
@@ -153,7 +153,11 @@ export default function BookingCode() {
       onBlur={(e) => closeIfOutside(e.nativeEvent.relatedTarget as HTMLElement)}
     >
       <div className={styles.bookingCodeLabel}>
-        <Caption color="uiTextMediumContrast" type="bold" asChild>
+        <Caption
+          color={showRemember ? "uiTextActive" : "red"}
+          type="bold"
+          asChild
+        >
           <span>{codeVoucher}</span>
         </Caption>
         <CodeRulesModal />

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

@@ -2,12 +2,12 @@
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import { Tooltip } from "@/components/TempDesignSystem/Tooltip"
 
 import BookingCode from "../BookingCode"
-import Input from "../Input"
 
 import styles from "./voucher.module.css"
 
@@ -82,20 +82,13 @@ export function VoucherSkeleton() {
       <div className={styles.optionsContainer}>
         <div className={styles.vouchers}>
           <label>
-            <Caption type="bold" asChild>
+            <Caption type="bold" color="red" asChild>
               <span>{vouchers}</span>
             </Caption>
           </label>
-          <Input type="text" placeholder={addVouchers} disabled />
+          <SkeletonShimmer width={"100%"} />
         </div>
         <div className={styles.options}>
-          <div className={`${styles.option} ${styles.checkboxVoucher}`}>
-            <Checkbox name="useVouchers">
-              <Caption asChild>
-                <span>{useVouchers}</span>
-              </Caption>
-            </Checkbox>
-          </div>
           <div className={styles.option}>
             <Checkbox name="useBonus" registerOptions={{ disabled: true }}>
               <Caption color="disabled" asChild>