From ef2c1437d20c1818fef0a30905ba3bf40076a1df Mon Sep 17 00:00:00 2001 From: Layton Whiteley Date: Sun, 6 Oct 2024 15:34:09 +0200 Subject: [PATCH] fix: adjust NavBar styles --- .../components/buttonStyle.js | 515 ++++++++++-------- .../components/headerLinksStyle.js | 44 +- .../components/headerStyle.js | 32 +- .../components/Navbars/AdminNavbarLinks.jsx | 6 +- src/ui/components/Navbars/Navbar.jsx | 12 +- 5 files changed, 326 insertions(+), 283 deletions(-) diff --git a/src/ui/assets/jss/material-dashboard-react/components/buttonStyle.js b/src/ui/assets/jss/material-dashboard-react/components/buttonStyle.js index d9e0e39c9..5ef9459d8 100644 --- a/src/ui/assets/jss/material-dashboard-react/components/buttonStyle.js +++ b/src/ui/assets/jss/material-dashboard-react/components/buttonStyle.js @@ -13,328 +13,363 @@ import { const buttonStyle = { button: { - minHeight: 'auto', - minWidth: 'auto', - backgroundColor: grayColor[0], - color: whiteColor, - boxShadow: - '0 2px 2px 0 rgba(' + - hexToRgb(grayColor[0]) + - ', 0.14), 0 3px 1px -2px rgba(' + - hexToRgb(grayColor[0]) + - ', 0.2), 0 1px 5px 0 rgba(' + - hexToRgb(grayColor[0]) + - ', 0.12)', - border: 'none', - borderRadius: '3px', - position: 'relative', - padding: '12px 30px', - margin: '.3125rem 1px', - fontSize: '12px', - fontWeight: '400', - textTransform: 'uppercase', - letterSpacing: '0', - willChange: 'box-shadow, transform', - transition: - // eslint-disable-next-line max-len - 'box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1)', - lineHeight: '1.42857143', - textAlign: 'center', - whiteSpace: 'nowrap', - verticalAlign: 'middle', - touchAction: 'manipulation', - cursor: 'pointer', - '&:hover,&:focus': { - color: whiteColor, + '&.MuiButton-root': { + minHeight: 'auto', + minWidth: 'auto', backgroundColor: grayColor[0], + color: whiteColor, boxShadow: - '0 14px 26px -12px rgba(' + + '0 2px 2px 0 rgba(' + hexToRgb(grayColor[0]) + - ', 0.42), 0 4px 23px 0px rgba(' + - hexToRgb(blackColor) + - ', 0.12), 0 8px 10px -5px rgba(' + + ', 0.14), 0 3px 1px -2px rgba(' + hexToRgb(grayColor[0]) + - ', 0.2)', - }, - '& .fab,& .fas,& .far,& .fal, &.material-icons': { - position: 'relative', - display: 'inline-block', - top: '0', - marginTop: '-1em', - marginBottom: '-1em', - fontSize: '1.1rem', - marginRight: '4px', - verticalAlign: 'middle', - }, - '& svg': { + ', 0.2), 0 1px 5px 0 rgba(' + + hexToRgb(grayColor[0]) + + ', 0.12)', + border: 'none', + borderRadius: '3px', position: 'relative', - display: 'inline-block', - top: '0', - width: '18px', - height: '18px', - marginRight: '4px', + padding: '12px 30px', + margin: '.3125rem 1px', + fontSize: '12px', + fontWeight: '400', + textTransform: 'uppercase', + letterSpacing: '0', + willChange: 'box-shadow, transform', + transition: + // eslint-disable-next-line max-len + 'box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1)', + lineHeight: '1.42857143', + textAlign: 'center', + whiteSpace: 'nowrap', verticalAlign: 'middle', - }, - '&$justIcon': { - '& .fab,& .fas,& .far,& .fal,& .material-icons': { - marginTop: '0px', - position: 'absolute', - width: '100%', - transform: 'none', - left: '0px', - top: '0px', - height: '100%', - lineHeight: '41px', - fontSize: '20px', + touchAction: 'manipulation', + cursor: 'pointer', + '&:hover,&:focus': { + color: whiteColor, + backgroundColor: grayColor[0], + boxShadow: + '0 14px 26px -12px rgba(' + + hexToRgb(grayColor[0]) + + ', 0.42), 0 4px 23px 0px rgba(' + + hexToRgb(blackColor) + + ', 0.12), 0 8px 10px -5px rgba(' + + hexToRgb(grayColor[0]) + + ', 0.2)', + }, + '& .fab,& .fas,& .far,& .fal, &.material-icons': { + position: 'relative', + display: 'inline-block', + top: '0', + marginTop: '-1em', + marginBottom: '-1em', + fontSize: '1.1rem', + marginRight: '4px', + verticalAlign: 'middle', + }, + '& svg': { + position: 'relative', + display: 'inline-block', + top: '0', + width: '18px', + height: '18px', + marginRight: '4px', + verticalAlign: 'middle', + }, + '&$justIcon': { + '& .fab,& .fas,& .far,& .fal,& .material-icons': { + marginTop: '0px', + position: 'absolute', + width: '100%', + transform: 'none', + left: '0px', + top: '0px', + height: '100%', + lineHeight: '41px', + fontSize: '20px', + }, }, }, }, white: { - '&,&:focus,&:hover': { - backgroundColor: whiteColor, - color: grayColor[0], + '&.MuiButton-root': { + '&,&:focus,&:hover': { + backgroundColor: whiteColor, + color: grayColor[0], + }, }, }, rose: { - backgroundColor: roseColor[0], - boxShadow: - '0 2px 2px 0 rgba(' + - hexToRgb(roseColor[0]) + - ', 0.14), 0 3px 1px -2px rgba(' + - hexToRgb(roseColor[0]) + - ', 0.2), 0 1px 5px 0 rgba(' + - hexToRgb(roseColor[0]) + - ', 0.12)', - '&:hover,&:focus': { + '&.MuiButton-root': { backgroundColor: roseColor[0], boxShadow: - '0 14px 26px -12px rgba(' + + '0 2px 2px 0 rgba(' + + hexToRgb(roseColor[0]) + + ', 0.14), 0 3px 1px -2px rgba(' + hexToRgb(roseColor[0]) + - ', 0.42), 0 4px 23px 0px rgba(' + - hexToRgb(blackColor) + - ', 0.12), 0 8px 10px -5px rgba(' + + ', 0.2), 0 1px 5px 0 rgba(' + hexToRgb(roseColor[0]) + - ', 0.2)', + ', 0.12)', + '&:hover,&:focus': { + backgroundColor: roseColor[0], + boxShadow: + '0 14px 26px -12px rgba(' + + hexToRgb(roseColor[0]) + + ', 0.42), 0 4px 23px 0px rgba(' + + hexToRgb(blackColor) + + ', 0.12), 0 8px 10px -5px rgba(' + + hexToRgb(roseColor[0]) + + ', 0.2)', + }, }, }, primary: { - backgroundColor: primaryColor[0], - boxShadow: - '0 2px 2px 0 rgba(' + - hexToRgb(primaryColor[0]) + - ', 0.14), 0 3px 1px -2px rgba(' + - hexToRgb(primaryColor[0]) + - ', 0.2), 0 1px 5px 0 rgba(' + - hexToRgb(primaryColor[0]) + - ', 0.12)', - '&:hover,&:focus': { + '&.MuiButton-root': { backgroundColor: primaryColor[0], boxShadow: - '0 14px 26px -12px rgba(' + + '0 2px 2px 0 rgba(' + hexToRgb(primaryColor[0]) + - ', 0.42), 0 4px 23px 0px rgba(' + - hexToRgb(blackColor) + - ', 0.12), 0 8px 10px -5px rgba(' + + ', 0.14), 0 3px 1px -2px rgba(' + hexToRgb(primaryColor[0]) + - ', 0.2)', + ', 0.2), 0 1px 5px 0 rgba(' + + hexToRgb(primaryColor[0]) + + ', 0.12)', + '&:hover,&:focus': { + backgroundColor: primaryColor[0], + boxShadow: + '0 14px 26px -12px rgba(' + + hexToRgb(primaryColor[0]) + + ', 0.42), 0 4px 23px 0px rgba(' + + hexToRgb(blackColor) + + ', 0.12), 0 8px 10px -5px rgba(' + + hexToRgb(primaryColor[0]) + + ', 0.2)', + }, }, }, info: { - backgroundColor: infoColor[0], - boxShadow: - '0 2px 2px 0 rgba(' + - hexToRgb(infoColor[0]) + - ', 0.14), 0 3px 1px -2px rgba(' + - hexToRgb(infoColor[0]) + - ', 0.2), 0 1px 5px 0 rgba(' + - hexToRgb(infoColor[0]) + - ', 0.12)', - '&:hover,&:focus': { + '&.MuiButton-root': { backgroundColor: infoColor[0], boxShadow: - '0 14px 26px -12px rgba(' + + '0 2px 2px 0 rgba(' + + hexToRgb(infoColor[0]) + + ', 0.14), 0 3px 1px -2px rgba(' + hexToRgb(infoColor[0]) + - ', 0.42), 0 4px 23px 0px rgba(' + - hexToRgb(blackColor) + - ', 0.12), 0 8px 10px -5px rgba(' + + ', 0.2), 0 1px 5px 0 rgba(' + hexToRgb(infoColor[0]) + - ', 0.2)', + ', 0.12)', + '&:hover,&:focus': { + backgroundColor: infoColor[0], + boxShadow: + '0 14px 26px -12px rgba(' + + hexToRgb(infoColor[0]) + + ', 0.42), 0 4px 23px 0px rgba(' + + hexToRgb(blackColor) + + ', 0.12), 0 8px 10px -5px rgba(' + + hexToRgb(infoColor[0]) + + ', 0.2)', + }, }, }, success: { - backgroundColor: successColor[0], - boxShadow: - '0 2px 2px 0 rgba(' + - hexToRgb(successColor[0]) + - ', 0.14), 0 3px 1px -2px rgba(' + - hexToRgb(successColor[0]) + - ', 0.2), 0 1px 5px 0 rgba(' + - hexToRgb(successColor[0]) + - ', 0.12)', - '&:hover,&:focus': { + '&.MuiButton-root': { backgroundColor: successColor[0], boxShadow: - '0 14px 26px -12px rgba(' + + '0 2px 2px 0 rgba(' + + hexToRgb(successColor[0]) + + ', 0.14), 0 3px 1px -2px rgba(' + hexToRgb(successColor[0]) + - ', 0.42), 0 4px 23px 0px rgba(' + - hexToRgb(blackColor) + - ', 0.12), 0 8px 10px -5px rgba(' + + ', 0.2), 0 1px 5px 0 rgba(' + hexToRgb(successColor[0]) + - ', 0.2)', + ', 0.12)', + '&:hover,&:focus': { + backgroundColor: successColor[0], + boxShadow: + '0 14px 26px -12px rgba(' + + hexToRgb(successColor[0]) + + ', 0.42), 0 4px 23px 0px rgba(' + + hexToRgb(blackColor) + + ', 0.12), 0 8px 10px -5px rgba(' + + hexToRgb(successColor[0]) + + ', 0.2)', + }, }, }, warning: { - backgroundColor: warningColor[0], - boxShadow: - '0 2px 2px 0 rgba(' + - hexToRgb(warningColor[0]) + - ', 0.14), 0 3px 1px -2px rgba(' + - hexToRgb(warningColor[0]) + - ', 0.2), 0 1px 5px 0 rgba(' + - hexToRgb(warningColor[0]) + - ', 0.12)', - '&:hover,&:focus': { + '&.MuiButton-root': { backgroundColor: warningColor[0], boxShadow: - '0 14px 26px -12px rgba(' + + '0 2px 2px 0 rgba(' + hexToRgb(warningColor[0]) + - ', 0.42), 0 4px 23px 0px rgba(' + - hexToRgb(blackColor) + - ', 0.12), 0 8px 10px -5px rgba(' + + ', 0.14), 0 3px 1px -2px rgba(' + hexToRgb(warningColor[0]) + - ', 0.2)', + ', 0.2), 0 1px 5px 0 rgba(' + + hexToRgb(warningColor[0]) + + ', 0.12)', + '&:hover,&:focus': { + backgroundColor: warningColor[0], + boxShadow: + '0 14px 26px -12px rgba(' + + hexToRgb(warningColor[0]) + + ', 0.42), 0 4px 23px 0px rgba(' + + hexToRgb(blackColor) + + ', 0.12), 0 8px 10px -5px rgba(' + + hexToRgb(warningColor[0]) + + ', 0.2)', + }, }, }, danger: { - backgroundColor: dangerColor[0], - boxShadow: - '0 2px 2px 0 rgba(' + - hexToRgb(dangerColor[0]) + - ', 0.14), 0 3px 1px -2px rgba(' + - hexToRgb(dangerColor[0]) + - ', 0.2), 0 1px 5px 0 rgba(' + - hexToRgb(dangerColor[0]) + - ', 0.12)', - '&:hover,&:focus': { + '&.MuiButton-root': { backgroundColor: dangerColor[0], boxShadow: - '0 14px 26px -12px rgba(' + + '0 2px 2px 0 rgba(' + + hexToRgb(dangerColor[0]) + + ', 0.14), 0 3px 1px -2px rgba(' + hexToRgb(dangerColor[0]) + - ', 0.42), 0 4px 23px 0px rgba(' + - hexToRgb(blackColor) + - ', 0.12), 0 8px 10px -5px rgba(' + + ', 0.2), 0 1px 5px 0 rgba(' + hexToRgb(dangerColor[0]) + - ', 0.2)', + ', 0.12)', + '&:hover,&:focus': { + backgroundColor: dangerColor[0], + boxShadow: + '0 14px 26px -12px rgba(' + + hexToRgb(dangerColor[0]) + + ', 0.42), 0 4px 23px 0px rgba(' + + hexToRgb(blackColor) + + ', 0.12), 0 8px 10px -5px rgba(' + + hexToRgb(dangerColor[0]) + + ', 0.2)', + }, }, }, simple: { - '&,&:focus,&:hover': { - color: whiteColor, - background: 'transparent', - boxShadow: 'none', - }, - '&$rose': { - '&,&:focus,&:hover,&:visited': { - color: roseColor[0], + '&.MuiButton-root': { + '&,&:focus,&:hover': { + color: whiteColor, + background: 'transparent', + boxShadow: 'none', }, - }, - '&$primary': { - '&,&:focus,&:hover,&:visited': { - color: primaryColor[0], + '&$rose': { + '&,&:focus,&:hover,&:visited': { + color: roseColor[0], + }, }, - }, - '&$info': { - '&,&:focus,&:hover,&:visited': { - color: infoColor[0], + '&$primary': { + '&,&:focus,&:hover,&:visited': { + color: primaryColor[0], + }, }, - }, - '&$success': { - '&,&:focus,&:hover,&:visited': { - color: successColor[0], + '&$info': { + '&,&:focus,&:hover,&:visited': { + color: infoColor[0], + }, }, - }, - '&$warning': { - '&,&:focus,&:hover,&:visited': { - color: warningColor[0], + '&$success': { + '&,&:focus,&:hover,&:visited': { + color: successColor[0], + }, }, - }, - '&$danger': { - '&,&:focus,&:hover,&:visited': { - color: dangerColor[0], + '&$warning': { + '&,&:focus,&:hover,&:visited': { + color: warningColor[0], + }, + }, + '&$danger': { + '&,&:focus,&:hover,&:visited': { + color: dangerColor[0], + }, }, }, }, + transparent: { - '&,&:focus,&:hover': { - color: 'inherit', - background: 'transparent', - boxShadow: 'none', + '&.MuiButton-root': { + '&,&:focus,&:hover': { + color: 'inherit', + background: 'transparent', + boxShadow: 'none', + }, }, }, disabled: { - opacity: '0.65', - pointerEvents: 'none', + '&.MuiButton-root': { + opacity: '0.65', + pointerEvents: 'none', + }, }, lg: { - padding: '1.125rem 2.25rem', - fontSize: '0.875rem', - lineHeight: '1.333333', - borderRadius: '0.2rem', + '&.MuiButton-root': { + padding: '1.125rem 2.25rem', + fontSize: '0.875rem', + lineHeight: '1.333333', + borderRadius: '0.2rem', + }, }, sm: { - padding: '0.40625rem 1.25rem', - fontSize: '0.6875rem', - lineHeight: '1.5', - borderRadius: '0.2rem', + '&.MuiButton-root': { + padding: '0.40625rem 1.25rem', + fontSize: '0.6875rem', + lineHeight: '1.5', + borderRadius: '0.2rem', + }, }, round: { - borderRadius: '30px', + '&.MuiButton-root': { + borderRadius: '30px', + }, }, block: { - width: '100% !important', + '&.MuiButton-root': { + width: '100% !important', + }, }, link: { - '&,&:hover,&:focus': { - backgroundColor: 'transparent', - color: grayColor[0], - boxShadow: 'none', + '&.MuiButton-root': { + '&,&:hover,&:focus': { + backgroundColor: 'transparent', + color: grayColor[0], + boxShadow: 'none', + }, }, }, justIcon: { - paddingLeft: '12px', - paddingRight: '12px', - fontSize: '20px', - height: '41px', - minWidth: '41px', - width: '41px', - '& .fab,& .fas,& .far,& .fal,& svg,& .material-icons': { - marginRight: '0px', - }, - '&$lg': { - height: '57px', - minWidth: '57px', - width: '57px', - lineHeight: '56px', - '& .fab,& .fas,& .far,& .fal,& .material-icons': { - fontSize: '32px', - lineHeight: '56px', - }, - '& svg': { - width: '32px', - height: '32px', + '&.MuiButton-root': { + paddingLeft: '12px', + paddingRight: '12px', + fontSize: '20px', + height: '41px', + minWidth: '41px', + width: '41px', + '& .fab,& .fas,& .far,& .fal,& svg,& .material-icons': { + marginRight: '0px', }, - }, - '&$sm': { - height: '30px', - minWidth: '30px', - width: '30px', - '& .fab,& .fas,& .far,& .fal,& .material-icons': { - fontSize: '17px', - lineHeight: '29px', + '&$lg': { + height: '57px', + minWidth: '57px', + width: '57px', + lineHeight: '56px', + '& .fab,& .fas,& .far,& .fal,& .material-icons': { + fontSize: '32px', + lineHeight: '56px', + }, + '& svg': { + width: '32px', + height: '32px', + }, }, - '& svg': { - width: '17px', - height: '17px', + '&$sm': { + height: '30px', + minWidth: '30px', + width: '30px', + '& .fab,& .fas,& .far,& .fal,& .material-icons': { + fontSize: '17px', + lineHeight: '29px', + }, + '& svg': { + width: '17px', + height: '17px', + }, }, }, }, diff --git a/src/ui/assets/jss/material-dashboard-react/components/headerLinksStyle.js b/src/ui/assets/jss/material-dashboard-react/components/headerLinksStyle.js index 7507fd0db..29b816e43 100644 --- a/src/ui/assets/jss/material-dashboard-react/components/headerLinksStyle.js +++ b/src/ui/assets/jss/material-dashboard-react/components/headerLinksStyle.js @@ -29,27 +29,29 @@ const headerLinksStyle = (theme) => ({ margin: '0px', }, buttonLink: { - [theme.breakpoints.down('md')]: { - display: 'flex', - margin: '10px 15px 0', - width: '-webkit-fill-available', - '& svg': { - width: '24px', - height: '30px', - marginRight: '15px', - marginLeft: '-15px', - }, - '& .fab,& .fas,& .far,& .fal,& .material-icons': { - fontSize: '24px', - lineHeight: '30px', - width: '24px', - height: '30px', - marginRight: '15px', - marginLeft: '-15px', - }, - '& > span': { - justifyContent: 'flex-start', - width: '100%', + '&.MuiButton-root': { + [theme.breakpoints.down('md')]: { + display: 'flex', + margin: '10px 15px 0', + width: '-webkit-fill-available', + '& svg': { + width: '24px', + height: '30px', + marginRight: '15px', + marginLeft: '-15px', + }, + '& .fab,& .fas,& .far,& .fal,& .material-icons': { + fontSize: '24px', + lineHeight: '30px', + width: '24px', + height: '30px', + marginRight: '15px', + marginLeft: '-15px', + }, + '& > span': { + justifyContent: 'flex-start', + width: '100%', + }, }, }, }, diff --git a/src/ui/assets/jss/material-dashboard-react/components/headerStyle.js b/src/ui/assets/jss/material-dashboard-react/components/headerStyle.js index 48439db2c..7428c313d 100644 --- a/src/ui/assets/jss/material-dashboard-react/components/headerStyle.js +++ b/src/ui/assets/jss/material-dashboard-react/components/headerStyle.js @@ -12,21 +12,23 @@ import { const headerStyle = () => ({ appBar: { - backgroundColor: 'transparent', - boxShadow: 'none', - borderBottom: '0', - marginBottom: '0', - position: 'absolute', - width: '100%', - paddingTop: '27px', - zIndex: '1029', - color: 'black', - border: '0', - borderRadius: '3px', - padding: '10px 0', - transition: 'all 150ms ease 0s', - minHeight: '50px', - display: 'block', + '&.MuiAppBar-root': { + backgroundColor: 'transparent', + boxShadow: 'none', + borderBottom: '0', + marginBottom: '0', + position: 'absolute', + width: '100%', + paddingTop: '27px', + zIndex: '1029', + color: 'black', + border: '0', + borderRadius: '3px', + padding: '10px 0', + transition: 'all 150ms ease 0s', + minHeight: '50px', + display: 'block', + }, }, container: { ...container, diff --git a/src/ui/components/Navbars/AdminNavbarLinks.jsx b/src/ui/components/Navbars/AdminNavbarLinks.jsx index a18a4d223..d35d9b1da 100644 --- a/src/ui/components/Navbars/AdminNavbarLinks.jsx +++ b/src/ui/components/Navbars/AdminNavbarLinks.jsx @@ -1,5 +1,7 @@ import React, { useEffect } from 'react'; import classNames from 'classnames'; +import { useNavigate } from 'react-router-dom'; +import { AccountCircle } from '@mui/icons-material'; import makeStyles from '@mui/styles/makeStyles'; import MenuItem from '@mui/material/MenuItem'; import MenuList from '@mui/material/MenuList'; @@ -8,14 +10,12 @@ import Paper from '@mui/material/Paper'; import ClickAwayListener from '@mui/material/ClickAwayListener'; import Poppers from '@mui/material/Popper'; import Divider from '@mui/material/Divider'; +import { Box } from '@mui/material'; import Button from '../CustomButtons/Button'; import styles from '../../assets/jss/material-dashboard-react/components/headerLinksStyle'; -import { useNavigate } from 'react-router-dom'; -import { AccountCircle } from '@mui/icons-material'; import { getUser } from '../../services/user'; import axios from 'axios'; import { getCookie } from '../../utils'; -import { Box } from '@mui/material'; const useStyles = makeStyles(styles); diff --git a/src/ui/components/Navbars/Navbar.jsx b/src/ui/components/Navbars/Navbar.jsx index 824098a40..8e9e86eb6 100644 --- a/src/ui/components/Navbars/Navbar.jsx +++ b/src/ui/components/Navbars/Navbar.jsx @@ -25,11 +25,15 @@ export default function Header(props) { return name; } const { color } = props; - const appBarClasses = classNames({ - [' ' + classes[color]]: color, - }); + const appBarClasses = classNames( + { + [classes[color]]: color, + }, + classes.appBar, + ); + return ( - +
{/* Here we create navbar brand, based on route name */}