From a0c6515b2322f9a07116a2cdab668f75b17fed3c Mon Sep 17 00:00:00 2001
From: DillonDavidson <dldsecond@gmail.com>
Date: Tue, 26 Mar 2024 03:56:37 -0700
Subject: [PATCH 1/2] Added features to the Settings Page and a test file

---
 app/src/App.js                                |  27 +--
 app/src/contexts/FontSizeContext.js           | 139 +++++++++++++
 app/src/global.css                            |  10 +
 app/src/pages/SettingsPage.js                 |  31 ---
 app/src/pages/SettingsPage.module.css         |  53 -----
 app/src/pages/Skeleton.js                     |  24 ---
 app/src/pages/home/Home.module.css            |   1 +
 app/src/pages/{ => login}/Login.css           |   0
 app/src/pages/{ => login}/Login.js            |   0
 app/src/pages/{ => quests}/QuestsPage.js      |  12 +-
 .../pages/{ => quests}/QuestsPage.module.css  |  11 +-
 app/src/pages/quiz/QuizPage.js                |  19 +-
 app/src/pages/quiz/QuizPage.module.css        |  22 +-
 app/src/pages/settings/SettingsPage.js        |  79 ++++++++
 .../pages/settings/SettingsPage.module.css    | 191 ++++++++++++++++++
 app/src/pages/skeleton/Skeleton.js            |  31 +++
 .../pages/{ => skeleton}/Skeleton.module.css  |   7 +-
 app/src/tests/SettingsPage.test.js            |  31 +++
 18 files changed, 547 insertions(+), 141 deletions(-)
 mode change 100644 => 100755 app/src/App.js
 create mode 100755 app/src/contexts/FontSizeContext.js
 mode change 100644 => 100755 app/src/global.css
 delete mode 100644 app/src/pages/SettingsPage.js
 delete mode 100644 app/src/pages/SettingsPage.module.css
 delete mode 100644 app/src/pages/Skeleton.js
 mode change 100644 => 100755 app/src/pages/home/Home.module.css
 rename app/src/pages/{ => login}/Login.css (100%)
 rename app/src/pages/{ => login}/Login.js (100%)
 rename app/src/pages/{ => quests}/QuestsPage.js (87%)
 mode change 100644 => 100755
 rename app/src/pages/{ => quests}/QuestsPage.module.css (87%)
 mode change 100644 => 100755
 mode change 100644 => 100755 app/src/pages/quiz/QuizPage.js
 mode change 100644 => 100755 app/src/pages/quiz/QuizPage.module.css
 create mode 100755 app/src/pages/settings/SettingsPage.js
 create mode 100755 app/src/pages/settings/SettingsPage.module.css
 create mode 100755 app/src/pages/skeleton/Skeleton.js
 rename app/src/pages/{ => skeleton}/Skeleton.module.css (80%)
 mode change 100644 => 100755
 create mode 100755 app/src/tests/SettingsPage.test.js

diff --git a/app/src/App.js b/app/src/App.js
old mode 100644
new mode 100755
index 93503e21..c484529d
--- a/app/src/App.js
+++ b/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;
\ No newline at end of file
diff --git a/app/src/contexts/FontSizeContext.js b/app/src/contexts/FontSizeContext.js
new file mode 100755
index 00000000..df4c0d27
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/app/src/global.css b/app/src/global.css
old mode 100644
new mode 100755
index 0566a41e..b2938639
--- a/app/src/global.css
+++ b/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 */
 }
