Init MUI and draft nav bar

frontend/package.json

@@ -3,6 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@fontsource/lexend": "^5.1.0",
+    "@mui/icons-material": "^6.1.1",
+    "@mui/material": "^6.1.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

frontend/src/App.tsx

@@ -1,15 +1,53 @@
 import "./App.scss";
+import "@fontsource/lexend";
 import { ReactElement } from "react";
-import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+import { Route, Routes } from "react-router-dom";
 import Home from "./pages/Home/Home";
 import QuestionList from "./pages/QuestionList/QuestionList";
+import { createTheme, ThemeProvider } from "@mui/material";
+
+const theme = createTheme({
+  typography: {
+    fontFamily: ["Lexend", "Roboto", "Arial"].join(","),
+  },
+  palette: {
+    primary: {
+      main: "#caff33",
+    },
+    secondary: {
+      main: "#ffffff00",
+      contrastText: "#ffffff",
+    },
+  },
+  components: {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          borderRadius: "82px",
+          fontSize: "1rem",
+          fontWeight: 400,
+          textTransform: "none",
+        },
+      },
+    },
+    MuiTypography: {
+      styleOverrides: {
+        root: {
+          color: "#ffffff",
+        },
+      },
+    },
+  },
+});
 
 const App = (): ReactElement => {
   return (
-    <Routes>
-      <Route path="/" element={<Home />} />
-      <Route path="/questions" element={<QuestionList />} />
-    </Routes>
+    <ThemeProvider theme={theme}>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/questions" element={<QuestionList />} />
+      </Routes>
+    </ThemeProvider>
   );
 };
 

frontend/src/components/Navbar/Navbar.scss

@@ -0,0 +1,20 @@
+.Navbar {
+    display: flex;
+    padding: 20px 34px;
+    margin-inline: 20px;
+    justify-content: space-between;
+    align-items: center;
+    border-radius: 100px;
+    border: 1px solid var(--Grey-15, #262626);
+    background: var(--Grey-11, #1C1C1C);
+
+    &-buttons {
+        display: flex;
+        gap: 20px;
+    }
+
+    &-title {
+        font-size: 1.5rem !important;
+        font-weight: 700 !important;
+    }
+}

frontend/src/components/Navbar/Navbar.tsx

@@ -0,0 +1,21 @@
+import { Box, Button, Typography } from "@mui/material";
+import { ReactElement } from "react";
+import "./Navbar.scss";
+
+const Navbar = (): ReactElement => {
+  return (
+    <nav className="Navbar">
+      <Typography className="Navbar-title">LuckyJinx</Typography>
+      <Box className="Navbar-buttons">
+        <Button color="secondary" variant="contained">
+          Sign Up
+        </Button>
+        <Button color="primary" variant="contained">
+          Login
+        </Button>
+      </Box>
+    </nav>
+  );
+};
+
+export default Navbar;

frontend/src/pages/Home/Home.scss

@@ -1,38 +1,8 @@
 .Home {
-  text-align: center;
+  background: var(--Grey-10, #1A1A1A);
+  padding: 40px 60px;
 
-  &-logo {
-    height: 40vmin;
-    pointer-events: none;
-
-    @media (prefers-reduced-motion: no-preference) {
-      animation: Home-logo-spin infinite 20s linear;
-    }
-  }
-
-  &-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;
-  }
-
-  &-link {
-    color: #61dafb;
-  }
-
-  @keyframes Home-logo-spin {
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(360deg);
-    }
-  }
+  min-height: 100rem;
 }
 
 .Home-button {

frontend/src/pages/Home/Home.tsx

@@ -1,7 +1,8 @@
 import { ReactElement } from "react";
 import { useNavigate } from "react-router-dom";
-import logo from "../../logo.svg";
 import "./Home.scss";
+import Navbar from "../../components/Navbar/Navbar";
+import { Box } from "@mui/material";
 
 const Home = (): ReactElement => {
   const navigate = useNavigate();
@@ -11,15 +12,13 @@ const Home = (): ReactElement => {
   };
 
   return (
-    <div className="Home">
-      <header className="Home-header">
-        <img src={logo} className="Home-logo" alt="logo" />
-        <p>Welcome to lucKY JiNX!</p>
-        <button onClick={goToQuestionList} className="Home-button">
-          Go to Question List
-        </button>
-      </header>
-    </div>
+    <Box className="Home">
+      <Navbar></Navbar>
+
+      <button onClick={goToQuestionList} className="Home-button">
+        Go to Question List
+      </button>
+    </Box>
   );
 };
 

frontend/src/pages/QuestionList/QuestionList.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import axios from "axios";
+//import axios from "axios";
 import styles from "./QuestionList.module.scss";
 
 interface Question {