From 7ca366de57de2ac514d496d77cc69b3ccc890d45 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matilda=20Landstr=C3=B6m?= Date: Tue, 30 Dec 2025 09:55:46 +0000 Subject: [PATCH] Merged in feat/ancillaries-ui-fixes (pull request #3383) feat: update ancillaries flow ui * feat: update ancillaries flow ui Approved-by: Matilda Haneling --- .../Ancillaries/AddAncillaryFlow/Form/form.module.css | 5 +++-- .../Ancillaries/AddAncillaryFlow/Summary/index.tsx | 4 ++-- .../HotelReservation/MyStay/Rooms/SingleRoom/index.tsx | 5 ++++- apps/scandic-web/providers/MyStay.tsx | 1 + .../lib/components/IconButton/iconButton.module.css | 2 +- packages/design-system/lib/components/Modal/index.tsx | 1 - .../design-system/lib/components/Modal/modal.module.css | 9 ++------- 7 files changed, 13 insertions(+), 14 deletions(-) diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Form/form.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Form/form.module.css index 86fa6770c..6751e02dd 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Form/form.module.css +++ b/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); } } diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Summary/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Summary/index.tsx index d6532fcc2..43c0a4da8 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Summary/index.tsx +++ b/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()} diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/index.tsx index 0bc2fe0e3..336797344 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/index.tsx +++ b/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) {
diff --git a/apps/scandic-web/providers/MyStay.tsx b/apps/scandic-web/providers/MyStay.tsx index 476607508..0bb923739 100644 --- a/apps/scandic-web/providers/MyStay.tsx +++ b/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" diff --git a/packages/design-system/lib/components/IconButton/iconButton.module.css b/packages/design-system/lib/components/IconButton/iconButton.module.css index 30f31872f..0980eef05 100644 --- a/packages/design-system/lib/components/IconButton/iconButton.module.css +++ b/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); diff --git a/packages/design-system/lib/components/Modal/index.tsx b/packages/design-system/lib/components/Modal/index.tsx index 3c9387598..8c09c5f48 100644 --- a/packages/design-system/lib/components/Modal/index.tsx +++ b/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, diff --git a/packages/design-system/lib/components/Modal/modal.module.css b/packages/design-system/lib/components/Modal/modal.module.css index e97a3b546..b19cc29a4 100644 --- a/packages/design-system/lib/components/Modal/modal.module.css +++ b/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); - } }