From c1065099e5f822dc8a8eecc662a808166efd2881 Mon Sep 17 00:00:00 2001
From: Darin Kelkhoff <darin.kelkhoff@gmail.com>
Date: Wed, 15 Nov 2023 12:11:35 -0600
Subject: [PATCH] CE-740 Style on page header; dark.main color; sticky app
 header bar margin & width

---
 src/qqq/assets/theme/base/colors.ts          |  2 +-
 src/qqq/components/horseshoe/Breadcrumbs.tsx | 16 ++++++++++------
 src/qqq/components/horseshoe/Styles.ts       |  3 +++
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/qqq/assets/theme/base/colors.ts b/src/qqq/assets/theme/base/colors.ts
index b1c6695..4aa4bd3 100644
--- a/src/qqq/assets/theme/base/colors.ts
+++ b/src/qqq/assets/theme/base/colors.ts
@@ -216,7 +216,7 @@ const colors: Types = {
    },
 
    dark: {
-      main: "#344767",
+      main: "#212121",
       focus: "#2c3c58",
    },
 
diff --git a/src/qqq/components/horseshoe/Breadcrumbs.tsx b/src/qqq/components/horseshoe/Breadcrumbs.tsx
index af086c3..f5159e8 100644
--- a/src/qqq/components/horseshoe/Breadcrumbs.tsx
+++ b/src/qqq/components/horseshoe/Breadcrumbs.tsx
@@ -25,6 +25,7 @@ import Icon from "@mui/material/Icon";
 import {ReactNode, useContext} from "react";
 import {Link} from "react-router-dom";
 import QContext from "QContext";
+import colors from "qqq/assets/theme/base/colors";
 import pxToRem from "qqq/assets/theme/functions/pxToRem";
 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}}>
          <MuiBreadcrumbs
             sx={{
-               fontSize: pxToRem(18),
+               fontSize: "1.125rem",
                fontWeight: "500",
-               color: "#212121",
+               color: colors.dark.main,
                "& a": {
                   color: "#757575"
                },
                "& .MuiBreadcrumbs-separator": {
-                  fontSize: pxToRem(18),
+                  fontSize: "1.125rem",
                   fontWeight: "500",
-                  color: "#212121"
+                  color: colors.dark.main
                },
             }}
          >
@@ -137,11 +138,14 @@ function QBreadcrumbs({icon, title, route, light}: Props): JSX.Element
          </MuiBreadcrumbs>
          <MDTypography
             pt={1}
-            fontWeight="bold"
             textTransform="capitalize"
-            variant="h5"
+            variant="h3"
             color={light ? "white" : "dark"}
             noWrap
+            sx={{
+               fontSize: "1.75rem",
+               fontWeight: "600"
+            }}
          >
             {pageHeader}
          </MDTypography>
diff --git a/src/qqq/components/horseshoe/Styles.ts b/src/qqq/components/horseshoe/Styles.ts
index 975128e..4be1876 100644
--- a/src/qqq/components/horseshoe/Styles.ts
+++ b/src/qqq/components/horseshoe/Styles.ts
@@ -74,6 +74,9 @@ function navbar(theme: Theme | any, ownerState: any)
       paddingRight: absolute ? pxToRem(8) : 0,
       paddingLeft: absolute ? pxToRem(16) : 0,
 
+      marginLeft: "-.5rem",
+      width: "calc(100% + .5rem)",
+
       "& > *": {
          transition: transitions.create("all", {
             easing: transitions.easing.easeInOut,