imported logos, header displays logo based on whiteLabel

package-lock.json

@@ -19,7 +19,8 @@
         "moment": "^2.30.1",
         "protobuf-ts": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#staging",
         "react": "^18.3.1",
-        "react-dom": "^18.3.1"
+        "react-dom": "^18.3.1",
+        "react-router-dom": "^6.27.0"
       },
       "devDependencies": {
         "@babel/types": "^7.25.8",
@@ -1555,6 +1556,15 @@
       "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==",
       "license": "BSD-3-Clause"
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.20.0.tgz",
+      "integrity": "sha512-mUnk8rPJBI9loFDZ+YzPGdeniYK+FTmRD1TMCz7ev2SNIozyKKpnGgsxO34u6Z4z/t0ITuu7voi/AshfsGsgFg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.24.0",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.24.0.tgz",
@@ -4101,6 +4111,38 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.27.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.27.0.tgz",
+      "integrity": "sha512-YA+HGZXz4jaAkVoYBE98VQl+nVzI+cVI2Oj/06F5ZM+0u3TgedN9Y9kmMRo2mnkSK2nCpNQn0DVob4HCsY/WLw==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.20.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.27.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.27.0.tgz",
+      "integrity": "sha512-+bvtFWMC0DgAFrfKXKG9Fc+BcXWRUO1aJIihbB79xaeq0v5UzfvnM5houGUm1Y461WVRcgAQ+Clh5rdb1eCx4g==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.20.0",
+        "react-router": "6.27.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",

package.json

@@ -28,7 +28,8 @@
     "moment": "^2.30.1",
     "protobuf-ts": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#staging",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.27.0"
   },
   "devDependencies": {
     "@babel/types": "^7.25.8",

src/app/AuthHTTPWrapper.tsx

@@ -16,10 +16,6 @@ function AuthHTTPWrapper() {
 
   let client_id = import.meta.env.VITE_AUTH0_DEV_CLIENT_ID;
 
-  console.log("Domain: ", url)
-  console.log("Audience: ", audience)
-  console.log("Client: ", client_id)
-
   return (
     <Auth0Provider
       domain={or(url, "")}

src/app/Header.tsx

@@ -2,23 +2,24 @@ import { AppBar, Box, IconButton, Theme, Toolbar } from "@mui/material";
 import { Menu } from "@mui/icons-material";
 import classNames from "classnames";
 import { makeStyles } from "@mui/styles";
-import { getSignatureAccentColour } from "../services/whiteLabel";
+import { getDarkLogo, getLightLogo, getSignatureAccentColour, hasTransparentLogoBG, hideLogo } from "../services/whiteLabel";
+import { Link } from "react-router-dom";
+import { useThemeType } from "../hooks/useThemeType";
 
 const useStyles = makeStyles((theme: Theme) => ({
     appBar: {
-        // zIndex: 10, // TODO: make variables to keep zIndex consistent
         zIndex: theme.zIndex.drawer + 1
     },
     toolbar: {
         marginLeft: theme.spacing(0.5),
         [theme.breakpoints.up("md")]: {
-          marginLeft: theme.spacing(1.5)
+            marginLeft: theme.spacing(1.5)
         }
     },
     buttonContainer: {
         marginRight: theme.spacing(0.5),
         [theme.breakpoints.up("md")]: {
-          marginRight: theme.spacing(1.5)
+            marginRight: theme.spacing(1.5)
         }
     },
     button: {
@@ -27,6 +28,31 @@ const useStyles = makeStyles((theme: Theme) => ({
     hide: {
         display: "none"
     },
+    logoContainer: {
+        display: "flex",
+        alignItems: "flex-end",
+        justifyContent: "flex-start"
+      },
+    logoLink: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        borderRadius: "5px",
+        backgroundColor: hasTransparentLogoBG()
+          ? ""
+          : theme.palette.mode === "light"
+          ? "#fff"
+          : "#323232"
+    },
+    HeaderLogo: {
+        objectFit: "cover",
+        height: "56px",
+        width: "auto",
+        padding: theme.spacing(1),
+        [theme.breakpoints.up("md")]: {
+          height: "64px"
+        }
+    },
 }));
 
 interface Props {
@@ -40,6 +66,8 @@ interface Props {
 export default function Header(props: Props) {
 
     const { sideIsOpen, openSide} = props;
+
+    const themeType = useThemeType();
     const classes = useStyles() 
 
     return (
@@ -53,9 +81,20 @@ export default function Header(props: Props) {
                             onClick={openSide}
                             className={classNames(classes.button, sideIsOpen && classes.hide)}>
                                 <Menu />
-                            </IconButton>
+                        </IconButton>
                     {/* )} */}
                 </Box>
+                <Box flexGrow={1} marginLeft={0.5}>
+                    {!hideLogo() && (
+                        <div className={classes.logoContainer}>
+                            <img
+                                className={classes.HeaderLogo}
+                                src={themeType === "light" ? getDarkLogo() : getLightLogo()}
+                                alt={import.meta.env.REACT_APP_WEBSITE_TITLE}
+                            />
+                        </div>
+                    )}
+                </Box>
             </Toolbar>
         </AppBar>
     )

src/app/UserWrapper.tsx

@@ -17,6 +17,7 @@ export default function UserWrapper() {
   const useAuth = useAuth0();
   const hasFetched = useRef(false);
   const [user, setUser] = useState<pond.User | undefined>(undefined)
+  const [message, setMessage] = useState("Loading user profile...")
 
   let user_id = or(useAuth.user?.sub, "")
 
@@ -24,8 +25,15 @@ export default function UserWrapper() {
     if (hasFetched.current) return;
     setLoading(true)
     userAPI.getUser(user_id).then(resp => {
-        setUser(resp)
+      setUser(resp)
-    }).finally(() => {
+    }).catch(err => {
+      if (err.toString().includes("CORS")) {
+        setMessage("CORS error")
+      } else {
+        setMessage("Loading failed, refresh may help")
+      }
+    })
+    .finally(() => {
         setLoading(false)
         hasFetched.current = true;
     })
@@ -38,7 +46,7 @@ export default function UserWrapper() {
 
   if (!user || loading) return (
     <LoadingScreen
-      message={"Loading user profile..."}
+      message={message}
     />
   )