fixed pageContainer width

src/app/App.css

@@ -15,3 +15,11 @@
   --status-warning: #ffb74d;
   --status-alert: #f44336;
 }
+
+/* index.css or a global stylesheet */
+html, body, #root {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}

src/app/Header.tsx

@@ -1,8 +1,8 @@
 import { AppBar, Box, IconButton, Theme, Toolbar } from "@mui/material";
 import { Menu } from "@mui/icons-material";
-import classNames from "classnames";
+// import classNames from "classnames";
 import { makeStyles } from "@mui/styles";
-import { getDarkLogo, getLightLogo, getSignatureAccentColour, getSignatureColour, hasTransparentLogoBG, hideLogo } from "../services/whiteLabel";
+import { getDarkLogo, getLightLogo, getSignatureAccentColour, hasTransparentLogoBG, hideLogo } from "../services/whiteLabel";
 // import { Link } from "react-router-dom";
 import { useThemeType } from "../hooks/useThemeType";
 import UserMenu from "../user/UserMenu";
@@ -11,6 +11,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     appBar: {
         zIndex: theme.zIndex.drawer + 1,
         backgroundImage: "none", // This prevents de-saturation of header in dark mode
+        // border: "1px solid purple"
     },
     toolbar: {
         marginLeft: theme.spacing(0.5),
@@ -82,12 +83,11 @@ interface Props {
 
 export default function Header(props: Props) {
 
-    const { sideIsOpen, openSide, toggleTheme } = props;
+    // const { sideIsOpen, openSide, toggleTheme } = props;
+    const { openSide, toggleTheme } = props;
     const themeType = useThemeType();
     const classes = useStyles()
 
-    console.log(getSignatureColour())
-
     return (
         <AppBar position="fixed" className={classes.appBar}>
             <Toolbar disableGutters className={classes.toolbar}>

src/navigation/SideNavigator.tsx

@@ -51,7 +51,6 @@ const useStyles = makeStyles((theme: Theme) => ({
       paddingLeft: theme.spacing(3),
       paddingRight: theme.spacing(3)
     },
-    color: theme.palette.mode === "light" ? "white" : "black"
   }, 
   activeItem:
     theme.palette.mode === "light"

src/pages/PageContainer.tsx

@@ -5,7 +5,6 @@ import React, { PropsWithChildren } from "react";
 
 const useStyles = makeStyles((theme: Theme) => ({
   pageContainer: {
-    // border: "1px solid red",
     width: "100%",
     overflowX: "hidden",
     overflowY: "auto",
@@ -42,9 +41,9 @@ interface Props extends PropsWithChildren{
 
 export const PageContainer: React.FunctionComponent<Props> = props => {
   const classes = useStyles();
-  const { children } = props;
-  let fullViewport = false
-  let isCenterCenter = false
+  const { children, fullViewport, isCenterCenter } = props;
+  // let fullViewport = false
+  // let isCenterCenter = false
   return (
     <Container
       className={classNames(
@@ -52,7 +51,7 @@ export const PageContainer: React.FunctionComponent<Props> = props => {
         isCenterCenter && classes.centerCenter
       )}
       disableGutters
-      // maxWidth={true}
+      maxWidth={false}
       children={<React.Fragment>{children}</React.Fragment>}
     />
   );

src/pages/Teams.tsx

@@ -9,7 +9,6 @@ export default function Teams() {
     <PageContainer>
       <Box paddingY={isMobile ? 0.5 : 1} paddingX={isMobile ? 1 : 2}>
         <TeamList />
-        {/* Teams! */}
       </Box>
     </PageContainer>
   );

src/theme/theme.ts

@@ -1,5 +1,5 @@
 import * as Colours from "@mui/material/colors"
-import { createTheme, darken, lighten, responsiveFontSizes, Theme, ThemeOptions } from '@mui/material/styles';
+import { createTheme, responsiveFontSizes, Theme, ThemeOptions } from '@mui/material/styles';
 import {
   getPrimaryColour,
   getSecondaryColour,
@@ -198,7 +198,7 @@ function options(themeType: "light" | "dark"): ThemeOptions {
               // color: "white"
             },
             '&:hover': {
-              color: themeType === "light" ? signature : "white", // Customize ripple color here
+              color: themeType === "light" ? signature : "black",
               // color: "white"
             },
           },