feat: SW-276 SW-565 Updated UI

components/GuestsRoomsPicker/GuestsRoomsPicker.tsx

@@ -4,6 +4,7 @@ import { useIntl } from "react-intl"
 import { guestsRoomsStore } from "@/stores/guests-rooms"
 
 import { guestRoomsSchema } from "../Forms/BookingWidget/schema"
+import { CloseLarge } from "../Icons"
 import Button from "../TempDesignSystem/Button"
 import Divider from "../TempDesignSystem/Divider"
 import Subtitle from "../TempDesignSystem/Text/Subtitle"
@@ -30,10 +31,15 @@ export default function GuestsRoomsPicker({
 
   return (
     <>
+      <header className={styles.header}>
+        <button type="button" className={styles.close} onClick={closePicker}>
+          <CloseLarge />
+        </button>
+      </header>
       {guestsData.map((room, index) => (
         <section className={styles.roomContainer} key={index}>
           <section className={styles.roomDetailsContainer}>
-            <Subtitle>
+            <Subtitle type="two" className={styles.roomHeading}>
               {roomLabel} {index + 1}
             </Subtitle>
             <AdultSelector roomIndex={index} />
@@ -45,7 +51,7 @@ export default function GuestsRoomsPicker({
               Remove Room
             </Button>
           ) : null} */}
-          <Divider />
+          <Divider color="primaryLightSubtle" />
         </section>
       ))}
       <footer className={styles.footer}>
@@ -55,7 +61,24 @@ export default function GuestsRoomsPicker({
             Add Room
           </Button>
         ) : null} */}
-        <Button onClick={closePicker} disabled={isInValid}>
+        <Button
+          onClick={closePicker}
+          disabled={isInValid}
+          className={styles.hideOnMobile}
+          intent="tertiary"
+          theme="base"
+          size="small"
+        >
+          {doneLabel}
+        </Button>
+        <Button
+          onClick={closePicker}
+          disabled={isInValid}
+          className={styles.hideOnDesktop}
+          intent="tertiary"
+          theme="base"
+          size="large"
+        >
           {doneLabel}
         </Button>
       </footer>