changed h1 to typography as the h1 has very small fontSize

package.json

@@ -23,7 +23,7 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "PORT=50051 react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

src/App.js

@@ -6,6 +6,8 @@ import SideMenu from "./Components/SideMenu";
 import Login from "./Pages/Login";
 import { Layout, notification } from "antd";
 import { UseUserSession, WebSocketProvider } from "./utils";
+import { Header } from "antd/es/layout/layout";
+import DashboardLayout from "./Components/DashboardLayout";
 
 export default function App() {
   const [notificationApi, notificationContextHolder] =
@@ -35,8 +37,11 @@ export default function App() {
         setIsReady={setWebSocketIsReady}
       >
         <ReconnectingView webSocketIsReady={webSocketIsReady} />
-        <SideMenu userSession={userSession} setUserSession={setUserSession} />
-        <PageContent />
+
+        <DashboardLayout
+          userSession={userSession}
+          setUserSession={setUserSession}
+        />
       </WebSocketProvider>
     </Layout>
   );
@@ -60,7 +65,7 @@ const ReconnectingView = ({ webSocketIsReady }) => {
     >
       <svg id="loading-reconnecting" className="loading" viewBox="0 0 1350 600">
         <text x="50%" y="50%" fill="transparent" textAnchor="middle">
-          J A N E X
+          C O M P A N Y
         </text>
       </svg>
       <div
@@ -85,3 +90,10 @@ const ReconnectingView = ({ webSocketIsReady }) => {
     </div>
   );
 };
+
+// TODO: Undo this
+/*
+<text x="50%" y="50%" fill="transparent" textAnchor="middle">
+  J A N E X
+</text>
+*/

src/Components/DashboardLayout/index.js

@@ -0,0 +1,26 @@
+import { Layout } from "antd";
+import SideMenu from "../SideMenu";
+import PageContent from "../PageContent";
+import { useState } from "react";
+
+export default function DashboardLayout({ userSession, setUserSession }) {
+  const [isSideMenuCollapsed, setIsSideMenuCollapsed] = useState(false);
+
+  return (
+    <Layout style={{ minHeight: "100vh" }}>
+      <Layout>
+        <SideMenu
+          userSession={userSession}
+          setUserSession={setUserSession}
+          isSideMenuCollapsed={isSideMenuCollapsed}
+          setIsSideMenuCollapsed={setIsSideMenuCollapsed}
+        />
+
+        <PageContent
+          isSideMenuCollapsed={isSideMenuCollapsed}
+          setIsSideMenuCollapsed={setIsSideMenuCollapsed}
+        />
+      </Layout>
+    </Layout>
+  );
+}

src/Components/PageContent/index.js

@@ -1,13 +1,48 @@
-import { Content } from "antd/es/layout/layout";
+import { Content, Header } from "antd/es/layout/layout";
 import AppRoutes from "../AppRoutes";
+import { Button, Layout } from "antd";
+import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons";
 
-function PageContent() {
+export default function PageContent({
+  isSideMenuCollapsed,
+  setIsSideMenuCollapsed,
+}) {
   return (
-    <Content
-      style={{ margin: 12, marginLeft: 212, width: "75%", height: "100%" }}
-    >
-      <AppRoutes />
-    </Content>
+    <Layout style={{ marginLeft: isSideMenuCollapsed ? 0 : 200 }}>
+      <Header
+        style={{
+          position: "sticky",
+          top: 0,
+          zIndex: 10,
+          width: "100%",
+          display: "flex",
+          alignItems: "center",
+          padding: 0,
+          background: "#fff",
+        }}
+      >
+        <Button
+          type="text"
+          icon={
+            isSideMenuCollapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />
+          }
+          onClick={() => setIsSideMenuCollapsed(!isSideMenuCollapsed)}
+          style={{ fontSize: "16px", width: 64, height: 64 }}
+        />
+
+        <h1 style={{ fontSize: "16px", margin: 0 }}>Header</h1>
+      </Header>
+
+      <Content
+        //style={{ margin: 12, marginLeft: 212, width: "75%", height: "100%" }}
+        style={{
+          padding: 12,
+        }}
+      >
+        <AppRoutes />
+      </Content>
+    </Layout>
   );
 }
-export default PageContent;
+
+// <AppRoutes />

src/Components/SideMenu/index.js

@@ -23,7 +23,12 @@ import {
 } from "../../utils";
 import { useTranslation } from "react-i18next";
 
-export default function SideMenu({ userSession, setUserSession }) {
+export default function SideMenu({
+  userSession,
+  setUserSession,
+  isSideMenuCollapsed,
+  setIsSideMenuCollapsed,
+}) {
   const location = useLocation();
   const [selectedKeys, setSelectedKeys] = useState("/");
   const webSocketContext = useContext(WebSocketContext);
@@ -200,7 +205,19 @@ export default function SideMenu({ userSession, setUserSession }) {
   return (
     <Sider
       theme="light"
-      style={{ overflow: "auto", position: "fixed", height: "100vh" }}
+      //style={{ overflow: "auto", position: "fixed", height: "100vh" }}
+      style={{
+        overflow: "auto",
+        height: "100vh",
+        position: "fixed",
+        left: 0,
+        top: 0,
+        bottom: 0,
+      }}
+      breakpoint="lg"
+      collapsedWidth="0"
+      collapsed={isSideMenuCollapsed}
+      onCollapse={(collapsed) => setIsSideMenuCollapsed(collapsed)}
     >
       <div
         style={{
@@ -220,7 +237,9 @@ export default function SideMenu({ userSession, setUserSession }) {
             <span>N</span>
             <span>Y</span>
           </div>
+
           <div className="Subtitle">Admin Dashboard</div>
+
           <Menu
             mode="inline"
             onClick={(item) => {
@@ -232,6 +251,7 @@ export default function SideMenu({ userSession, setUserSession }) {
             defaultOpenKeys={["/admin-area"]}
           />
         </div>
+
         <div>
           <Divider />
 

src/Pages/AdminArea/Roles/index.js

@@ -8,6 +8,7 @@ import {
   Tag,
   Tooltip,
   Tree,
+  Typography,
   notification,
 } from "antd";
 import {
@@ -493,16 +494,16 @@ function Role({ treeData, role, webSocketContext, notificationApi }) {
                 </>
               ) : (
                 <>
-                  <h1
+                  <Typography.Title
+                    level={5}
                     style={{
                       margin: 0,
-                      fontWeight: "bold",
                       color: Constants.COLORS.PRIMARY,
                     }}
                   >
                     {role.DisplayName}{" "}
                     {role.Master && <Tag color="purple">Master</Tag>}
-                  </h1>
+                  </Typography.Title>
 
                   <span style={{ margin: 0 }}>{role.Description}</span>
                 </>

src/Pages/AllUsers/index.js

@@ -5,6 +5,7 @@ import {
   Select,
   Space,
   Table,
+  Typography,
   notification,
 } from "antd";
 import {
@@ -335,9 +336,9 @@ export default function AllUsers() {
           justifyContent: "space-between",
         }}
       >
-        <h1 style={{ fontWeight: "bold" }}>
+        <Typography.Title level={4}>
           {t("allUsers.header.allUsers")} ({activatedUsers.length})
-        </h1>
+        </Typography.Title>
         {hasPermission(
           webSocketContext.User.Permissions,
           Constants.PERMISSIONS.ALL_USERS.CREATE_NEW_USER
@@ -352,6 +353,7 @@ export default function AllUsers() {
       </div>
 
       <Table
+        scroll={{ x: "max-content" }}
         columns={getTableContent()}
         dataSource={getTableItems(activatedUsers)}
       />
@@ -367,6 +369,7 @@ export default function AllUsers() {
               )
             </h1>
             <Table
+              scroll={{ x: "max-content" }}
               columns={getTableContent()}
               dataSource={getTableItems(deactivatedUsers)}
             />

src/Pages/Dashboard/index.js

@@ -1,6 +1,6 @@
 import React, { useContext } from "react";
 import { WebSocketContext } from "../../utils";
-import { Card } from "antd";
+import { Card, Typography } from "antd";
 
 const randomGreeting = Math.floor(Math.random() * 18);
 
@@ -110,9 +110,9 @@ const Dashboard = React.memo(() => {
 
   return (
     <Card>
-      <h1 style={{ fontWeight: "bold", margin: 0 }}>
+      <Typography.Title level={4} style={{ margin: 0 }}>
         {getGreeting(webSocketContext.User.Username)}
-      </h1>
+      </Typography.Title>
     </Card>
   );
 });

src/Pages/GroupTasks/Overview/GroupTasksTableList.js

@@ -255,7 +255,11 @@ export default function GroupTaskTableList({
         </div>
       )}
 
-      <Table columns={getTableColumns()} dataSource={getTableItems()} />
+      <Table
+        scroll={{ x: "max-content" }}
+        columns={getTableColumns()}
+        dataSource={getTableItems()}
+      />
     </>
   );
 }

src/Pages/Scanners/index.js

@@ -1,4 +1,4 @@
-import { Popconfirm, Space, Table } from "antd";
+import { Popconfirm, Space, Table, Typography } from "antd";
 import {
   FormatDatetime,
   MyAvatar,
@@ -128,15 +128,19 @@ export default function Scanners() {
 
   return (
     <>
-      <h1 style={{ fontWeight: "bold", float: "left" }}>
+      <Typography.Title level={4}>
         {t("scanners.header.scanners")} (
         {webSocketContext.Scanners === null
           ? "0"
           : webSocketContext.Scanners.length}
         )
-      </h1>
+      </Typography.Title>
 
-      <Table columns={getTableColumns()} dataSource={getTableItems()} />
+      <Table
+        scroll={{ x: "max-content" }}
+        columns={getTableColumns()}
+        dataSource={getTableItems()}
+      />
     </>
   );
 }

src/Pages/UserProfile/index.js

@@ -10,6 +10,7 @@ import {
   Space,
   Table,
   Tooltip,
+  Typography,
   Upload,
   notification,
 } from "antd";
@@ -303,9 +304,9 @@ export default function UserProfile() {
     <>
       {notificationContextHolder}
 
-      <h1 style={{ fontWeight: "bold" }}>
+      <Typography.Title level={4}>
         {t("userProfile.header.yourProfile")}
-      </h1>
+      </Typography.Title>
 
       <Card>
         <Form layout="vertical">
@@ -441,12 +442,13 @@ export default function UserProfile() {
 
       <br />
 
-      <h1 style={{ fontWeight: "bold" }}>
+      <Typography.Title level={4}>
         {t("userProfile.header.yourSessions")} (
         {webSocketContext.User.Sessions.length})
-      </h1>
+      </Typography.Title>
 
       <Table
+        scroll={{ x: "max-content" }}
         columns={getSessionTableColumns()}
         dataSource={getSessionTableItems()}
       />
@@ -463,7 +465,7 @@ export default function UserProfile() {
               justifyContent: "space-between",
             }}
           >
-            <h1 style={{ fontWeight: "bold" }}>
+            <Typography.Title level={4}>
               {t("userProfile.header.yourApiKeys")} (
               {webSocketContext.User.ApiKeys.length}){" "}
               <Tooltip title={t("userProfile.icon.viewApiDoc")}>
@@ -474,7 +476,7 @@ export default function UserProfile() {
                   <FileTextOutlined style={{ fontSize: 16 }} />
                 </Link>
               </Tooltip>
-            </h1>
+            </Typography.Title>
 
             <Popconfirm
               placement="topRight"
@@ -496,6 +498,7 @@ export default function UserProfile() {
             </Popconfirm>
           </div>
           <Table
+            scroll={{ x: "max-content" }}
             columns={getApiKeyTableColumns()}
             dataSource={getApiKeyTableItems()}
           />

src/index.js

@@ -10,12 +10,19 @@ const Loading = () => {
   return (
     <svg id="loading-init" className="loading" viewBox="0 0 1350 600">
       <text x="50%" y="50%" fill="transparent" textAnchor="middle">
-        J A N E X
+        C O M P A N Y
       </text>
     </svg>
   );
 };
 
+// TODO: Undo this
+/* 
+<text x="50%" y="50%" fill="transparent" textAnchor="middle">
+  J A N E X
+</text>
+*/
+
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.Suspense fallback={<Loading />}>

src/utils.js

@@ -17,9 +17,9 @@ export const Constants = {
     ICON_INFO: "#08c",
   },
   TEXT_EMPTY_PLACEHOLDER: "-/-",
-  API_ADDRESS: "http://localhost:8080/v1",
-  STATIC_CONTENT_ADDRESS: "http://localhost:8080/",
-  WS_ADDRESS: "ws://localhost:8080/ws",
+  API_ADDRESS: "http://localhost:50050/v1",
+  STATIC_CONTENT_ADDRESS: "http://localhost:50050/",
+  WS_ADDRESS: "ws://localhost:50050/ws",
   /*API_ADDRESS:
     window.location.protocol + "//" + window.location.hostname + "/api/v1",
   STATIC_CONTENT_ADDRESS: