Merge branch 'new_header' into staging_environment

src/app/Header.tsx

@@ -16,7 +16,7 @@ const useStyles = makeStyles((theme: Theme) => {
     appBar: {
 			zIndex: theme.zIndex.drawer + 1,
 			backgroundImage: "none", // This prevents de-saturation of header in dark mode
-			backgroundColor: theme.palette.mode === "light" ? "#3b3b3b" : "#272727"
+			backgroundColor: theme.palette.header.main
 		},
 		toolbar: {
 			marginLeft: theme.spacing(0.5),
@@ -128,4 +128,4 @@ export default function Header() {
 			{isMobile && <BottomNavigator setNavOpen={isOpen => {setNavOpen(isOpen)}} sideIsOpen={navOpen} />}
     </>
   )
-}
+}

src/services/whiteLabel.ts

@@ -28,6 +28,8 @@ const protips: string[] = [
   "Want to receive text messages about your devices? Update your phone number and enable SMS notifications!"
 ];
 
+const DEFAULT_HEADER_COLOUR = "#1f2a35";
+
 export interface WhiteLabelFeatures {
   bins: boolean;
   visualFarm: boolean;
@@ -55,6 +57,7 @@ interface WhiteLabel {
   secondaryColour: any;
   signatureColour: any;
   signatureAccentColour: any;
+  headerColour?: any;
   auth0ClientId: string;
   redirectOnLogout: boolean;
   logoutRedirectTarget: string;
@@ -444,6 +447,14 @@ export function getSignatureColour(): any {
   return getWhitelabel().signatureColour;
 }
 
+export function getHeaderColour(): any {
+  return getWhitelabel().headerColour ?? DEFAULT_HEADER_COLOUR;
+}
+
+export function getHeaderColor(): any {
+  return getHeaderColour();
+}
+
 export function getSignatureAccentColour(): any {
   return getWhitelabel().signatureAccentColour;
 }

src/theme/theme.ts

@@ -2,10 +2,21 @@
 import * as Colours from "@mui/material/colors"
 import { createTheme, ThemeOptions } from '@mui/material/styles';
 import {
+  getHeaderColor,
   getPrimaryColour,
   getSecondaryColour,
 } from "../services/whiteLabel";
 
+declare module "@mui/material/styles" {
+  interface Palette {
+    header: Palette["primary"];
+  }
+
+  interface PaletteOptions {
+    header?: PaletteOptions["primary"];
+  }
+}
+
 const baseTheme: ThemeOptions = {
   palette: {
     mode: 'light', // default mode; will be overridden by system if needed
@@ -62,6 +73,9 @@ export const getTheme = (mode: 'light' | 'dark') =>
       ...baseTheme.palette,
       primary: makePaletteColor(getPrimaryColour()),
       secondary: makePaletteColor(getSecondaryColour()),
+      header: {
+        main: getHeaderColor(),
+      },
       mode,
       ...(mode === 'dark'
         ? {