Merged in feat/ancillaries-ui-fixes (pull request #3383)

feat: update ancillaries flow ui

* feat: update ancillaries flow ui


Approved-by: Matilda Haneling

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Form/form.module.css

@@ -12,11 +12,12 @@
 
   min-height: 0;
   overflow-y: auto;
-  padding: var(--Space-x1) var(--Space-x2) var(--Space-x2);
+  padding: var(--Space-x2) var(--Space-x2) var(--Space-x3) var(--Space-x2);
+  border-top: 1px solid var(--Border-Default);
 }
 
 @media screen and (min-width: 768px) {
   .modalScrollable {
-    padding: var(--Space-x1) var(--Space-x3) var(--Space-x3);
+    padding: var(--Space-x3);
   }
 }

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Summary/index.tsx

@@ -48,7 +48,7 @@ export default function Summary({ onSubmit }: { onSubmit: () => void }) {
 
   const {
     trigger,
-    formState: { isSubmitting, errors },
+    formState: { isSubmitting },
   } = useFormContext()
 
   const quantity = useWatch({ name: "quantity" }) as number
@@ -222,7 +222,7 @@ export default function Summary({ onSubmit }: { onSubmit: () => void }) {
               isDisabled={isSubmitting}
               isPending={isSubmitting}
               onPress={handleNextStep}
-              variant={isSingleItem || isConfirmation ? "Primary" : "Secondary"}
+              variant="Primary"
             >
               {buttonLabel()}
             </Button>

apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/index.tsx

@@ -17,6 +17,7 @@ import Packages from "./Packages"
 import styles from "./room.module.css"
 
 import type { SafeUser } from "@/types/user"
+import { cx } from "class-variance-authority"
 
 interface RoomProps {
   user: SafeUser
@@ -56,7 +57,9 @@ export default function SingleRoom({ user }: RoomProps) {
           <Header user={user} />
           <div className={styles.booking}>
             <div
-              className={`${styles.content} ${isCancelled ? styles.cancelled : ""}`}
+              className={cx(styles.content, {
+                [styles.cancelled]: isCancelled,
+              })}
             >
               <Packages />
               <Img />