Merge branch 'dev_environment' of gitlab.com:brandx/bxt-app into dev_environment

2025-04-22 14:33:49 -06:00 · 2025-04-22 14:33:49 -06:00 · 9d5d7da2dd
commit 9d5d7da2dd
parent b62c7dbe5c ffa060cee8
20 changed files with 2419 additions and 109 deletions
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@ -5,13 +5,11 @@ import HTTPProvider from 'providers/http'
 import { useState } from 'react'
 import LoadingScreen from './LoadingScreen'
 import UserWrapper from './UserWrapper'
-import { CssBaseline } from '@mui/material'
 import { getWhitelabel } from 'services/whiteLabel'
 import { AppThemeProvider } from 'theme/AppThemeProvider'

 function App() {
  const [token, setToken] = useState<string | undefined>(undefined)
-  // const [palette, setPalette] = useState<Theme>(CreateTheme(getThemeType()));

  const whiteLabel = getWhitelabel()
  const manifestPath = "/" + whiteLabel.name.replace(/\s/g, "") + "/manifest.json"
@ -42,12 +40,9 @@ function App() {
  let domain: string | undefined = import.meta.env.VITE_AUTH0_CLIENT_DOMAIN;
  let audience: string | undefined = import.meta.env.VITE_AUTH0_AUDIENCE;

-  let client_id = import.meta.env.VITE_AUTH0_DEV_CLIENT_ID;
-
-  console.log("Domain: " + domain)
-  console.log("Audience: " + audience)
-  console.log("Client ID: " + client_id)
-  console.log("API URL: " + import.meta.env.VITE_APP_API_URL)
+  // let client_id = whiteLabel.auth0ClientId
+  let client_id = import.meta.env.VITE_AUTH0_CLIENT_ID;
+  // if (!client_id) client_id = import.meta.env.VITE_AUTH0_CLIENT_ID;

  return (
    <AppThemeProvider>
--- a/src/app/Header.tsx
+++ b/src/app/Header.tsx
@ -11,71 +11,73 @@ import SideNavigator from "navigation/SideNavigator";
 import { useState } from "react";
 import BottomNavigator from "navigation/BottomNavigator";

-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles((theme: Theme) => {
+  return ({
    appBar: {
-        zIndex: theme.zIndex.drawer + 1,
-        backgroundImage: "none", // This prevents de-saturation of header in dark mode
-        backgroundColor: "#272727"
-    },
-    toolbar: {
-        marginLeft: theme.spacing(0.5),
-        [theme.breakpoints.up("md")]: {
-            marginLeft: theme.spacing(1.5)
-        }
-    },
-    buttonContainer: {
-        marginRight: theme.spacing(0.5),
-        [theme.breakpoints.up("md")]: {
-            marginRight: theme.spacing(1.5)
-        },
-        color: getSignatureAccentColour() + " !important"
-    },
-    button: {
-        color: getSignatureAccentColour() + " !important"
-    },
-    hide: {
-        display: "none"
-    },
-    logoContainer: {
-        display: "flex",
-        alignItems: "center",
-        height: "56px",
-        justifyContent: "flex-start",
-        [theme.breakpoints.up("md")]: {
-            height: "64px"
-        }
-    },
-    logoLink: {
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        borderRadius: "5px",
-        backgroundColor: hasTransparentLogoBG()
-          ? ""
-          : theme.palette.mode === "light"
-          ? "#fff"
-          : "#0000"
-    },
-    HeaderLogo: {
-        objectFit: "cover",
-        height: "56px",
-        width: "auto",
-        padding: theme.spacing(1),
-        [theme.breakpoints.up("md")]: {
-          height: "64px"
-        }
-    },
-    appBarRight: {
-        display: "flex",
-        flexDirection: "row",
-        marginLeft: theme.spacing(2),
-        marginRight: theme.spacing(1),
-        [theme.breakpoints.up("md")]: {
-            marginLeft: theme.spacing(3),
-            marginRight: theme.spacing(2)
-        }
-    },
-}));
+			zIndex: theme.zIndex.drawer + 1,
+			backgroundImage: "none", // This prevents de-saturation of header in dark mode
+			backgroundColor: theme.palette.mode === "light" ? "#3b3b3b" : "#272727"
+		},
+		toolbar: {
+			marginLeft: theme.spacing(0.5),
+			[theme.breakpoints.up("md")]: {
+				marginLeft: theme.spacing(1.5)
+			}
+		},
+		buttonContainer: {
+			marginRight: theme.spacing(0.5),
+			[theme.breakpoints.up("md")]: {
+				marginRight: theme.spacing(1.5)
+			},
+			color: getSignatureAccentColour() + " !important"
+		},
+		button: {
+			color: getSignatureAccentColour() + " !important"
+		},
+		hide: {
+			display: "none"
+		},
+		logoContainer: {
+			display: "flex",
+			alignItems: "center",
+			height: "56px",
+			justifyContent: "flex-start",
+			[theme.breakpoints.up("md")]: {
+				height: "64px"
+			}
+		},
+		logoLink: {
+			display: "flex",
+			justifyContent: "center",
+			alignItems: "center",
+			borderRadius: "5px",
+			backgroundColor: hasTransparentLogoBG()
+				? ""
+				: theme.palette.mode === "light"
+				? "#fff"
+				: "#0000"
+		},
+		HeaderLogo: {
+			objectFit: "cover",
+			height: "56px",
+			width: "auto",
+			padding: theme.spacing(1),
+			[theme.breakpoints.up("md")]: {
+				height: "64px"
+			}
+		},
+		appBarRight: {
+			display: "flex",
+			flexDirection: "row",
+			marginLeft: theme.spacing(2),
+			marginRight: theme.spacing(1),
+			[theme.breakpoints.up("md")]: {
+				marginLeft: theme.spacing(3),
+				marginRight: theme.spacing(2)
+			}
+		}
+  })
+});

 export default function Header() {

--- a/src/app/UserWrapper.tsx
+++ b/src/app/UserWrapper.tsx
@ -22,16 +22,16 @@ const reducer = (state: GlobalState, action: GlobalStateAction): GlobalState =>

 const useStyles = makeStyles((theme: Theme) => ({
  appContent: {
-    marginTop: 56,
-    marginBottom: 56,
-    marginLeft: "0px",
+    paddingTop: 56,
+    paddingBottom: 56,
+    paddingLeft: "0px",
    [theme.breakpoints.up("sm")]: {
-      marginTop: 64,
-      marginBottom: 0
+      paddingTop: 64,
+      paddingBottom: 0,
    },
    [theme.breakpoints.up("md")]: {
-      marginLeft: theme.spacing(9)
-    }
+      paddingLeft: theme.spacing(9)
+    },
  },
  container: {
    backgroundColor: theme.palette.background.default,
--- a/src/navigation/Router.tsx
+++ b/src/navigation/Router.tsx
@ -329,10 +329,6 @@ export default function Router() {

          <Route path="/logout" element={<Logout />} />
          <Route path="grainbags/:bagID" element={<GrainBag />} />
-  {/* 
-          <ErrorBoundary FallbackComponent={ErrorFallback}>
-            <Route path="*" element={<RelativeRoutes/>} />
-          </ErrorBoundary> */}

          <Route path="*" element={<RelativeRoutes/>} />
          
--- a/src/services/whiteLabel.ts
+++ b/src/services/whiteLabel.ts
@ -70,12 +70,12 @@ interface WhiteLabel {
 // };

 const STAGING_WHITELABEL: WhiteLabel = {
-  name: import.meta.env.REACT_APP_WEBSITE_TITLE,
-  primaryColour: import.meta.env.REACT_APP_PRIMARY_COLOUR,
-  secondaryColour: import.meta.env.REACT_APP_SECONDARY_COLOUR,
-  signatureColour: import.meta.env.REACT_APP_SIGNATURE_COLOUR,
+  name: import.meta.env.VITE_APP_WEBSITE_TITLE,
+  primaryColour: import.meta.env.VITE_APP_PRIMARY_COLOUR,
+  secondaryColour: import.meta.env.VITE_APP_SECONDARY_COLOUR,
+  signatureColour: import.meta.env.VITE_APP_SIGNATURE_COLOUR,
  signatureAccentColour: "#fff",
-  auth0ClientId: import.meta.env.REACT_APP_AUTH0_STAGING_CLIENT_ID,
+  auth0ClientId: import.meta.env.VITE_AUTH0_STAGING_CLIENT_ID,
  redirectOnLogout: false,
  logoutRedirectTarget: "",
  darkLogo: DefaultDarkLogo,
@ -259,7 +259,7 @@ const whitelabels = new Map<string, WhiteLabel>([
  ["brandxducks", BXT_WHITE_LABEL],
  ["brandxtech", BXT_WHITE_LABEL],
  ["aerogrowmanufacturing", AEROGROW_WHITE_LABEL],
-  ["localhost", BXT_WHITE_LABEL],
+  ["localhost", STAGING_WHITELABEL],
  ["staging", STAGING_WHITELABEL],
  ["10.0", ADAPTIVE_CONSTRUCTION_WHITE_LABEL],
  ["mivent", MIVENT_WHITE_LABEL],
@ -276,6 +276,9 @@ export function getWhitelabel(): WhiteLabel {
  if (window.location.origin.includes("bxt-dev")) {
    return BXT_WHITE_LABEL;
  }
+  if (window.location.origin.includes("staging")) {
+    return STAGING_WHITELABEL;
+  }
  const whiteLabelKeys = Array.from(whitelabels.keys());
  for (var i = 0; i < whiteLabelKeys.length; i++) {
    let key = whiteLabelKeys[i];