style(SW-337): hotel page ui updates

components/ContentType/HotelPage/AmenitiesList/index.tsx

@@ -44,7 +44,7 @@ export default async function AmenitiesList({
         className={styles.showAllAmenities}
       >
         {intl.formatMessage({ id: "Show all amenities" })}
-        <ChevronRightIcon />
+        <ChevronRightIcon color="burgundy" />
       </Link>
     </section>
   )

components/ContentType/HotelPage/IntroSection/index.tsx

@@ -1,5 +1,6 @@
 import { about } from "@/constants/routes/hotelPageParams"
 
+import { ChevronRightIcon } from "@/components/Icons"
 import ArrowRight from "@/components/Icons/ArrowRight"
 import TripAdvisorIcon from "@/components/Icons/TripAdvisor"
 import Link from "@/components/TempDesignSystem/Link"
@@ -76,7 +77,7 @@ export default async function IntroSection({
           scroll={false}
         >
           {intl.formatMessage({ id: "Read more about the hotel" })}
-          <ArrowRight color="burgundy" />
+          <ChevronRightIcon color="burgundy" />
         </Link>
       </div>
     </section>

components/ContentType/HotelPage/Rooms/RoomCard/index.tsx

@@ -62,6 +62,7 @@ export function RoomCard({
             textAlign="center"
             type="one"
             color="black"
+            className={styles.title}
           >
             {title}
           </Subtitle>

components/ContentType/HotelPage/Rooms/RoomCard/roomCard.module.css

@@ -45,6 +45,15 @@
   gap: var(--Spacing-x1);
 }
 
+.title {
+  display: flex;
+  align-items: center;
+}
+
+.title:first-child {
+  height: 2em;
+}
+
 .imageWrapper {
   position: relative;
   background-color: transparent;

components/Lightbox/Lightbox.module.css

@@ -197,6 +197,7 @@
   .desktopGallery {
     display: grid;
     grid-template-rows: 1.71875rem 1fr 7.8125rem;
+    row-gap: var(--Spacing-x-one-and-half);
     background-color: var(--Base-Background-Primary-Normal);
     height: 100%;
     position: relative;