Added setting menu with textsize and font selection

package-lock.json

@@ -8,6 +8,7 @@
       "dependencies": {
         "@fontsource/material-icons": "^4.5.2",
         "@fontsource/material-icons-rounded": "^4.5.2",
+        "@fontsource/opendyslexic": "^4.5.2",
         "@fontsource/vollkorn": "^4.5.4",
         "@fontsource/zen-maru-gothic": "^4.5.5",
         "markdown-to-jsx": "^7.1.6",
@@ -199,6 +200,11 @@
       "resolved": "https://registry.npmjs.org/@fontsource/material-icons-rounded/-/material-icons-rounded-4.5.2.tgz",
       "integrity": "sha512-wk/vqodMF+4IBbxhI0cjaPBcouvRrnJdeQCslY0Zae8ojyZCUksJn4JTiQk89fbY9kvT3oG7AZIZ+poKdpS02w=="
     },
+    "node_modules/@fontsource/opendyslexic": {
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/@fontsource/opendyslexic/-/opendyslexic-4.5.2.tgz",
+      "integrity": "sha512-vW+A3Bd1ZEG6nAZuix0OhbS0ygMlhvtc3RvLlDXrTAinrAZHQ0bOGUJRN2iaGbQ1kWNP8/7A+AKMFH5FM/pjKA=="
+    },
     "node_modules/@fontsource/vollkorn": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/@fontsource/vollkorn/-/vollkorn-4.5.4.tgz",
@@ -3800,6 +3806,11 @@
       "resolved": "https://registry.npmjs.org/@fontsource/material-icons-rounded/-/material-icons-rounded-4.5.2.tgz",
       "integrity": "sha512-wk/vqodMF+4IBbxhI0cjaPBcouvRrnJdeQCslY0Zae8ojyZCUksJn4JTiQk89fbY9kvT3oG7AZIZ+poKdpS02w=="
     },
+    "@fontsource/opendyslexic": {
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/@fontsource/opendyslexic/-/opendyslexic-4.5.2.tgz",
+      "integrity": "sha512-vW+A3Bd1ZEG6nAZuix0OhbS0ygMlhvtc3RvLlDXrTAinrAZHQ0bOGUJRN2iaGbQ1kWNP8/7A+AKMFH5FM/pjKA=="
+    },
     "@fontsource/vollkorn": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/@fontsource/vollkorn/-/vollkorn-4.5.4.tgz",

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "@fontsource/material-icons": "^4.5.2",
     "@fontsource/material-icons-rounded": "^4.5.2",
+    "@fontsource/opendyslexic": "^4.5.2",
     "@fontsource/vollkorn": "^4.5.4",
     "@fontsource/zen-maru-gothic": "^4.5.5",
     "markdown-to-jsx": "^7.1.6",

src/components/AppLayout.tsx

@@ -13,6 +13,7 @@ import ReactTooltip from "react-tooltip";
 import { useAppLayout } from "contexts/AppLayoutContext";
 import { ImageQuality } from "./Img";
 import Popup from "./Popup";
