From 952b3f6c4ed6d2fd414f92e15a2f2ec410602c61 Mon Sep 17 00:00:00 2001
From: Carter <carter@adaptiveagriculture.ca>
Date: Tue, 19 Nov 2024 11:15:40 -0600
Subject: [PATCH] fixed pageContainer width

---
 src/app/App.css                  |  8 ++++++++
 src/app/Header.tsx               | 12 ++++++------
 src/navigation/SideNavigator.tsx |  1 -
 src/pages/PageContainer.tsx      |  9 ++++-----
 src/pages/Teams.tsx              |  1 -
 src/theme/theme.ts               |  4 ++--
 6 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/src/app/App.css b/src/app/App.css
index 334d5ac..a7d5557 100644
--- a/src/app/App.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/app/Header.tsx b/src/app/Header.tsx
index 2d5ef86..fdd5393 100644
--- a/src/app/Header.tsx
+++ b/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,11 +83,10 @@ 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())
+    const classes = useStyles()
 
     return (
         <AppBar position="fixed" className={classes.appBar}>
diff --git a/src/navigation/SideNavigator.tsx b/src/navigation/SideNavigator.tsx
index 7804a50..827ac68 100644
--- a/src/navigation/SideNavigator.tsx
+++ b/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"
diff --git a/src/pages/PageContainer.tsx b/src/pages/PageContainer.tsx
index 7fcc44c..33bd842 100644
--- a/src/pages/PageContainer.tsx
+++ b/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>}
     />
   );
diff --git a/src/pages/Teams.tsx b/src/pages/Teams.tsx
index aae8b62..d9c1d5c 100644
--- a/src/pages/Teams.tsx
+++ b/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>
   );
diff --git a/src/theme/theme.ts b/src/theme/theme.ts
index 68ce4fa..ab537d5 100644
--- a/src/theme/theme.ts
+++ b/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"
             },
           },