From 7b1c4c27fe520fcee18918d7857349ed2efe4e0d Mon Sep 17 00:00:00 2001
From: Frederic Beckmann <mixmix99@hotmail.de>
Date: Sat, 8 Feb 2025 00:22:20 +0100
Subject: [PATCH] Refactor dark mode handling and update UI components

Extract dark mode logic into a reusable helper function to improve code clarity and maintainability. Updated the UI layout for better structure and styling, including replacing placeholder logos and enhancing card design.
---
 react-vite-client/src/App.tsx                 | 82 +++++++------------
 react-vite-client/src/index.css               |  2 +-
 .../src/theme_helpers/ThemeHelpers.ts         | 25 ++++++
 3 files changed, 54 insertions(+), 55 deletions(-)
 create mode 100644 react-vite-client/src/theme_helpers/ThemeHelpers.ts

diff --git a/react-vite-client/src/App.tsx b/react-vite-client/src/App.tsx
index c2a626a..28b5cc9 100644
--- a/react-vite-client/src/App.tsx
+++ b/react-vite-client/src/App.tsx
@@ -1,8 +1,7 @@
 import {useEffect, useState} from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
 import './App.css' // Ensure a declaration for CSS is added in a .d.ts file
 import {ColumnDirective, ColumnsDirective, GridComponent} from '@syncfusion/ej2-react-grids';
+import {handleDarkMode} from "./theme_helpers/ThemeHelpers.ts";
 
 
 function App() {
@@ -10,26 +9,7 @@ function App() {
 
 
     useEffect(() => {
-        const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-
-        // Function to update dark mode for Syncfusion controls
-        const updateDarkMode = (e: MediaQueryListEvent) => {
-            if (e.matches) {
-                // If the system is in dark mode, add the class to your container or body
-                document.body.classList.add("e-dark-mode");
-            } else {
-                // Otherwise, remove it
-                document.body.classList.remove("e-dark-mode");
-            }
-        };
-
-        // Set initial mode based on system preference:
-        updateDarkMode(mediaQuery as unknown as MediaQueryListEvent);
-
-        // Listen for changes in the system preference:
-        mediaQuery.addEventListener("change", updateDarkMode);
-
-        return () => mediaQuery.removeEventListener("change", updateDarkMode);
+        return handleDarkMode();
     }, []);
 
 
@@ -48,40 +28,34 @@ function App() {
 
     return (
         <>
-            <div>
-                <a href="https://vite.dev" target="_blank">
-                    <img src={viteLogo} className="logo" alt="Vite logo"/>
-                </a>
-                <a href="https://react.dev" target="_blank">
-                    <img src={reactLogo} className="logo react" alt="React logo"/>
-                </a>
-            </div>
-            <h1>Vite + React</h1>
-            <div className="card">
-                <button className="btn w-56 m-2" onClick={() => setCount((count) => count + 1)}>
-                    count is {count}
-                </button>
-
-                <div className="badge badge-secondary m-4">primary</div>
-
-                <div role="alert" className="alert alert-error">
-                    <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        className="h-6 w-6 shrink-0 stroke-current"
-                        fill="none"
-                        viewBox="0 0 24 24">
-                        <path
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            strokeWidth="2"
-                            d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
-                    </svg>
-                    <span>Error! Task failed successfully.</span>
+            <h1>Vite, React, Syncfusion, Daisyui Demo</h1>
+            <div className="card shadow-md w-2/3 mt-5 bg-auto-50">
+                <div className="card-body">
+                    <button className="btn w-full m-2" onClick={() => setCount((count) => count + 1)}>
+                        count is {count}
+                    </button>
                 </div>
-                <p>
-                    Edit <code>src/App.tsx</code> and save to test HMR
-                </p>
             </div>
+
+            <div className="badge badge-secondary m-4">primary</div>
+
+            <div role="alert" className="alert alert-error">
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="h-6 w-6 shrink-0 stroke-current"
+                    fill="none"
+                    viewBox="0 0 24 24">
+                    <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2"
+                        d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                </svg>
+                <span>Error! Task failed successfully.</span>
+            </div>
+            <p>
+                Edit <code>src/App.tsx</code> and save to test HMR
+            </p>
             <p className="font-bold underline">
                 Click on the Vite and React logos to learn more
             </p>
diff --git a/react-vite-client/src/index.css b/react-vite-client/src/index.css
index e183695..b680166 100644
--- a/react-vite-client/src/index.css
+++ b/react-vite-client/src/index.css
@@ -13,7 +13,7 @@
 
 
 @plugin "daisyui" {
-    themes: light --default, dracula --prefersdark;
+    themes: light --default, dark --prefersdark;
 }
 
 
diff --git a/react-vite-client/src/theme_helpers/ThemeHelpers.ts b/react-vite-client/src/theme_helpers/ThemeHelpers.ts
new file mode 100644
index 0000000..be0b91b
--- /dev/null
+++ b/react-vite-client/src/theme_helpers/ThemeHelpers.ts
@@ -0,0 +1,25 @@
+export function handleDarkMode(): () => void {
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
+    // Function to update dark mode for Syncfusion controls
+    const updateDarkMode = (e: MediaQueryList | MediaQueryListEvent) => {
+        if (e.matches) {
+            // If the system is in dark mode, add the class
+            document.body.classList.add("e-dark-mode");
+        } else {
+            // Otherwise, remove it
+            document.body.classList.remove("e-dark-mode");
+        }
+    };
+
+    // Set initial mode based on system preference:
+    updateDarkMode(mediaQuery); // Pass the initial `mediaQuery` directly
+
+    // Listen for changes in system preference:
+    mediaQuery.addEventListener("change", updateDarkMode);
+
+    // Cleanup function to remove the event listener
+    return () => {
+        mediaQuery.removeEventListener("change", updateDarkMode);
+    };
+}
\ No newline at end of file