From 5861f9a81145cc19403ff5bdf0c445867a94396e Mon Sep 17 00:00:00 2001 From: Christel Westerberg Date: Mon, 15 Dec 2025 07:35:27 +0000 Subject: [PATCH] Merged in fix/STAY-133-modal-header (pull request #3330) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit fix: adapt modal header to look like design * fix: adapt modal header to look like design Approved-by: Chuma Mcphoy (We Ahead) Approved-by: Matilda Landström --- .../MembershipOverviewCard/UsePoints/UsePoints.module.css | 4 ++-- .../SAS/TransferPoints/transferPoints.module.css | 2 +- .../AddAncillaryFlow/Modal/addAncillaryModal.module.css | 4 ++-- .../AllAncillariesModal/allAncillariesModal.module.css | 2 +- .../Actions/Upcoming/ManageStay/manageStay.module.css | 1 - .../GuaranteeInfoModal/guaranteeInfoModal.module.css | 1 - .../HotelReservation/MyStay/Rooms/MultiRoom/room.module.css | 1 - .../MyStay/Rooms/SingleRoom/Details/Terms/terms.module.css | 1 - .../DigitalTeamMemberCard/digitalTeamMemberCard.module.css | 1 - .../BookingConfirmation/Receipt/Room/room.module.css | 2 +- .../FormContent/RewardNight/reward-night.module.css | 1 - .../Payment/GuaranteeInfo/guaranteeInfo.module.css | 1 - .../components/EnterDetails/Summary/UI/Room/room.module.css | 2 +- .../RateSummary/MobileSummary/Room/room.module.css | 2 +- packages/design-system/lib/components/Modal/modal.module.css | 4 ++-- 15 files changed, 11 insertions(+), 18 deletions(-) diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Overview/MembershipOverviewCard/UsePoints/UsePoints.module.css b/apps/scandic-web/components/Blocks/DynamicContent/Overview/MembershipOverviewCard/UsePoints/UsePoints.module.css index 30814b085..5f186d25a 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Overview/MembershipOverviewCard/UsePoints/UsePoints.module.css +++ b/apps/scandic-web/components/Blocks/DynamicContent/Overview/MembershipOverviewCard/UsePoints/UsePoints.module.css @@ -3,7 +3,7 @@ flex-direction: column; gap: var(--Space-x2); width: 100%; - padding: var(--Space-x3) var(--Space-x2) var(--Space-x4) var(--Space-x2); + padding: var(--Space-x1) var(--Space-x2) var(--Space-x4) var(--Space-x2); } .header { @@ -29,7 +29,7 @@ @media screen and (min-width: 768px) { .modalContent { - padding: var(--Space-x3) var(--Space-x3) var(--Space-x3); + padding: var(--Space-x1) var(--Space-x3) var(--Space-x3); width: 560px; /* From figma design */ } diff --git a/apps/scandic-web/components/Blocks/DynamicContent/SAS/TransferPoints/transferPoints.module.css b/apps/scandic-web/components/Blocks/DynamicContent/SAS/TransferPoints/transferPoints.module.css index 7c66f8d84..af265066b 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/SAS/TransferPoints/transferPoints.module.css +++ b/apps/scandic-web/components/Blocks/DynamicContent/SAS/TransferPoints/transferPoints.module.css @@ -205,7 +205,7 @@ align-items: center; text-align: center; gap: var(--Space-x3); - padding-inline: var(--Space-x3); + padding-inline: var(--Space-x1) var(--Space-x3) var(--Space-x3); } .expiryText { diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Modal/addAncillaryModal.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Modal/addAncillaryModal.module.css index 3a28308c4..96da1ad1e 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Modal/addAncillaryModal.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Modal/addAncillaryModal.module.css @@ -11,7 +11,7 @@ display: flex; flex-direction: column; overflow-y: auto; - padding: var(--Space-x2); + padding: var(--Space-x1) var(--Space-x2) var(--Space-x2); } @media screen and (min-width: 768px) { @@ -20,6 +20,6 @@ } .modalScrollable { - padding: var(--Space-x3); + padding: var(--Space-x1) var(--Space-x3) var(--Space-x3); } } diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AllAncillariesModal/allAncillariesModal.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AllAncillariesModal/allAncillariesModal.module.css index 8e10ac2c2..28f7bc636 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AllAncillariesModal/allAncillariesModal.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AllAncillariesModal/allAncillariesModal.module.css @@ -3,7 +3,7 @@ flex-direction: column; max-height: 70dvh; width: 100%; - margin-top: var(--Space-x3); + margin-top: var(--Space-x1); } @media screen and (min-width: 768px) { diff --git a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/manageStay.module.css b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/manageStay.module.css index fc2bf1a0c..13e013b99 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/manageStay.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/manageStay.module.css @@ -1,5 +1,4 @@ .content { - padding-top: var(--Space-x1); display: grid; gap: var(--Space-x2); width: 100%; diff --git a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/GuaranteeInfo/GuaranteeInfoModal/guaranteeInfoModal.module.css b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/GuaranteeInfo/GuaranteeInfoModal/guaranteeInfoModal.module.css index fad2ef7cc..e27fa96e9 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/GuaranteeInfo/GuaranteeInfoModal/guaranteeInfoModal.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/GuaranteeInfo/GuaranteeInfoModal/guaranteeInfoModal.module.css @@ -2,7 +2,6 @@ display: grid; gap: var(--Space-x3); align-content: start; - margin-top: var(--Space-x2); } .infoButton { diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/room.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/room.module.css index d2741b9d5..f208b674f 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/room.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/room.module.css @@ -100,7 +100,6 @@ display: flex; flex-direction: column; gap: var(--Space-x1); - margin-top: var(--Space-x2); } .term { diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Terms/terms.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Terms/terms.module.css index 922811696..1b279bb3c 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Terms/terms.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Terms/terms.module.css @@ -2,7 +2,6 @@ display: flex; flex-direction: column; gap: var(--Space-x1); - margin-top: var(--Space-x3); } .term { diff --git a/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/digitalTeamMemberCard.module.css b/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/digitalTeamMemberCard.module.css index 7aeaa3238..0e2301914 100644 --- a/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/digitalTeamMemberCard.module.css +++ b/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/digitalTeamMemberCard.module.css @@ -6,7 +6,6 @@ position: relative; perspective: 1000px; transform-style: preserve-3d; - margin-top: var(--Space-x2); } .shimmer { diff --git a/packages/booking-flow/lib/components/BookingConfirmation/Receipt/Room/room.module.css b/packages/booking-flow/lib/components/BookingConfirmation/Receipt/Room/room.module.css index d00c5c945..e367c753c 100644 --- a/packages/booking-flow/lib/components/BookingConfirmation/Receipt/Room/room.module.css +++ b/packages/booking-flow/lib/components/BookingConfirmation/Receipt/Room/room.module.css @@ -12,7 +12,7 @@ } .terms { - margin-top: var(--Space-x3); + margin-top: var(--Space-x1); margin-bottom: var(--Space-x3); } .termsText:nth-child(n) { diff --git a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/RewardNight/reward-night.module.css b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/RewardNight/reward-night.module.css index c1da92c90..a10b04f18 100644 --- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/RewardNight/reward-night.module.css +++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/RewardNight/reward-night.module.css @@ -24,7 +24,6 @@ .rewardNightTooltip { max-width: 560px; - margin-top: var(--Space-x2); } @media screen and (max-width: 767px) { diff --git a/packages/booking-flow/lib/components/EnterDetails/Payment/GuaranteeInfo/guaranteeInfo.module.css b/packages/booking-flow/lib/components/EnterDetails/Payment/GuaranteeInfo/guaranteeInfo.module.css index 3bf74b719..8e714ab69 100644 --- a/packages/booking-flow/lib/components/EnterDetails/Payment/GuaranteeInfo/guaranteeInfo.module.css +++ b/packages/booking-flow/lib/components/EnterDetails/Payment/GuaranteeInfo/guaranteeInfo.module.css @@ -2,7 +2,6 @@ display: grid; gap: var(--Space-x3); align-content: start; - margin-top: var(--Space-x2); } .closeButton { diff --git a/packages/booking-flow/lib/components/EnterDetails/Summary/UI/Room/room.module.css b/packages/booking-flow/lib/components/EnterDetails/Summary/UI/Room/room.module.css index d7d04af4a..34f1b7f43 100644 --- a/packages/booking-flow/lib/components/EnterDetails/Summary/UI/Room/room.module.css +++ b/packages/booking-flow/lib/components/EnterDetails/Summary/UI/Room/room.module.css @@ -12,7 +12,7 @@ } .terms { - margin-top: var(--Space-x3); + margin-top: var(--Space-x1); margin-bottom: var(--Space-x3); } diff --git a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/MobileSummary/Room/room.module.css b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/MobileSummary/Room/room.module.css index 73b173ab1..42afe6f88 100644 --- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/MobileSummary/Room/room.module.css +++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/MobileSummary/Room/room.module.css @@ -12,7 +12,7 @@ } .terms { - margin-top: var(--Space-x3); + margin-top: var(--Space-x1); margin-bottom: var(--Space-x3); } diff --git a/packages/design-system/lib/components/Modal/modal.module.css b/packages/design-system/lib/components/Modal/modal.module.css index be0ad80e7..e97a3b546 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-x1) var(--Space-x2); + padding: var(--Space-x2) var(--Space-x7) var(--Space-x2) var(--Space-x2); } .content { @@ -82,7 +82,7 @@ } .header { - padding: var(--Space-x3) var(--Space-x7) var(--Space-x1) var(--Space-x3); + padding: var(--Space-x3) var(--Space-x7) var(--Space-x3) var(--Space-x3); } .contentWithoutActions {