Merge branch 'master' into data-visualization-sarah

1 files changed, 60 insertions, 6 deletions

diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.scss b/src/client/views/pdf/GPTPopup/GPTPopup.scss
index 44413ede7..5d966395c 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.scss
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.scss
@@ -6,12 +6,6 @@ $button: #5b97ff;
 $highlightedText: #82e0ff;
 
 .summary-box {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    background-color: #ffffff;
-    box-shadow: 0 2px 5px #7474748d;
-    color: $textgrey;
     position: fixed;
     bottom: 10px;
     right: 10px;
@@ -21,9 +15,16 @@ $highlightedText: #82e0ff;
     padding: 15px;
     padding-bottom: 0;
     z-index: 999;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    background-color: #ffffff;
+    box-shadow: 0 2px 5px #7474748d;
+    color: $textgrey;
 
     .summary-heading {
         display: flex;
+        justify-content: space-between;
         align-items: center;
         border-bottom: 1px solid $greyborder;
         padding-bottom: 5px;
@@ -110,6 +111,59 @@ $highlightedText: #82e0ff;
     }
 }
 
+.image-content-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+    padding-bottom: 16px;
+
+    .img-wrapper {
+        position: relative;
+        cursor: pointer;
+
+        .img-container {
+            pointer-events: none;
+            position: relative;
+
+            img {
+                pointer-events: all;
+                position: relative;
+            }
+        }
+
+        .img-container::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5);
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .btn-container {
+            position: absolute;
+            right: 8px;
+            bottom: 8px;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        &:hover {
+            .img-container::after {
+                opacity: 1;
+            }
+
+            .btn-container {
+                opacity: 1;
+            }
+        }
+    }
+}
+
 // Typist CSS
 .Typist .Cursor {
     display: inline-block;