diff --git a/src/components/navigation/ButtonAppBar/ButtonAppBar.tsx b/src/components/navigation/ButtonAppBar/ButtonAppBar.tsx index 8b2c706fab2fe0ffe65e1dc9c05d49738aed50e5..194b5cc67cad99a309115feb7c2be36b07dfb83f 100644 --- a/src/components/navigation/ButtonAppBar/ButtonAppBar.tsx +++ b/src/components/navigation/ButtonAppBar/ButtonAppBar.tsx @@ -34,6 +34,18 @@ const defaultStyle = ({ theme }: StyleProps) => ({ } }); +const getEnvColor = (theme: Theme, environment: Environment) => { + if (environment === "PROD") { + return theme.palette.environment.production.main; + } + + if (environment === "LAB") { + return theme.palette.environment.lab.main; + } + + return theme.palette.environment.development.main; +}; + export const ButtonAppBar = styled( ({ title, @@ -53,8 +65,7 @@ export const ButtonAppBar = styled( <Toolbar className="CeuiButtonAppBar-Toolbar" sx={{ - background: (theme) => - `${environment === "PROD" ? theme.palette.environment.production.main : theme.palette.environment.development.main}` + background: (theme) => getEnvColor(theme, environment) }} > <div className="CeuiButtonAppBar-HomeBox">{defaultHomeButton}</div> diff --git a/src/components/navigation/Environment.ts b/src/components/navigation/Environment.ts index a60cde1876474ece67b817bcb9d47f1746ed19f7..319099a75e611c87dde497399e5ce877d374ab3c 100644 --- a/src/components/navigation/Environment.ts +++ b/src/components/navigation/Environment.ts @@ -2,5 +2,6 @@ export enum Environment { LOCAL = "LOCAL", DEMO = "DEMO", TEST = "TEST", - PROD = "PROD" + PROD = "PROD", + LAB = "LAB" } diff --git a/src/style/Theme.ts b/src/style/Theme.ts index 2704f2f79ffdff6db3843d07bf85f60a5f88da84..4209adb5b3914488f70b3b5d91a61ba41d38e5cc 100644 --- a/src/style/Theme.ts +++ b/src/style/Theme.ts @@ -32,6 +32,7 @@ declare module "@mui/material/styles" { essNavy: Palette["primary"]; environment: { production: Palette["primary"]; + lab: Palette["primary"]; development: Palette["primary"]; }; } @@ -47,6 +48,7 @@ declare module "@mui/material/styles" { essNavy: Palette["primary"]; environment: { production: Palette["primary"]; + lab: Palette["primary"]; development: Palette["primary"]; }; } @@ -128,6 +130,12 @@ theme = createTheme(theme, { }, name: "production" }), + lab: theme.palette.augmentColor({ + color: { + main: theme.palette.essNavy.main + }, + name: "lab" + }), development: theme.palette.augmentColor({ color: { main: theme.palette.essOrange.main