+import { useEffect } from "react";
 
 type AppLayoutProps = {
   subPanel?: React.ReactNode;
@@ -91,8 +92,22 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
     ? props.description
     : props.langui.default_description;
 
+  useEffect(() => {
+    document.getElementsByTagName("html")[0].style.fontSize = `${
+      (appLayout.fontSize || 1) * 100
+    }%`;
+  });
+
   return (
-    <div className={appLayout.darkMode ? "set-theme-dark" : "set-theme-light"}>
+    <div
+      className={`${
+        appLayout.darkMode ? "set-theme-dark" : "set-theme-light"
+      } ${
+        appLayout.dyslexic
+          ? "set-theme-font-dyslexic"
+          : "set-theme-font-standard"
+      }`}
+    >
       <div
         {...handlers}
         className="fixed inset-0 touch-pan-y p-0 m-0 bg-light text-black"
@@ -247,6 +262,101 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
           </div>
         </Popup>
 
+        <Popup
+          state={appLayout.configPanelOpen}
+          setState={appLayout.setConfigPanelOpen}
+        >
+          <h2 className="text-2xl">Settings</h2>
+
+          <h3 className="text-xl mt-4">Theme</h3>
+          <div className="flex flex-row">
+            <Button
+              onClick={() => {
+                appLayout.setDarkMode(false);
+                appLayout.setSelectedThemeMode(true);
+              }}
+              active={
+                appLayout.selectedThemeMode === true &&
+                appLayout.darkMode === false
+              }
+              className="rounded-r-none"
+            >
+              Light
+            </Button>
+            <Button
+              onClick={() => {
+                appLayout.setSelectedThemeMode(false);
+              }}
+              active={appLayout.selectedThemeMode === false}
+              className="rounded-l-none rounded-r-none border-x-0"
+            >
+              Auto
+            </Button>
+            <Button
+              onClick={() => {
+                appLayout.setDarkMode(true);
+                appLayout.setSelectedThemeMode(true);
+              }}
+              active={
+                appLayout.selectedThemeMode === true &&
+                appLayout.darkMode === true
+              }
+              className="rounded-l-none"
+            >
+              Dark
+            </Button>
+          </div>
+
+          <h3 className="text-xl mt-4">Font size</h3>
+          <div className="flex flex-row">
+            <Button
+              className="rounded-r-none"
+              onClick={() =>
+                appLayout.setFontSize(
+                  appLayout.fontSize ? appLayout.fontSize / 1.05 : 1 / 1.05
+                )
+              }
+            >
+              <span className="material-icons">text_decrease</span>
+            </Button>
+            <Button
+              className="rounded-l-none rounded-r-none border-x-0"
+              onClick={() => appLayout.setFontSize(1)}
+            >
+              {((appLayout.fontSize || 1) * 100).toLocaleString(undefined, {
+                maximumFractionDigits: 0,
+              })}
+              %
+            </Button>
+            <Button
+              className="rounded-l-none"
+              onClick={() =>
+                appLayout.setFontSize(
+                  appLayout.fontSize ? appLayout.fontSize * 1.05 : 1 * 1.05
+                )
+              }
+            >
+              <span className="material-icons">text_increase</span>
+            </Button>
+          </div>
+
+          <h3 className="text-xl mt-4">Font</h3>
+          <Button
+            active={appLayout.dyslexic === false}
+            onClick={() => appLayout.setDyslexic(false)}
+            className="font-zenMaruGothic"
+          >
+            Zen Maru Gothic
+          </Button>
+          <Button
+            active={appLayout.dyslexic === true}
+            onClick={() => appLayout.setDyslexic(true)}
+            className="font-openDyslexic"
+          >
+            OpenDyslexic
+          </Button>
+        </Popup>
+
         <ReactTooltip
           id="MainPanelTooltip"
           place="right"

src/components/Panels/MainPanel.tsx

@@ -49,16 +49,19 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
             } flex-wrap gap-2`}
           >
             <Button
-              onClick={() => {
-                appLayout.setDarkMode(!appLayout.darkMode);
-                appLayout.setSelectedThemeMode(true);
-              }}
               className={
                 appLayout.mainPanelReduced && isDesktop ? "" : "!py-0.5 !px-2.5"
               }
+              onClick={() => {
+                appLayout.setConfigPanelOpen(true);
+              }}
             >
-              <span className="material-icons !text-sm">
+              <span
-                {appLayout.darkMode ? "dark_mode" : "light_mode"}
+                className={`material-icons ${
+                  !(appLayout.mainPanelReduced && isDesktop) && "!text-sm"
+                } `}
+              >
+                settings
               </span>
             </Button>
 

src/contexts/AppLayoutContext.tsx

@@ -5,13 +5,18 @@ import React, { ReactNode, useContext } from "react";
 export interface AppLayoutState {
   subPanelOpen: boolean | undefined;
   languagePanelOpen: boolean | undefined;
+  configPanelOpen: boolean | undefined;
   mainPanelReduced: boolean | undefined;
   mainPanelOpen: boolean | undefined;
   darkMode: boolean | undefined;
+  selectedThemeMode: boolean | undefined;
+  fontSize: number | undefined;
+  dyslexic: boolean | undefined;
   setSubPanelOpen: React.Dispatch<React.SetStateAction<boolean | undefined>>;
   setLanguagePanelOpen: React.Dispatch<
     React.SetStateAction<boolean | undefined>
   >;
+  setConfigPanelOpen: React.Dispatch<React.SetStateAction<boolean | undefined>>;
   setMainPanelReduced: React.Dispatch<
     React.SetStateAction<boolean | undefined>
   >;
@@ -20,20 +25,29 @@ export interface AppLayoutState {
   setSelectedThemeMode: React.Dispatch<
     React.SetStateAction<boolean | undefined>
   >;
+  setFontSize: React.Dispatch<React.SetStateAction<number | undefined>>;
+  setDyslexic: React.Dispatch<React.SetStateAction<boolean | undefined>>;
 }
 
 const initialState: AppLayoutState = {
   subPanelOpen: false,
   languagePanelOpen: false,
+  configPanelOpen: false,
   mainPanelReduced: false,
   mainPanelOpen: false,
   darkMode: false,
+  selectedThemeMode: false,
+  fontSize: 1,
+  dyslexic: false,
   setSubPanelOpen: () => {},
   setLanguagePanelOpen: () => {},
   setMainPanelReduced: () => {},
   setMainPanelOpen: () => {},
   setDarkMode: () => {},
   setSelectedThemeMode: () => {},
+  setConfigPanelOpen: () => {},
+  setFontSize: () => {},
+  setDyslexic: () => {},
 };
 
 const AppContext = React.createContext<AppLayoutState>(initialState);
@@ -57,6 +71,10 @@ export const AppContextProvider = (props: Props) => {
     boolean | undefined
   >("languagePanelOpen", initialState.languagePanelOpen);
 
+  const [configPanelOpen, setConfigPanelOpen] = useStateWithLocalStorage<
+    boolean | undefined
+  >("configPanelOpen", initialState.configPanelOpen);
+
   const [mainPanelReduced, setMainPanelReduced] = useStateWithLocalStorage<
     boolean | undefined
   >("mainPanelReduced", initialState.mainPanelReduced);
@@ -65,9 +83,17 @@ export const AppContextProvider = (props: Props) => {
     boolean | undefined
   >("mainPanelOpen", initialState.mainPanelOpen);
 
-  const [darkMode, setDarkMode, setSelectedThemeMode] = useDarkMode(
+  const [darkMode, selectedThemeMode, setDarkMode, setSelectedThemeMode] =
-    "darkMode",
+    useDarkMode("darkMode", initialState.darkMode);
-    initialState.darkMode
+
+  const [fontSize, setFontSize] = useStateWithLocalStorage<number | undefined>(
+    "fontSize",
+    initialState.fontSize
+  );
+
+  const [dyslexic, setDyslexic] = useStateWithLocalStorage<boolean | undefined>(
+    "dyslexic",
+    initialState.dyslexic
   );
 
   return (
@@ -75,15 +101,22 @@ export const AppContextProvider = (props: Props) => {
       value={{
         subPanelOpen,
         languagePanelOpen,
+        configPanelOpen,
         mainPanelReduced,
         mainPanelOpen,
         darkMode,
+        selectedThemeMode,
+        fontSize,
+        dyslexic,
         setSubPanelOpen,
         setLanguagePanelOpen,
+        setConfigPanelOpen,
         setMainPanelReduced,
         setMainPanelOpen,
         setDarkMode,
         setSelectedThemeMode,
+        setFontSize,
+        setDyslexic,
       }}
     >
       {props.children}

src/hooks/useDarkMode.ts

@@ -6,6 +6,7 @@ export default function useDarkMode(
   key: string,
   initialValue: boolean | undefined
 ): [
+  boolean | undefined,
   boolean | undefined,
   React.Dispatch<React.SetStateAction<boolean | undefined>>,
   React.Dispatch<React.SetStateAction<boolean | undefined>>
@@ -23,5 +24,5 @@ export default function useDarkMode(
     if (selectedThemeMode === false) setDarkMode(prefersDarkMode);
   }, [selectedThemeMode, prefersDarkMode, setDarkMode]);
 
-  return [darkMode, setDarkMode, setSelectedThemeMode];
+  return [darkMode, selectedThemeMode, setDarkMode, setSelectedThemeMode];
 }

src/pages/_app.tsx

@@ -2,14 +2,15 @@ import type { AppProps } from "next/app";
 import "tailwind.css";
 import "@fontsource/zen-maru-gothic/500.css";
 import "@fontsource/vollkorn/700.css";
+import "@fontsource/opendyslexic/400.css"
 import "@fontsource/material-icons";
 
 import { AppContextProvider } from "contexts/AppLayoutContext";
 
-export default function AccordsLibraryApp(appProps: AppProps) {
+export default function AccordsLibraryApp(props: AppProps) {
   return (
     <AppContextProvider>
-      <appProps.Component {...appProps.pageProps} />
+      <props.Component {...props.pageProps} />
     </AppContextProvider>
   );
 }

src/tailwind.css

@@ -78,9 +78,8 @@
   }
 
   .prose blockquote {
-    @apply border-l-dark
+    @apply border-l-dark;
   }
-
 }
 
 @layer components {

tailwind.config.js

@@ -18,6 +18,17 @@ const breakDektop = { min: "60rem" };
 const breakMobile = { max: "60rem" };
 const breakThin = { max: "25rem" };
 
+const fontStandard = {
+  body: "Zen Maru Gothic",
+  headers: "Vollkorn",
+  monospace: "monospace",
+};
+const fontDyslexic = {
+  body: "OpenDyslexic",
+  headers: "OpenDyslexic",
+  monospace: "monospace",
+};
+
 /* END CONFIG */
 
 function withOpacity(variableName) {
@@ -41,9 +52,11 @@ module.exports = {
       black: withOpacity("--theme-color-black"),
     },
     fontFamily: {
-      body: ["Zen Maru Gothic"],
+      body: ["var(--theme-font-body)"],
-      headers: ["Vollkorn"],
+      headers: ["var(--theme-font-headers)"],
-      monospace: ["monospace"],
+      monospace: ["var(--theme-font-monospace)"],
+      openDyslexic: ["OpenDyslexic"],
+      zenMaruGothic: ["Zen Maru Gothic"],
     },
     screens: {
       desktop: breakDektop,
@@ -61,7 +74,6 @@ module.exports = {
   plugins: [
     require("@tailwindcss/typography"),
 
-    // Colored Dropshadow
     plugin(function ({ addUtilities }) {
       addUtilities({
         ".set-theme-light": {
@@ -85,6 +97,21 @@ module.exports = {
       });
     }),
 
+    plugin(function ({ addUtilities }) {
+      addUtilities({
+        ".set-theme-font-standard": {
+          "--theme-font-body": fontStandard.body,
+          "--theme-font-headers": fontStandard.headers,
+          "--theme-font-monospace": fontStandard.monospace,
+        },
+        ".set-theme-font-dyslexic": {
+          "--theme-font-body": fontDyslexic.body,
+          "--theme-font-headers": fontDyslexic.headers,
+          "--theme-font-monospace": fontStandard.monospace,
+        },
+      });
+    }),
+
     plugin(function ({ addVariant, e }) {
       addVariant("webkit-scrollbar", ({ modifySelectors, separator }) => {
         modifySelectors(({ className }) => {