Merged in fix/SW-2342-hotel-side-peek-list-of-ui- (pull request #2566)

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

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

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);
+  gap: var(--Space-x1);
-  padding: var(--Spacing-x-one-and-half) var(--Spacing-x1);
+  padding: var(--Space-x15) var(--Space-x1);
-  align-items: center;
+}
+
+.amenityName {
+  display: flex;
+  align-items: center;
+  min-height: var(--Space-x3);
 }

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>

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