brandxtech/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Header no longer de-saturates when in dark mode

Browse source
This commit is contained in:
Carter 2024-11-18 12:33:42 -06:00
parent a453147e9e
commit dcd15b5a6d
6 changed files with 131 additions and 113 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/app/Header.tsx
View file

@ -2,7 +2,7 @@ import { AppBar, Box, IconButton, Theme, Toolbar } from "@mui/material";
import { Menu } from "@mui/icons-material"; import { Menu } from "@mui/icons-material";
import classNames from "classnames"; import classNames from "classnames";
import { makeStyles } from "@mui/styles"; import { makeStyles } from "@mui/styles";
import { getDarkLogo, getLightLogo, getSignatureAccentColour, hasTransparentLogoBG, hideLogo } from "../services/whiteLabel"; import { getDarkLogo, getLightLogo, getSignatureAccentColour, getSignatureColour, hasTransparentLogoBG, hideLogo } from "../services/whiteLabel";
// import { Link } from "react-router-dom"; // import { Link } from "react-router-dom";
import { useThemeType } from "../hooks/useThemeType"; import { useThemeType } from "../hooks/useThemeType";
import UserMenu from "../user/UserMenu"; import UserMenu from "../user/UserMenu";
@ -10,6 +10,7 @@ import UserMenu from "../user/UserMenu";
const useStyles = makeStyles((theme: Theme) => ({ const useStyles = makeStyles((theme: Theme) => ({
appBar: { appBar: {
zIndex: theme.zIndex.drawer + 1, zIndex: theme.zIndex.drawer + 1,
backgroundImage: "none", // This prevents de-saturation of header in dark mode
}, },
toolbar: { toolbar: {
marginLeft: theme.spacing(0.5), marginLeft: theme.spacing(0.5),
@ -86,6 +87,9 @@ export default function Header(props: Props) {
const themeType = useThemeType(); const themeType = useThemeType();
const classes = useStyles() const classes = useStyles()
console.log(getSignatureColour())
console.log(getSignatureAccentColour())
return ( return (
<AppBar position="fixed" className={classes.appBar}> <AppBar position="fixed" className={classes.appBar}>
<Toolbar disableGutters className={classes.toolbar}> <Toolbar disableGutters className={classes.toolbar}>

4
src/services/whiteLabel.ts
View file

@ -9,9 +9,9 @@ import BXTDarkLogo from "../assets/whitelabels/BXT/darkLogo.png";
import AeroGrowDarkLogo from "../assets/whitelabels/AeroGrow/darkLogo.png"; import AeroGrowDarkLogo from "../assets/whitelabels/AeroGrow/darkLogo.png";
import AeroGrowLightLogo from "../assets/whitelabels/AeroGrow/lightLogo.png"; import AeroGrowLightLogo from "../assets/whitelabels/AeroGrow/lightLogo.png";
import MiVentLightLogo from "../assets/whitelabels/MiVent/lightLogo.png"; import MiVentLightLogo from "../assets/whitelabels/MiVent/lightLogo.png";
import OmniAirLogo from "../assets/whitelabels/OmniAir/OmniAirLogo.png"; // import OmniAirLogo from "../assets/whitelabels/OmniAir/OmniAirLogo.png";
import MiPCALogo from "../assets/whitelabels/OmniAir/MiPCALogo.png"; import MiPCALogo from "../assets/whitelabels/OmniAir/MiPCALogo.png";
import { green, yellow } from "@mui/material/colors"; // import { green, yellow } from "@mui/material/colors";
const protips: string[] = [ const protips: string[] = [
"You can see the latest measurements for a device by starring its components!", "You can see the latest measurements for a device by starring its components!",

1
src/teams/TeamActions.tsx
View file

@ -163,6 +163,7 @@ export default function TeamActions(props: Props) {
); );
}; };
// console.log(permissions)
const canWrite = permissions.includes(pond.Permission.PERMISSION_WRITE); const canWrite = permissions.includes(pond.Permission.PERMISSION_WRITE);
return ( return (
<React.Fragment> <React.Fragment>

5
src/teams/TeamList.tsx
View file

@ -32,6 +32,7 @@ import { Add } from "@mui/icons-material";
import { cloneDeep } from "lodash"; import { cloneDeep } from "lodash";
import { getContextKeys, getContextTypes } from "pbHelpers/Context"; import { getContextKeys, getContextTypes } from "pbHelpers/Context";
import { makeStyles, styled } from "@mui/styles"; import { makeStyles, styled } from "@mui/styles";
import TeamActions from "./TeamActions";
const useStyles = makeStyles((theme: Theme) => ({ const useStyles = makeStyles((theme: Theme) => ({
cardContent: { cardContent: {
@ -201,7 +202,7 @@ export default function TeamList(props: Props) {
</React.Fragment> </React.Fragment>
} }
/> />
{/* <ListItemSecondaryAction> <ListItemSecondaryAction>
<TeamActions <TeamActions
team={Team.create(team)} team={Team.create(team)}
permissions={permissions} permissions={permissions}
@ -226,7 +227,7 @@ export default function TeamList(props: Props) {
} }
}} }}
/> />
</ListItemSecondaryAction> */} </ListItemSecondaryAction>
</ListItem> </ListItem>
<Divider variant="inset" component="li" /> <Divider variant="inset" component="li" />
</React.Fragment> </React.Fragment>

224
src/theme/theme.ts
View file

@ -48,116 +48,128 @@ function options(themeType: "light" | "dark"): ThemeOptions {
alert: "#f44336" alert: "#f44336"
} }
}, },
// typography: { typography: {
// fontFamily: [ fontFamily: [
// "Open Sans", "Open Sans",
// "-apple-system", "-apple-system",
// "BlinkMacSystemFont", "BlinkMacSystemFont",
// '"Segoe UI"', '"Segoe UI"',
// '"Helvetica Neue"', '"Helvetica Neue"',
// "Arial", "Arial",
// "sans-serif", "sans-serif",
// '"Apple Color Emoji"', '"Apple Color Emoji"',
// '"Segoe UI Emoji"', '"Segoe UI Emoji"',
// '"Segoe UI Symbol"' '"Segoe UI Symbol"'
// ].join(",") ].join(",")
// }, },
overrides: { components: {
MuiAppBar: { MuiAppBar: {
colorPrimary: { styleOverrides: {
backgroundColor: signature, colorPrimary: {
color: accent backgroundColor: signature,
} color: accent,
},
MuiBottomNavigation: {
root: {
backgroundColor: signature
}
},
MuiBottomNavigationAction: {
root: {
backgroundColor: signature,
color: Colours["grey"][500],
"&$selected": {
color: accent
}
}
},
MuiCard: {
root: {
borderRadius: "5px",
"@media (min-width: 600px)": {
borderRadius: "7px"
}
}
},
MuiChip: {
root: {
"@media (max-width: 600px)": {
height: "24px"
}
},
avatar: {
"@media (max-width: 600px)": {
height: "24px",
width: "24px"
}
}
},
MuiDialog: {
paperFullScreen: {
overflowX: "hidden"
}
},
MuiSlider: {
root: {
height: 5
},
thumb: {
height: 18,
width: 18,
marginTop: -6,
marginLeft: -9,
"&:focus,&:hover,&$active": {
boxShadow: "inherit"
}
},
active: {},
valueLabel: {
left: "calc(-50% + 2px)"
},
track: {
height: 7,
borderRadius: 4
},
rail: {
height: 7,
borderRadius: 4
},
vertical: {
"& .MuiSlider-thumb": {
marginLeft: "-8px !important"
}
}
},
MuiStepper: {
root: {
background: "transparent"
}
},
MuiSwitch: {
switchBase: {
color: Colours.grey[400],
"&$checked": {
color: Colours.grey[100]
}, },
"&$checked + $track": {
color: Colours.grey[100]
}
}, },
checked: {},
track: {}
} }
} }
// components: {
// MuiAppBar: {
// styleOverrides: {
// colorPrimary: {
// backgroundColor: signature,
// color: accent,
// },
// },
// },
// MuiBottomNavigation: {
// root: {
// backgroundColor: signature
// }
// },
// MuiBottomNavigationAction: {
// root: {
// backgroundColor: signature,
// color: Colours["grey"][500],
// "&$selected": {
// color: accent
// }
// }
// },
// MuiCard: {
// root: {
// borderRadius: "5px",
// "@media (min-width: 600px)": {
// borderRadius: "7px"
// }
// }
// },
// MuiChip: {
// root: {
// "@media (max-width: 600px)": {
// height: "24px"
// }
// },
// avatar: {
// "@media (max-width: 600px)": {
// height: "24px",
// width: "24px"
// }
// }
// },
// MuiDialog: {
// paperFullScreen: {
// overflowX: "hidden"
// }
// },
// MuiSlider: {
// root: {
// height: 5
// },
// thumb: {
// height: 18,
// width: 18,
// marginTop: -6,
// marginLeft: -9,
// "&:focus,&:hover,&$active": {
// boxShadow: "inherit"
// }
// },
// active: {},
// valueLabel: {
// left: "calc(-50% + 2px)"
// },
// track: {
// height: 7,
// borderRadius: 4
// },
// rail: {
// height: 7,
// borderRadius: 4
// },
// vertical: {
// "& .MuiSlider-thumb": {
// marginLeft: "-8px !important"
// }
// }
// },
// MuiStepper: {
// root: {
// background: "transparent"
// }
// },
// MuiSwitch: {
// switchBase: {
// color: Colours.grey[400],
// "&$checked": {
// color: Colours.grey[100]
// },
// "&$checked + $track": {
// color: Colours.grey[100]
// }
// },
// checked: {},
// track: {}
// }
// }
} as ThemeOptions; } as ThemeOptions;
} }

4
src/utils/environment.ts
View file

@ -1,5 +1,5 @@
function getEnvironment() { function getEnvironment() {
switch (process.env.NODE_ENV) { switch (import.meta.env.NODE_ENV) {
case "development": case "development":
return "development"; return "development";
case "production": case "production":
@ -16,7 +16,7 @@ function getEnvironment() {
} }
export function isOffline() { export function isOffline() {
return process.env.REACT_APP_IS_OFFLINE === "true"; return import.meta.env.REACT_APP_IS_OFFLINE === "true";
} }
export function isDevelopment() { export function isDevelopment() {