Merged in feat/SW-2039-move-fullview-caption (pull request #2543)

feat(SW-2039): move fullview image caption from bottom to the top of image

* feat(SW-2039): move fullview image caption to the top


Approved-by: Chuma Mcphoy (We Ahead)

apps/scandic-web/components/Lightbox/FullView/fullView.module.css

@@ -1,7 +1,7 @@
 .fullViewContainer {
   background-color: var(--UI-Text-High-contrast);
   height: 100%;
-  padding: var(--Spacing-x3) var(--Spacing-x2);
+  padding: var(--Space-x3) var(--Space-x2);
   position: relative;
   align-items: center;
   justify-items: center;
@@ -9,7 +9,7 @@
   grid-template-rows: auto 1fr auto;
   grid-template-columns: 1fr;
   place-content: center;
-  gap: var(--Spacing-x5);
+  gap: var(--Space-x5);
 }
 
 .closeButton {
@@ -37,7 +37,7 @@
   width: 100%;
   height: 100%;
   max-height: 25rem;
-  margin-bottom: var(--Spacing-x5);
+  margin-top: var(--Space-x5);
 }
 
 .imageWrapper {
@@ -52,10 +52,10 @@
   object-fit: cover;
 }
 
-.footer {
+.imageCaption {
   color: var(--Text-Inverted);
   position: absolute;
-  bottom: calc(-1 * var(--Spacing-x5));
+  top: calc(-1 * var(--Space-x5));
 }
 
 @media screen and (max-width: 767px) {
@@ -66,7 +66,7 @@
 
 @media screen and (min-width: 768px) and (max-width: 1366px) {
   .fullViewContainer {
-    padding: var(--Spacing-x5);
+    padding: var(--Space-x5);
   }
 
   .imageContainer {
@@ -78,13 +78,13 @@
 @media screen and (min-width: 768px) {
   .closeButton {
     position: fixed;
-    top: var(--Spacing-x-one-and-half);
-    right: var(--Spacing-x-half);
+    top: var(--Space-x15);
+    right: var(--Space-x15);
   }
 
   .fullViewContainer {
     margin-top: 0;
-    padding: var(--Spacing-x5);
+    padding: var(--Space-x5);
     grid-template-rows: auto 1fr auto;
     width: 100%;
     height: 100%;
@@ -117,10 +117,10 @@
   }
 
   .fullViewNextButton {
-    right: var(--Spacing-x5);
+    right: var(--Space-x5);
   }
 
   .fullViewPrevButton {
-    left: var(--Spacing-x5);
+    left: var(--Space-x5);
   }
 }

apps/scandic-web/components/Lightbox/FullView/index.tsx

@@ -88,6 +88,11 @@ export default function FullView({
             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
@@ -95,12 +100,6 @@ export default function FullView({
               src={image.src}
               className={styles.image}
             />
-
-            {image.caption && !hideLabel ? (
-              <Typography variant="Body/Paragraph/mdRegular">
-                <p className={styles.footer}>{image.caption}</p>
-              </Typography>
-            ) : null}
           </motion.div>
         </AnimatePresence>
       </div>