🔧 Use "LookAndFeel" components to handle theme

frontend/src/App.tsx

@@ -1,24 +1,21 @@
 import * as React from 'react';
 import {LayoutThreeCol} from "@steffo/bluelib-react";
 import {Router} from "./routes/Router";
-import {InstanceContextProvider} from "./components/legacy/login/InstanceContext";
+import {LookAndFeel} from "./components/theme/LookAndFeel";
-import {LoginContextProvider} from "./components/legacy/login/LoginContext";
-import {InstanceBluelib} from "./components/legacy/login/InstanceBluelib";
 
-function App() {
+
+export default function App() {
     return (
-        <InstanceContextProvider>
+        <LookAndFeel>
-            <LoginContextProvider>
+            <LookAndFeel.Bluelib>
-                <InstanceBluelib>
+                <LookAndFeel.PageTitle/>
                 <LayoutThreeCol>
                     <LayoutThreeCol.Center>
+                        <LookAndFeel.Heading level={1}/>
                         <Router/>
                     </LayoutThreeCol.Center>
                 </LayoutThreeCol>
-                </InstanceBluelib>
+            </LookAndFeel.Bluelib>
-            </LoginContextProvider>
+        </LookAndFeel>
-        </InstanceContextProvider>
     );
 }
-
-export default App;

frontend/src/components/theme/LookAndFeel.tsx

@@ -0,0 +1,52 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import {LookAndFeelBluelib} from "./LookAndFeelBluelib";
+import {LookAndFeelHeading} from "./LookAndFeelHeading";
+import {LookAndFeelPageTitle} from "./LookAndFeelPageTitle";
+
+
+export interface LookAndFeelState {
+    bluelibTheme: "sophon" | "royalblue" | "paper" | "hacker",
+    pageTitle: string,
+}
+
+
+export interface LookAndFeelContextData extends LookAndFeelState {
+    setLookAndFeel: React.Dispatch<React.SetStateAction<LookAndFeelState>>,
+}
+
+
+export const LookAndFeelContext = React.createContext<LookAndFeelContextData>({
+    bluelibTheme: "sophon",
+    pageTitle: "Sophon",
+
+    setLookAndFeel: () => console.error("Can't setLookAndFeel outside a lookAndFeelContext.")
+})
+
+
+export interface LookAndFeelProps {
+    children: React.ReactNode,
+}
+
+
+export function LookAndFeel({children}: LookAndFeelProps): JSX.Element {
+    const [lookAndFeel, setLookAndFeel] =
+        React.useState<LookAndFeelState>({
+            bluelibTheme: "sophon",
+            pageTitle: "Sophon",
+        })
+
+    return (
+        <LookAndFeelContext.Provider value={{
+            ...lookAndFeel,
+            setLookAndFeel,
+        }}>
+            {children}
+        </LookAndFeelContext.Provider>
+    )
+}
+
+
+LookAndFeel.Bluelib = LookAndFeelBluelib
+LookAndFeel.Heading = LookAndFeelHeading
+LookAndFeel.PageTitle = LookAndFeelPageTitle

frontend/src/components/theme/LookAndFeelBluelib.tsx

@@ -0,0 +1,20 @@
+import * as React from "react"
+import {useContext} from "react";
+import {LookAndFeelContext} from "./LookAndFeel";
+import {Bluelib} from "@steffo/bluelib-react";
+
+
+interface LookAndFeelBluelibProps {
+    children: React.ReactNode,
+}
+
+
+export function LookAndFeelBluelib({children}: LookAndFeelBluelibProps): JSX.Element {
+    const lookAndFeel = useContext(LookAndFeelContext)
+
+    return (
+        <Bluelib theme={lookAndFeel.bluelibTheme}>
+            {children}
+        </Bluelib>
+    )
+}

frontend/src/components/theme/LookAndFeelHeading.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+import {HeadingProps} from "@steffo/bluelib-react/dist/components/common/Heading";
+import {Heading} from "@steffo/bluelib-react";
+import {useContext} from "react";
+import {LookAndFeelContext} from "./LookAndFeel";
+
+
+interface LookAndFeelHeadingProps extends HeadingProps {
+
+}
+
+
+export function LookAndFeelHeading({...props}: LookAndFeelHeadingProps): JSX.Element {
+    const lookAndFeel = useContext(LookAndFeelContext)
+
+    return (
+        <Heading {...props}>
+            {lookAndFeel.pageTitle}
+        </Heading>
+    )
+}

frontend/src/components/theme/LookAndFeelPageTitle.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import {useContext} from "react";
+import {LookAndFeelContext} from "./LookAndFeel";
+
+
+export function LookAndFeelPageTitle(): null {
+    const lookAndFeel = useContext(LookAndFeelContext)
+
+    React.useEffect(
+        () => {
+            document.title = lookAndFeel.pageTitle === "Sophon" ? "Sophon" : `${lookAndFeel.pageTitle} - Sophon`
+        },
+        [lookAndFeel.pageTitle]
+    )
+
+    return null
+}