From 16370f58b64890669c55e8df24a4ec3566a22833 Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Wed, 4 Sep 2024 10:22:21 +0200
Subject: [PATCH] refactor(SW-337): fixes for lightbox

---
 components/Lightbox/FullView.tsx        |  9 ++----
 components/Lightbox/Gallery.tsx         | 12 ++++++--
 components/Lightbox/Lightbox.module.css | 38 +++++++++++++++++++------
 components/Lightbox/index.tsx           |  4 ++-
 4 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/components/Lightbox/FullView.tsx b/components/Lightbox/FullView.tsx
index 242627144..983269463 100644
--- a/components/Lightbox/FullView.tsx
+++ b/components/Lightbox/FullView.tsx
@@ -1,8 +1,8 @@
 "use client"
 import { AnimatePresence, motion } from "framer-motion"
 
-import { ChevronRightIcon } from "@/components/Icons"
 import ArrowRightIcon from "@/components/Icons/ArrowRight"
+import CloseIcon from "@/components/Icons/Close"
 import Image from "@/components/Image"
 import Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"
@@ -28,12 +28,7 @@ export default function FullView({
         className={styles.fullViewCloseButton}
         onClick={onClose}
       >
-        <ChevronRightIcon
-          color="white"
-          width={32}
-          height={32}
-          className={styles.leftTransformIcon}
-        />
+        <CloseIcon color="white" width={32} height={32} />
       </Button>
       <div className={styles.fullViewHeader}>
         <span className={styles.imagePosition}>
diff --git a/components/Lightbox/Gallery.tsx b/components/Lightbox/Gallery.tsx
index a875ddea4..cb5181d39 100644
--- a/components/Lightbox/Gallery.tsx
+++ b/components/Lightbox/Gallery.tsx
@@ -123,7 +123,12 @@ export default function Gallery({
 
       {/* Mobile Gallery */}
       <div className={styles.mobileGallery}>
-        <Button intent="text" size="small" onClick={onClose}>
+        <Button
+          intent="text"
+          size="small"
+          className={styles.mobileGalleryCloseButton}
+          onClick={onClose}
+        >
           <ChevronRightIcon
             color="black"
             width={32}
@@ -137,7 +142,10 @@ export default function Gallery({
               <motion.div
                 key={image.url}
                 className={`${styles.thumbnailContainer} ${index % 3 === 0 ? styles.fullWidthImage : ""}`}
-                onClick={() => onImageClick()}
+                onClick={() => {
+                  onSelectImage(image)
+                  onImageClick()
+                }}
                 initial={{ opacity: 0, y: 20 }}
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ duration: 0.3, delay: index * 0.05 }}
diff --git a/components/Lightbox/Lightbox.module.css b/components/Lightbox/Lightbox.module.css
index 52bfd3764..32ac85123 100644
--- a/components/Lightbox/Lightbox.module.css
+++ b/components/Lightbox/Lightbox.module.css
@@ -3,7 +3,6 @@
 }
 
 .mobileGallery {
-  margin-top: var(--current-mobile-site-header-height);
   height: 100%;
   position: relative;
   display: flex;
@@ -11,6 +10,11 @@
   gap: var(--Spacing-x2);
 }
 
+.mobileGalleryCloseButton {
+  justify-content: flex-start;
+  width: fit-content;
+}
+
 .mobileGalleryContent {
   display: block;
 }
@@ -18,7 +22,7 @@
 .fullViewCloseButton {
   position: absolute;
   top: var(--Spacing-x-one-and-half);
-  left: var(--Spacing-x-half);
+  right: var(--Spacing-x-half);
   z-index: 1;
 }
 
@@ -112,7 +116,6 @@
 }
 
 .fullViewContainer {
-  margin-top: var(--current-mobile-site-header-height);
   background-color: var(--UI-Text-High-contrast);
   height: 100%;
   padding: var(--Spacing-x2);
@@ -121,12 +124,12 @@
   display: grid;
   grid-template-rows: auto 1fr auto;
   place-content: center;
+  gap: var(--Spacing-x5);
 }
 
 .fullViewHeader {
   display: flex;
   justify-content: center;
-  margin-bottom: var(--Spacing-x5);
   width: 100%;
 }
 
@@ -173,9 +176,22 @@
 @media (min-width: 1367px) {
   .content {
     border-radius: var(--Corner-radius-Large);
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    overflow: hidden;
+  }
+
+  .galleryContent {
     width: 1090px;
     height: 725px;
-    overflow: hidden;
+  }
+
+  .fullViewContent {
+    width: 100vw;
+    height: 100vh;
+    max-width: 1512px;
+    max-height: 982px;
   }
 
   .galleryContainer {
@@ -216,6 +232,8 @@
 
   .fullViewCloseButton {
     position: fixed;
+    top: var(--Spacing-x-one-and-half);
+    right: var(--Spacing-x-half);
   }
 
   .fullWidthImage {
@@ -233,14 +251,16 @@
     grid-template-rows: auto 1fr auto;
     grid-template-columns: 1fr;
     justify-items: center;
+    width: 100%;
+    height: 100%;
   }
 
   .fullViewImageContainer {
     position: relative;
-    max-width: 1054px;
-    width: 80%;
-    height: 85%;
-    margin-bottom: var(--Spacing-x5);
+    width: 90%;
+    max-width: 1454px;
+    height: 100%;
+    max-height: 700px;
   }
 
   .navigationButton {
diff --git a/components/Lightbox/index.tsx b/components/Lightbox/index.tsx
index 42ccc835f..e71153b1d 100644
--- a/components/Lightbox/index.tsx
+++ b/components/Lightbox/index.tsx
@@ -73,7 +73,9 @@ export default function Lightbox({ images, children }: LightboxProps) {
               </Dialog.Overlay>
               <Dialog.Content asChild>
                 <motion.div
-                  className={styles.content}
+                  className={`${styles.content} ${
+                    isFullView ? styles.fullViewContent : styles.galleryContent
+                  }`}
                   initial={{ opacity: 0, scale: 0.95 }}
                   animate={{ opacity: 1, scale: 1, x: "-50%", y: "-50%" }}
                   exit={{ opacity: 0, scale: 0.95 }}