Merge branch 'gruppDM' into frontend

frontend/src/Components/Header.tsx

@@ -15,7 +15,7 @@ function Header({ username }: { username: string }): JSX.Element {
     >
       <Link to="/your-projects">
         <img
-          src="/src/assets/TTIMElogo.png"
+          src="/src/assets/Logo.svg"
           alt="TTIME Logo"
           className="w-11 h-14 cursor-pointer"
         />

frontend/src/Components/TimeReport.tsx

@@ -0,0 +1,59 @@
+function NewTimeReport(): JSX.Element {
+  const activities = [
+    "Development",
+    "Meeting",
+    "Administration",
+    "Own Work",
+    "Studies",
+    "Testing",
+  ];
+
+  return (
+    <>
+      <div className="border-4 border-black bg-white flex flex-col justify-start min-h-[65vh] h-fit w-[50vw] rounded-3xl overflow-scroll space-y-[2vh] p-[30px] items-center">
+        <input
+          className="w-fill h-[5vh] font-sans text-[3vh] pl-[1vw] rounded-full text-center pt-[1vh] pb-[1vh] border-2 border-black"
+          type="week"
+          placeholder="Week"
+          onKeyDown={(event) => {
+            event.preventDefault();
+          }}
+          onPaste={(event) => {
+            event.preventDefault();
+          }}
+        />
+        <table className="w-full text-center divide-y divide-x divide-white text-[30px]">
+          <thead>
+            <tr>
+              <th className="w-1/2 py-2 border-b-2 border-black">Activity</th>
+              <th className="w-1/2 py-2 border-b-2 border-black">
+                Total Time (min)
+              </th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-black">
+            {activities.map((activity, index) => (
+              <tr key={index} className="h-[10vh]">
+                <td>{activity}</td>
+                <td>
+                  <input
+                    type="number"
+                    min="0"
+                    className="border-2 border-black rounded-md text-center w-1/2"
+                    onKeyDown={(event) => {
+                      const keyValue = event.key;
+                      if (!/\d/.test(keyValue) && keyValue !== "Backspace")
+                        event.preventDefault();
+                    }}
+                  />
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </>
+  );
+}
+
+export default NewTimeReport;

frontend/src/Pages/AdminPages/AdminAddProject.tsx

@@ -0,0 +1,26 @@
+import BasicWindow from "../../Components/BasicWindow";
+import Button from "../../Components/Button";
+
+function AdminAddProject(): JSX.Element {
+  const content = <></>;
+
+  const buttons = (
+    <>
+      <Button
+        text="Finish"
+        onClick={(): void => {
+          return;
+        }}
+      />
+      <Button
+        text="Back"
+        onClick={(): void => {
+          return;
+        }}
+      />
+    </>
+  );
+
+  return <BasicWindow username="Admin" content={content} buttons={buttons} />;
+}
+export default AdminAddProject;

frontend/src/Pages/AdminPages/AdminAddUser.tsx

@@ -0,0 +1,26 @@
+import BasicWindow from "../../Components/BasicWindow";
+import Button from "../../Components/Button";
+
+function AdminAddUser(): JSX.Element {
+  const content = <></>;
+
+  const buttons = (
+    <>
+      <Button
+        text="Finish"
+        onClick={(): void => {
+          return;
+        }}
+      />
+      <Button
+        text="Back"
+        onClick={(): void => {
+          return;
+        }}
+      />
+    </>
+  );
+
+  return <BasicWindow username="Admin" content={content} buttons={buttons} />;
+}
+export default AdminAddUser;

frontend/src/Pages/AdminPages/AdminChangeUsername.tsx

@@ -0,0 +1,26 @@
+import BasicWindow from "../../Components/BasicWindow";
+import Button from "../../Components/Button";
+
+function AdminChangeUsername(): JSX.Element {
+  const content = <></>;
+
+  const buttons = (
+    <>
+      <Button
+        text="Finish"
+        onClick={(): void => {
+          return;
+        }}
+      />
+      <Button
+        text="Back"
+        onClick={(): void => {
+          return;
+        }}
+      />
+    </>
+  );
+
+  return <BasicWindow username="Admin" content={content} buttons={buttons} />;
+}
+export default AdminChangeUsername;

frontend/src/Pages/AdminPages/AdminManageProjects.tsx

@@ -0,0 +1,26 @@
+import BasicWindow from "../../Components/BasicWindow";
+import Button from "../../Components/Button";
+
+function AdminManageProjects(): JSX.Element {
+  const content = <></>;
+
+  const buttons = (
+    <>
+      <Button
+        text="Add Project"
+        onClick={(): void => {
+          return;
+        }}
+      />
+      <Button
+        text="Back"
+        onClick={(): void => {
+          return;
+        }}
+      />
+    </>
+  );
+
+  return <BasicWindow username="Admin" content={content} buttons={buttons} />;
+}
+export default AdminManageProjects;

frontend/src/Pages/AdminPages/AdminManageUsers.tsx

@@ -0,0 +1,26 @@
+import BasicWindow from "../../Components/BasicWindow";
+import Button from "../../Components/Button";
+
+function AdminManageUsers(): JSX.Element {
+  const content = <></>;
+
+  const buttons = (
+    <>
+      <Button
+        text="Add User"
+        onClick={(): void => {
+          return;
+        }}
+      />
+      <Button
+        text="Back"
+        onClick={(): void => {
+          return;
+        }}
+      />
+    </>
+  );
+
+  return <BasicWindow username="Admin" content={content} buttons={buttons} />;
+}
+export default AdminManageUsers;

frontend/src/Pages/AdminPages/AdminProjectAddMember.tsx

@@ -0,0 +1,26 @@
+import BasicWindow from "../../Components/BasicWindow";
+import Button from "../../Components/Button";
+
+function AdminProjectAddMember(): JSX.Element {
+  const content = <></>;
+
+  const buttons = (
+    <>
+      <Button
+        text="Add"
+        onClick={(): void => {
+          return;
+        }}
+      />
+      <Button
+        text="Back"
+        onClick={(): void => {
+          return;
+        }}
+      />
+    </>
+  );
+
+  return <BasicWindow username="Admin" content={content} buttons={buttons} />;
+}
+export default AdminProjectAddMember;

frontend/src/Pages/AdminPages/AdminProjectChangeUserRole.tsx

@@ -0,0 +1,26 @@
+import BasicWindow from "../../Components/BasicWindow";
+import Button from "../../Components/Button";
+
+function AdminProjectChangeUserRole(): JSX.Element {
+  const content = <></>;
+
+  const buttons = (
+    <>
+      <Button
+        text="Change"
+        onClick={(): void => {
+          return;
+        }}
+      />
+      <Button
+        text="Back"
+        onClick={(): void => {
+          return;
+        }}
+      />
+    </>
+  );
+
+  return <BasicWindow username="Admin" content={content} buttons={buttons} />;
+}
+export default AdminProjectChangeUserRole;

frontend/src/Pages/AdminPages/AdminProjectManageMembers.tsx

@@ -0,0 +1,26 @@
+import BasicWindow from "../../Components/BasicWindow";
+import Button from "../../Components/Button";
+
+function AdminProjectManageMembers(): JSX.Element {
+  const content = <></>;
+
+  const buttons = (
+    <>
+      <Button
+        text="Add Member"
+        onClick={(): void => {
+          return;
+        }}
+      />
+      <Button
+        text="Back"
+        onClick={(): void => {
+          return;
+        }}
+      />
+    </>
+  );
+
+  return <BasicWindow username="Admin" content={content} buttons={buttons} />;
+}
+export default AdminProjectManageMembers;

frontend/src/Pages/AdminPages/AdminProjectPage.tsx

@@ -0,0 +1,26 @@
+import BasicWindow from "../../Components/BasicWindow";
+import Button from "../../Components/Button";
+
+function AdminProjectPage(): JSX.Element {
+  const content = <></>;
+
+  const buttons = (
+    <>
+      <Button
+        text="Delete"
+        onClick={(): void => {
+          return;
+        }}
+      />
+      <Button
+        text="Back"
+        onClick={(): void => {
+          return;
+        }}
+      />
+    </>
+  );
+
+  return <BasicWindow username="Admin" content={content} buttons={buttons} />;
+}
+export default AdminProjectPage;

frontend/src/Pages/AdminPages/AdminProjectStatistics.tsx

@@ -0,0 +1,20 @@
+import BasicWindow from "../../Components/BasicWindow";
+import Button from "../../Components/Button";
+
+function AdminProjectStatistics(): JSX.Element {
+  const content = <></>;
+
+  const buttons = (
+    <>
+      <Button
+        text="Back"
+        onClick={(): void => {
+          return;
+        }}
+      />
+    </>
+  );
+
+  return <BasicWindow username="Admin" content={content} buttons={buttons} />;
+}
+export default AdminProjectStatistics;

frontend/src/Pages/AdminPages/AdminProjectViewMemberInfo.tsx

@@ -0,0 +1,26 @@
+import BasicWindow from "../../Components/BasicWindow";
+import Button from "../../Components/Button";
+
+function AdminProjectViewMemberInfo(): JSX.Element {
+  const content = <></>;
+
+  const buttons = (
+    <>
+      <Button
+        text="Remove"
+        onClick={(): void => {
+          return;
+        }}
+      />
+      <Button
+        text="Back"
+        onClick={(): void => {
+          return;
+        }}
+      />
+    </>
+  );
+
+  return <BasicWindow username="Admin" content={content} buttons={buttons} />;
+}
+export default AdminProjectViewMemberInfo;

frontend/src/Pages/AdminPages/AdminViewUserInfo.tsx

@@ -0,0 +1,26 @@
+import BasicWindow from "../../Components/BasicWindow";
+import Button from "../../Components/Button";
+
+function AdminViewUserInfo(): JSX.Element {
+  const content = <></>;
+
+  const buttons = (
+    <>
+      <Button
+        text="Delete"
+        onClick={(): void => {
+          return;
+        }}
+      />
+      <Button
+        text="Back"
+        onClick={(): void => {
+          return;
+        }}
+      />
+    </>
+  );
+
+  return <BasicWindow username="Admin" content={content} buttons={buttons} />;
+}
+export default AdminViewUserInfo;

frontend/src/Pages/LoginPage.tsx

@@ -1,5 +1,5 @@
 import Button from "../Components/Button";
-import Logo from "/src/assets/TTIMElogo.png";
+import Logo from "/src/assets/Logo.svg";
 import "./LoginPage.css";
 import { useEffect } from "react";
 import { Link } from "react-router-dom";

frontend/src/Pages/ProjectManagerPages/PMChangeRole.tsx

@@ -0,0 +1,26 @@
+import BasicWindow from "../../Components/BasicWindow";
+import Button from "../../Components/Button";
+
+function ChangeRole(): JSX.Element {
+  const content = <></>;
+
+  const buttons = (
+    <>
+      <Button
+        text="Save"
+        onClick={(): void => {
+          return;
+        }}
+      />
+      <Button
+        text="Back"
+        onClick={(): void => {
+          return;
+        }}
+      />
+    </>
+  );
+
+  return <BasicWindow username="Admin" content={content} buttons={buttons} />;
+}
+export default ChangeRole;

frontend/src/Pages/ProjectManagerPages/PMOtherUsersTR.tsx

@@ -0,0 +1,20 @@
+import BasicWindow from "../../Components/BasicWindow";
+import Button from "../../Components/Button";
+
+function PMOtherUsersTR(): JSX.Element {
+  const content = <></>;
+
+  const buttons = (
+    <>
+      <Button
+        text="Back"
+        onClick={(): void => {
+          return;
+        }}
+      />
+    </>
+  );
+
+  return <BasicWindow username="Admin" content={content} buttons={buttons} />;
+}
+export default PMOtherUsersTR;

frontend/src/Pages/ProjectManagerPages/PMProjectMembers.tsx

@@ -0,0 +1,32 @@
+import BasicWindow from "../../Components/BasicWindow";
+import Button from "../../Components/Button";
+
+function PMProjectMembers(): JSX.Element {
+  const content = <></>;
+
+  const buttons = (
+    <>
+      <Button
+        text="Time / Activity"
+        onClick={(): void => {
+          return;
+        }}
+      />
+      <Button
+        text="Time / Role"
+        onClick={(): void => {
+          return;
+        }}
+      />
+      <Button
+        text="Back"
+        onClick={(): void => {
+          return;
+        }}
+      />
+    </>
+  );
+
+  return <BasicWindow username="Admin" content={content} buttons={buttons} />;
+}
+export default PMProjectMembers;

frontend/src/Pages/ProjectManagerPages/PMTotalTimeActivity.tsx

@@ -0,0 +1,28 @@
+import BasicWindow from "../../Components/BasicWindow";
+import Button from "../../Components/Button";
+import TimeReport from "../../Components/TimeReport";
+
+function PMTotalTimeActivity(): JSX.Element {
+  const content = (
+    <>
+      <h1 className="font-bold text-[30px] mb-[20px]">
+        Total Time Per Activity
+      </h1>
+      <TimeReport />
+    </>
+  );
+
+  const buttons = (
+    <>
+      <Button
+        text="Back"
+        onClick={(): void => {
+          return;
+        }}
+      />
+    </>
+  );
+
+  return <BasicWindow username="Admin" content={content} buttons={buttons} />;
+}
+export default PMTotalTimeActivity;

frontend/src/Pages/ProjectManagerPages/PMTotalTimeRole.tsx

@@ -0,0 +1,20 @@
+import BasicWindow from "../../Components/BasicWindow";
+import Button from "../../Components/Button";
+
+function PMTotalTimeRole(): JSX.Element {
+  const content = <></>;
+
+  const buttons = (
+    <>
+      <Button
+        text="Back"
+        onClick={(): void => {
+          return;
+        }}
+      />
+    </>
+  );
+
+  return <BasicWindow username="Admin" content={content} buttons={buttons} />;
+}
+export default PMTotalTimeRole;

frontend/src/Pages/ProjectManagerPages/PMUnsignedReports.tsx

@@ -0,0 +1,20 @@
+import BasicWindow from "../../Components/BasicWindow";
+import Button from "../../Components/Button";
+
+function PMUnsignedReports(): JSX.Element {
+  const content = <></>;
+
+  const buttons = (
+    <>
+      <Button
+        text="Back"
+        onClick={(): void => {
+          return;
+        }}
+      />
+    </>
+  );
+
+  return <BasicWindow username="Admin" content={content} buttons={buttons} />;
+}
+export default PMUnsignedReports;

frontend/src/Pages/ProjectManagerPages/PMViewUnsignedReport.tsx

@@ -0,0 +1,40 @@
+import BasicWindow from "../../Components/BasicWindow";
+import Button from "../../Components/Button";
+import TimeReport from "../../Components/TimeReport";
+
+function PMViewUnsignedReport(): JSX.Element {
+  const content = (
+    <>
+      <h1 className="font-bold text-[30px] mb-[20px]">
+        Username&apos;s Time Report
+      </h1>
+      <TimeReport />
+    </>
+  );
+
+  const buttons = (
+    <>
+      <Button
+        text="Sign"
+        onClick={(): void => {
+          return;
+        }}
+      />
+      <Button
+        text="Save"
+        onClick={(): void => {
+          return;
+        }}
+      />
+      <Button
+        text="Back"
+        onClick={(): void => {
+          return;
+        }}
+      />
+    </>
+  );
+
+  return <BasicWindow username="Admin" content={content} buttons={buttons} />;
+}
+export default PMViewUnsignedReport;

frontend/src/Pages/UserPages/UserEditTimeReportPage.tsx

@@ -0,0 +1,32 @@
+import BasicWindow from "../../Components/BasicWindow";
+import Button from "../../Components/Button";
+import NewTimeReport from "../../Components/TimeReport";
+
+function UserEditTimeReportPage(): JSX.Element {
+  const content = (
+    <>
+      <h1 className="font-bold text-[30px] mb-[20px]">Edit Time Report</h1>
+      <NewTimeReport />
+    </>
+  );
+
+  const buttons = (
+    <>
+      <Button
+        text="Save"
+        onClick={(): void => {
+          return;
+        }}
+      />
+      <Button
+        text="Back"
+        onClick={(): void => {
+          return;
+        }}
+      />
+    </>
+  );
+
+  return <BasicWindow username="Admin" content={content} buttons={buttons} />;
+}
+export default UserEditTimeReportPage;

frontend/src/Pages/UserPages/UserNewTimeReportPage.tsx

@@ -0,0 +1,35 @@
+import BasicWindow from "../../Components/BasicWindow";
+import Button from "../../Components/Button";
+import NewTimeReport from "../../Components/TimeReport";
+import { Link } from "react-router-dom";
+
+function UserNewTimeReportPage(): JSX.Element {
+  const content = (
+    <>
+      <h1 className="font-bold text-[30px] mb-[20px]">New Time Report</h1>
+      <NewTimeReport />
+    </>
+  );
+
+  const buttons = (
+    <>
+      <Button
+        text="Submit"
+        onClick={(): void => {
+          return;
+        }}
+      />
+      <Link to="/project">
+        <Button
+          text="Back"
+          onClick={(): void => {
+            return;
+          }}
+        />
+      </Link>
+    </>
+  );
+
+  return <BasicWindow username="Admin" content={content} buttons={buttons} />;
+}
+export default UserNewTimeReportPage;

frontend/src/Pages/UserPages/UserProjectPage.tsx

@@ -5,16 +5,16 @@ import Button from "../../Components/Button";
 function UserProjectPage(): JSX.Element {
   const content = (
     <>
-      <Link to="/settingsPage">
-        <h1 className="font-bold text-[30px] mb-[20px]">ProjectNameExample</h1>
-      </Link>
+      <h1 className="font-bold text-[30px] mb-[20px]">ProjectNameExample</h1>
       <div className="border-4 border-black bg-white flex flex-col items-center justify-center min-h-[65vh] h-fit w-[50vw] rounded-3xl content-center overflow-scroll space-y-[10vh] p-[30px]">
         <h1 className="font-bold underline text-[30px] cursor-pointer">
           Your Time Reports
         </h1>
-        <h1 className="font-bold underline text-[30px] cursor-pointer">
-          New Time Report
-        </h1>
+        <Link to="/new-time-report">
+          <h1 className="font-bold underline text-[30px] cursor-pointer">
+            New Time Report
+          </h1>
+        </Link>
       </div>
     </>
   );

frontend/src/Pages/UserPages/UserViewTimeReportsPage.tsx

@@ -0,0 +1,20 @@
+import BasicWindow from "../../Components/BasicWindow";
+import Button from "../../Components/Button";
+
+function UserViewTimeReportsPage(): JSX.Element {
+  const content = <></>;
+
+  const buttons = (
+    <>
+      <Button
+        text="Back"
+        onClick={(): void => {
+          return;
+        }}
+      />
+    </>
+  );
+
+  return <BasicWindow username="Admin" content={content} buttons={buttons} />;
+}
+export default UserViewTimeReportsPage;

frontend/src/Pages/YourProjectsPage.tsx

@@ -12,13 +12,13 @@ function YourProjectsPage(): JSX.Element {
           </h1>
         </Link>
         <h1 className="underline text-[24px] cursor-pointer font-bold">
-          ProjectNameExample
+          ProjectNameExample2
         </h1>
         <h1 className="underline text-[24px] cursor-pointer font-bold">
-          ProjectNameExample
+          ProjectNameExample3
         </h1>
         <h1 className="underline text-[24px] cursor-pointer font-bold">
-          ProjectNameExample
+          ProjectNameExample4
         </h1>
       </div>
     </>

frontend/src/main.tsx

@@ -6,6 +6,29 @@ import LoginPage from "./Pages/LoginPage.tsx";
 import YourProjectsPage from "./Pages/YourProjectsPage.tsx";
 import UserProjectPage from "./Pages/UserPages/UserProjectPage.tsx";
 import AdminMenuPage from "./Pages/AdminPages/AdminMenuPage.tsx";
+import UserEditTimeReportPage from "./Pages/UserPages/UserEditTimeReportPage.tsx";
+import UserNewTimeReportPage from "./Pages/UserPages/UserNewTimeReportPage.tsx";
+import UserViewTimeReportsPage from "./Pages/UserPages/UserViewTimeReportsPage.tsx";
+import PMChangeRole from "./Pages/ProjectManagerPages/PMChangeRole.tsx";
+import PMOtherUsersTR from "./Pages/ProjectManagerPages/PMOtherUsersTR.tsx";
+import PMProjectMembers from "./Pages/ProjectManagerPages/PMProjectMembers.tsx";
+import PMProjectPage from "./Pages/ProjectManagerPages/PMProjectPage.tsx";
+import PMTotalTimeActivity from "./Pages/ProjectManagerPages/PMTotalTimeActivity.tsx";
+import PMTotalTimeRole from "./Pages/ProjectManagerPages/PMTotalTimeRole.tsx";
+import PMUnsignedReports from "./Pages/ProjectManagerPages/PMUnsignedReports.tsx";
+import PMViewUnsignedReport from "./Pages/ProjectManagerPages/PMViewUnsignedReport.tsx";
+import AdminManageUsers from "./Pages/AdminPages/AdminManageUsers.tsx";
+import AdminViewUserInfo from "./Pages/AdminPages/AdminViewUserInfo.tsx";
+import AdminManageProjects from "./Pages/AdminPages/AdminManageProjects.tsx";
+import AdminAddProject from "./Pages/AdminPages/AdminAddProject.tsx";
+import AdminAddUser from "./Pages/AdminPages/AdminAddUser.tsx";
+import AdminChangeUsername from "./Pages/AdminPages/AdminChangeUsername.tsx";
+import AdminProjectAddMember from "./Pages/AdminPages/AdminProjectAddMember.tsx";
+import AdminProjectChangeUserRole from "./Pages/AdminPages/AdminProjectChangeUserRole.tsx";
+import AdminProjectManageMembers from "./Pages/AdminPages/AdminProjectManageMembers.tsx";
+import AdminProjectStatistics from "./Pages/AdminPages/AdminProjectStatistics.tsx";
+import AdminProjectViewMemberInfo from "./Pages/AdminPages/AdminProjectViewMemberInfo.tsx";
+import AdminProjectPage from "./Pages/AdminPages/AdminProjectPage.tsx";
 
 // This is where the routes are mounted
 const router = createBrowserRouter([
@@ -17,14 +40,106 @@ const router = createBrowserRouter([
     path: "/your-projects",
     element: <YourProjectsPage />,
   },
+  {
+    path: "/edit-time-report",
+    element: <UserEditTimeReportPage />,
+  },
+  {
+    path: "/new-time-report",
+    element: <UserNewTimeReportPage />,
+  },
   {
     path: "/project",
     element: <UserProjectPage />,
   },
+  {
+    path: "/project-page",
+    element: <UserViewTimeReportsPage />,
+  },
+  {
+    path: "/change-role",
+    element: <PMChangeRole />,
+  },
+  {
+    path: "/other-users-time-reports",
+    element: <PMOtherUsersTR />,
+  },
+  {
+    path: "/project-members",
+    element: <PMProjectMembers />,
+  },
+  {
+    path: "/PM-project-page",
+    element: <PMProjectPage />,
+  },
+  {
+    path: "/PM-time-activity",
+    element: <PMTotalTimeActivity />,
+  },
+  {
+    path: "/PM-time-role",
+    element: <PMTotalTimeRole />,
+  },
+  {
+    path: "/PM-unsigned-reports",
+    element: <PMUnsignedReports />,
+  },
+  {
+    path: "/PM-view-unsigned-report",
+    element: <PMViewUnsignedReport />,
+  },
+  {
+    path: "/admin-add-project",
+    element: <AdminAddProject />,
+  },
+  {
+    path: "/admin-add-user",
+    element: <AdminAddUser />,
+  },
+  {
+    path: "/admin-change-username",
+    element: <AdminChangeUsername />,
+  },
+  {
+    path: "/admin-manage-projects",
+    element: <AdminManageProjects />,
+  },
+  {
+    path: "/admin-manage-users",
+    element: <AdminManageUsers />,
+  },
   {
     path: "/admin-menu",
     element: <AdminMenuPage />,
   },
+  {
+    path: "/admin-project-add-member",
+    element: <AdminProjectAddMember />,
+  },
+  {
+    path: "/admin-project-change-user-role",
+    element: <AdminProjectChangeUserRole />,
+  },
+  {
+    path: "/admin-project-manage-members",
+    element: <AdminProjectManageMembers />,
+  },
+  {
+    path: "/admin-project-page",
+    element: <AdminProjectPage />,
+  },
+  {
+    path: "/admin-project-statistics",
+    element: <AdminProjectStatistics />,
+  },
+  {
+    path: "/admin-project-view-members",
+    element: <AdminProjectViewMemberInfo />,
+  },
+  {
+    path: "/admin-view-user",
+    element: <AdminViewUserInfo />,
+  },
 ]);
 
 // Semi-hacky way to get the root element