Merged in feat/book-522-align (pull request #3101)

feat(BOOK-522): align items in topmenu, header and booking widget * feat(BOOK-522): align items in topmenu, header and booking widget * Delete old css variable and use new * Fixed underline on icons Approved-by: Erik Tiekstra
2025-11-07 11:06:56 +00:00
parent fd92afc015
commit 7fb95f436b
64 changed files with 103 additions and 97 deletions
--- a/apps/scandic-web/components/Blocks/DynamicContent/LoyaltyLevels/loyaltyLevels.module.css
+++ b/apps/scandic-web/components/Blocks/DynamicContent/LoyaltyLevels/loyaltyLevels.module.css
@@ -21,7 +21,7 @@
 .textContainer {
  align-content: flex-start;
  display: flex;
-  gap: var(--Spacing-x-one-and-half);
+  gap: var(--Space-x15);
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
--- a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardList/Card/rewardCard.module.css
+++ b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardList/Card/rewardCard.module.css
@@ -1,5 +1,5 @@
 .rewardCard {
-  padding-bottom: var(--Spacing-x-one-and-half);
+  padding-bottom: var(--Space-x15);
  grid-column: 1/3;
 }

@@ -15,7 +15,7 @@
 }

 .rewardInfo {
-  padding-bottom: var(--Spacing-x-one-and-half);
+  padding-bottom: var(--Space-x15);
 }

 .rewardComparison {
@@ -27,7 +27,7 @@
  display: flex;
  justify-content: center;
  align-items: center;
-  padding-top: var(--Spacing-x-one-and-half);
+  padding-top: var(--Space-x15);
 }

 .details[open] .chevron {
--- a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/redeem.module.css
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/redeem.module.css
@@ -91,7 +91,7 @@
  display: flex;
  flex-direction: column;
  padding: 0 var(--Spacing-x3) var(--Spacing-x1);
-  gap: var(--Spacing-x-one-and-half);
+  gap: var(--Space-x15);
  flex-shrink: 0;
 }

@@ -120,7 +120,7 @@

 .rewardBadge {
  border-radius: var(--Corner-radius-sm);
-  padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
+  padding: var(--Spacing-x1) var(--Space-x15);
  background: var(--Base-Surface-Secondary-light-Normal);
  display: grid;
  gap: var(--Spacing-x-half);
--- a/apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkedAccounts/linkedAccounts.module.css
+++ b/apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkedAccounts/linkedAccounts.module.css
@@ -29,7 +29,7 @@
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-x3);
-  padding: var(--Spacing-x4) var(--Spacing-x-one-and-half);
+  padding: var(--Spacing-x4) var(--Space-x15);
  width: 100%;
  background-color: var(--Surface-Primary-On-Surface-Default);
  border: 1px solid var(--Border-Default);
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationListing/HotelListing/HotelListingItem/hotelListingItem.module.css
+++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationListing/HotelListing/HotelListingItem/hotelListingItem.module.css
@@ -56,7 +56,7 @@

 .amenityList {
  display: flex;
-  gap: var(--Spacing-x-one-and-half);
+  gap: var(--Space-x15);
  flex-wrap: wrap;
  color: var(--Text-Secondary);
 }
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/HotelsSection/DestinationsList/Destination/destination.module.css
+++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/HotelsSection/DestinationsList/Destination/destination.module.css
@@ -9,7 +9,7 @@
  margin-bottom: var(--Spacing-x-half);
 }
 .citiesList li {
-  margin-bottom: var(--Spacing-x-one-and-half);
+  margin-bottom: var(--Space-x15);
 }

