CE-740 Style on page header; dark.main color; sticky app header bar margin & width

This commit is contained in:
2023-11-15 12:11:35 -06:00
parent adcfa86f73
commit c1065099e5
3 changed files with 14 additions and 7 deletions

View File

@ -216,7 +216,7 @@ const colors: Types = {
}, },
dark: { dark: {
main: "#344767", main: "#212121",
focus: "#2c3c58", focus: "#2c3c58",
}, },

View File

@ -25,6 +25,7 @@ import Icon from "@mui/material/Icon";
import {ReactNode, useContext} from "react"; import {ReactNode, useContext} from "react";
import {Link} from "react-router-dom"; import {Link} from "react-router-dom";
import QContext from "QContext"; import QContext from "QContext";
import colors from "qqq/assets/theme/base/colors";
import pxToRem from "qqq/assets/theme/functions/pxToRem"; import pxToRem from "qqq/assets/theme/functions/pxToRem";
import MDTypography from "qqq/components/legacy/MDTypography"; import MDTypography from "qqq/components/legacy/MDTypography";
@ -113,16 +114,16 @@ function QBreadcrumbs({icon, title, route, light}: Props): JSX.Element
<Box mr={{xs: 0, xl: 8}}> <Box mr={{xs: 0, xl: 8}}>
<MuiBreadcrumbs <MuiBreadcrumbs
sx={{ sx={{
fontSize: pxToRem(18), fontSize: "1.125rem",
fontWeight: "500", fontWeight: "500",
color: "#212121", color: colors.dark.main,
"& a": { "& a": {
color: "#757575" color: "#757575"
}, },
"& .MuiBreadcrumbs-separator": { "& .MuiBreadcrumbs-separator": {
fontSize: pxToRem(18), fontSize: "1.125rem",
fontWeight: "500", fontWeight: "500",
color: "#212121" color: colors.dark.main
}, },
}} }}
> >
@ -137,11 +138,14 @@ function QBreadcrumbs({icon, title, route, light}: Props): JSX.Element
</MuiBreadcrumbs> </MuiBreadcrumbs>
<MDTypography <MDTypography
pt={1} pt={1}
fontWeight="bold"
textTransform="capitalize" textTransform="capitalize"
variant="h5" variant="h3"
color={light ? "white" : "dark"} color={light ? "white" : "dark"}
noWrap noWrap
sx={{
fontSize: "1.75rem",
fontWeight: "600"
}}
> >
{pageHeader} {pageHeader}
</MDTypography> </MDTypography>

View File

@ -74,6 +74,9 @@ function navbar(theme: Theme | any, ownerState: any)
paddingRight: absolute ? pxToRem(8) : 0, paddingRight: absolute ? pxToRem(8) : 0,
paddingLeft: absolute ? pxToRem(16) : 0, paddingLeft: absolute ? pxToRem(16) : 0,
marginLeft: "-.5rem",
width: "calc(100% + .5rem)",
"& > *": { "& > *": {
transition: transitions.create("all", { transition: transitions.create("all", {
easing: transitions.easing.easeInOut, easing: transitions.easing.easeInOut,