From 9a24865170e7d40ca36479dc654adaf63b885d07 Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Tue, 3 Sep 2024 19:29:54 +0200
Subject: [PATCH] refactor(SW-337): UI fixes for hotel page

---
 .../HotelPage/AmenitiesList/amenitiesList.module.css     | 1 +
 components/ContentType/HotelPage/IntroSection/index.tsx  | 5 ++---
 .../ContentType/HotelPage/Rooms/RoomCard/index.tsx       | 7 ++++++-
 .../HotelPage/Rooms/RoomCard/roomCard.module.css         | 4 ++--
 components/ContentType/HotelPage/Rooms/index.tsx         | 5 +++--
 components/Lightbox/Gallery.tsx                          | 9 ++++++---
 components/Lightbox/Lightbox.module.css                  | 1 +
 7 files changed, 21 insertions(+), 11 deletions(-)
diff --git a/components/ContentType/HotelPage/AmenitiesList/amenitiesList.module.css b/components/ContentType/HotelPage/AmenitiesList/amenitiesList.module.css
index 0e7364f6f..eb78d72f6 100644
--- a/components/ContentType/HotelPage/AmenitiesList/amenitiesList.module.css
+++ b/components/ContentType/HotelPage/AmenitiesList/amenitiesList.module.css
@@ -26,5 +26,6 @@
 @media screen and (min-width: 1367px) {
   .amenitiesContainer {
     margin-top: var(--Spacing-x5);
+    width: 300px;
   }
 }
diff --git a/components/ContentType/HotelPage/IntroSection/index.tsx b/components/ContentType/HotelPage/IntroSection/index.tsx
index f93031011..d20486c60 100644
--- a/components/ContentType/HotelPage/IntroSection/index.tsx
+++ b/components/ContentType/HotelPage/IntroSection/index.tsx
@@ -70,13 +70,12 @@ export default async function IntroSection({
         <Preamble>{hotelDescription}</Preamble>
         <Link
           className={styles.introLink}
-          color="peach80"
-          textDecoration="underline"
+          color="burgundy"
           variant="icon"
           href={`?s=${about[lang]}`}
         >
           {intl.formatMessage({ id: "Read more about the hotel" })}
-          <ArrowRight color="peach80" />
+          <ArrowRight color="burgundy" />
         </Link>
       </div>
     </section>
diff --git a/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx b/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx
index e0678cd5e..bcc363f15 100644
--- a/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx
+++ b/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx
@@ -62,7 +62,12 @@ export function RoomCard({
           </Title>
           <Body color="grey">{subtitle}</Body>
         </div>
-        <Button variant="icon" intent="tertiary" onClick={handleRoomCtaClick}>
+        <Button
+          theme="base"
+          variant="icon"
+          intent="text"
+          onClick={handleRoomCtaClick}
+        >
           {intl.formatMessage({ id: "See room details" })}
           <ChevronRightIcon className={styles.chevron} />
         </Button>
diff --git a/components/ContentType/HotelPage/Rooms/RoomCard/roomCard.module.css b/components/ContentType/HotelPage/Rooms/RoomCard/roomCard.module.css
index 5134103e0..b7d96be9d 100644
--- a/components/ContentType/HotelPage/Rooms/RoomCard/roomCard.module.css
+++ b/components/ContentType/HotelPage/Rooms/RoomCard/roomCard.module.css
@@ -26,8 +26,8 @@
   display: flex;
   gap: var(--Spacing-x-half);
   align-items: center;
-  background-color: var(--Scandic-Opacity-Almost-Black-60);
-  color: var(--Scandic-Opacity-White-100);
+  background-color: var(--Main-Grey-90);
+  color: var(--UI-Opacity-White-100);
   padding: var(--Spacing-x-half) var(--Spacing-x1);
   border-radius: var(--Corner-radius-Medium);
 }
diff --git a/components/ContentType/HotelPage/Rooms/index.tsx b/components/ContentType/HotelPage/Rooms/index.tsx
index b6fa4f7dc..58cc2ef68 100644
--- a/components/ContentType/HotelPage/Rooms/index.tsx
+++ b/components/ContentType/HotelPage/Rooms/index.tsx
@@ -52,7 +52,7 @@ export function Rooms({ rooms }: RoomsProps) {
     <SectionContainer id="rooms-section">
       <div ref={scrollRef}></div>
       <SectionHeader
-        textTransform="uppercase"
+        textTransform="capitalize"
         title={intl.formatMessage({ id: "Rooms" })}
         preamble={null}
       />
@@ -80,7 +80,8 @@ export function Rooms({ rooms }: RoomsProps) {
       <div className={styles.ctaContainer}>
         <Button
           onClick={handleToggleShowMore}
-          intent="tertiary"
+          theme="base"
+          intent="text"
           variant="icon"
           className={`${styles.showMoreButton} ${allRoomsVisible ? styles.showLess : ""}`}
         >
diff --git a/components/Lightbox/Gallery.tsx b/components/Lightbox/Gallery.tsx
index 1af22adcd..a875ddea4 100644
--- a/components/Lightbox/Gallery.tsx
+++ b/components/Lightbox/Gallery.tsx
@@ -1,4 +1,5 @@
 "use client"
+import { DialogTitle } from "@radix-ui/react-dialog"
 import { AnimatePresence, motion } from "framer-motion"
 
 import { ChevronRightIcon } from "@/components/Icons"
@@ -55,9 +56,11 @@ export default function Gallery({
       {/* Desktop Gallery */}
       <div className={styles.desktopGallery}>
         <div className={styles.galleryHeader}>
-          <div className={styles.imageCaption}>
-            <Caption color="textMediumContrast">{mainImage.title}</Caption>
-          </div>
+          <DialogTitle asChild>
+            <div className={styles.imageCaption}>
+              <Caption color="textMediumContrast">{mainImage.title}</Caption>
+            </div>
+          </DialogTitle>
         </div>
         <div className={styles.mainImageWrapper}>
           <AnimatePresence initial={false} mode="wait">
diff --git a/components/Lightbox/Lightbox.module.css b/components/Lightbox/Lightbox.module.css
index 484eba1d4..52bfd3764 100644
--- a/components/Lightbox/Lightbox.module.css
+++ b/components/Lightbox/Lightbox.module.css
@@ -188,6 +188,7 @@
     height: 100%;
     flex-direction: column;
     position: relative;
+    overflow: hidden;
   }
 
   .desktopGalleryCloseButton {
