From a12dfb4b5bd7c87704ac75530142b37c8ba85a62 Mon Sep 17 00:00:00 2001
From: Hrishikesh Vaipurkar <hrishikesh.vaipurkar@scandichotels.com>
Date: Mon, 28 Jul 2025 11:19:29 +0000
Subject: [PATCH] Merged in fix/SW-2342-hotel-side-peek-list-of-ui- (pull
 request #2566)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fix(SW-2342): Fixed hotel sidepeek UI alignment and color

* fix(SW-2342): Fixed hotel sidepeek UI alignment and color

* fix(SW-2342): Fixed vertical alignment


Approved-by: Anton Gunnarsson
Approved-by: Matilda Landström
---
 .../HotelReservation/Contact/contact.module.css     |  2 +-
 .../additionalAmenities.module.css                  | 13 +++++++++----
 .../AdditionalAmenities/index.tsx                   |  2 +-
 .../TempDesignSystem/SidePeek/sidePeek.module.css   |  2 +-
 4 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/apps/scandic-web/components/HotelReservation/Contact/contact.module.css b/apps/scandic-web/components/HotelReservation/Contact/contact.module.css
index 01451a32f..8cdf4e595 100644
--- a/apps/scandic-web/components/HotelReservation/Contact/contact.module.css
+++ b/apps/scandic-web/components/HotelReservation/Contact/contact.module.css
@@ -63,5 +63,5 @@
 .link {
   text-decoration: underline;
   font-family: var(--typography-Body-Regular-fontFamily);
-  color: var(--Base-Text-High-contrast);
+  color: var(--Text-Interactive-Secondary);
 }
diff --git a/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/AdditionalAmenities/additionalAmenities.module.css b/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/AdditionalAmenities/additionalAmenities.module.css
index 3b7c94f1d..c398051a5 100644
--- a/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/AdditionalAmenities/additionalAmenities.module.css
+++ b/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/AdditionalAmenities/additionalAmenities.module.css
@@ -1,12 +1,17 @@
 .wrapper {
-  padding: var(--Spacing-x1) var(--Spacing-x0);
+  padding: var(--Space-x1) var(--Space-x0);
   border-bottom: 1px solid var(--Base-Border-Subtle);
   color: var(--Text-Interactive-Default);
 }
 
 .amenity {
   display: flex;
-  gap: var(--Spacing-x1);
-  padding: var(--Spacing-x-one-and-half) var(--Spacing-x1);
-  align-items: center;
+  gap: var(--Space-x1);
+  padding: var(--Space-x15) var(--Space-x1);
+}
+
+.amenityName {
+  display: flex;
+  align-items: center;
+  min-height: var(--Space-x3);
 }
diff --git a/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/AdditionalAmenities/index.tsx b/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/AdditionalAmenities/index.tsx
index b00ed515b..640b2e5d3 100644
--- a/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/AdditionalAmenities/index.tsx
+++ b/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/AdditionalAmenities/index.tsx
@@ -34,7 +34,7 @@ export default function AdditionalAmenities({
             color="Icon/Interactive/Default"
             size={24}
           />
-          {amenity.name}
+          <span className={styles.amenityName}>{amenity.name}</span>
         </div>
       </li>
     </Typography>
diff --git a/apps/scandic-web/components/TempDesignSystem/SidePeek/sidePeek.module.css b/apps/scandic-web/components/TempDesignSystem/SidePeek/sidePeek.module.css
index 11b9b1fc5..fc4a81527 100644
--- a/apps/scandic-web/components/TempDesignSystem/SidePeek/sidePeek.module.css
+++ b/apps/scandic-web/components/TempDesignSystem/SidePeek/sidePeek.module.css
@@ -58,7 +58,7 @@
   display: flex;
   justify-content: flex-end;
   border-bottom: 1px solid var(--Base-Border-Subtle);
-  align-items: center;
+  align-items: start;
   padding: var(--Spacing-x4);
 }