Merged in fix/STAY-133-modal-header (pull request #3330)

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

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

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 {

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);
   }
 }

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) {

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%;

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 {

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 {

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 {

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 {

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) {

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) {

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 {

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);
 }
 

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);
 }
 

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 {