✨ Implement working SelectTheme

code/frontend/src/App.js

@@ -12,10 +12,10 @@ import PageSettings from "./routes/PageSettings"
 
 
 export default function App() {
-    const [theme, ] = useState("ThemeDark");
+    const [theme, setTheme] = useState("ThemeDark");
 
     return (
-        <ContextTheme.Provider value={theme}>
+        <ContextTheme.Provider value={[theme, setTheme]}>
         <BrowserRouter>
 
             <div className={classNames(Style.App, theme)}>

code/frontend/src/components/Input.module.css

@@ -8,6 +8,8 @@
 
     color: var(--fg-field-off);
     background-color: var(--bg-field-off);
+
+    font-family: var(--font-regular);
 }
 
 .Input:focus {

code/frontend/src/components/Logo.js

@@ -5,7 +5,7 @@ import ContextTheme from "../contexts/ContextTheme"
 
 
 export default function Logo({ children, className, ...props }) {
-    const theme = useContext(ContextTheme)
+    const [theme, ] = useContext(ContextTheme)
 
     let logo;
     if(theme === "ThemeDark") {

code/frontend/src/components/Select.js

@@ -0,0 +1,12 @@
+import React from "react"
+import Style from "./Select.module.css"
+import classNames from "classnames"
+
+
+export default function Select({ children, className, ...props }) {
+    return (
+        <select className={classNames(Style.Select, className)} {...props}>
+            {children}
+        </select>
+    )
+}

code/frontend/src/components/Select.module.css

@@ -0,0 +1,23 @@
+.Select {
+    border-radius: 25px;
+    border-width: 0;
+
+    min-height: 28px;
+    padding: 2px 10px;
+    margin: 2px;
+
+    color: var(--fg-field-off);
+    background-color: var(--bg-field-off);
+
+    font-family: var(--font-regular);
+
+    /* Non ho idea di perchè serva */
+    vertical-align: bottom;
+}
+
+.Select:focus {
+    outline: 0; /* TODO: Questo è sconsigliato dalle linee guida sull'accessibilità! */
+
+    color: var(--fg-field-on);
+    background-color: var(--bg-field-on);
+}

code/frontend/src/components/SelectTheme.js

@@ -0,0 +1,15 @@
+import React, {useContext} from "react"
+import Select from "./Select"
+import ContextTheme from "../contexts/ContextTheme"
+
+
+export default function SelectTheme({ children, ...props }) {
+    const [theme, setTheme] = useContext(ContextTheme);
+
+    return (
+        <Select value={theme} onChange={e => setTheme(e.target.value)} {...props}>
+            <option value={"ThemeDark"}>Dark</option>
+            <option value={"ThemeLight"}>Light</option>
+        </Select>
+    )
+}

code/frontend/src/contexts/ContextTheme.js

@@ -1,4 +1,4 @@
 import {createContext} from "react";
 
-const ContextTheme = createContext("ThemeDark")
+const ContextTheme = createContext(["ThemeDark", undefined])
 export default ContextTheme

code/frontend/src/routes/PageSettings.js

@@ -3,6 +3,8 @@ import Style from "./PageSettings.module.css"
 import classNames from "classnames"
 import BoxHeaderOnly from "../components/BoxHeaderOnly"
 import BoxWithHeader from "../components/BoxWithHeader"
+import Select from "../components/Select"
+import SelectTheme from "../components/SelectTheme"
 
 
 export default function PageSettings({ children, className, ...props }) {
@@ -12,7 +14,7 @@ export default function PageSettings({ children, className, ...props }) {
                 You are currently logged in as:
             </BoxHeaderOnly>
             <BoxHeaderOnly>
-                Switch theme:
+                Switch theme: <SelectTheme/>
             </BoxHeaderOnly>
             <BoxWithHeader header={"Change your email address"}>