✨ Setup basic theme structure

code/frontend/package-lock.json

@@ -5,11 +5,13 @@
     "requires": true,
     "packages": {
         "": {
+            "name": "nest-frontend",
             "version": "0.1.0",
             "dependencies": {
                 "@testing-library/jest-dom": "^5.11.10",
                 "@testing-library/react": "^11.2.6",
                 "@testing-library/user-event": "^12.8.3",
+                "classnames": "^2.3.1",
                 "react": "^17.0.2",
                 "react-dom": "^17.0.2",
                 "react-scripts": "4.0.3",
@@ -5247,6 +5249,11 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/classnames": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+            "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+        },
         "node_modules/clean-css": {
             "version": "4.2.3",
             "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
@@ -25488,6 +25495,11 @@
                 }
             }
         },
+        "classnames": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+            "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+        },
         "clean-css": {
             "version": "4.2.3",
             "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",

code/frontend/package.json

@@ -6,6 +6,7 @@
         "@testing-library/jest-dom": "^5.11.10",
         "@testing-library/react": "^11.2.6",
         "@testing-library/user-event": "^12.8.3",
+        "classnames": "^2.3.1",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-scripts": "4.0.3",

code/frontend/src/App.css

@@ -1,38 +0,0 @@
-.App {
-    text-align: center;
-}
-
-.App-logo {
-    height: 40vmin;
-    pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-    .App-logo {
-        animation: App-logo-spin infinite 20s linear;
-    }
-}
-
-.App-header {
-    background-color: #282c34;
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    font-size: calc(10px + 2vmin);
-    color: white;
-}
-
-.App-link {
-    color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(360deg);
-    }
-}

code/frontend/src/App.js

@@ -1,26 +1,14 @@
-import logo from "./logo.svg"
+import {useState} from "react"
-import "./App.css"
+import classNames from "classnames"
+import Style from "./App.module.css"
 
 
-function App() {
+export default function App() {
+    const [theme, setTheme] = useState("theme-dark");
+
     return (
-        <div className="App">
+        <div className={classNames(Style["app"], theme)}>
-            <header className="App-header">
+            Ciao mondo!
-                <img src={logo} className="App-logo" alt="logo"/>
-                <p>
-                    Edit <code>src/App.js</code> and save to reload.
-                </p>
-                <a
-                    className="App-link"
-                    href="https://reactjs.org"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                >
-                    Learn React
-                </a>
-            </header>
         </div>
     )
 }
-
-export default App

code/frontend/src/App.module.css

@@ -0,0 +1,7 @@
+.app {
+    min-height: 100vh;
+    min-width: 100vw;
+
+    background-color: var(--bg-primary);
+    color: var(--fg-primary);
+}

code/frontend/src/index.css

@@ -1,13 +1,36 @@
 body {
     margin: 0;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    min-height: 100%;
-    sans-serif;
+    min-width: 100%;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
 }
 
-code {
+.theme-dark {
-    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    --bg-primary: #3B7097;
-    monospace;
+    --bg-light: #34607A;
+    --bg-dark: #254D61;
+
+    --fg-primary: #FFFFFF;
+    --fg-secondary: #536841;
+
+    --btn-on: #5D815C;
+    --btn-off: #F6E2BC;
+
+    --cmp-light: #C4C4C4;
+    --cmp-dark: #7C7C7C;
+}
+
+.theme-light {
+    --bg-primary: #CAE4F6;
+    --bg-light: #B2CEDF;
+    --bg-dark: #7292AF;
+
+    --fg-primary: #536841;
+    --fg-secondary: #FFFFFF;
+
+    --btn-on: #A3BDA2;
+    --btn-off: #FFFFFF;
+
+    --cmp-light: #FFFFFF;
+    --cmp-dark: #AAAAAA;
 }