feat(SW-3152): Respecting image aspect ratio inside image gallery/lightbox

* feat(SW-3152): Respecting image aspect ratio inside image gallery/lightbox
* feat(BOOK-144): Make image clickable instead of a button to avoid being able to click outside of the image area

Approved-by: Bianca Widstam
Approved-by: Chuma Mcphoy (We Ahead)

packages/design-system/lib/components/Lightbox/FullView/index.tsx

@@ -10,8 +10,8 @@ import { IconButton } from '../../IconButton'
 import { MaterialIcon } from '../../Icons/MaterialIcon'
 import { Typography } from '../../Typography'
 
-import styles from './fullView.module.css'
 import { LightboxImage } from '../index'
+import styles from './fullView.module.css'
 
 type FullViewProps = {
   image: LightboxImage
@@ -36,8 +36,14 @@ export default function FullView({
   const [animateLeft, setAnimateLeft] = useState(true)
 
   function handleSwipe(offset: number) {
-    if (offset > 30) onPrev()
-    if (offset < -30) onNext()
+    if (offset > 30) {
+      setAnimateLeft(false)
+      onPrev()
+    }
+    if (offset < -30) {
+      setAnimateLeft(true)
+      onNext()
+    }
   }
 
   function handleNext() {
@@ -79,7 +85,7 @@ export default function FullView({
   }
 
   return (
-    <div className={styles.fullViewContainer}>
+    <div className={styles.fullView}>
       <IconButton
         theme="Inverted"
         style="Muted"
@@ -99,7 +105,7 @@ export default function FullView({
           </span>
         </Typography>
       </div>
-      <div className={styles.imageContainer}>
+      <div className={styles.content}>
         <AnimatePresence initial={false} custom={animateLeft}>
           <motion.div
             key={image.src}
@@ -109,42 +115,42 @@ export default function FullView({
             animate="animate"
             exit="exit"
             transition={{ duration: 0.3 }}
-            className={styles.imageWrapper}
+            className={styles.motionContainer}
             drag="x"
             onDragEnd={(_e, info) => handleSwipe(info.offset.x)}
           >
-            {image.caption && !hideLabel ? (
-              <Typography variant="Body/Paragraph/mdRegular">
-                <p className={styles.imageCaption}>{image.caption}</p>
-              </Typography>
-            ) : null}
-            <Image
-              alt={image.alt}
-              fill
-              sizes="(min-width: 1500px) 1500px, 100vw"
-              src={image.src}
-              className={styles.image}
-            />
+            <div className={styles.imageWrapper}>
+              <Image
+                alt={image.alt}
+                fill
+                sizes="90vw"
+                src={image.src}
+                className={styles.image}
+              />
+              {image.caption && !hideLabel ? (
+                <Typography variant="Body/Paragraph/mdRegular">
+                  <p className={styles.caption}>{image.caption}</p>
+                </Typography>
+              ) : null}
+            </div>
           </motion.div>
         </AnimatePresence>
       </div>
 
-      <motion.button
-        className={`${styles.navigationButton} ${styles.fullViewPrevButton}`}
+      <IconButton
+        theme="Inverted"
+        className={`${styles.navigationButton} ${styles.prev}`}
         onClick={handlePrev}
       >
-        <MaterialIcon
-          icon="arrow_back"
-          color="CurrentColor"
-          className={styles.leftTransformIcon}
-        />
-      </motion.button>
-      <motion.button
-        className={`${styles.navigationButton} ${styles.fullViewNextButton}`}
+        <MaterialIcon icon="arrow_back" color="CurrentColor" />
+      </IconButton>
+      <IconButton
+        theme="Inverted"
+        className={`${styles.navigationButton} ${styles.next}`}
         onClick={handleNext}
       >
         <MaterialIcon icon="arrow_forward" color="CurrentColor" />
-      </motion.button>
+      </IconButton>
     </div>
   )
 }