✨ Add Logo to the sidebar

code/frontend/src/App.js

@@ -7,36 +7,39 @@ import { faArchive, faArrowRight, faExclamationTriangle, faSearch, faTrash } fro
 import Input from "./components/Input"
 import InputWithIcon from "./components/InputWithIcon"
 import Layout from "./components/Layout"
+import ContextTheme from "./contexts/ContextTheme"
 
 
 export default function App() {
-    const [theme, ] = useState("ThemeDark");
+    const [theme, ] = useState("ThemeLight");
 
     return (
-        <div className={classNames(Style.App, theme)}>
-            <Layout>
-                <BoxWithHeader
-                    header={"Sto provando i bottoni!"}
-                >
-                    <div>
+        <ContextTheme.Provider value={theme}>
+            <div className={classNames(Style.App, theme)}>
+                <Layout>
+                    <BoxWithHeader
+                        header={"Sto provando i bottoni!"}
+                    >
                         <div>
-                            Ammirate:
+                            <div>
+                                Ammirate:
+                            </div>
+                            <div>
+                                <Button color={"Green"} icon={faArrowRight}>Verde</Button>
+                                <Button color={"Grey"} icon={faArchive}>Grigio</Button>
+                                <Button color={"Yellow"} icon={faExclamationTriangle}>Giallo</Button>
+                                <Button color={"Red"} icon={faTrash}>Rosso</Button>
+                            </div>
+                            <div>
+                                E già che ci siamo, un Input, con e senza icona:
+                            </div>
+                            <div>
+                                <Input/> <InputWithIcon icon={faSearch}/>
+                            </div>
                         </div>
-                        <div>
-                            <Button color={"Green"} icon={faArrowRight}>Verde</Button>
-                            <Button color={"Grey"} icon={faArchive}>Grigio</Button>
-                            <Button color={"Yellow"} icon={faExclamationTriangle}>Giallo</Button>
-                            <Button color={"Red"} icon={faTrash}>Rosso</Button>
-                        </div>
-                        <div>
-                            E già che ci siamo, un Input, con e senza icona:
-                        </div>
-                        <div>
-                            <Input/> <InputWithIcon icon={faSearch}/>
-                        </div>
-                    </div>
-                </BoxWithHeader>
-            </Layout>
-        </div>
+                    </BoxWithHeader>
+                </Layout>
+            </div>
+        </ContextTheme.Provider>
     )
 }

code/frontend/src/components/Logo.js

@@ -0,0 +1,26 @@
+import React, {useContext} from "react"
+import Style from "./Logo.module.css"
+import classNames from "classnames"
+import LogoDark from "../media/LogoDark.png"
+import LogoLight from "../media/LogoLight.png"
+import ContextTheme from "../contexts/ContextTheme"
+
+
+export default function Logo({ children, className, ...props }) {
+    const theme = useContext(ContextTheme)
+
+    let logo;
+    if(theme === "ThemeDark") {
+        logo = LogoDark
+    }
+    else if(theme === "ThemeLight") {
+        logo = LogoLight
+    }
+    else {
+        throw new Error(`Unknown theme: ${theme}`)
+    }
+
+    return (
+        <img src={logo} alt={"N.E.S.T."}/>
+    )
+}

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

@@ -0,0 +1,3 @@
+.Logo {
+
+}

code/frontend/src/components/Sidebar.js

@@ -1,13 +1,14 @@
 import React from "react"
 import Style from "./Sidebar.module.css"
 import classNames from "classnames"
+import Logo from "./Logo"
 
 
 export default function Sidebar({ children, className, ...props }) {
     return (
         <div className={classNames(Style.Sidebar, className)} {...props}>
             {/* TODO: Aggiungere il logo qui! */}
-            <img src={""} width={230} height={170}/>
+            <Logo/>
             {children}
         </div>
     )

code/frontend/src/contexts/ContextTheme.js

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