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 classNames from "classnames";
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 { useThemeType } from "../hooks/useThemeType";
import UserMenu from "../user/UserMenu";
@ -10,6 +10,7 @@ import UserMenu from "../user/UserMenu";
const useStyles = makeStyles((theme: Theme) => ({
appBar: {
zIndex: theme.zIndex.drawer + 1,
backgroundImage: "none", // This prevents de-saturation of header in dark mode
},
toolbar: {
marginLeft: theme.spacing(0.5),
@ -86,6 +87,9 @@ export default function Header(props: Props) {
const themeType = useThemeType();
const classes = useStyles()
console.log(getSignatureColour())
console.log(getSignatureAccentColour())
return (
<AppBar position="fixed" className={classes.appBar}>
<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 AeroGrowLightLogo from "../assets/whitelabels/AeroGrow/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 { green, yellow } from "@mui/material/colors";
// import { green, yellow } from "@mui/material/colors";
const protips: string[] = [
"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);
return (
<React.Fragment>

5
src/teams/TeamList.tsx
View file

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

220
src/theme/theme.ts
View file

@ -48,116 +48,128 @@ function options(themeType: "light" | "dark"): ThemeOptions {
alert: "#f44336"
}
},
// typography: {
// fontFamily: [
// "Open Sans",
// "-apple-system",
// "BlinkMacSystemFont",
// '"Segoe UI"',
// '"Helvetica Neue"',
// "Arial",
// "sans-serif",
// '"Apple Color Emoji"',
// '"Segoe UI Emoji"',
// '"Segoe UI Symbol"'
// ].join(",")
// },
overrides: {
typography: {
fontFamily: [
"Open Sans",
"-apple-system",
"BlinkMacSystemFont",
'"Segoe UI"',
'"Helvetica Neue"',
"Arial",
"sans-serif",
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"'
].join(",")
},
components: {
MuiAppBar: {
styleOverrides: {
colorPrimary: {
backgroundColor: signature,
color: accent
}
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;
}

4
src/utils/environment.ts
View file

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