Merge remote-tracking branch 'origin/main'

SmartGecko44 · Aug 9, 2024 · 6f9398a · 6f9398a
2 parents 5fd3da3 + cfd35ba
commit 6f9398a
Show file tree

Hide file tree

Showing 9 changed files with 100 additions and 119 deletions.
diff --git a/.idea/sonarlint/issuestore/8/e/8ec9a00bfd09b3190ac6b22251dbb1aa95a0579d b/.idea/sonarlint/issuestore/8/e/8ec9a00bfd09b3190ac6b22251dbb1aa95a0579d
diff --git a/.idea/sonarlint/issuestore/index.pb b/.idea/sonarlint/issuestore/index.pb
diff --git a/gxcko.me/index.html b/gxcko.me/index.html
@@ -12,6 +12,10 @@
     </script>
 </head>
 <body>
+<noscript>
+    <h1>Enable JavaScript to view this page</h1>
+    <p>This page uses JavaScript to display itself. Please enable JavaScript to continue.</p>
+</noscript>
 <div id="root"></div>
 
 <script type="module" src="src/main.tsx"></script>

diff --git a/gxcko.me/scripts/sentry.js b/gxcko.me/scripts/sentry.js
@@ -1,12 +1,13 @@
-import * as Sentry from '@sentry/browser';
+import { init, browserTracingIntegration } from "@sentry/browser";
+
 
 window.sentryOnLoad = function () {
     console.log('sentryOnLoad');
-    Sentry.init({
+    init({
         dsn: 'https://028f532367f52ee276cc72cc87c08951@o4506786880028672.ingest.sentry.io/4506786933899264',
 
         integrations: [
-            Sentry.browserTracingIntegration(),
+            browserTracingIntegration(),
         ],
         tracePropagationTargets: ['https://gxcko.me'],
     });

diff --git a/gxcko.me/src/components/Background.tsx b/gxcko.me/src/components/Background.tsx
@@ -4,12 +4,10 @@ interface BackgroundProps {
     dialogOpen: boolean;
 }
 
-export default function Background({ dialogOpen }: BackgroundProps) {
+export default function Background({ dialogOpen }: Readonly<BackgroundProps>) {
     const {theme} = useTheme();
 
-    if (theme === 'light') {
-        return null;
-    } else if (dialogOpen) {
+    if (theme === 'light' || dialogOpen) {
         return null;
     }
 

diff --git a/gxcko.me/src/components/ContentContainer.tsx b/gxcko.me/src/components/ContentContainer.tsx
@@ -13,31 +13,31 @@ export default function ContentContainer() {
             <div id="link" className={theme === 'dark' ? 'dark' : ''}>
                 <a href="../../redirect/youtube.html"
                    className={`bubble ${theme === 'dark' ? 'dark' : ''}`} target="_blank"
-                   rel="noopener noreferrer">Check out
+                   rel="noopener noreferrer" tabIndex={0}>Check out
                     my YouTube</a>
                 <br/>
                 <br/>
                 <div className="half-br"></div>
                 <br/>
                 <a href="../../redirect/twitter.html"
                    className={`bubble ${theme === 'dark' ? 'dark' : ''}`} target="_blank"
-                   rel="noopener noreferrer">Check out
+                   rel="noopener noreferrer" tabIndex={0}>Check out
                     my Twitter</a>
                 <br/>
                 <br/>
                 <div className="half-br"></div>
                 <br/>
                 <a href="../../redirect/github.html"
                    className={`bubble ${theme === 'dark' ? 'dark' : ''}`} target="_blank"
-                   rel="noopener noreferrer">Check out
+                   rel="noopener noreferrer" tabIndex={0}>Check out
                     my GitHub</a>
                 <br/>
                 <div className="half-br"></div>
                 <br/>
                 <br/>
                 <a href="../../redirect/github-repo.html"
                    className={`bubble ${theme === 'dark' ? 'dark' : ''}`} target="_blank"
-                   rel="noopener noreferrer">View
+                   rel="noopener noreferrer" tabIndex={0}>View
                     the repo for this website</a>
             </div>
         </div>

diff --git a/gxcko.me/src/components/CookiePopup.tsx b/gxcko.me/src/components/CookiePopup.tsx
@@ -59,8 +59,8 @@ export default function CookiePopup() {
                  className={`${isVisible ? 'show' : 'hide'} ${theme === 'dark' ? 'dark' : ''} ${blur ? 'blur' : ''}`}>
                 <p>This website uses cookies</p>
                 <div className="button-container">
-                    <button id="decline" onClick={handleDecline}>Decline</button>
-                    <button id="accept" onClick={handleAccept}>Accept</button>
+                    <button id="decline" onClick={handleDecline} tabIndex={0}>Decline</button>
+                    <button id="accept" onClick={handleAccept} tabIndex={0}>Accept</button>
                 </div>
             </div>
         )

diff --git a/gxcko.me/src/components/DarkModeToggle.tsx b/gxcko.me/src/components/DarkModeToggle.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect, useRef} from "react";
+import React, {useEffect, useRef, useState} from "react";
 import {useTheme} from "../contexts/ThemeContext.tsx";
 import {checkCookiesAccepted, getCookie, setCookie} from "./CookiePopup.tsx";
 import {useBlur} from "../contexts/BlurContext.tsx";
@@ -11,6 +11,10 @@ const DarkModeToggle: React.FC = () => {
     const dialogShown = useRef(false);
     const dialogOpen = useRef(false);
 
+    // State to control the visibility of the buttons
+    const [showCancelBtn, setShowCancelBtn] = useState(false);
+    const [showConfirmBtn, setShowConfirmBtn] = useState(false);
+
     useEffect(() => {
         if (!getCookie('dialogShown') && !dialogShown.current) {
             showDialog();
@@ -20,6 +24,7 @@ const DarkModeToggle: React.FC = () => {
 
     // Function to show the dialog box
     function showDialog() {
+        console.log('Showing dialog');
         const dialog = dialogRef.current;
 
         if (dialog) {
@@ -39,6 +44,15 @@ const DarkModeToggle: React.FC = () => {
             } else {
                 console.log('Cookies are not enabled');
             }
+
+            // Set timeouts for button visibility
+            setTimeout(() => {
+                setShowCancelBtn(true);
+            }, 250);
+
+            setTimeout(() => {
+                setShowConfirmBtn(true);
+            }, 750);
         } else {
             console.error('Dialog element not found');
             return;
@@ -47,11 +61,17 @@ const DarkModeToggle: React.FC = () => {
     }
 
     function closeDialog() {
+        console.log('Closing dialog');
         const dialog = dialogRef.current;
-        const confirmBtn = document.getElementById('confirm');
 
         if (dialog) {
             dialog.classList.remove('visible');
+            setTimeout(() => {
+                setShowCancelBtn(false);
+                setShowConfirmBtn(false);
+            }, 1000)
+
+
             setTimeout(() => {
                 if (typeof dialog.close === "function") {
                     // Browser supports close, so use it
@@ -61,7 +81,6 @@ const DarkModeToggle: React.FC = () => {
                     dialog.removeAttribute("open");
                     dialog.classList.remove('fallback');
                 }
-                if (confirmBtn === null) console.error('Confirm button not found');
                 document.removeEventListener('click', handler);
                 toggleBlur();
                 dialogOpen.current = false;
@@ -72,11 +91,6 @@ const DarkModeToggle: React.FC = () => {
     }
 
     function checkCloseClick() {
-        const confirmBtn = document.getElementById('confirm');
-
-        if (!confirmBtn) {
-            console.error('Confirm button found');
-        }
         document.addEventListener('click', handler);
     }
 
@@ -98,6 +112,13 @@ const DarkModeToggle: React.FC = () => {
         closeDialog();
     }
 
+    function handleKeyDown(event: React.KeyboardEvent) {
+        if (event.key === 'Enter') {
+            console.log('3');
+            showDialog();
+        }
+    }
+
     return (
         <div id="darkModeMenu">
             <noscript>
@@ -113,12 +134,18 @@ const DarkModeToggle: React.FC = () => {
             <dialog ref={dialogRef} id="darkModeDia" className={theme === 'dark' ? 'dark' : ''}>
                 <p>Would you like to toggle the dark mode?</p>
                 <div className="button-container">
-                    <button id="cancel" onClick={closeDialog}>No</button>
-                    <button id="confirm" onClick={handleConfirm}>Yes</button>
+                    {!showCancelBtn && <div className={"button-placeholder"}/>}
+                    {showCancelBtn &&
+                        <button id="cancel" onClick={closeDialog} tabIndex={0} className="button-appear">No</button>}
+                    {!showConfirmBtn && <div className={"button-placeholder"}/>}
+                    {showConfirmBtn && <button id="confirm" onClick={handleConfirm} tabIndex={0}
+                                               className="button-appear">Yes</button>}
                 </div>
             </dialog>
             <img id="dark-toggle" src="../../icons/contrast.svg" alt="Dark Mode Icon"
-                 className={`${theme === 'dark' ? 'dark' : ''} ${blur ? 'blur' : ''}`} onClick={showDialog}/>
+                 className={`${theme === 'dark' ? 'dark' : ''} ${blur ? 'blur' : ''}`} onClick={showDialog}
+                 tabIndex={dialogOpen.current ? -1 : 0}
+                 role={"button"} onKeyDown={handleKeyDown}/>
         </div>
     )
 }

diff --git a/gxcko.me/styles/popups.css b/gxcko.me/styles/popups.css
@@ -44,6 +44,14 @@
     transition: flex-direction 0.75s ease-out; /* Add transition */
 }
 
+/* Placeholder styles */
+.button-placeholder {
+    width: 130px; /* Match the expected width of the buttons */
+    height: 43px; /* Match the expected height of the buttons */
+    display: inline-block; /* Keep them inline */
+    visibility: hidden; /* Keep them invisible until the actual button is shown */
+}
+
 /* Styles for the buttons inside the dialog box */
 #darkModeDia button {
     font-size: 20px;
@@ -72,6 +80,10 @@
     background-color: rgb(76, 150, 80); /* Green */
 }
 
+#darkModeDia #confirm:focus {
+    background-color: rgb(70, 135, 80);
+}
+
 #darkModeDia #cancel {
     background-color: rgb(244, 67, 54); /* Red */
 }
@@ -80,6 +92,25 @@
     background-color: rgb(219, 67, 54); /* Red */
 }
 
+#darkModeDia #cancel:focus {
+    background-color: rgb(200, 50, 54);
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.button-appear {
+    animation: fadeIn 1.5s ease forwards;
+}
+
 #dark-toggle {
     position: absolute;
     bottom: 1%;