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/fullView.module.css

@@ -1,12 +1,13 @@
-.fullViewContainer {
+.fullView {
   background-color: var(--UI-Text-High-contrast);
+  width: 100%;
   height: 100%;
   padding: var(--Space-x3) var(--Space-x2);
   position: relative;
   align-items: center;
   justify-items: center;
   display: grid;
-  grid-template-rows: auto 1fr auto;
+  grid-template-rows: auto 1fr;
   grid-template-columns: 1fr;
   place-content: center;
   gap: var(--Space-x5);
@@ -32,31 +33,45 @@
   color: var(--Text-Inverted);
 }
 
-.imageContainer {
+.content {
   position: relative;
   width: 100%;
   height: 100%;
-  max-height: 25rem;
-  margin-top: var(--Space-x5);
+}
+
+/* This container needs to be absolutely positioned because otherwise the animation won't work correctly */
+.motionContainer {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .imageWrapper {
-  position: absolute;
-  width: 100%;
-  height: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x2);
+  align-items: center;
+  justify-content: center;
+  width: min(1454px, 100%);
+  height: min(1454px, 100%);
 }
 
 .image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+  object-fit: contain;
   border-radius: var(--Corner-radius-Medium);
+  /* Override Next.js Image styles, we can't set width/height on the image as we don't know the aspect ratio of the image */
+  width: auto !important;
+  height: auto !important;
+  position: relative !important;
+  max-width: 100%;
+  max-height: 100%;
 }
 
-.imageCaption {
+.caption {
   color: var(--Text-Inverted);
-  position: absolute;
-  top: calc(-1 * var(--Space-x5));
 }
 
 @media screen and (max-width: 767px) {
@@ -65,63 +80,26 @@
   }
 }
 
-@media screen and (min-width: 768px) and (max-width: 1366px) {
-  .fullViewContainer {
-    padding: var(--Space-x5);
-  }
-
-  .imageContainer {
-    height: 100%;
-    max-height: 560px;
-  }
-}
-
 @media screen and (min-width: 768px) {
-  .closeButton {
-    position: fixed;
-    top: var(--Space-x15);
-    right: var(--Space-x15);
-  }
-
-  .fullViewContainer {
-    margin-top: 0;
+  .fullView {
     padding: var(--Space-x5);
-    grid-template-rows: auto 1fr auto;
-    width: 100%;
-    height: 100%;
   }
 
-  .imageContainer {
-    width: 70%;
-    max-width: 1454px;
-    max-height: 700px;
+  .closeButton {
+    top: var(--Space-x4);
+    right: var(--Space-x4);
   }
 
   .navigationButton {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-    background-color: var(--Component-Button-Inverted-Fill-Default);
-    color: var(--Component-Button-Inverted-On-fill-Default);
-    border-radius: var(--Corner-radius-rounded);
-    padding: 10px;
-    cursor: pointer;
-    border-width: 0;
-    display: flex;
-    z-index: 1;
-    box-shadow: 0px 0px 8px 1px #0000001a;
 
-    &:hover {
-      background-color: var(--Component-Button-Inverted-Fill-Hover);
-      color: var(--Component-Button-Inverted-On-fill-Hover);
+    &.next {
+      right: var(--Space-x5);
+    }
+    &.prev {
+      left: var(--Space-x5);
     }
   }
-
-  .fullViewNextButton {
-    right: var(--Space-x5);
-  }
-
-  .fullViewPrevButton {
-    left: var(--Space-x5);
-  }
 }