Merge pull request #61 from DillonDavidson/main

Added features to the Settings Page and a test file again

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/Login.js → app/src/pages/login/Login.js

@@ -6,7 +6,7 @@ import { useNavigate } from "react-router-dom";
 const Login = () => {
     const [email, setEmail] = useState('');
     const [password, setPassword] = useState('');
-    const navigate = useNavigate()
+    const navigate = useNavigate();
 
     async function sendSubmit(foo) {
 
@@ -49,11 +49,11 @@ const Login = () => {
     }
 
     return (
-    <div className="login_container">
+    <div className="login_container" data-testid="login-route">
         <form onSubmit={sendSubmit} className="login_form">
-            <label for="email">Email</label>
+            <label htmlFor="email">Email</label>
             <input value={email} type="email" onChange={(foo) => setEmail(foo.target.value)} placeholder="Email" name="Email" id="Email" />
-            <label for="password">Password</label>
+            <label htmlFor="password">Password</label>
             <input value={password} type="password" onChange={(foo) => setPassword(foo.target.value)} placeholder="********" name="password" id="password" />
             <button class="login_button" type="submit">Log In</button>
         </form>

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

@@ -1,8 +1,9 @@
 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 = () => {
   // State to manage available quests

app/src/pages/QuestsPage.module.css → app/src/pages/quests/QuestsPage.module.css

@@ -5,6 +5,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;
@@ -32,6 +33,10 @@
     color: var(--color-black);
     font-family: var(--font-roboto);
 }
+.QuestsPage.darkMode {
+    background-color: var(--background-color-dark); /* Use dark mode background color */
+    color: var(--text-color-dark); /* Use dark mode text color */
+}
 @media screen and (max-width: 1200px) {
     .QuestsPage {
         height: 852px;
@@ -50,7 +55,7 @@
 
 .questTitle {
     text-align: left;
-    font-size: 16px;
+    font-size: var(--text-font-size);
 }
 
 .questBlock {
@@ -111,6 +116,6 @@
     border: none;
     border-radius: 5px;
     cursor: pointer;
-    font-size: 15px;
+    font-size: var(--button-font-size);
     position: relative; /* Change position to relative */
 }