Merge pull request #75 from SmartGecko44/74-bug-|-users-in-dark-mode-…

…get-flashbanged-when-loading-the-page Create background component
SmartGecko44 · Jul 21, 2024 · 2f8c7c4 · 2f8c7c4
2 parents 07187b0 + 7c31dbd
commit 2f8c7c4
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 6 deletions.
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
diff --git a/.idea/sonarlint/issuestore/index.pb b/.idea/sonarlint/issuestore/index.pb
diff --git a/.idea/sonarlint/securityhotspotstore/index.pb b/.idea/sonarlint/securityhotspotstore/index.pb
diff --git a/gxcko.me/index.html b/gxcko.me/index.html
@@ -12,7 +12,6 @@
     </script>
 </head>
 <body>
-
 <div id="root"></div>
 
 <script type="module" src="src/main.tsx"></script>

diff --git a/gxcko.me/src/components/Background.tsx b/gxcko.me/src/components/Background.tsx
@@ -0,0 +1,19 @@
+import {useTheme} from "../contexts/ThemeContext.tsx";
+
+interface BackgroundProps {
+    dialogOpen: boolean;
+}
+
+export default function Background({ dialogOpen }: BackgroundProps) {
+    const {theme} = useTheme();
+
+    if (theme === 'light') {
+        return null;
+    } else if (dialogOpen) {
+        return null;
+    }
+
+    return (
+        <div id="background"></div>
+    );
+}
diff --git a/gxcko.me/src/components/DarkModeToggle.tsx b/gxcko.me/src/components/DarkModeToggle.tsx
@@ -2,12 +2,14 @@ import React, {useEffect, useRef} from "react";
 import {useTheme} from "../contexts/ThemeContext.tsx";
 import {checkCookiesAccepted, getCookie, setCookie} from "./CookiePopup.tsx";
 import {useBlur} from "../contexts/BlurContext.tsx";
+import Background from "./Background.tsx";
 
 const DarkModeToggle: React.FC = () => {
     const {theme, toggleTheme} = useTheme();
     const {blur, toggleBlur} = useBlur();
     const dialogRef = useRef<HTMLDialogElement>(null);
     const dialogShown = useRef(false);
+    const dialogOpen = useRef(false);
 
     useEffect(() => {
         if (!getCookie('dialogShown') && !dialogShown.current) {
@@ -21,6 +23,7 @@ const DarkModeToggle: React.FC = () => {
         const dialog = dialogRef.current;
 
         if (dialog) {
+            dialogOpen.current = true;
             if (typeof dialog.showModal === "function") {
                 dialog.showModal();
             } else {
@@ -61,6 +64,7 @@ const DarkModeToggle: React.FC = () => {
                 if (confirmBtn === null) console.warn('Confirm button not found');
                 document.removeEventListener('click', handler);
                 toggleBlur();
+                dialogOpen.current = false;
             }, 1000); // Delay equal to the transition duration
         } else {
             console.warn('Dialog element not found');
@@ -105,6 +109,7 @@ const DarkModeToggle: React.FC = () => {
                     `}
                 </style>
             </noscript>
+            <Background dialogOpen={dialogOpen.current}/>
             <dialog ref={dialogRef} id="darkModeDia" className={theme === 'dark' ? 'dark' : ''}>
                 <p>Would you like to toggle the dark mode?</p>
                 <div className="button-container">
@@ -118,4 +123,4 @@ const DarkModeToggle: React.FC = () => {
     )
 }
 
-export default DarkModeToggle;
+export default DarkModeToggle;
diff --git a/gxcko.me/styles/backgrounds.css b/gxcko.me/styles/backgrounds.css
@@ -1,6 +1,4 @@
 body {
-    background-color: #ffffff;
-    color: #000000;
     font-family: "Aptos", serif;
     transition: all 1s ease-in-out;
 }
@@ -15,6 +13,18 @@ body.inBackground {
     transition: all 1s ease-in-out;
 }
 
+#background {
+    display: block;
+    position: fixed;
+    left: -50%;
+    top: -50%;
+    z-index: -1;
+    width: 200%;
+    height: 200%;
+    background-color: #222222;
+    transition: all 1s ease-in-out;
+}
+
 .bubble {
     background: lightgray;
     padding: 20px;