Added dialog for logout function

src/css/custom.css

@@ -6,25 +6,25 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #2e8555;
-  --ifm-color-primary-dark: #29784c;
-  --ifm-color-primary-darker: #277148;
-  --ifm-color-primary-darkest: #205d3b;
-  --ifm-color-primary-light: #33925d;
-  --ifm-color-primary-lighter: #359962;
-  --ifm-color-primary-lightest: #3cad6e;
+  --ifm-color-primary: #398aab; /* Base Blue-Teal */
+  --ifm-color-primary-dark: #327c98; /* Slightly Darker */
+  --ifm-color-primary-darker: #2c6f87; /* Muted Dark */
+  --ifm-color-primary-darkest: #22586b; /* Deep Dark Teal */
+  --ifm-color-primary-light: #4c9bc0; /* Slightly Lighter */
+  --ifm-color-primary-lighter: #69accd; /* Softer Blue-Teal */
+  --ifm-color-primary-lightest: #98cde4; /* Very Light Sky Blue */
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: #21af90;
-  --ifm-color-primary-darker: #1fa588;
-  --ifm-color-primary-darkest: #1a8870;
-  --ifm-color-primary-light: #29d5b0;
-  --ifm-color-primary-lighter: #32d8b4;
-  --ifm-color-primary-lightest: #4fddbf;
+  --ifm-color-primary: #4195b6; /* Base Blue-Teal */
+  --ifm-color-primary-dark: #327c98; /* Muted Dark */
+  --ifm-color-primary-darker: #2b6e86; /* Deeper Blue */
+  --ifm-color-primary-darkest: #1e5466; /* Darkest Accent */
+  --ifm-color-primary-light: #4c9bc0; /* Brighter Accent */
+  --ifm-color-primary-lighter: #68aecf; /* Softer Blue */
+  --ifm-color-primary-lightest: #8fc8e0; /* Glowy Light Blue */
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }

src/pages/login.js

@@ -27,7 +27,7 @@ export default function Login() {
           alignItems: "center",
           marginRight: "auto",
           marginLeft: "auto",
-          flexDirection: 'column'
+          flexDirection: 'column',
         }}
       >
         <form
@@ -37,6 +37,9 @@ export default function Login() {
             flexDirection: "column",
             width: "400px",
             margin: "auto",
+            padding: '32px',
+            borderRadius: '12px',
+            boxShadow: '0 4px 10px rgba(0, 0, 0, 0.1)',
           }}
         >
           <img src="img/combination-icon.png" width={'100px'} style={{ margin: "auto" }} />
@@ -80,7 +83,7 @@ export default function Login() {
               padding: "10px",
               borderRadius: "5px",
               border: "none",
-              backgroundColor: "#fd5367",
+              backgroundColor: "var(--ifm-color-primary)",
               color: "white",
               marginTop: '1rem'
             }}

src/theme/ColorModeToggle/index.js

@@ -1,14 +1,64 @@
-import React from 'react';
+import React, { useRef} from 'react';
 import ColorModeToggle from '@theme-original/ColorModeToggle';
 import {logout} from '@site/src/pocketbase';
 
 export default function ColorModeToggleWrapper(props) {
+  const dialogRef = useRef(null)
   return (
     <>
       <ColorModeToggle {...props} />
-      <a style={{background: '#fd5469', color: 'white', paddingRight: 10, paddingLeft: 10, paddingBottom: 2, borderRadius: 5, marginLeft: 15, cursor: "pointer"}} onClick={() => logout(() => window.location.reload())}>
+      <a onClick={() => dialogRef.current.showModal()} style={{background: 'var(--ifm-color-primary)', color: 'white', paddingRight: 10, paddingLeft: 10, paddingBottom: 2, borderRadius: 5, marginLeft: 15, cursor: "pointer"}}>
         Logout
       </a>
+      <dialog ref={dialogRef} style={{
+        padding: '20px',
+        borderRadius: '10px',
+        border: 'none',
+        boxShadow: '0 4px 10px rgba(0, 0, 0, 0.23)',
+        width: '400px',
+        textAlign: 'center',
+      }}>
+        <style>
+          {`
+            dialog::backdrop {
+              background: rgba(255, 255, 255, 0.1);
+              backdrop-filter: blur(8px) brightness(0.8);
+            }
+          `}
+        </style>
+        <h2>Are you sure?</h2>
+        {/* Close Button */}
+        <button 
+          onClick={() => dialogRef.current.close()} 
+          style={{
+            marginTop: '10px',
+            padding: '8px 12px',
+            borderRadius: '6px',
+            color: 'var(--ifm-color-primary-dark)',
+            border: 'none',
+            cursor: 'pointer',
+            marginRight: '5px',
+          }}
+        >
+          Cancel
+        </button>
+        {/* Close Button */}
+        <button 
+          onClick={() => logout() }
+          style={{
+            marginTop: '10px',
+            padding: '8px 12px',
+            borderRadius: '6px',
+            backgroundColor: 'var(--ifm-color-primary-dark)',
+            color: 'white',
+            border: 'none',
+            cursor: 'pointer',
+            marginLeft: '5px'
+          }}
+        >
+          Logout
+        </button>
+      </dialog>
     </>
   );
 }