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

src/app/App.tsx

@@ -39,15 +39,20 @@ function App() {
     faviconDocument.href = "BrandXTechnologies/favicon.ico"
   })
 
-  let url: string | undefined = import.meta.env.VITE_AUTH0_CLIENT_DOMAIN;
+  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)
+
   return (
     <AppThemeProvider>
       <Auth0Provider
-        domain={or(url, "")}
+        domain={or(domain, "")}
         clientId={or(client_id, "")}
         authorizationParams={{
           audience: or(audience, ""),

src/app/LoadingScreen.tsx

@@ -9,7 +9,20 @@ export default function LoadingScreen(props: Props) {
 	const theme = useTheme();
 
 	return (
-		<Box sx={{ width: "100%", height: "100%", justifyContent: "center", alignContent: "center", textAlign: "center" }}>
+		<Box 
+			sx={{
+				position: "absolute",
+				top: 0,
+				left: 0,
+				width: "100%",
+				height: "100%",
+				display: "flex",
+				flexDirection: "column",
+				justifyContent: "center",
+				alignItems: "center",
+				textAlign: "center",
+			}}
+		>
 			<CircularProgress
 				size={150}
 				style={{ marginBottom: theme.spacing(4) }}

src/navigation/NavigationContainer.tsx

@@ -1,12 +1,11 @@
-import React, { PropsWithChildren } from "react";
 import Router from "./Router";
 
 export default function NavigationContainer() {
 
   return (
-    <React.Fragment>
+    <>
       {/* <NotificationBanner /> */}
       <Router />
-    </React.Fragment>
+    </>
   );
 }

src/navigation/Router.tsx

@@ -288,9 +288,9 @@ export default function Router() {
   }
 
   return (
-    <Suspense fallback={<LoadingScreen />}>
-      <BrowserRouter>
-        <Header />
+    <BrowserRouter>
+      <Header />
+      <Suspense fallback={<LoadingScreen message="Loading Page"/>}>
         <Routes>
           
           {/* Redirects */}
@@ -329,7 +329,7 @@ export default function Router() {
 
           <Route path="/logout" element={<Logout />} />
           <Route path="grainbags/:bagID" element={<GrainBag />} />
-{/* 
+  {/* 
           <ErrorBoundary FallbackComponent={ErrorFallback}>
             <Route path="*" element={<RelativeRoutes/>} />
           </ErrorBoundary> */}
@@ -337,7 +337,7 @@ export default function Router() {
           <Route path="*" element={<RelativeRoutes/>} />
           
         </Routes>
-      </BrowserRouter>
-    </Suspense>
+      </Suspense>
+    </BrowserRouter>
   )
 }

src/providers/pond/pond.tsx

@@ -36,7 +36,7 @@ import ContractProvider, { useContractAPI } from "./contractAPI";
 
 export const pondURL = (partial: string, demo: boolean = false): string => {
   let url = import.meta.env.VITE_APP_API_URL + (demo ? "/demo" : "") + partial;
-  // console.log(url)
+  // console.log("API URL: "+url)
   // if (isStaging()) url = process.env.REACT_APP_STAGING_API_URL + (demo ? "/demo" : "") + partial;
   return url;
 };

src/services/whiteLabel.ts

@@ -95,10 +95,10 @@ const BXT_WHITE_LABEL: WhiteLabel = {
   // primaryColour: "#0000FF",
   secondaryColour: "yellow",
   // secondaryColour: "#FFFF00",
-  signatureColour: "#272727",
-  // signatureColour: "#005bb0",
+  // signatureColour: "#272727",
+  signatureColour: "#005bb0",
   signatureAccentColour: "#fff",
-  auth0ClientId: import.meta.env.REACT_APP_AUTH0_STAGING_CLIENT_ID,
+  auth0ClientId: import.meta.env.VITE_AUTH0_DEV_CLIENT_ID,
   redirectOnLogout: false,
   logoutRedirectTarget: "",
   darkLogo: BXTDarkLogo,

src/theme/AppThemeProvider.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useMemo, useState, useEffect } from "react";
+import React, { createContext, useContext, useMemo, useState } from "react";
 import { ThemeProvider, createTheme, PaletteMode } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
 
@@ -24,7 +24,11 @@ export const useThemeMode = () => {
 };
 
 export const AppThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const [mode, setMode] = useState<ThemeMode>("system");
+  
+  const savedTheme = localStorage.getItem("theme");
+  const isValidTheme = (theme: string | null): theme is ThemeMode =>
+    theme === "light" || theme === "dark" || theme === "system";
+  const [mode, setMode] = useState<ThemeMode>(isValidTheme(savedTheme) ? savedTheme : "system");
 
   const prefersDark = useMediaQuery("(prefers-color-scheme: dark)");
   const resolvedMode: PaletteMode = mode === "system" ? (prefersDark ? "dark" : "light") : mode;