Theme and styling

README.md

@@ -15,4 +15,4 @@ Table:
 | 11.07.2023 | Add REST requests | 1 |
 | 12.07.2023 | Add mock assets and initialize frontend | 3 |
 | 13.07.2023 | Setup frontend | 6 |
-
+| 13.07.2023 | Theme and styling | 10 |

client/src/App.js

@@ -2,16 +2,27 @@ import { BrowserRouter, Navigate, Routes, Route } from "react-router-dom";
 import HomePage from "scenes/homePage";
 import LoginPage from "scenes/loginPage";
 import ProfilePage from "scenes/profilePage";
+import { useMemo } from "react";
+import { useSelector } from "react-redux";
+import { CssBaseline, ThemeProvider } from "@mui/material";
+import { createTheme } from "@mui/material/styles";
+import { themeSettings } from "theme";
 
 function App() {
+  const mode = useSelector((state) => state.mode);
+  const theme = useMemo(() => createTheme(themeSettings(mode)), [mode]);
+
   return (
     <div className="App">
       <BrowserRouter>
-        <Routes>
-          <Route path="/" element={<LoginPage />} />
-          <Route path="/home" element={<HomePage />} />
-          <Route path="/profile/:userId" element={<ProfilePage />} />
-        </Routes>
+        <ThemeProvider theme={theme}>
+          <CssBaseline />
+          <Routes>
+            <Route path="/" element={<LoginPage />} />
+            <Route path="/home" element={<HomePage />} />
+            <Route path="/profile/:userId" element={<ProfilePage />} />
+          </Routes>
+        </ThemeProvider>
       </BrowserRouter>
     </div>
   );

client/src/components/FlexBetween.jsx

@@ -0,0 +1,10 @@
+import { Box } from "@mui/material";
+import { styled } from "@mui/system";
+
+const FlexBetween = styled(Box)({
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+});
+
+export default FlexBetween;

client/src/theme.js

@@ -0,0 +1,106 @@
+// color design tokens export
+export const colorTokens = {
+  grey: {
+    0: "#FFFFFF",
+    10: "#F6F6F6",
+    50: "#F0F0F0",
+    100: "#E0E0E0",
+    200: "#C2C2C2",
+    300: "#A3A3A3",
+    400: "#858585",
+    500: "#666666",
+    600: "#4D4D4D",
+    700: "#333333",
+    800: "#1A1A1A",
+    900: "#0A0A0A",
+    1000: "#000000",
+  },
+  primary: {
+    50: "#caf0f8",
+    100: "#ade8f4",
+    200: "#ade8f4",
+    300: "#90e0ef",
+    400: "#48cae4",
+    500: "#00b4d8",
+    600: "#0096c7",
+    700: "#0077b6",
+    800: "#023e8a",
+    900: "#03045e",
+  },
+};
+
+// mui theme settings
+export const themeSettings = (mode) => {
+  return {
+    palette: {
+      mode: mode,
+      ...(mode === "dark"
+        ? {
+            // palette values for dark mode
+            primary: {
+              dark: colorTokens.primary[200],
+              main: colorTokens.primary[500],
+              light: colorTokens.primary[800],
+            },
+            neutral: {
+              dark: colorTokens.grey[100],
+              main: colorTokens.grey[200],
+              mediumMain: colorTokens.grey[300],
+              medium: colorTokens.grey[400],
+              light: colorTokens.grey[700],
+            },
+            background: {
+              default: colorTokens.grey[900],
+              alt: colorTokens.grey[800],
+            },
+          }
+        : {
+            // palette values for light mode
+            primary: {
+              dark: colorTokens.primary[700],
+              main: colorTokens.primary[500],
+              light: colorTokens.primary[50],
+            },
+            neutral: {
+              dark: colorTokens.grey[700],
+              main: colorTokens.grey[500],
+              mediumMain: colorTokens.grey[400],
+              medium: colorTokens.grey[300],
+              light: colorTokens.grey[50],
+            },
+            background: {
+              default: colorTokens.grey[10],
+              alt: colorTokens.grey[0],
+            },
+          }),
+    },
+    typography: {
+      fontFamily: ["Roboto", "sans-serif"].join(","),
+      fontSize: 12,
+      h1: {
+        fontFamily: ["Roboto", "sans-serif"].join(","),
+        fontSize: 40,
+      },
+      h2: {
+        fontFamily: ["Roboto", "sans-serif"].join(","),
+        fontSize: 32,
+      },
+      h3: {
+        fontFamily: ["Roboto", "sans-serif"].join(","),
+        fontSize: 24,
+      },
+      h4: {
+        fontFamily: ["Roboto", "sans-serif"].join(","),
+        fontSize: 20,
+      },
+      h5: {
+        fontFamily: ["Roboto", "sans-serif"].join(","),
+        fontSize: 16,
+      },
+      h6: {
+        fontFamily: ["Roboto", "sans-serif"].join(","),
+        fontSize: 14,
+      },
+    },
+  };
+};