Implement Zoom Control Hook and Fix Dropdown Hover Issue

frontend/src/App.js

@@ -1,6 +1,7 @@
 import ReactDOM from "react-dom/client";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import './assets/css/basepage.css';
+import useZoomScale from "./hooks/useZoomScale";
 import HomePage from './pages/HomePage';
 import LoginPage from './pages/LoginPage';
 import RegisterPage from './pages/RegisterPage';
@@ -12,6 +13,7 @@ import CyberIntro from "./modules/Intro/CyberIntro";
 import SafeBrowsing from "./modules/SafeBrowsing/SafeBrowsing";
 
 export default function App() {
+  useZoomScale();
   return (
     <div className="App">
       <BrowserRouter>

frontend/src/assets/css/basepage.css

@@ -1,3 +1,7 @@
+:root {
+  --scale: 1;
+}
+
 @keyframes animatedBackground {
   0% { background-position: 0 0; }
   50% { background-position: 100% 0; }
@@ -70,13 +74,13 @@ code {
 .dropdown {
   position: relative;
   display: inline-block;
-  cursor: pointer; /* Add this line */
+  cursor: pointer;
   right: 50px;
 }
 
 .dropdown-content {
-  display: none;
-  min-width: 125px;
+  display: block;
+  min-width: 100%;
   position: absolute;
   background-color: #f1f1f1;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
@@ -153,7 +157,6 @@ code {
 
 /* Additional styles for dropdown content width */
 .dropdown:hover .dropdown-content {
-  min-width: unset; /* Remove the minimum width */
   width: max-content; /* Set the width to adjust to the content */
 }
 

frontend/src/assets/css/dialogue.css

@@ -27,12 +27,12 @@
 .dialogue-box {
     overflow: hidden;
     position: absolute;
-    height: 30%;
+    height: calc(220px * var(--scale));
     background-color: rgba(47, 54, 48, 0.4);
-    border: 5px solid rgba(66, 189, 103, 0.5);
-    border-radius: 25px;
-    box-shadow: 0 0 10px black;
-    padding: 20px;
+    border: calc(5px * var(--scale)) solid rgba(66, 189, 103, 0.5);
+    border-radius: calc(25px * var(--scale));
+    box-shadow: 0 0 calc(10px * var(--scale)) black;
+    padding: calc(20px * var(--scale));
     box-sizing: border-box;
     color: white;
     font-family: 'Press Start 2P Regular', sans-serif;
@@ -56,34 +56,35 @@
 
 .dialogue-box button {
     position: absolute;
-    bottom: 20px;
-    padding: 15px 30px;
-    border: 2px solid white;
-    border-radius: 10px;
+    font-size: calc(var(--scale) * 12px);
+    width: calc(115px * var(--scale));
+    bottom: calc(20px * var(--scale));
+    padding: calc(15px * var(--scale)) calc(30px * var(--scale));
+    border: calc(2px * var(--scale)) solid white;
+    border-radius: calc(10px * var(--scale));
     background-color: rgb(108, 219, 117);
     font-family: 'Press Start 2P Regular', sans-serif;
     text-transform: uppercase;
     font-weight: bold;
     color: black;
     text-shadow:
-        -1px -1px 0 white,  
-        1px -1px 0 white,
-        -1px 1px 0 white,
-        1px 1px 0 white;
+      calc(-1px * var(--scale)) calc(-1px * var(--scale)) 0 white,  
+      calc(1px * var(--scale)) calc(-1px * var(--scale)) 0 white,
+      calc(-1px * var(--scale)) calc(1px * var(--scale)) 0 white,
+      calc(1px * var(--scale)) calc(1px * var(--scale)) 0 white;
     cursor: pointer;
-    box-shadow: inset 0 -8px 7px 2px rgba(0, 0, 0, 0.3);
+    box-shadow: inset 0 calc(-8px * var(--scale)) calc(7px * var(--scale)) calc(2px * var(--scale)) rgba(0, 0, 0, 0.3);
 }
 
 .dialogue-box p {
-    font-size: small;
+    font-size: calc(var(--scale) * 12px);
     line-height: 1.7;
     text-shadow:
-        -1px -1px 0 black,  
-        1px -1px 0 black,
-        -1px 1px 0 black,
-        1px 1px 0 black;
-}
-
+      calc(-1px * var(--scale)) calc(-1px * var(--scale)) 0 black,  
+      calc(1px * var(--scale)) calc(-1px * var(--scale)) 0 black,
+      calc(-1px * var(--scale)) calc(1px * var(--scale)) 0 black,
+      calc(1px * var(--scale)) calc(1px * var(--scale)) 0 black;
+  }
 
 .dialogue-box button:disabled {
     background-color: rgba(128, 128, 128, 0.801);

frontend/src/assets/css/modules.css

@@ -9,14 +9,14 @@
 
 .module-window {
     position: absolute;
-    top: 75px;
+    top: calc(75px * var(--scale));
     bottom: 0;
     left: 0;
     right: 0;
     background: linear-gradient(to bottom right, #3498db, #9b59b6);
-    border: 5px solid white;
-    border-radius: 15px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+    border: calc(5px * var(--scale)) solid white;
+    border-radius: calc(15px * var(--scale));
+    box-shadow: 0 0 calc(10px * var(--scale)) rgba(0, 0, 0, 0.5);
 
     /* Animation */
     animation: fadeInAndZoom 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
@@ -35,18 +35,18 @@
 
 .back-button {
     position: absolute;
-    padding: 0.25%;
-    width: 120px;
-    height: 68px;
+    padding: calc(0.25% * var(--scale));
+    width: calc(120px * var(--scale));
+    height: calc(68px * var(--scale));
     top: 0;
     left: 0;
-}
+  }
 
 .next-button {
     position: absolute;
-    padding: 0.25%;
-    width: 120px;
-    height: 68px;
+    padding: calc(0.25% * var(--scale));
+    width: calc(120px * var(--scale));
+    height: calc(68px * var(--scale));
     top: 0;
     right: 0;
 }

frontend/src/hooks/useZoomScale.js

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+
+export default function useZoomScale() {
+
+  useEffect(() => {
+    const updateScale = () => {
+      const zoomLevel = window.devicePixelRatio;
+      document.documentElement.style.setProperty('--scale', 1 / zoomLevel);
+    };
+
+    window.addEventListener('resize', updateScale);
+    updateScale();
+
+    return () => window.removeEventListener('resize', updateScale);
+  }, []);
+}