diff --git a/app/src/pages/SettingsPage.js b/app/src/pages/SettingsPage.js
deleted file mode 100644
index 4a898466..00000000
--- a/app/src/pages/SettingsPage.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import NavigationPanel from "../components/NavigationPanel";
-import Frame from "../components/TopPanel";
-import PageContent from "../components/PageContent";
-import styles from "./SettingsPage.module.css";
-
-const SettingsPage = () => {
-  const handleButtonClick = () => {
-    window.location.href = "https://wikipedia.com"; // Redirects to Wikipedia
-  };
-
-  return (
-    <div className={styles.settingsPage}>
-      <NavigationPanel />
-      <label className={styles.pageLabel} htmlFor="page_label">
-        <div className={styles.settingsPagePage}>Settings Page</div>
-      </label>
-      <Frame />
-      <PageContent
-        pageContentHeight="511px"
-        pageContentPosition="absolute"
-        pageContentTop="178px"
-        pageContentLeft="26px"
-      />
-      <button onClick={handleButtonClick} className={styles.button}>
-        Go to Wikipedia
-      </button>
-    </div>
-  );
-};
-
-export default SettingsPage;
\ No newline at end of file
diff --git a/app/src/pages/SettingsPage.module.css b/app/src/pages/SettingsPage.module.css
deleted file mode 100644
index 52b67160..00000000
--- a/app/src/pages/SettingsPage.module.css
+++ /dev/null
@@ -1,53 +0,0 @@
-.settingsPagePage {
-    align-self: stretch;
-    position: relative;
-    font-weight: 900;
-    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
-}
-.pageLabel {
-    cursor: pointer;
-    position: absolute;
-    top: 128px;
-    left: 17px;
-    width: 366px;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: center;
-}
-.settingsPage {
-    width: 100%;
-    height: 852px;
-    position: relative;
-    border: 2px solid var(--color-black);
-    box-sizing: border-box;
-    overflow: hidden;
-    min-width: 393px;
-    max-width: 393px;
-    min-height: 852px;
-    max-height: 852px;
-    text-align: center;
-    font-size: 32px;
-    color: var(--color-black);
-    font-family: var(--font-roboto);
-}
-@media screen and (max-width: 1200px) {
-    .settingsPage {
-        height: 852px;
-        min-width: 393px;
-        max-width: 393px;
-        min-height: 852px;
-        max-height: 852px;
-    }
-}
-.button {
-    background-color: #007bff;
-    color: white;
-    padding: 10px 20px;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    font-size: 18px;
-    margin-top: 20px;
-}
\ No newline at end of file
diff --git a/app/src/pages/Skeleton.js b/app/src/pages/Skeleton.js
deleted file mode 100644
index a61c051f..00000000
--- a/app/src/pages/Skeleton.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import NavigationPanel from "../components/NavigationPanel";
-import Frame from "../components/TopPanel";
-import PageContent from "../components/PageContent";
-import styles from "./Skeleton.module.css";
-
-const Skeleton = () => {
-  return (
-    <div className={styles.skeleton}>
-      <NavigationPanel />
-      <label className={styles.pageLabel} htmlFor="page_label">
-        <div className={styles.skeletonPage}>Skeleton Page</div>
-      </label>
-      <Frame />
-      <PageContent
-        pageContentHeight="511px"
-        pageContentPosition="absolute"
-        pageContentTop="178px"
-        pageContentLeft="26px"
-      />
-    </div>
-  );
-};
-
-export default Skeleton;
diff --git a/app/src/pages/home/Home.module.css b/app/src/pages/home/Home.module.css
old mode 100644
new mode 100755
index 6119a758..fc4222da
--- a/app/src/pages/home/Home.module.css
+++ b/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;
diff --git a/app/src/pages/Login.css b/app/src/pages/login/Login.css
similarity index 100%
rename from app/src/pages/Login.css
rename to app/src/pages/login/Login.css
diff --git a/app/src/pages/Login.js b/app/src/pages/login/Login.js
similarity index 100%
rename from app/src/pages/Login.js
rename to app/src/pages/login/Login.js
diff --git a/app/src/pages/QuestsPage.js b/app/src/pages/quests/QuestsPage.js
old mode 100644
new mode 100755
similarity index 87%
rename from app/src/pages/QuestsPage.js
rename to app/src/pages/quests/QuestsPage.js
index 9b7dccf3..b0707188
--- a/app/src/pages/QuestsPage.js
+++ b/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>
diff --git a/app/src/pages/QuestsPage.module.css b/app/src/pages/quests/QuestsPage.module.css
old mode 100644
new mode 100755
similarity index 87%
rename from app/src/pages/QuestsPage.module.css
rename to app/src/pages/quests/QuestsPage.module.css
index 34352727..c8b83235
--- a/app/src/pages/QuestsPage.module.css
+++ b/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;
@@ -48,7 +53,7 @@
     border: none;
     border-radius: 5px;
     cursor: pointer;
-    font-size: 18px;
+    font-size: var(--button-font-size);
     margin-top: 20px;
 }
 
@@ -58,7 +63,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: 18px;
+    font-size: var(--button-font-size);
     position: absolute; 
   }
