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
-          <ImageGallery
+          title={hotelData.name}
-            title={hotelData.name}
+          images={hotelData.galleryImages}
-            images={hotelData.galleryImages}
+          fill
-            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"
+        className={styles.closeButton}
-        variant="icon"
-        className={styles.desktopGalleryCloseButton}
         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%;
   }

i18n/dictionaries/da.json

@@ -227,6 +227,7 @@
   "On your journey": "På din rejse",
   "Open": "Åben",
   "Open gift(s)": "Åbne {amount, plural, one {gave} other {gaver}}",
+  "Open image gallery": "Åbn billedgalleri",
   "Open language menu": "Åbn sprogmenuen",
   "Open menu": "Åbn menuen",
   "Open my pages menu": "Åbn mine sider menuen",

i18n/dictionaries/de.json

@@ -225,6 +225,7 @@
   "On your journey": "Auf deiner Reise",
   "Open": "Offen",
   "Open gift(s)": "{amount, plural, one {Geschenk} other {Geschenke}} öffnen",
+  "Open image gallery": "Bildergalerie öffnen",
   "Open language menu": "Sprachmenü öffnen",
   "Open menu": "Menü öffnen",
   "Open my pages menu": "Meine Seiten Menü öffnen",

i18n/dictionaries/en.json

@@ -244,6 +244,7 @@
   "On your journey": "On your journey",
   "Open": "Open",
   "Open gift(s)": "Open {amount, plural, one {gift} other {gifts}}",
+  "Open image gallery": "Open image gallery",
   "Open language menu": "Open language menu",
   "Open menu": "Open menu",
   "Open my pages menu": "Open my pages menu",

i18n/dictionaries/fi.json

@@ -227,6 +227,7 @@
   "On your journey": "Matkallasi",
   "Open": "Avata",
   "Open gift(s)": "{amount, plural, one {Avoin lahja} other {Avoimet lahjat}}",
+  "Open image gallery": "Avaa kuvagalleria",
   "Open language menu": "Avaa kielivalikko",
   "Open menu": "Avaa valikko",
   "Open my pages menu": "Avaa omat sivut -valikko",

i18n/dictionaries/no.json

@@ -225,6 +225,7 @@
   "On your journey": "På reisen din",
   "Open": "Åpen",
   "Open gift(s)": "{amount, plural, one {Åpen gave} other {Åpnen gaver}}",
+  "Open image gallery": "Åpne bildegalleri",
   "Open language menu": "Åpne språkmenyen",
   "Open menu": "Åpne menyen",
   "Open my pages menu": "Åpne mine sider menyen",

i18n/dictionaries/sv.json

@@ -225,6 +225,7 @@
   "On your journey": "På din resa",
   "Open": "Öppna",
   "Open gift(s)": "Öppna {amount, plural, one {gåva} other {gåvor}}",
+  "Open image gallery": "Öppna bildgalleri",
   "Open language menu": "Öppna språkmenyn",
   "Open menu": "Öppna menyn",
   "Open my pages menu": "Öppna mina sidor menyn",