feat: SW-1422 Updated UI

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>