\ No newline at end of file
diff --git a/app/src/pages/quiz/QuizPage.js b/app/src/pages/quiz/QuizPage.js
old mode 100644
new mode 100755
index d9e272d6..f4ff3683
--- a/app/src/pages/quiz/QuizPage.js
+++ b/app/src/pages/quiz/QuizPage.js
@@ -3,9 +3,13 @@ import NavigationPanel from "../../components/NavigationPanel";
 import Frame from "../../components/TopPanel";
 import PageContent from "../../components/PageContent";
 import styles from "./QuizPage.module.css";
-import questionsData from "./quiz_questions.json"; 
+import questionsData from "./quiz_questions.json";
+import { useFontSize } from '../../contexts/FontSizeContext'; 
 
 const QuizPage = () => {
+  const { fontSize, darkMode } = useFontSize();
+  const pageClassName = darkMode ? `${styles.quizPage} ${styles.darkMode}` : styles.quizPage;
+	
   const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
   const [userAnswers, setUserAnswers] = useState({});
   const [quizCompleted, setQuizCompleted] = useState(false); 
@@ -62,7 +66,7 @@ const QuizPage = () => {
   const relationshipsPercentage = (relationshipsScore / totalPossiblePoints) * 100;
 
   return (
-    <div className={styles.quizPage}>
+    <div className={pageClassName} style={{ fontSize: `${fontSize}px` }}>
       <NavigationPanel />
       <Frame />
       <PageContent
@@ -79,11 +83,12 @@ const QuizPage = () => {
         )}
         {!quizCompleted && (
           <div className={styles.answerOptions}>
-            <button className={userAnswers[currentQuestionIndex]?.answer === 1 ? styles.selected : ""} onClick={() => handleAnswerSelection(1, questionsData[currentQuestionIndex].type)}>Strongly Disagree</button>
-            <button className={userAnswers[currentQuestionIndex]?.answer === 2 ? styles.selected : ""} onClick={() => handleAnswerSelection(2, questionsData[currentQuestionIndex].type)}>Disagree</button>
-            <button className={userAnswers[currentQuestionIndex]?.answer === 3 ? styles.selected : ""} onClick={() => handleAnswerSelection(3, questionsData[currentQuestionIndex].type)}>Neutral</button>
-            <button className={userAnswers[currentQuestionIndex]?.answer === 4 ? styles.selected : ""} onClick={() => handleAnswerSelection(4, questionsData[currentQuestionIndex].type)}>Agree</button>
-            <button className={userAnswers[currentQuestionIndex]?.answer === 5 ? styles.selected : ""} onClick={() => handleAnswerSelection(5, questionsData[currentQuestionIndex].type)}>Strongly Agree</button>
+            
+			<button className={`${userAnswers[currentQuestionIndex]?.answer === 1 ? styles.selected : ""} ${styles.answerButton}`} onClick={() => handleAnswerSelection(1, questionsData[currentQuestionIndex].type)}>Strongly Disagree</button>
+            <button className={`${userAnswers[currentQuestionIndex]?.answer === 2 ? styles.selected : ""} ${styles.answerButton}`} onClick={() => handleAnswerSelection(2, questionsData[currentQuestionIndex].type)}>Disagree</button>
+            <button className={`${userAnswers[currentQuestionIndex]?.answer === 3 ? styles.selected : ""} ${styles.answerButton}`} onClick={() => handleAnswerSelection(3, questionsData[currentQuestionIndex].type)}>Neutral</button>
+            <button className={`${userAnswers[currentQuestionIndex]?.answer === 4 ? styles.selected : ""} ${styles.answerButton}`} onClick={() => handleAnswerSelection(4, questionsData[currentQuestionIndex].type)}>Agree</button>
+            <button className={`${userAnswers[currentQuestionIndex]?.answer === 5 ? styles.selected : ""} ${styles.answerButton}`} onClick={() => handleAnswerSelection(5, questionsData[currentQuestionIndex].type)}>Strongly Agree</button>
           </div>
         )}
         {!quizCompleted ? (
diff --git a/app/src/pages/quiz/QuizPage.module.css b/app/src/pages/quiz/QuizPage.module.css
old mode 100644
new mode 100755
index 16cef71a..21d82fa9
--- a/app/src/pages/quiz/QuizPage.module.css
+++ b/app/src/pages/quiz/QuizPage.module.css
@@ -10,11 +10,14 @@
   min-height: 852px;
   max-height: 852px;
   text-align: center;
-  font-size: 32px;
+  font-size: var(--title-font-size);
   color: var(--color-black);
   font-family: var(--font-roboto);
 }
-
+.quizPage.darkMode {
+    background-color: var(--background-color-dark); /* Use dark mode background color */
+    color: var(--text-color-dark); /* Use dark mode text color */
+}
 .pageLabel {
   cursor: pointer;
   position: absolute;
@@ -39,8 +42,8 @@
 
 .answerOptions {
   display: flex;
-  flex-wrap: wrap; 
-  justify-content: space-around;
+  flex-direction: column; 
+  align-items: center; 
 }
 
 .button {
@@ -50,10 +53,10 @@
   border: none;
   border-radius: 5px;
   cursor: pointer;
-  font-size: 18px;
+  font-size: var(--button-font-size);
   margin-top: 20px;
   position: absolute; 
-  bottom: -50px; 
+  bottom: -125px; 
   left: 50%; 
   transform: translateX(-50%); 
   z-index: 1; 
@@ -63,3 +66,10 @@
   background-color: green;
   color: white;
 }
+.answerButton {
+  font-size: var(--text-font-size);
+  margin-bottom: 15px;
+}
+/* 
+<button className={userAnswers[currentQuestionIndex]?.answer === 1 ? styles.selected : ""} onClick={() => handleAnswerSelection(1, questionsData[currentQuestionIndex].type)}>Strongly Disagree</button>
+*/
\ No newline at end of file
diff --git a/app/src/pages/settings/SettingsPage.js b/app/src/pages/settings/SettingsPage.js
new file mode 100755
index 00000000..938acc71
--- /dev/null
+++ b/app/src/pages/settings/SettingsPage.js
@@ -0,0 +1,79 @@
+import React, { useState } from "react";
+import NavigationPanel from "../../components/NavigationPanel";
+import Frame from "../../components/TopPanel";
+import PageContent from "../../components/PageContent";
+import styles from "./SettingsPage.module.css";
+import { useFontSize } from '../../contexts/FontSizeContext';
+
+const SettingsPage = () => {
+  const { fontSize, increaseFontSize, decreaseFontSize, resetFontSize, darkMode, toggleDarkMode } = useFontSize();
+  const [showDeleteAccountPopup, setShowDeleteAccountPopup] = useState(false);
+
+  const handleDeleteAccountClick = () => {
+    setShowDeleteAccountPopup(true);
+  };
+
+  return (
+    <div className={`${styles.settingsPage} ${darkMode ? styles.darkMode : ''}`} style={{ fontSize: `${fontSize}px` }}>
+      <NavigationPanel />
+      <label className={styles.pageLabel} htmlFor="page_label">
+        <div className={styles.settingsPagePage}>
+          Settings Page
+        </div>
+      </label>
+      <Frame />
+      <PageContent
+        pageContentHeight="511px"
+        pageContentPosition="absolute"
+        pageContentTop="178px"
+        pageContentLeft="26px"
+      />
+      
+      <div className={styles.fontSizeControls}>
+        <div>
+          Text Size
+        </div>
+		<div className={styles.fontSizeButtonContainer}>
+          <button onClick={decreaseFontSize} className={styles.decreaseButton}>
+            -
+          </button>
+          <button onClick={resetFontSize} className={styles.resetButton}>
+            RESET
+          </button>
+          <button onClick={increaseFontSize} className={styles.increaseButton}>
+            +
+          </button>
+		</div>
+      </div>  
+	  <div className={styles.themeControls}>
+		<button onClick={toggleDarkMode} className={styles.darkModeButton}>
+		  {darkMode ? 'Light Mode' : 'Dark Mode'}
+		</button>
+	  </div>
+	  <div className={styles.resetQuizButtonContainer}>
+	    <button onClick={() => {}} className={styles.resetQuizButton}>
+		  Retake Quiz
+		</button>
+	  </div>
+	  <div className={styles.logoutButtonContainer}>
+	    <button onClick={() => {}} className={styles.logoutButton}>
+		  Logout
+		</button>
+	  </div>
+	  <div className={styles.deleteAccountButtonContainer}>
+	    <button onClick={handleDeleteAccountClick} className={styles.deleteAccountButton}>
+		  Delete Account
+		</button>
+		{showDeleteAccountPopup && (
+          <div className={styles.deleteAccountButtonpopup} data-testid="delete-account-popup">
+            <p>Are you sure you want to delete your account?</p>
+            <button onClick={() => setShowDeleteAccountPopup(false)}>Cancel</button>
+            <button onClick={() => setShowDeleteAccountPopup(false)}>Confirm</button>
+          </div>
+        )}
+	  </div>
+    </div>
+  );
+};
+
+export default SettingsPage;
diff --git a/app/src/pages/settings/SettingsPage.module.css b/app/src/pages/settings/SettingsPage.module.css
new file mode 100755
index 00000000..4c108d4d
--- /dev/null
+++ b/app/src/pages/settings/SettingsPage.module.css
@@ -0,0 +1,191 @@
+.settingsPagePage {
+    align-self: stretch;
+    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;
+    position: absolute;
+    top: 128px;
+    left: 17px;
+    width: 366px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+}
+.settingsPage {
+    width: 100%;
+    height: 852px;
+    position: relative;
+    border: 2px solid var(--color-black);
+    box-sizing: border-box;
+    overflow: hidden;
+    min-width: 393px;
+    max-width: 393px;
+    min-height: 852px;
+    max-height: 852px;
+    text-align: center;
+    font-size: var(--title-font-size);
+    color: var(--color-black);
+    font-family: var(--font-roboto);
+}
+
+.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) {
+    .settingsPage {
+        height: 852px;
+        min-width: 393px;
+        max-width: 393px;
+        min-height: 852px;
+        max-height: 852px;
+    }
+}
+
+.fontSizeControls {
+	position: absolute;
+	top: 25%;
+	left: 50%;
+	width: 100%;
+	transform: translateX(-50%);
+	display: flex;
+	flex-direction: column; 
+	align-items: center; 
+	text-align: center; 
+	font-size: var(--text-font-size);
+}
+
+.fontSizeButtonContainer {
+	margin-top: 10px; 
+	display: flex;
+	justify-content: center; 
+	width: 100%; 
+}
+
+.decreaseButton {
+	padding: 8px 15px;
+	background-color: red;
+	color: white;
+	font-size: var(--button-font-size);
+}
+
+.increaseButton {
+	padding: 8px 15px;
+	background-color: green;
+	color: white; 
+	font-size: var(--button-font-size);
+}
+
+.resetButton {
+	padding: 8px 15px;
+	background-color: white; 
+	color: black;
+	font-size: var(--button-font-size);
+}
+
+.themeControls {
+	position: absolute;
+	top: 40%;
+	left: 50%;
+	width: 100%;
+	transform: translateX(-50%);
+	display: flex;
+	flex-direction: column; 
+	align-items: center; 
+	text-align: center; 
+	font-size: var(--text-font-size);
+}
+
+.darkModeButton {
+	position: absolute;
+	top: 50%;
+	padding: 8px 15px;
+	background-color: white;
+	color: black;
+	font-size: var(--button-font-size);
+}
+
+.resetQuizButtonContainer {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	width: 100%;
+	transform: translateX(-50%);
+	display: flex;
+	flex-direction: column; 
+	align-items: center; 
+	text-align: center; 
+}
+
+.resetQuizButton {
+	position: absolute;
+	top: 50%;
+	padding: 8px 15px;
+	background-color: plum;
+	color: black;
+	font-size: var(--button-font-size);
+}
+
+.logoutButtonContainer {
+	position: absolute;
+	top: 60%;
+	left: 50%;
+	width: 100%;
+	transform: translateX(-50%);
+	display: flex;
+	flex-direction: column; 
+	align-items: center; 
+	text-align: center; 
+}
+
+.logoutButton {
+	position: absolute;
+	top: 50%;
+	padding: 8px 15px;
+	background-color: aquamarine;
+	color: black;
+	font-size: var(--button-font-size);
+}
+
+.deleteAccountButtonContainer {
+	position: absolute;
+	top: 70%;
+	left: 50%;
+	width: 100%;
+	transform: translateX(-50%);
+	display: flex;
+	flex-direction: column; 
+	align-items: center; 
+	text-align: center; 
+}
+
+.deleteAccountButton {
+	position: absolute;
+	top: 50%;
+	padding: 8px 15px;
+	background-color: linen;
+	color: black;
+	font-size: var(--button-font-size);
+}
+
+.deleteAccountButtonpopup {
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	width: 75%;
+	transform: translate(-50%, -50%);
+	background-color: lightgrey;
+	padding: 20px;
+	border: 5px solid blue;
+	border-radius: 5px;
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+	justify-content: center;
+	z-index: 9999;
+}
\ No newline at end of file
diff --git a/app/src/pages/skeleton/Skeleton.js b/app/src/pages/skeleton/Skeleton.js
new file mode 100755
index 00000000..01ad5098
--- /dev/null
+++ b/app/src/pages/skeleton/Skeleton.js
@@ -0,0 +1,31 @@
+import React, { useState } from "react";
+import NavigationPanel from "../../components/NavigationPanel";
+import Frame from "../../components/TopPanel";
+import PageContent from "../../components/PageContent";
+import styles from "./Skeleton.module.css";
+import { useFontSize } from '../../contexts/FontSizeContext'; 
+
+const Skeleton = () => {
+  const { fontSize, darkMode } = useFontSize();
+  const pageClassName = darkMode ? `${styles.skeleton} ${styles.darkMode}` : styles.skeleton;
+  
+  return (
+    <div className={pageClassName} style={{ fontSize: `${fontSize}px` }}>
+      <NavigationPanel />
+      <label className={styles.pageLabel} htmlFor="page_label">
+        <div className={styles.skeletonPage}>
+		  Skeleton Page
+		</div>
+      </label>
+      <Frame />
+      <PageContent
+        pageContentHeight="511px"
+        pageContentPosition="absolute"
+        pageContentTop="178px"
+        pageContentLeft="26px"
+      />
+    </div>
+  );
+};
+
+export default Skeleton;
diff --git a/app/src/pages/Skeleton.module.css b/app/src/pages/skeleton/Skeleton.module.css
old mode 100644
new mode 100755
similarity index 80%
rename from app/src/pages/Skeleton.module.css
rename to app/src/pages/skeleton/Skeleton.module.css
index 6be2cfac..f0f98fa9
--- a/app/src/pages/Skeleton.module.css
+++ b/app/src/pages/skeleton/Skeleton.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;
@@ -28,7 +29,6 @@
   min-height: 852px;
   max-height: 852px;
   text-align: center;
-  font-size: 32px;
   color: var(--color-black);
   font-family: var(--font-roboto);
 }
@@ -41,3 +41,8 @@
     max-height: 852px;
   }
 }
