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 />

apps/scandic-web/providers/MyStay.tsx

@@ -1,4 +1,5 @@
 "use client"
+
 import { notFound } from "next/navigation"
 import { use, useRef } from "react"
 import { useIntl } from "react-intl"

packages/design-system/lib/components/IconButton/iconButton.module.css

@@ -231,7 +231,7 @@
   }
 
   &.emphasis {
-    color: inherit;
+    color: var(--Component-Button-Muted-On-fill-Default);
 
     &[data-disabled] {
       background-color: var(--Component-Button-Muted-Fill-Disabled-inverted);

packages/design-system/lib/components/Modal/index.tsx

@@ -11,7 +11,6 @@ import {
 } from 'react-aria-components'
 import { useIntl } from 'react-intl'
 
-
 import {
   type AnimationState,
   AnimationStateEnum,

packages/design-system/lib/components/Modal/modal.module.css

@@ -33,7 +33,7 @@
   display: flex;
   align-items: flex-start;
   position: relative;
-  padding: var(--Space-x2) var(--Space-x7) var(--Space-x2) var(--Space-x2);
+  padding: var(--Space-x2);
 }
 
 .content {
@@ -82,15 +82,10 @@
   }
 
   .header {
-    padding: var(--Space-x3) var(--Space-x7) var(--Space-x3) var(--Space-x3);
+    padding: var(--Space-x2) var(--Space-x2) var(--Space-x15) var(--Space-x3);
   }
 
   .contentWithoutActions {
     padding: 0 var(--Space-x3) var(--Space-x4);
   }
-
-  .close {
-    top: var(--Space-x2);
-    right: var(--Space-x2);
-  }
 }