Fix(Frontend): Set maxWidth to md

- This will make sure Material UI's Container will not expand to fill
  the entire screen and instead just stop expanding at around 960px
  (which is `md`).

frontend/src/App.test.tsx

@@ -1,9 +1,7 @@
 import React from "react";
-import { render, screen } from "@testing-library/react";
+import { render } from "@testing-library/react";
 import App from "./App";
 
-test("renders learn react link", () => {
+test("renders the app", () => {
   render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
 });

frontend/src/App.tsx

@@ -1,29 +1,23 @@
 import React from "react";
-import logo from "./logo.svg";
 import "./App.css";
+
+// Roboto font and its weights
 import "@fontsource/roboto/300.css";
 import "@fontsource/roboto/400.css";
 import "@fontsource/roboto/500.css";
 import "@fontsource/roboto/700.css";
 
+// Theming
+import ThemeProvider from "./ThemeProvider";
+
+// Material UI stuffs
+import Container from "@mui/material/Container";
+
 function App() {
   return (
-    <div className="App">
+    <ThemeProvider>
-      <header className="App-header">
+      <Container maxWidth="md"></Container>
-        <img src={logo} className="App-logo" alt="logo" />
+    </ThemeProvider>
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
   );
 }