+
+.darkMode {
+	background-color: var(--background-color-dark); /* Use dark mode background color */
+	color: var(--text-color-dark); /* Use dark mode text color */
+}
\ No newline at end of file
diff --git a/app/src/tests/SettingsPage.test.js b/app/src/tests/SettingsPage.test.js
new file mode 100755
index 00000000..33a72731
--- /dev/null
+++ b/app/src/tests/SettingsPage.test.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import SettingsPage from '../pages/settings/SettingsPage';
+import '@testing-library/jest-dom/extend-expect';
+
+jest.mock('../contexts/FontSizeContext', () => ({
+  useFontSize: () => ({
+    fontSize: 16, 
+    increaseFontSize: jest.fn(),
+    decreaseFontSize: jest.fn(),
+    resetFontSize: jest.fn(),
+    darkMode: false, 
+    toggleDarkMode: jest.fn(),
+  }),
+}));
+
+describe('SettingsPage Component', () => {
+  it('renders without crashing', () => {
+    render(<SettingsPage />);
+  });
+
+  it('shows delete account popup when delete account button is clicked', () => {
+    const { getByText, getByTestId } = render(<SettingsPage />);
+    const deleteAccountButton = getByText('Delete Account');
+
+    fireEvent.click(deleteAccountButton);
+
+    const popup = getByTestId('delete-account-popup');
+    expect(popup).toBeInTheDocument();
+  });
+});
\ No newline at end of file

