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: var(--Corner-radius-Large);
-  border-radius: 6px;
-  box-shadow:
-    hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
-    hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
   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}>
+      <AnimatePresence initial={false} mode="wait">
-        <Image
+        <motion.div
-          src={mainImage.url}
+          key={mainImage.url}
-          alt={mainImage.alt}
+          className={styles.mainImageContainer}
-          layout="fill"
+          initial={{ opacity: 0, x: 300 }}
-          objectFit="cover"
+          animate={{ opacity: 1, x: 0 }}
-          onClick={onImageClick}
+          exit={{ opacity: 0, x: -300 }}
-        />
+          transition={{ duration: 0.3 }}
-      </div>
+        >
+          <Image
+            src={mainImage.url}
+            alt={mainImage.alt}
+            layout="fill"
+            objectFit="cover"
+            onClick={onImageClick}
+          />
+        </motion.div>
+      </AnimatePresence>
       <div className={styles.thumbnailGrid}>
-        {getThumbImages().map((image, index) => (
+        <AnimatePresence initial={false}>
-          <motion.div
+          {getThumbImages().map((image, index) => (
-            key={index}
+            <motion.div
-            className={styles.thumbnailContainer}
+              key={image.url}
-            onClick={() => onSelectImage(image)}
+              className={styles.thumbnailContainer}
-          >
+              onClick={() => onSelectImage(image)}
-            <Image
+              initial={{ opacity: 0, x: 50 }}
-              src={image.url}
+              animate={{ opacity: 1, x: 0 }}
-              alt={image.alt}
+              exit={{ opacity: 0, x: -50 }}
-              layout="fill"
+              transition={{ duration: 0.2, delay: index * 0.05 }}
-              objectFit="cover"
+            >
-            />
+              <Image
-          </motion.div>
+                src={image.url}
-        ))}
+                alt={image.alt}
+                layout="fill"
+                objectFit="cover"
+              />
+            </motion.div>
+          ))}
+        </AnimatePresence>
       </div>
     </div>
   )