diff --git a/src/qqq/assets/theme/base/colors.ts b/src/qqq/assets/theme/base/colors.ts index 4aa4bd3..8162765 100644 --- a/src/qqq/assets/theme/base/colors.ts +++ b/src/qqq/assets/theme/base/colors.ts @@ -78,6 +78,12 @@ interface Types light: string; main: string; focus: string; + } + gray: + | { + light: string; + main: string; + focus: string; } | any; primary: ColorsTypes | any; @@ -174,6 +180,11 @@ const colors: Types = { focus: "#ffffff", }, + gray: { + main: "#757575", + focus: "#757575", + }, + black: { light: "#000000", main: "#000000", diff --git a/src/qqq/assets/theme/base/typography.ts b/src/qqq/assets/theme/base/typography.ts index 6a01f1f..086f80b 100644 --- a/src/qqq/assets/theme/base/typography.ts +++ b/src/qqq/assets/theme/base/typography.ts @@ -199,9 +199,10 @@ const typography: Types = { }, h3: { - fontSize: pxToRem(30), + fontSize: "1.75rem", lineHeight: 1.375, ...baseHeadingProperties, + fontWeight: 600 }, h4: { diff --git a/src/qqq/components/horseshoe/Breadcrumbs.tsx b/src/qqq/components/horseshoe/Breadcrumbs.tsx index f5159e8..3eb33f9 100644 --- a/src/qqq/components/horseshoe/Breadcrumbs.tsx +++ b/src/qqq/components/horseshoe/Breadcrumbs.tsx @@ -26,7 +26,6 @@ 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"; interface Props @@ -118,7 +117,7 @@ function QBreadcrumbs({icon, title, route, light}: Props): JSX.Element fontWeight: "500", color: colors.dark.main, "& a": { - color: "#757575" + color: colors.gray.main }, "& .MuiBreadcrumbs-separator": { fontSize: "1.125rem", @@ -142,10 +141,6 @@ function QBreadcrumbs({icon, title, route, light}: Props): JSX.Element variant="h3" color={light ? "white" : "dark"} noWrap - sx={{ - fontSize: "1.75rem", - fontWeight: "600" - }} > {pageHeader} diff --git a/src/qqq/components/horseshoe/NavBar.tsx b/src/qqq/components/horseshoe/NavBar.tsx index 2b2ce9f..1669564 100644 --- a/src/qqq/components/horseshoe/NavBar.tsx +++ b/src/qqq/components/horseshoe/NavBar.tsx @@ -159,7 +159,7 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element options={history} autoHighlight blurOnSelect - style={{width: "200px"}} + style={{width: "16rem"}} onOpen={handleHistoryOnOpen} onChange={handleAutocompleteOnChange} PopperComponent={CustomPopper} diff --git a/src/qqq/components/horseshoe/Styles.ts b/src/qqq/components/horseshoe/Styles.ts index 4be1876..098e599 100644 --- a/src/qqq/components/horseshoe/Styles.ts +++ b/src/qqq/components/horseshoe/Styles.ts @@ -20,6 +20,7 @@ */ import {Theme} from "@mui/material/styles"; +import colors from "qqq/assets/theme/base/colors"; function navbar(theme: Theme | any, ownerState: any) { @@ -154,6 +155,16 @@ const navbarDesktopMenu = ({breakpoints}: Theme) => ({ }); const recentlyViewedMenu = ({breakpoints}: Theme) => ({ + "& .MuiInputLabel-root": { + color: colors.gray.main, + fontWeight: "500", + fontSize: "1rem" + }, + "& .MuiInputAdornment-root": { + marginTop: "0.5rem", + color: colors.gray.main, + fontSize: "1rem" + }, "& .MuiOutlinedInput-root": { borderRadius: "0", padding: "0"