From 83b4babc3e2e2546ff643d5d53dcc866d01b7b33 Mon Sep 17 00:00:00 2001
From: DillonDavidson <dldsecond@gmail.com>
Date: Tue, 26 Mar 2024 17:58:37 -0700
Subject: [PATCH 2/2] Committing local changes before switching branches

---
 app/src/pages/home/Home.module.css     |  1 -
 app/src/pages/quiz/QuizPage.js         | 17 ++++++++---------
 app/src/pages/quiz/QuizPage.module.css | 22 ++++++----------------
 app/src/pages/settings/SettingsPage.js |  2 +-
 app/src/pages/skeleton/Skeleton.js     |  2 +-
 5 files changed, 16 insertions(+), 28 deletions(-)
 mode change 100755 => 100644 app/src/pages/home/Home.module.css
 mode change 100755 => 100644 app/src/pages/quiz/QuizPage.module.css

diff --git a/app/src/pages/home/Home.module.css b/app/src/pages/home/Home.module.css
old mode 100755
new mode 100644
index fc4222da..6119a758
--- a/app/src/pages/home/Home.module.css
+++ b/app/src/pages/home/Home.module.css
@@ -3,7 +3,6 @@
   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;
diff --git a/app/src/pages/quiz/QuizPage.js b/app/src/pages/quiz/QuizPage.js
index f4ff3683..6f7ba943 100755
--- a/app/src/pages/quiz/QuizPage.js
+++ b/app/src/pages/quiz/QuizPage.js
@@ -3,12 +3,12 @@ import NavigationPanel from "../../components/NavigationPanel";
 import Frame from "../../components/TopPanel";
 import PageContent from "../../components/PageContent";
 import styles from "./QuizPage.module.css";
