Merge branch 'new_header' into dev_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),

src/component/ComponentSettings.tsx

@@ -513,11 +513,12 @@ export default function ComponentSettings(props: Props) {
     );
   };
 
-  const isCableComponent = () => {
+  const hasCableID = () => {
     return (formComponent.settings.type === quack.ComponentType.COMPONENT_TYPE_GRAIN_CABLE ||
               formComponent.settings.type ===
                 quack.ComponentType.COMPONENT_TYPE_DRAGER_GAS_DONGLE ||
               formComponent.settings.type === quack.ComponentType.COMPONENT_TYPE_PRESSURE_CABLE ||
+              formComponent.settings.type === quack.ComponentType.COMPONENT_TYPE_ANALOG_PRESSURE ||
               (formComponent.settings.type === quack.ComponentType.COMPONENT_TYPE_CAPACITOR_CABLE &&
                 formComponent.subType() ===
                   quack.CapacitorCableSubtype.CAPACITOR_CABLE_SUBTYPE_FROG))
@@ -583,7 +584,8 @@ export default function ComponentSettings(props: Props) {
               )}
             </TextField>
             {supportsExpansion() && setExpLine()}
-            {(isCableComponent() && !supportsExpansion())&& setComponentAddrType()}
+
+            {(hasCableID() && !supportsExpansion())&& setComponentAddrType()}
           </React.Fragment>
         ) : activeStep === 1 ? (
           <ComponentForm

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'
         ? {