From 046726de1122e99f5fa78679bc051c3b39d5dc30 Mon Sep 17 00:00:00 2001
From: minhtrannhat <minh@minhtrannhat.com>
Date: Fri, 21 Jul 2023 18:23:34 -0400
Subject: [PATCH] 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 |  6 ++----
 frontend/src/App.tsx      | 28 +++++++++++-----------------
 2 files changed, 13 insertions(+), 21 deletions(-)

diff --git a/frontend/src/App.test.tsx b/frontend/src/App.test.tsx
index d76787e..cabc1ba 100644
--- a/frontend/src/App.test.tsx
+++ b/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();
 });
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index b71e579..2039f6b 100644
--- a/frontend/src/App.tsx
+++ b/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">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <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>
+    <ThemeProvider>
+      <Container maxWidth="md"></Container>
+    </ThemeProvider>
   );
 }