-import questionsData from "./quiz_questions.json";
+import questionsData from "./quiz_questions.json"; 
 import { useFontSize } from '../../contexts/FontSizeContext'; 
 
 const QuizPage = () => {
   const { fontSize, darkMode } = useFontSize();
-  const pageClassName = darkMode ? `${styles.quizPage} ${styles.darkMode}` : styles.quizPage;
+  const pageClassName = darkMode ? `${styles.quizPage} ${styles.darkMode}` : styles.quizPage;	
 	
   const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
   const [userAnswers, setUserAnswers] = useState({});
@@ -66,7 +66,7 @@ const QuizPage = () => {
   const relationshipsPercentage = (relationshipsScore / totalPossiblePoints) * 100;
 
   return (
-    <div className={pageClassName} style={{ fontSize: `${fontSize}px` }}>
+    <div className={pageClassName} style={{ fontSize: `${fontSize}px` }} data-testid="quiz-page">
       <NavigationPanel />
       <Frame />
       <PageContent
@@ -83,12 +83,11 @@ const QuizPage = () => {
         )}
         {!quizCompleted && (
           <div className={styles.answerOptions}>
-            
-			<button className={`${userAnswers[currentQuestionIndex]?.answer === 1 ? styles.selected : ""} ${styles.answerButton}`} onClick={() => handleAnswerSelection(1, questionsData[currentQuestionIndex].type)}>Strongly Disagree</button>
-            <button className={`${userAnswers[currentQuestionIndex]?.answer === 2 ? styles.selected : ""} ${styles.answerButton}`} onClick={() => handleAnswerSelection(2, questionsData[currentQuestionIndex].type)}>Disagree</button>
-            <button className={`${userAnswers[currentQuestionIndex]?.answer === 3 ? styles.selected : ""} ${styles.answerButton}`} onClick={() => handleAnswerSelection(3, questionsData[currentQuestionIndex].type)}>Neutral</button>
-            <button className={`${userAnswers[currentQuestionIndex]?.answer === 4 ? styles.selected : ""} ${styles.answerButton}`} onClick={() => handleAnswerSelection(4, questionsData[currentQuestionIndex].type)}>Agree</button>
-            <button className={`${userAnswers[currentQuestionIndex]?.answer === 5 ? styles.selected : ""} ${styles.answerButton}`} onClick={() => handleAnswerSelection(5, questionsData[currentQuestionIndex].type)}>Strongly Agree</button>
+            <button className={userAnswers[currentQuestionIndex]?.answer === 1 ? styles.selected : ""} onClick={() => handleAnswerSelection(1, questionsData[currentQuestionIndex].type)}>Strongly Disagree</button>
+            <button className={userAnswers[currentQuestionIndex]?.answer === 2 ? styles.selected : ""} onClick={() => handleAnswerSelection(2, questionsData[currentQuestionIndex].type)}>Disagree</button>
+            <button className={userAnswers[currentQuestionIndex]?.answer === 3 ? styles.selected : ""} onClick={() => handleAnswerSelection(3, questionsData[currentQuestionIndex].type)}>Neutral</button>
+            <button className={userAnswers[currentQuestionIndex]?.answer === 4 ? styles.selected : ""} onClick={() => handleAnswerSelection(4, questionsData[currentQuestionIndex].type)}>Agree</button>
+            <button className={userAnswers[currentQuestionIndex]?.answer === 5 ? styles.selected : ""} onClick={() => handleAnswerSelection(5, questionsData[currentQuestionIndex].type)}>Strongly Agree</button>
           </div>
         )}
         {!quizCompleted ? (
diff --git a/app/src/pages/quiz/QuizPage.module.css b/app/src/pages/quiz/QuizPage.module.css
old mode 100755
new mode 100644
index 21d82fa9..16cef71a
--- a/app/src/pages/quiz/QuizPage.module.css
+++ b/app/src/pages/quiz/QuizPage.module.css
@@ -10,14 +10,11 @@
   min-height: 852px;
   max-height: 852px;
   text-align: center;
-  font-size: var(--title-font-size);
+  font-size: 32px;
   color: var(--color-black);
   font-family: var(--font-roboto);
 }
-.quizPage.darkMode {
-    background-color: var(--background-color-dark); /* Use dark mode background color */
-    color: var(--text-color-dark); /* Use dark mode text color */
-}
+
 .pageLabel {
   cursor: pointer;
   position: absolute;
@@ -42,8 +39,8 @@
 
 .answerOptions {
   display: flex;
-  flex-direction: column; 
-  align-items: center; 
+  flex-wrap: wrap; 
+  justify-content: space-around;
 }
 
 .button {
@@ -53,10 +50,10 @@
   border: none;
   border-radius: 5px;
   cursor: pointer;
-  font-size: var(--button-font-size);
+  font-size: 18px;
   margin-top: 20px;
   position: absolute; 
-  bottom: -125px; 
+  bottom: -50px; 
   left: 50%; 
   transform: translateX(-50%); 
   z-index: 1; 
@@ -66,10 +63,3 @@
   background-color: green;
   color: white;
 }
-.answerButton {
-  font-size: var(--text-font-size);
-  margin-bottom: 15px;
-}
-/* 
-<button className={userAnswers[currentQuestionIndex]?.answer === 1 ? styles.selected : ""} onClick={() => handleAnswerSelection(1, questionsData[currentQuestionIndex].type)}>Strongly Disagree</button>
-*/
\ No newline at end of file
diff --git a/app/src/pages/settings/SettingsPage.js b/app/src/pages/settings/SettingsPage.js
index 938acc71..5bbf41d2 100755
--- a/app/src/pages/settings/SettingsPage.js
+++ b/app/src/pages/settings/SettingsPage.js
@@ -14,7 +14,7 @@ const SettingsPage = () => {
   };
 
   return (
-    <div className={`${styles.settingsPage} ${darkMode ? styles.darkMode : ''}`} style={{ fontSize: `${fontSize}px` }}>
+    <div className={`${styles.settingsPage} ${darkMode ? styles.darkMode : ''}`} style={{ fontSize: `${fontSize}px` }} data-testid="settings-page">
       <NavigationPanel />
       <label className={styles.pageLabel} htmlFor="page_label">
         <div className={styles.settingsPagePage}>
diff --git a/app/src/pages/skeleton/Skeleton.js b/app/src/pages/skeleton/Skeleton.js
index 01ad5098..de8a33dd 100755
--- a/app/src/pages/skeleton/Skeleton.js
+++ b/app/src/pages/skeleton/Skeleton.js
@@ -10,7 +10,7 @@ const Skeleton = () => {
   const pageClassName = darkMode ? `${styles.skeleton} ${styles.darkMode}` : styles.skeleton;
   
   return (
-    <div className={pageClassName} style={{ fontSize: `${fontSize}px` }}>
+    <div className={pageClassName} style={{ fontSize: `${fontSize}px` }} data-testid="skeleton-route">
       <NavigationPanel />
       <label className={styles.pageLabel} htmlFor="page_label">
         <div className={styles.skeletonPage}>