@media screen and (min-width: 1367px) {
--- a/apps/scandic-web/components/DestinationFilterAndSort/Filter/Checkbox/checkbox.module.css
+++ b/apps/scandic-web/components/DestinationFilterAndSort/Filter/Checkbox/checkbox.module.css
@@ -1,8 +1,8 @@
 .checkboxWrapper {
  display: flex;
  align-items: center;
-  gap: var(--Spacing-x-one-and-half);
-  padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
+  gap: var(--Space-x15);
+  padding: var(--Spacing-x1) var(--Space-x15);
  cursor: pointer;
  border-radius: var(--Corner-radius-md);
  transition: background-color 0.3s;
--- a/apps/scandic-web/components/DigitalTeamMemberCard/EmployeeBenefits/CallToActions/callToActions.module.css
+++ b/apps/scandic-web/components/DigitalTeamMemberCard/EmployeeBenefits/CallToActions/callToActions.module.css
@@ -2,6 +2,6 @@
  display: flex;
  flex-direction: column;
  align-items: flex-start;
-  gap: var(--Spacing-x-one-and-half);
+  gap: var(--Space-x15);
  padding-bottom: var(--Spacing-x3);
 }
--- a/apps/scandic-web/components/Header/MainMenu/NavigationMenu/NavigationMenuList/navigationMenuList.module.css
+++ b/apps/scandic-web/components/Header/MainMenu/NavigationMenu/NavigationMenuList/navigationMenuList.module.css
@@ -12,7 +12,7 @@
  width: 100%;
  gap: 0;
  justify-content: stretch;
-  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2) var(--Spacing-x2);
+  padding: var(--Space-x15) var(--Spacing-x2) var(--Spacing-x2);
 }

 .navigationMenu.mobile .item {
--- a/apps/scandic-web/components/Header/TopLink/index.tsx
+++ b/apps/scandic-web/components/Header/TopLink/index.tsx
@@ -2,6 +2,8 @@ import { IconName } from "@scandic-hotels/design-system/Icons/iconName"

 import HeaderLink from "../HeaderLink"

+import styles from "./topLink.module.css"
+
 import type { TopLinkProps } from "@/types/components/header/topLink"

 export default function TopLink({
@@ -21,7 +23,7 @@ export default function TopLink({
      iconName={linkData.icon || IconName.Gift}
      iconSize={iconSize}
    >
-      {linkData.title}
+      <span className={styles.topLink}>{linkData.title}</span>
    </HeaderLink>
  )
 }
--- a/apps/scandic-web/components/Header/TopLink/topLink.module.css
+++ b/apps/scandic-web/components/Header/TopLink/topLink.module.css
@@ -0,0 +1,3 @@
+.topLink {
+  margin-top: 2px;
+}
--- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/priceDetails.module.css
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/priceDetails.module.css
@@ -3,7 +3,7 @@
  align-items: center;
  justify-content: space-between;
  gap: var(--Spacing-x1);
-  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);
 }
--- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/SelectAncillaryStep/selectAncillaryStep.module.css
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/SelectAncillaryStep/selectAncillaryStep.module.css
@@ -15,7 +15,7 @@
  gap: var(--Spacing-x2);
  height: 470px;
  overflow-y: auto;
-  padding-right: var(--Spacing-x-one-and-half);
+  padding-right: var(--Space-x15);
  margin-top: var(--Spacing-x2);
 }

--- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/addedAncillaries.module.css
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/addedAncillaries.module.css
@@ -8,7 +8,7 @@
  display: flex;
  flex-direction: column;
  justify-content: space-between;
-  gap: var(--Spacing-x-one-and-half);
+  gap: var(--Space-x15);
  margin-top: var(--Spacing-x5);
 }

@@ -99,7 +99,7 @@

 .comment {
  display: flex;
-  gap: var(--Spacing-x-one-and-half);
+  gap: var(--Space-x15);
 }

 .actions {
--- a/apps/scandic-web/components/HotelReservation/MyStay/GuestDetails/guestDetails.module.css
+++ b/apps/scandic-web/components/HotelReservation/MyStay/GuestDetails/guestDetails.module.css
@@ -46,7 +46,7 @@

 .totalPointsText {
  display: flex;
-  gap: var(--Spacing-x-one-and-half);
+  gap: var(--Space-x15);
  align-items: center;
 }

@@ -87,7 +87,7 @@
  }
  .guestDetails {
    align-items: flex-start;
-    padding: var(--Spacing-x3) var(--Spacing-x-one-and-half);
+    padding: var(--Spacing-x3) var(--Space-x15);
  }
  .contactInfoMobile,
  .userDetailsTitle {
@@ -99,7 +99,7 @@
    gap: var(--Spacing-x-half);
  }
  .totalPoints {
-    padding: var(--Spacing-x-one-and-half) 0;
+    padding: var(--Space-x15) 0;
    justify-content: flex-start;
  }
 }
--- a/apps/scandic-web/components/HotelReservation/MyStay/Receipt/Footer/footer.module.css
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Receipt/Footer/footer.module.css
@@ -8,7 +8,7 @@
  display: flex;
  flex-direction: column;
  flex-grow: 1;
-  gap: var(--Spacing-x-one-and-half);
+  gap: var(--Space-x15);
 }

 .dl dt {
--- a/apps/scandic-web/components/HotelReservation/MyStay/Receipt/Total/total.module.css
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Receipt/Total/total.module.css
@@ -17,11 +17,11 @@
 .totalContainer {
  border: 1px solid var(--Border-Divider-Subtle);
  border-radius: var(--Spacing-x1);
-  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2) var(--Spacing-x2)
+  padding: var(--Space-x15) var(--Spacing-x2) var(--Spacing-x2)
    var(--Spacing-x2);
  flex-direction: column;
  align-items: stretch;
-  gap: var(--Spacing-x-one-and-half);
+  gap: var(--Space-x15);
  display: flex;
 }

--- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/PriceDetails/details.module.css
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/PriceDetails/details.module.css
@@ -3,7 +3,7 @@
  flex-direction: column;
  align-items: center;
  gap: var(--Spacing-x1);
