From bb0f35fb98746ae70cc82a4f0d3e7162f3642124 Mon Sep 17 00:00:00 2001
From: Hrishikesh Vaipurkar <hrishikesh.vaipurkar@scandichotels.com>
Date: Wed, 5 Feb 2025 16:11:34 +0100
Subject: [PATCH] feat: SW-1422 Updated UI

---
 .../FormContent/BookingCode/booking-code.module.css |  1 +
 .../BookingWidget/FormContent/BookingCode/index.tsx |  8 ++++++--
 .../BookingWidget/FormContent/Voucher/index.tsx     | 13 +++----------
 3 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/components/Forms/BookingWidget/FormContent/BookingCode/booking-code.module.css b/components/Forms/BookingWidget/FormContent/BookingCode/booking-code.module.css
index 212b7ad7a..253d67c5f 100644
--- a/components/Forms/BookingWidget/FormContent/BookingCode/booking-code.module.css
+++ b/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));
   }
 }
diff --git a/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx b/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx
index 33140f23d..280b7e75d 100644
--- a/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx
+++ b/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 />
diff --git a/components/Forms/BookingWidget/FormContent/Voucher/index.tsx b/components/Forms/BookingWidget/FormContent/Voucher/index.tsx
index fbbe95833..7eeb37e18 100644
--- a/components/Forms/BookingWidget/FormContent/Voucher/index.tsx
+++ b/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>