Added features to the Settings Page and a test file

app/src/App.js

@@ -5,12 +5,13 @@ import {
   useNavigationType,
   useLocation,
 } from "react-router-dom";
-import Skeleton from "./pages/Skeleton";
-import Login from "./pages/Login";
+import { FontSizeProvider } from "./contexts/FontSizeContext";
+import Skeleton from "./pages/skeleton/Skeleton";
+import Login from "./pages/login/Login";
 import Home from "./pages/home/Home";
-import SettingsPage from './pages/SettingsPage';
+import SettingsPage from './pages/settings/SettingsPage';
 import QuizPage from "./pages/quiz/QuizPage";
-import QuestsPage from './pages/QuestsPage';
+import QuestsPage from './pages/quests/QuestsPage';
 
 function App() {
   const action = useNavigationType();
@@ -49,14 +50,16 @@ function App() {
   }, [pathname]);
 
   return (
-    <Routes>
-      <Route path="/" element={<Skeleton />} />
-      <Route path="/login" element={<Login />} />
-      <Route path="/home" element={<Home />} />
-      <Route path="/settings" element={<SettingsPage />} /> 
-      <Route path="/quiz" element={<QuizPage />} /> 
-      <Route path="/quests" element={<QuestsPage />} /> 
-    </Routes>
+    <FontSizeProvider>
+      <Routes>
+        <Route path="/" element={<Skeleton />} />
+        <Route path="/login" element={<Login />} />
+        <Route path="/home" element={<Home />} />
+        <Route path="/settings" element={<SettingsPage />} /> 
+        <Route path="/quiz" element={<QuizPage />} /> 
+        <Route path="/quests" element={<QuestsPage />} />
+      </Routes>
+	</FontSizeProvider>
   );
 }
 export default App;

app/src/contexts/FontSizeContext.js

@@ -0,0 +1,139 @@
+import React, { createContext, useState, useContext, useEffect } from 'react';
+
+const FontSizeContext = createContext();
+
+export const useFontSize = () => useContext(FontSizeContext);
+
+export const FontSizeProvider = ({ children }) => {
+  const defaultTitleFontSize = 24;
+  const defaultTextFontSize = 18; 
+  const defaultButtonFontSize = 12;
+
+  const MIN_TITLE_FONT_SIZE = 18;
+  const MAX_TITLE_FONT_SIZE = 36;
+  const MIN_TEXT_FONT_SIZE = 12;
+  const MAX_TEXT_FONT_SIZE = 30;
+  const MIN_BUTTON_FONT_SIZE = 6;
+  const MAX_BUTTON_FONT_SIZE = 24;
+
+  const [titleFontSize, setTitleFontSize] = useState(() => {
+    const storedSize = localStorage.getItem('titleFontSize');
+    return storedSize ? parseInt(storedSize) : defaultTitleFontSize;
+  });
+
+  const [textFontSize, setTextFontSize] = useState(() => {
+    const storedSize = localStorage.getItem('textFontSize');
+    return storedSize ? parseInt(storedSize) : defaultTextFontSize;
+  });
+
+  const [buttonFontSize, setButtonFontSize] = useState(() => {
+    const storedSize = localStorage.getItem('buttonFontSize');
+    return storedSize ? parseInt(storedSize) : defaultButtonFontSize;
+  });
+
+  // Define state for dark mode preference
+  const [darkMode, setDarkMode] = useState(() => {
+    const storedMode = localStorage.getItem('darkMode');
+    return storedMode ? JSON.parse(storedMode) : false;
+  });
+
+  // Toggle dark mode function
+  const toggleDarkMode = () => {
+    setDarkMode(prevMode => !prevMode);
+	localStorage.setItem('darkMode', JSON.stringify(!darkMode));
+  };
+
+  useEffect(() => {
+    // Apply dark mode styles dynamically
+    if (darkMode) {
+      document.documentElement.classList.add('dark-mode');
+    } else {
+      document.documentElement.classList.remove('dark-mode');
+    }
+    // Update dark mode preference in local storage
+    localStorage.setItem('darkMode', JSON.stringify(darkMode));
+  }, [darkMode]);
+
+  const updateFontSize = (size, setter, key) => {
+    setter(size);
+    localStorage.setItem(key, size.toString());
+  };
+
+  const increaseFontSize = () => {
+	if (titleFontSize < MAX_TITLE_FONT_SIZE)
+	{
+		updateFontSize(titleFontSize + 2, setTitleFontSize, 'titleFontSize');
+	}
+
+	if (textFontSize < MAX_TEXT_FONT_SIZE)
+	{
+		updateFontSize(textFontSize + 2, setTextFontSize, 'textFontSize');
+	}
+
+	if (buttonFontSize < MAX_BUTTON_FONT_SIZE)
+	{
+		updateFontSize(buttonFontSize + 2, setButtonFontSize, 'buttonFontSize');
+	}
+  };
+
+  const decreaseFontSize = () => {
+    if (titleFontSize > MIN_TITLE_FONT_SIZE)
+	{
+		updateFontSize(titleFontSize - 2, setTitleFontSize, 'titleFontSize');
+	}
+
+	if (textFontSize > MIN_TEXT_FONT_SIZE)
+	{
+		updateFontSize(textFontSize - 2, setTextFontSize, 'textFontSize');
+	}
+
+	if (buttonFontSize > MIN_BUTTON_FONT_SIZE)
+	{
+		updateFontSize(buttonFontSize - 2, setButtonFontSize, 'buttonFontSize');
+	} 
+  };
+
+  const resetFontSize = () => {
+    setTitleFontSize(defaultTitleFontSize);
+    setTextFontSize(defaultTextFontSize);
+    setButtonFontSize(defaultButtonFontSize);
+    localStorage.removeItem('titleFontSize');
+    localStorage.removeItem('textFontSize');
+    localStorage.removeItem('buttonFontSize');
+  };
+
+  useEffect(() => {
+    localStorage.setItem('titleFontSize', titleFontSize.toString());
+  }, [titleFontSize]);
+
+  useEffect(() => {
+    localStorage.setItem('textFontSize', textFontSize.toString());
+  }, [textFontSize]);
+
+  useEffect(() => {
+    localStorage.setItem('buttonFontSize', buttonFontSize.toString());
+  }, [buttonFontSize]);
+
+  useEffect(() => {
+    document.documentElement.style.setProperty('--title-font-size', `${titleFontSize}px`);
+    document.documentElement.style.setProperty('--text-font-size', `${textFontSize}px`);
+    document.documentElement.style.setProperty('--button-font-size', `${buttonFontSize}px`);
+  }, [titleFontSize, textFontSize, buttonFontSize]);
+
+  return (
+    <FontSizeContext.Provider
+      value={{
+        titleFontSize,
+        textFontSize,
+        buttonFontSize,
+        increaseFontSize,
+        decreaseFontSize,
+        resetFontSize,
+		darkMode, // Provide dark mode preference to consumers
+        toggleDarkMode, // Provide function to toggle dark mode
+      }}
+    >
+      {children}
+    </FontSizeContext.Provider>
+  );
+};