-  padding: var(--Spacing-x-one-and-half) 0;
+  padding: var(--Space-x15) 0;
  width: calc(100% - var(--Spacing-x4));
  justify-content: center;
  margin: 0 auto;
--- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/information.module.css
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/information.module.css
@@ -17,6 +17,6 @@
    flex-direction: row;
    justify-content: space-between;
    margin: 0;
-    padding: var(--Spacing-x-one-and-half);
+    padding: var(--Space-x15);
  }
 }
--- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Header/header.module.css
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Header/header.module.css
@@ -1,12 +1,12 @@
 .header {
  display: flex;
-  gap: var(--Spacing-x-one-and-half);
+  gap: var(--Space-x15);
  padding: 0 var(--Spacing-x2);
 }

 .container {
  display: flex;
-  gap: var(--Spacing-x-one-and-half);
+  gap: var(--Space-x15);
 }

 .chip {
--- a/apps/scandic-web/components/Profile/CreditCardRow/creditCardRow.module.css
+++ b/apps/scandic-web/components/Profile/CreditCardRow/creditCardRow.module.css
@@ -4,7 +4,7 @@
  column-gap: var(--Spacing-x1);
  grid-template-columns: auto auto auto 1fr;
  justify-items: flex-end;
-  padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
+  padding: var(--Spacing-x1) var(--Space-x15);
  border-radius: var(--Corner-radius-sm);
  background-color: var(--Background-Primary);
 }
--- a/apps/scandic-web/components/Rewards/ExpirationDate/expirationDate.module.css
+++ b/apps/scandic-web/components/Rewards/ExpirationDate/expirationDate.module.css
@@ -1,5 +1,5 @@
 .badge {
-  padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
+  padding: var(--Spacing-x1) var(--Space-x15);
  display: flex;
  flex-direction: column;
  align-items: center;
--- a/apps/scandic-web/components/SidePeeks/BookedRoomSidePeekContent/bookedRoomSidePeekContent.module.css
+++ b/apps/scandic-web/components/SidePeeks/BookedRoomSidePeekContent/bookedRoomSidePeekContent.module.css
@@ -20,13 +20,13 @@
 .listContainer {
  display: flex;
  flex-direction: column;
-  gap: var(--Spacing-x-one-and-half);
+  gap: var(--Space-x15);
 }

 .roomHeader {
  display: flex;
  align-items: center;
-  gap: var(--Spacing-x-one-and-half);
+  gap: var(--Space-x15);
 }

 .chip {
@@ -57,7 +57,7 @@
 .roomDetails {
  display: flex;
  flex-direction: column;
-  gap: var(--Spacing-x-one-and-half);
+  gap: var(--Space-x15);
 }

 .row {
@@ -99,7 +99,7 @@
  flex-direction: column;
  align-items: center;
  gap: var(--Spacing-x1);
-  padding: var(--Spacing-x-one-and-half) 0;
+  padding: var(--Space-x15) 0;
  width: calc(100% - var(--Spacing-x4));
  justify-content: center;
  margin: 0 auto;
--- a/apps/scandic-web/components/Sidebar/JoinLoyalty/Contact/contact.module.css
+++ b/apps/scandic-web/components/Sidebar/JoinLoyalty/Contact/contact.module.css
@@ -10,7 +10,7 @@

 .contact {
  display: grid;
-  gap: var(--Spacing-x-one-and-half);
+  gap: var(--Space-x15);
 }

 .contact > div {
--- a/apps/scandic-web/components/Sidebar/JoinLoyalty/ReadMore/readMore.module.css
+++ b/apps/scandic-web/components/Sidebar/JoinLoyalty/ReadMore/readMore.module.css
@@ -7,7 +7,7 @@

 .links {
  display: grid;
-  gap: var(--Spacing-x-one-and-half);
+  gap: var(--Space-x15);
  justify-items: center;
 }

--- a/apps/scandic-web/components/TempDesignSystem/AncillaryCard/ancillaryCard.module.css
+++ b/apps/scandic-web/components/TempDesignSystem/AncillaryCard/ancillaryCard.module.css
@@ -21,7 +21,7 @@
 }

 .contentContainer {
-  padding: var(--Spacing-x-one-and-half) 0 0 0;
+  padding: var(--Space-x15) 0 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-x1);
--- a/apps/scandic-web/components/TempDesignSystem/TeaserCard/teaserCard.module.css
+++ b/apps/scandic-web/components/TempDesignSystem/TeaserCard/teaserCard.module.css
@@ -31,7 +31,7 @@

 .content {
  display: grid;
-  gap: var(--Spacing-x-one-and-half);
+  gap: var(--Space-x15);
  padding: var(--Spacing-x2) var(--Spacing-x3);
  grid-template-rows: auto 1fr auto;
  flex-grow: 1;