refactor(SW-96): improve dialog exit animation + cleanup css module

components/ContentType/HotelPage/PreviewImages/previewImages.module.css

@@ -37,7 +37,6 @@
   }
 
   .baseImage {
-    cursor: pointer;
     object-fit: cover;
     border-radius: var(--Corner-radius-Medium);
     display: block;

components/Lightbox/Desktop/desktopLightbox.module.css

@@ -1,9 +1,5 @@
 .content {
-  background-color: white;
-  border-radius: 6px;
-  box-shadow:
-    hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
-    hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
+  border-radius: var(--Corner-radius-Large);
   position: fixed;
   top: 50%;
   left: 50%;
@@ -11,15 +7,18 @@
   width: 1090px;
   height: 725px;
   overflow: hidden;
+  z-index: 10;
 }
 
 .overlay {
   position: fixed;
   inset: 0;
   background-color: rgba(0, 0, 0, 0.5);
+  z-index: 10;
 }
 
 .galleryContainer {
+  background-color: var(--Base-Background-Primary-Normal);
   padding: var(--Spacing-x5) var(--Spacing-x6);
   height: 100%;
   display: flex;
@@ -48,26 +47,31 @@
 
 .imageCaption {
   background-color: #f0f0f0;
-  padding: 5px 10px;
+  padding: var(--Spacing-x-half) var(--Spacing-x1);
   border-radius: 4px;
 }
 
 .mainImageContainer {
   flex: 1;
   position: relative;
-  margin-bottom: 20px;
+  margin-bottom: var(--Spacing-x2);
+  will-change: transform;
+  overflow: hidden;
 }
 
 .mainImageContainer img,
 .thumbnailContainer img {
   border-radius: var(--Corner-radius-Small);
   cursor: pointer;
+  transition: opacity 0.3s ease-in-out;
 }
 
 .thumbnailGrid {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
-  gap: 10px;
+  gap: var(--Spacing-x1);
+  max-height: 125px;
+  overflow: hidden;
 }
 
 .thumbnailContainer {
@@ -77,7 +81,6 @@
 
 .fullViewContainer {
   background-color: var(--UI-Text-High-contrast);
-  color: #fff;
   height: 100%;
   padding: var(--Spacing-x5);
   display: flex;
@@ -141,7 +144,7 @@
 }
 
 .prevButton {
-  left: 10px;
+  left: 0;
 }
 
 .leftTransformIcon {
@@ -149,7 +152,7 @@
 }
 
 .nextButton {
-  right: 10px;
+  right: 0;
 }
 
 .portraitImage {

components/Lightbox/Desktop/index.tsx

@@ -156,30 +156,45 @@ function Gallery({
           <Caption color="textMediumContrast">{mainImage.alt}</Caption>
         </div>
       </div>
-      <div className={styles.mainImageContainer}>
-        <Image
-          src={mainImage.url}
-          alt={mainImage.alt}
-          layout="fill"
-          objectFit="cover"
-          onClick={onImageClick}
-        />
-      </div>
+      <AnimatePresence initial={false} mode="wait">
+        <motion.div
+          key={mainImage.url}
+          className={styles.mainImageContainer}
+          initial={{ opacity: 0, x: 300 }}
+          animate={{ opacity: 1, x: 0 }}
+          exit={{ opacity: 0, x: -300 }}
+          transition={{ duration: 0.3 }}
+        >
+          <Image
+            src={mainImage.url}
+            alt={mainImage.alt}
+            layout="fill"
+            objectFit="cover"
+            onClick={onImageClick}
+          />
+        </motion.div>
+      </AnimatePresence>
       <div className={styles.thumbnailGrid}>
-        {getThumbImages().map((image, index) => (
-          <motion.div
-            key={index}
-            className={styles.thumbnailContainer}
-            onClick={() => onSelectImage(image)}
-          >
-            <Image
-              src={image.url}
-              alt={image.alt}
-              layout="fill"
-              objectFit="cover"
-            />
-          </motion.div>
-        ))}
+        <AnimatePresence initial={false}>
+          {getThumbImages().map((image, index) => (
+            <motion.div
+              key={image.url}
+              className={styles.thumbnailContainer}
+              onClick={() => onSelectImage(image)}
+              initial={{ opacity: 0, x: 50 }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: -50 }}
+              transition={{ duration: 0.2, delay: index * 0.05 }}
+            >
+              <Image
+                src={image.url}
+                alt={image.alt}
+                layout="fill"
+                objectFit="cover"
+              />
+            </motion.div>
+          ))}
+        </AnimatePresence>
       </div>
     </div>
   )