fix(SW-842): fixed close button positioning

components/HotelReservation/HotelCard/index.tsx

@@ -62,13 +62,11 @@ export default function HotelCard({
       onMouseLeave={handleMouseLeave}
     >
       <section className={styles.imageContainer}>
-        {hotelData.gallery && (
-          <ImageGallery
-            title={hotelData.name}
-            images={hotelData.galleryImages}
-            fill
-          />
-        )}
+        <ImageGallery
+          title={hotelData.name}
+          images={hotelData.galleryImages}
+          fill
+        />
         <div className={styles.tripAdvisor}>
           <Chip intent="primary" className={styles.tripAdvisor}>
             <TripAdvisorIcon color="white" />

components/ImageGallery/index.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import { useState } from "react"
+import { useIntl } from "react-intl"
 
 import { GalleryIcon } from "@/components/Icons"
 import Image from "@/components/Image"
@@ -17,6 +18,7 @@ export default function ImageGallery({
   fill,
   height = 280,
 }: ImageGalleryProps) {
+  const intl = useIntl()
   const [lightboxIsOpen, setLightboxIsOpen] = useState(false)
   const imageProps = fill ? { fill } : { height, width: height * 1.5 }
 
@@ -30,6 +32,7 @@ export default function ImageGallery({
         className={styles.triggerArea}
         role="button"
         onClick={() => setLightboxIsOpen(true)}
+        aria-label={intl.formatMessage({ id: "Open image gallery" })}
       >
         <Image
           className={styles.image}

components/Lightbox/Gallery.tsx

@@ -1,7 +1,8 @@
 "use client"
 import { AnimatePresence, motion } from "framer-motion"
+import { useIntl } from "react-intl"
 
-import { ChevronRightIcon } from "@/components/Icons"
+import { ChevronLeftIcon } from "@/components/Icons"
 import ArrowRightIcon from "@/components/Icons/ArrowRight"
 import CloseIcon from "@/components/Icons/Close"
 import Image from "@/components/Image"
@@ -19,6 +20,7 @@ export default function Gallery({
   onImageClick,
   selectedImage,
 }: GalleryProps) {
+  const intl = useIntl()
   const mainImage = selectedImage || images[0]
   const mainImageIndex = images.findIndex((img) => img === mainImage)
 
@@ -46,16 +48,17 @@ export default function Gallery({
       <Button
         intent="text"
         size="small"
-        theme="base"
-        variant="icon"
-        className={styles.desktopGalleryCloseButton}
+        className={styles.closeButton}
         onClick={onClose}
+        aria-label={intl.formatMessage({ id: "Close" })}
       >
-        <CloseIcon
+        <ChevronLeftIcon
+          color="black"
           width={32}
           height={32}
-          className={styles.desktopGalleryCloseIcon}
+          className={styles.mobileCloseIcon}
         />
+        <CloseIcon width={32} height={32} className={styles.desktopCloseIcon} />
       </Button>
       {/* Desktop Gallery */}
       <div className={styles.desktopGallery}>
@@ -129,19 +132,6 @@ export default function Gallery({
 
       {/* Mobile Gallery */}
       <div className={styles.mobileGallery}>
-        <Button
-          intent="text"
-          size="small"
-          className={styles.mobileGalleryCloseButton}
-          onClick={onClose}
-        >
-          <ChevronRightIcon
-            color="black"
-            width={32}
-            height={32}
-            className={styles.leftTransformIcon}
-          />
-        </Button>
         <div className={styles.mobileGalleryContent}>
           <div className={styles.thumbnailGrid}>
             {images.map((image, index) => (

components/Lightbox/Lightbox.module.css

@@ -16,10 +16,13 @@
   gap: var(--Spacing-x2);
 }
 
-.mobileGalleryCloseButton {
+.closeButton {
   justify-content: flex-start;
   width: fit-content;
 }
+.closeButton .desktopCloseIcon {
+  display: none;
+}
 
 .mobileGalleryContent {
   display: block;
@@ -84,7 +87,6 @@
 }
 
 .desktopGallery,
-.desktopGalleryCloseButton,
 .desktopThumbnailGrid,
 .navigationButton {
   display: none;
@@ -247,15 +249,22 @@
     overflow: hidden;
   }
 
-  .desktopGalleryCloseButton {
+  .closeButton {
     display: block;
     position: absolute;
     top: var(--Spacing-x-one-and-half);
-    right: var(--Spacing-x-half);
+    right: var(--Spacing-x1);
     z-index: 1;
   }
 
-  .desktopGalleryCloseButton:hover .desktopGalleryCloseIcon {
+  .closeButton .mobileCloseIcon {
+    display: none;
+  }
+  .closeButton .desktopCloseIcon {
+    display: block;
+  }
+
+  .closeButton:hover .desktopCloseIcon {
     background-color: var(--Base-Surface-Primary-light-Hover-alt);
     border-radius: 50%;
   }