From 6dd95d4a4a8ddbf592090752b1bb55bf48d67ca9 Mon Sep 17 00:00:00 2001 From: Hrishikesh Vaipurkar Date: Thu, 7 Aug 2025 13:00:11 +0000 Subject: [PATCH] Merged in fix/SW-2367-mobile-ui-correction- (pull request #2603) Fix/SW-2367 mobile ui correction * fix(SW-2367): UI updates * fix(SW-2367): Optimised code Approved-by: Bianca Widstam --- .../Receipt/Room/room.module.css | 1 - .../Mobile/BottomSheet/bottomSheet.module.css | 2 +- .../Summary/UI/Room/room.module.css | 1 - .../EnterDetails/Summary/UI/ui.module.css | 25 +++++++++---------- .../hotelChequeCard.module.css | 7 +++--- .../HotelPointsRow/hotelPointsRow.module.css | 3 ++- .../SingleRoom/Details/Terms/terms.module.css | 1 - .../MobileSummary/Room/room.module.css | 1 - .../MobileSummary/summary.module.css | 25 +++++++++---------- .../components/RateCard/rate-card.module.css | 1 - 10 files changed, 31 insertions(+), 36 deletions(-) diff --git a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/Room/room.module.css b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/Room/room.module.css index 078305d0c..18e4d22fd 100644 --- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/Room/room.module.css +++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/Room/room.module.css @@ -17,7 +17,6 @@ } .termsText:nth-child(n) { display: flex; - align-items: center; margin-bottom: var(--Space-x1); } diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Summary/Mobile/BottomSheet/bottomSheet.module.css b/apps/scandic-web/components/HotelReservation/EnterDetails/Summary/Mobile/BottomSheet/bottomSheet.module.css index 1a3ce34cf..dda38defc 100644 --- a/apps/scandic-web/components/HotelReservation/EnterDetails/Summary/Mobile/BottomSheet/bottomSheet.module.css +++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Summary/Mobile/BottomSheet/bottomSheet.module.css @@ -87,7 +87,7 @@ color: var(--Component-Button-Brand-Secondary-On-fill-Default); } -@media screen and (min-width: 768px) { +@media screen and (min-width: 1367px) { .bottomSheet { padding: var(--Space-x2) 0 var(--Space-x7); } diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/Room/room.module.css b/apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/Room/room.module.css index 085bec231..fde10a2a7 100644 --- a/apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/Room/room.module.css +++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/Room/room.module.css @@ -18,7 +18,6 @@ .termsText:nth-child(n) { display: flex; - align-items: center; margin-bottom: var(--Space-x1); } diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/ui.module.css b/apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/ui.module.css index 76c01a52a..b61add4fc 100644 --- a/apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/ui.module.css +++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/ui.module.css @@ -2,8 +2,8 @@ border-radius: var(--Corner-radius-lg); display: flex; flex-direction: column; - gap: var(--Spacing-x2); - padding: var(--Spacing-x3); + gap: var(--Space-x2); + padding: var(--Space-x3); height: 100%; } @@ -25,32 +25,32 @@ .date { align-items: center; display: flex; - gap: var(--Spacing-x1); + gap: var(--Space-x1); justify-content: flex-start; grid-area: date; } .link { - margin-top: var(--Spacing-x1); + margin-top: var(--Space-x1); } .addOns { display: flex; flex-direction: column; - gap: var(--Spacing-x-one-and-half); + gap: var(--Space-x15); overflow-y: auto; } .rateDetailsPopover { display: flex; flex-direction: column; - gap: var(--Spacing-x-half); + gap: var(--Space-x05); max-width: 360px; } .entry { display: flex; - gap: var(--Spacing-x-half); + gap: var(--Space-x05); justify-content: space-between; } .prices { @@ -84,7 +84,7 @@ .total { display: flex; flex-direction: column; - gap: var(--Spacing-x2); + gap: var(--Space-x2); } .bottomDivider { @@ -96,16 +96,15 @@ } .terms { - margin-top: var(--Spacing-x3); - margin-bottom: var(--Spacing-x3); + margin-top: var(--Space-x3); + margin-bottom: var(--Space-x3); } .termsText:nth-child(n) { display: flex; - align-items: center; - margin-bottom: var(--Spacing-x1); + margin-bottom: var(--Space-x1); } .terms .termsIcon { - margin-right: var(--Spacing-x1); + margin-right: var(--Space-x1); } @media screen and (min-width: 1367px) { diff --git a/apps/scandic-web/components/HotelReservation/HotelCard/HotelChequeCard/hotelChequeCard.module.css b/apps/scandic-web/components/HotelReservation/HotelCard/HotelChequeCard/hotelChequeCard.module.css index 9e6a20a6d..73df8f475 100644 --- a/apps/scandic-web/components/HotelReservation/HotelCard/HotelChequeCard/hotelChequeCard.module.css +++ b/apps/scandic-web/components/HotelReservation/HotelCard/HotelChequeCard/hotelChequeCard.module.css @@ -1,19 +1,20 @@ .chequeCard { - padding: var(--Spacing-x-one-and-half); + padding: var(--Space-x15); background-color: var(--Base-Surface-Secondary-light-Normal); border-radius: var(--Corner-radius-md); margin: 0; width: 100%; display: grid; - gap: var(--Spacing-x1); + gap: var(--Space-x1); } .chequeRow, .cheque { display: flex; - gap: var(--Spacing-x-half); + gap: var(--Space-x05); justify-content: space-between; align-items: baseline; + color: var(--Text-Default); } .cheque { diff --git a/apps/scandic-web/components/HotelReservation/HotelCard/HotelPointsRow/hotelPointsRow.module.css b/apps/scandic-web/components/HotelReservation/HotelCard/HotelPointsRow/hotelPointsRow.module.css index 8dd8ad39a..6c7f7a85e 100644 --- a/apps/scandic-web/components/HotelReservation/HotelCard/HotelPointsRow/hotelPointsRow.module.css +++ b/apps/scandic-web/components/HotelReservation/HotelCard/HotelPointsRow/hotelPointsRow.module.css @@ -1,5 +1,6 @@ .poinstRow { display: flex; - gap: var(--Spacing-x1); + gap: var(--Space-x1); align-items: baseline; + color: var(--Text-Default); } 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 6dcda55cb..922811696 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 @@ -7,7 +7,6 @@ .term { display: flex; - align-items: center; gap: var(--Space-x1); } diff --git a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/Room/room.module.css b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/Room/room.module.css index b662806b7..28db86422 100644 --- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/Room/room.module.css +++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/Room/room.module.css @@ -18,7 +18,6 @@ .termsText:nth-child(n) { display: flex; - align-items: center; margin-bottom: var(--Space-x1); } diff --git a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/summary.module.css b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/summary.module.css index 0062f8dc8..20d8d5415 100644 --- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/summary.module.css +++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/summary.module.css @@ -2,8 +2,8 @@ border-radius: var(--Corner-radius-lg); display: flex; flex-direction: column; - gap: var(--Spacing-x2); - padding: var(--Spacing-x3); + gap: var(--Space-x2); + padding: var(--Space-x3); height: 100%; } @@ -31,32 +31,32 @@ .date { align-items: center; display: flex; - gap: var(--Spacing-x1); + gap: var(--Space-x1); justify-content: flex-start; grid-area: date; } .link { - margin-top: var(--Spacing-x1); + margin-top: var(--Space-x1); } .addOns { display: flex; flex-direction: column; - gap: var(--Spacing-x-one-and-half); + gap: var(--Space-x15); overflow-y: auto; } .rateDetailsPopover { display: flex; flex-direction: column; - gap: var(--Spacing-x-half); + gap: var(--Space-x05); max-width: 360px; } .entry { display: flex; - gap: var(--Spacing-x-half); + gap: var(--Space-x05); justify-content: space-between; } @@ -67,7 +67,7 @@ .total { display: flex; flex-direction: column; - gap: var(--Spacing-x2); + gap: var(--Space-x2); } .bottomDivider { @@ -79,16 +79,15 @@ } .terms { - margin-top: var(--Spacing-x3); - margin-bottom: var(--Spacing-x3); + margin-top: var(--Space-x3); + margin-bottom: var(--Space-x3); } .termsText:nth-child(n) { display: flex; - align-items: center; - margin-bottom: var(--Spacing-x1); + margin-bottom: var(--Space-x1); } .terms .termsIcon { - margin-right: var(--Spacing-x1); + margin-right: var(--Space-x1); } @media screen and (min-width: 1367px) { diff --git a/packages/design-system/lib/components/RateCard/rate-card.module.css b/packages/design-system/lib/components/RateCard/rate-card.module.css index d2670fcab..d081c5f7b 100644 --- a/packages/design-system/lib/components/RateCard/rate-card.module.css +++ b/packages/design-system/lib/components/RateCard/rate-card.module.css @@ -156,7 +156,6 @@ label:not(:has(.radio:checked)) .checkIcon { .term { display: flex; - align-items: center; gap: var(--Space-x1); }