Fixed the imageZoom component size

DTU-SE-Group-D · Nov 9, 2023 · 3820bc8 · 3820bc8
1 parent b7d0552
commit 3820bc8
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/frontend/src/Components/RoadDetails/ImageAbleZoom.tsx b/frontend/src/Components/RoadDetails/ImageAbleZoom.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-interface ImageClickProps {
+interface ImageZoom {
   /** The URL of the image to display in the zoomed view. */
   imageUrl: string;
   /** A callback function to close the zoomed view. */
@@ -17,7 +17,7 @@ interface ImageClickProps {
  * ImageZoom make images clickable and open a popup to see image closer
  */
 // ...
-const ImageZoom: React.FC<ImageClickProps> = ({
+const ImageZoom: React.FC<ImageZoom> = ({
   imageUrl,
   onClose,
   onNavigate,

diff --git a/frontend/src/css/road_details.css b/frontend/src/css/road_details.css
@@ -266,8 +266,8 @@ input[type='checkbox'] {
 }
 .image-modal-content {
   position: relative;
-  max-width: 60vw;
   max-height: 50vw;
+  max-width: auto;
   overflow: auto;
   background-color: white;
   z-index: 1100; /* Ensure content inside the modal is above the background */
@@ -280,7 +280,7 @@ input[type='checkbox'] {
 }
 
 .image-modal-content img {
-  height: 60vw;
+  height: 50vw;
   width: auto;
 }
 
@@ -301,7 +301,7 @@ input[type='checkbox'] {
   height: 30px;
   width: 30px;
   border-radius: 50%;
-  background-color: rgba(255, 255, 255, 0.3);
+  background-color: rgba(255, 255, 255, 0.5);
 }
 
 .nav-button.left {