app/src/global.css

@@ -2,12 +2,22 @@
 body {
   margin: 0;
   line-height: normal;
+  font-size: var(--dynamic-font-size);
 }
 :root {
   /* fonts */
   --font-roboto: Roboto;
 
+  /* default font size */
+  --title-font-size: 24px; 
+  --text-font-size: 18px; 
+  --button-font-size: 16px;
+
   /* Colors */
   --color-black: #000;
   --color-gainsboro: rgba(217, 217, 217, 0.5);
+  --background-color-light: #ffffff; /* Light mode background color */
+  --text-color-light: #000000; /* Light mode text color */
+  --background-color-dark: #333333; /* Dark mode background color */
+  --text-color-dark: #ffffff; /* Dark mode text color */
 }

app/src/pages/home/Home.module.css

@@ -3,6 +3,7 @@
   position: relative;
   font-weight: 900;
   text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
+  font-size: var(--title-font-size);
 }
 .pageLabel {
   cursor: pointer;

app/src/pages/QuestsPage.js → app/src/pages/quests/QuestsPage.js

@@ -1,10 +1,14 @@
 import React, { useState } from "react";
-import NavigationPanel from "../components/NavigationPanel";
-import Frame from "../components/TopPanel";
-import PageContent from "../components/PageContent";
+import NavigationPanel from "../../components/NavigationPanel";
+import Frame from "../../components/TopPanel";
+import PageContent from "../../components/PageContent";
 import styles from "./QuestsPage.module.css";
+import { useFontSize } from '../../contexts/FontSizeContext'; 
 
 const QuestsPage = () => {
+  const { fontSize, darkMode } = useFontSize();
+  const pageClassName = darkMode ? `${styles.QuestsPage} ${styles.darkMode}` : styles.QuestsPage;
+
   // State to manage all quests
   const [quests, setQuests] = useState([{ title: "Sample Title", text: "Sample Text" }]);
   // State to manage quests in progress
@@ -40,7 +44,7 @@ const QuestsPage = () => {
   };
 
   return (
-    <div className={styles.QuestsPage}>
+    <div className={pageClassName} style={{ fontSize: `${fontSize}px` }}>
       <NavigationPanel />
       <label className={styles.pageLabel} htmlFor="page_label">
         <div className={styles.questsPageTitle}>Quests Page</div>