diff --git a/public/index.html b/public/index.html index 81b231e..e1fd498 100644 --- a/public/index.html +++ b/public/index.html @@ -22,7 +22,7 @@ Software. - Material Dashboard 2 PRO React + WMS - Plaidware ( + + + + + + +); + +export default Search; diff --git a/src/assets/theme/base/colors.js b/src/assets/theme/base/colors.js index c657ae1..a5034e6 100644 --- a/src/assets/theme/base/colors.js +++ b/src/assets/theme/base/colors.js @@ -21,7 +21,7 @@ Coded by www.creative-tim.com export default { background: { - default: '#f0f2f5' + default: '#f9f9f9' }, text: { @@ -38,6 +38,10 @@ export default { focus: '#ffffff' }, + sidenavcolor:{ + main:'#2d373c' + }, + black: { light: '#000000', main: '#000000', @@ -45,8 +49,8 @@ export default { }, primary: { - main: '#e91e63', - focus: '#e91e63' + main: '#007aff', + focus: '#007aff' }, secondary: { @@ -60,8 +64,8 @@ export default { }, success: { - main: '#4CAF50', - focus: '#67bb6a' + main: '#34C759', + focus: '#34C759' }, warning: { @@ -70,8 +74,8 @@ export default { }, error: { - main: '#F44335', - focus: '#f65f53' + main: '#FF3B30', + focus: '#FF3B30' }, light: { @@ -251,6 +255,7 @@ export default { error: '#f44336', light: '#adb5bd', dark: '#404040' + }, inputBorderColor: '#d2d6da', diff --git a/src/assets/theme/base/typography.js b/src/assets/theme/base/typography.js index ba5460d..30fa1de 100644 --- a/src/assets/theme/base/typography.js +++ b/src/assets/theme/base/typography.js @@ -28,7 +28,7 @@ import pxToRem from 'assets/theme/functions/pxToRem'; const { dark } = colors; const baseProperties = { - fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + fontFamily: '"Averta", "Roboto", "Helvetica", "Arial", sans-serif', fontWeightLighter: 100, fontWeightLight: 300, fontWeightRegular: 400, diff --git a/src/assets/theme/components/button/contained.js b/src/assets/theme/components/button/contained.js index 18f9c79..79736f5 100644 --- a/src/assets/theme/components/button/contained.js +++ b/src/assets/theme/components/button/contained.js @@ -54,9 +54,10 @@ export default { }, large: { - minHeight: pxToRem(44), - padding: `${pxToRem(12)} ${pxToRem(64)}`, + minHeight: pxToRem(43), + padding: `${pxToRem(12)} ${pxToRem(70)}`, fontSize: size.sm, + minWidth:pxToRem(240), '& .material-icon, .material-icons-round, svg': { fontSize: `${pxToRem(22)} !important` diff --git a/src/assets/theme/components/button/outlined.js b/src/assets/theme/components/button/outlined.js index c54996a..2848d40 100644 --- a/src/assets/theme/components/button/outlined.js +++ b/src/assets/theme/components/button/outlined.js @@ -51,9 +51,10 @@ export default { }, large: { - minHeight: pxToRem(46), - padding: `${pxToRem(12)} ${pxToRem(64)}`, + minHeight: pxToRem(43), + padding: `${pxToRem(10)} ${pxToRem(70)}`, fontSize: size.sm, + minWidth:pxToRem(240), '& .material-icon, .material-icons-round, svg': { fontSize: `${pxToRem(22)} !important` diff --git a/src/assets/theme/components/button/root.js b/src/assets/theme/components/button/root.js index faa7e81..1617bff 100644 --- a/src/assets/theme/components/button/root.js +++ b/src/assets/theme/components/button/root.js @@ -15,29 +15,32 @@ Coded by www.creative-tim.com // Material Dashboard 2 PRO React Base Styles import typography from 'assets/theme/base/typography'; -import borders from 'assets/theme/base/borders'; +// import borders from 'assets/theme/base/borders'; // Material Dashboard 2 PRO React Helper Functions import pxToRem from 'assets/theme/functions/pxToRem'; -const { fontWeightBold, size } = typography; -const { borderRadius } = borders; +const { fontWeightRegular, size } = typography; +// const { borderRadius } = borders; export default { display: 'inline-flex', justifyContent: 'center', alignItems: 'center', - fontSize: size.xs, - fontWeight: fontWeightBold, - borderRadius: borderRadius.lg, + fontSize: size.sm, + fontWeight: fontWeightRegular, + borderRadius: '4px', padding: `${pxToRem(6.302)} ${pxToRem(16.604)}`, - lineHeight: 1.4, + lineHeight: 1.2, textAlign: 'center', textTransform: 'uppercase', userSelect: 'none', backgroundSize: '150% !important', backgroundPositionX: '25% !important', transition: 'all 150ms ease-in', + letterSpacing: '0.01em', + minWidth:`${pxToRem(105)}`, + // boxShadow:'none !important', '&:disabled': { pointerEvent: 'none', diff --git a/src/assets/theme/components/form/select.js b/src/assets/theme/components/form/select.js index 2b58a96..1892a1f 100644 --- a/src/assets/theme/components/form/select.js +++ b/src/assets/theme/components/form/select.js @@ -17,7 +17,7 @@ Coded by www.creative-tim.com import colors from 'assets/theme/base/colors'; // Material Dashboard 2 PRO React helper functions -import pxToRem from 'assets/theme/functions/pxToRem'; +// import pxToRem from 'assets/theme/functions/pxToRem'; const { transparent } = colors; @@ -26,7 +26,7 @@ export default { select: { display: 'grid', alignItems: 'center', - padding: `0 ${pxToRem(12)} !important`, + // padding: `0 ${pxToRem(12)} !important`, '& .Mui-selected': { backgroundColor: transparent.main @@ -41,7 +41,11 @@ export default { }, icon: { - display: 'none' + // display: 'none' + width: '2em', + height: '2em', + top: 'calc(50% - 0.9em)', + color: '#000' } } }; diff --git a/src/assets/theme/components/sidenav.js b/src/assets/theme/components/sidenav.js index 6fe633e..bc96348 100644 --- a/src/assets/theme/components/sidenav.js +++ b/src/assets/theme/components/sidenav.js @@ -15,13 +15,15 @@ Coded by www.creative-tim.com // Material Dashboard 2 PRO React base styles import colors from 'assets/theme/base/colors'; -import borders from 'assets/theme/base/borders'; +// import borders from 'assets/theme/base/borders'; // Material Dashboard 2 PRO React helper functions import pxToRem from 'assets/theme/functions/pxToRem'; const { white } = colors; -const { borderRadius } = borders; +// const { borderRadius } = borders; + + export default { styleOverrides: { @@ -32,11 +34,11 @@ export default { }, paper: { - width: pxToRem(250), + width: pxToRem(300), backgroundColor: white.main, - height: `calc(100vh - ${pxToRem(32)})`, - margin: pxToRem(16), - borderRadius: borderRadius.xl, + height: `calc(100vh - ${pxToRem(0)})`, + margin: pxToRem(0), + borderRadius: 'none', border: 'none' }, diff --git a/src/components/Breadcrumbs/index.js b/src/components/Breadcrumbs/index.js index 59e50a4..d4879c8 100644 --- a/src/components/Breadcrumbs/index.js +++ b/src/components/Breadcrumbs/index.js @@ -75,15 +75,7 @@ function Breadcrumbs({ icon, title, route, light }) { {title.replace('-', ' ')} - - {title.replace('-', ' ')} - + ); } diff --git a/src/components/Button/MDButtonRoot.js b/src/components/Button/MDButtonRoot.js new file mode 100644 index 0000000..48e113c --- /dev/null +++ b/src/components/Button/MDButtonRoot.js @@ -0,0 +1,276 @@ +/* eslint-disable prefer-destructuring */ +/** +========================================================= +* Material Dashboard 2 PRO React - v2.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-pro-react +* Copyright 2021 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Button from '@mui/material/Button'; +import { styled } from '@mui/material/styles'; + +export default styled(Button)(({ theme, ownerState }) => { + const { palette, functions, borders, boxShadows } = theme; + const { color, variant, size, circular, iconOnly, darkMode } = ownerState; + + const { white, text, transparent, gradients, grey } = palette; + const { boxShadow, linearGradient, pxToRem, rgba } = functions; + const { borderRadius } = borders; + const { colored } = boxShadows; + + // styles for the button with variant="contained" + const containedStyles = () => { + // background color value + const backgroundValue = palette[color] ? palette[color].main : white.main; + + // backgroundColor value when button is focused + const focusedBackgroundValue = palette[color] ? palette[color].focus : white.focus; + + // boxShadow value + const boxShadowValue = colored[color] + ? `${boxShadow([0, 3], [3, 0], palette[color].main, 0.15)}, ${boxShadow( + [0, 3], + [1, -2], + palette[color].main, + 0.2 + )}, ${boxShadow([0, 1], [5, 0], palette[color].main, 0.15)}` + : 'none'; + + // boxShadow value when button is hovered + const hoveredBoxShadowValue = colored[color] + ? `${boxShadow([0, 14], [26, -12], palette[color].main, 0.4)}, ${boxShadow( + [0, 4], + [23, 0], + palette[color].main, + 0.15 + )}, ${boxShadow([0, 8], [10, -5], palette[color].main, 0.2)}` + : 'none'; + + // color value + let colorValue = white.main; + + if (!darkMode && (color === 'white' || color === 'light' || !palette[color])) { + colorValue = text.main; + } else if (darkMode && (color === 'white' || color === 'light' || !palette[color])) { + colorValue = grey[600]; + } + + // color value when button is focused + let focusedColorValue = white.main; + + if (color === 'white') { + focusedColorValue = text.main; + } else if (color === 'primary' || color === 'error' || color === 'dark') { + focusedColorValue = white.main; + } + + return { + background: backgroundValue, + color: colorValue, + boxShadow: boxShadowValue, + + '&:hover': { + backgroundColor: backgroundValue, + boxShadow: hoveredBoxShadowValue + }, + + '&:focus:not(:hover)': { + backgroundColor: focusedBackgroundValue, + boxShadow: palette[color] + ? boxShadow([0, 0], [0, 3.2], palette[color].main, 0.5) + : boxShadow([0, 0], [0, 3.2], white.main, 0.5) + }, + + '&:disabled': { + backgroundColor: backgroundValue, + color: focusedColorValue + } + }; + }; + + // styles for the button with variant="outlined" + const outliedStyles = () => { + // background color value + const backgroundValue = color === 'white' ? rgba(white.main, 0.1) : transparent.main; + + // color value + const colorValue = palette[color] ? palette[color].main : white.main; + + // boxShadow value + const boxShadowValue = palette[color] + ? boxShadow([0, 0], [0, 3.2], palette[color].main, 0.5) + : boxShadow([0, 0], [0, 3.2], white.main, 0.5); + + // border color value + let borderColorValue = palette[color] ? palette[color].main : rgba(white.main, 0.75); + + if (color === 'white') { + borderColorValue = rgba(white.main, 0.75); + } + + return { + background: backgroundValue, + color: colorValue, + borderColor: borderColorValue, + + '&:hover': { + background: transparent.main, + borderColor: colorValue + }, + + '&:focus:not(:hover)': { + background: transparent.main, + boxShadow: boxShadowValue + }, + + '&:active:not(:hover)': { + backgroundColor: colorValue, + color: white.main, + opacity: 0.85 + }, + + '&:disabled': { + color: colorValue, + borderColor: colorValue + } + }; + }; + + // styles for the button with variant="gradient" + const gradientStyles = () => { + // background value + const backgroundValue = + color === 'white' || !gradients[color] + ? white.main + : linearGradient(gradients[color].main, gradients[color].state); + + // boxShadow value + const boxShadowValue = colored[color] + ? `${boxShadow([0, 3], [3, 0], palette[color].main, 0.15)}, ${boxShadow( + [0, 3], + [1, -2], + palette[color].main, + 0.2 + )}, ${boxShadow([0, 1], [5, 0], palette[color].main, 0.15)}` + : 'none'; + + // boxShadow value when button is hovered + const hoveredBoxShadowValue = colored[color] + ? `${boxShadow([0, 14], [26, -12], palette[color].main, 0.4)}, ${boxShadow( + [0, 4], + [23, 0], + palette[color].main, + 0.15 + )}, ${boxShadow([0, 8], [10, -5], palette[color].main, 0.2)}` + : 'none'; + + // color value + let colorValue = white.main; + + if (color === 'white') { + colorValue = text.main; + } else if (color === 'light') { + colorValue = gradients.dark.state; + } + + return { + background: backgroundValue, + color: colorValue, + boxShadow: boxShadowValue, + + '&:hover': { + boxShadow: hoveredBoxShadowValue + }, + + '&:focus:not(:hover)': { + boxShadow: boxShadowValue + }, + + '&:disabled': { + background: backgroundValue, + color: colorValue + } + }; + }; + + // styles for the button with variant="text" + const textStyles = () => { + // color value + const colorValue = palette[color] ? palette[color].main : white.main; + + // color value when button is focused + const focusedColorValue = palette[color] ? palette[color].focus : white.focus; + + return { + color: colorValue, + + '&:hover': { + color: 'focusedColorValue' + }, + + '&:focus:not(:hover)': { + color: focusedColorValue + } + }; + }; + + // styles for the button with circular={true} + const circularStyles = () => ({ + borderRadius: borderRadius.section + }); + + // styles for the button with iconOnly={true} + const iconOnlyStyles = () => { + // width, height, minWidth and minHeight values + let sizeValue = pxToRem(38); + + if (size === 'small') { + sizeValue = pxToRem(25.4); + } else if (size === 'large') { + sizeValue = pxToRem(52); + } + + // padding value + let paddingValue = `${pxToRem(11)} ${pxToRem(11)} ${pxToRem(10)}`; + + if (size === 'small') { + paddingValue = pxToRem(4.5); + } else if (size === 'large') { + paddingValue = pxToRem(16); + } + + return { + width: sizeValue, + minWidth: sizeValue, + height: sizeValue, + minHeight: sizeValue, + padding: paddingValue, + + '& .material-icons': { + marginTop: 0 + }, + + '&:hover, &:focus, &:active': { + transform: 'none' + } + }; + }; + + return { + ...(variant === 'contained' && containedStyles()), + ...(variant === 'outlined' && outliedStyles()), + ...(variant === 'gradient' && gradientStyles()), + ...(variant === 'text' && textStyles()), + ...(circular && circularStyles()), + ...(iconOnly && iconOnlyStyles()) + }; +}); diff --git a/src/components/Button/index.js b/src/components/Button/index.js new file mode 100644 index 0000000..e29f3c7 --- /dev/null +++ b/src/components/Button/index.js @@ -0,0 +1,61 @@ +import { forwardRef } from 'react'; + +// prop-types is a library for typechecking of props +import PropTypes from 'prop-types'; + +// Custom styles for MDButton +import MDButtonRoot from 'components/MDButton/MDButtonRoot'; + +// Material Dashboard 2 PRO React contexts +import { useMaterialUIController } from 'context'; + +const MDButton = forwardRef( + ({ color, variant, size, circular, iconOnly, children, ...rest }, ref) => { + const [controller] = useMaterialUIController(); + const { darkMode } = controller; + + return ( + + {children} + + ); + } +); + +// Setting default values for the props of MDButton +MDButton.defaultProps = { + size: 'medium', + variant: 'contained', + color: 'white', + circular: false, + iconOnly: false +}; + +// Typechecking props for the MDButton +MDButton.propTypes = { + size: PropTypes.oneOf(['small', 'medium', 'large']), + variant: PropTypes.oneOf(['text', 'contained', 'outlined', 'gradient']), + color: PropTypes.oneOf([ + 'white', + 'primary', + 'secondary', + 'info', + 'success', + 'warning', + 'error', + 'light', + 'dark' + ]), + circular: PropTypes.bool, + iconOnly: PropTypes.bool, + children: PropTypes.node.isRequired +}; + +export default MDButton; diff --git a/src/components/DashboardNavbar/index.js b/src/components/DashboardNavbar/index.js index 739c1cc..1b18adf 100644 --- a/src/components/DashboardNavbar/index.js +++ b/src/components/DashboardNavbar/index.js @@ -14,9 +14,11 @@ Coded by www.creative-tim.com */ import { useState, useEffect } from 'react'; +// import Grid from '@mui/material/Grid'; + // react-router components -import { useLocation, Link } from 'react-router-dom'; +import { useLocation } from 'react-router-dom'; // prop-types is a library for typechecking of props. import PropTypes from 'prop-types'; @@ -30,20 +32,23 @@ import Icon from '@mui/material/Icon'; // Material Dashboard 2 PRO React components import MDBox from 'components/MDBox'; -import MDInput from 'components/MDInput'; +// import MDInput from 'components/MDInput'; import MDBadge from 'components/MDBadge'; // Material Dashboard 2 PRO React example components import Breadcrumbs from 'components/Breadcrumbs'; import NotificationItem from 'components/NotificationItem'; +// import InputAdornment from '@mui/material/InputAdornment'; + + // Custom styles for DashboardNavbar import { - navbar, - navbarContainer, + // navbar, + // navbarContainer, navbarRow, navbarIconButton, - navbarDesktopMenu, + // navbarDesktopMenu, navbarMobileMenu } from 'components/Navbars/DashboardNavbar/styles'; @@ -54,6 +59,11 @@ import { setMiniSidenav, setOpenConfigurator } from 'context'; +import SearchBar from 'components/SearchBar'; +import { Box } from '@mui/material'; + + + function DashboardNavbar({ absolute, light, isMini }) { const [navbarType, setNavbarType] = useState(); @@ -61,6 +71,7 @@ function DashboardNavbar({ absolute, light, isMini }) { const { miniSidenav, transparentNavbar, fixedNavbar, openConfigurator, darkMode } = controller; const [openMenu, setOpenMenu] = useState(false); const route = useLocation().pathname.split('/').slice(1); + useEffect(() => { // Setting the navbar type @@ -72,7 +83,7 @@ function DashboardNavbar({ absolute, light, isMini }) { // A function that sets the transparent state of the navbar. function handleTransparentNavbar() { - setTransparentNavbar(dispatch, (fixedNavbar && window.scrollY === 0) || !fixedNavbar); + setTransparentNavbar(dispatch, (fixedNavbar && window.scrollY === 0) && !fixedNavbar); } /** @@ -124,71 +135,75 @@ function DashboardNavbar({ absolute, light, isMini }) { return colorValue; } }); - + return ( navbar(theme, { transparentNavbar, absolute, light, darkMode })} + className="header" + // sx={(theme) => navbar(theme, { transparentNavbar, absolute, light, darkMode })} > - navbarContainer(theme)}> - navbarRow(theme, { isMini })}> - - - - {miniSidenav ? 'menu_open' : 'menu'} - - - - {isMini ? null : ( - navbarRow(theme, { isMini })}> - - - - - - - account_circle + + + {isMini ? null : ( + + + + + + + + + {miniSidenav ? 'menu_open' : 'menu'} + - - - - {miniSidenav ? 'menu_open' : 'menu'} - - - - settings - - - - notifications - - - {renderMenu()} + + settings + + + + notifications + + + {renderMenu()} + - - )} + )} + + + + navbarRow(theme, { isMini })}> + + ); @@ -206,6 +221,7 @@ DashboardNavbar.propTypes = { absolute: PropTypes.bool, light: PropTypes.bool, isMini: PropTypes.bool + }; export default DashboardNavbar; diff --git a/src/components/Dropdown/index.js b/src/components/Dropdown/index.js new file mode 100644 index 0000000..6afe5db --- /dev/null +++ b/src/components/Dropdown/index.js @@ -0,0 +1,51 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +// import InputLabel from '@mui/material/InputLabel' +import OutlinedInput from '@mui/material/OutlinedInput'; +import MenuItem from '@mui/material/MenuItem'; +import FormControl from '@mui/material/FormControl'; +import Select from '@mui/material/Select'; + +export default function Dropdown() { + const [age, setAge] = React.useState(''); + + const handleChange = (event) => { + const { + target: { value } + } = event; + setAge( + // On autofill we get a stringified value. + typeof value === 'string' ? value.split(',') : value + ); + }; + + return ( + + + {/* Equipment */} + + + + ); +} diff --git a/src/components/SearchBar/index.js b/src/components/SearchBar/index.js new file mode 100644 index 0000000..0a2e679 --- /dev/null +++ b/src/components/SearchBar/index.js @@ -0,0 +1,24 @@ +import { TextField, InputAdornment, SvgIcon } from '@mui/material'; +import Search from 'assets/images/SearchIcon'; + +function SearchBar() { + return ( + <> + + + + + + ) + }} + placeholder="Search" + variant="outlined" + /> + + ); +} +export default SearchBar; diff --git a/src/components/Sidenav/SidenavItem.js b/src/components/Sidenav/SidenavItem.js index 356bf66..746595d 100644 --- a/src/components/Sidenav/SidenavItem.js +++ b/src/components/Sidenav/SidenavItem.js @@ -56,7 +56,7 @@ function SidenavItem({ color, name, active, nested, children, open, ...rest }) { }) } > - + {children && ( {children} diff --git a/src/components/Sidenav/SidenavRoot.js b/src/components/Sidenav/SidenavRoot.js index 2a01008..070a8ab 100644 --- a/src/components/Sidenav/SidenavRoot.js +++ b/src/components/Sidenav/SidenavRoot.js @@ -21,20 +21,21 @@ export default styled(Drawer)(({ theme, ownerState }) => { const { palette, boxShadows, transitions, breakpoints, functions } = theme; const { transparentSidenav, whiteSidenav, miniSidenav, darkMode } = ownerState; - const sidebarWidth = 250; - const { transparent, gradients, white, background } = palette; + const sidebarWidth = 280; + const { transparent, sidenavcolor, white, background } = palette; const { xxl } = boxShadows; - const { pxToRem, linearGradient } = functions; + const { pxToRem } = functions; let backgroundValue = darkMode ? background.sidenav - : linearGradient(gradients.dark.main, gradients.dark.state); + : sidenavcolor.main; if (transparentSidenav) { backgroundValue = transparent.main; } else if (whiteSidenav) { backgroundValue = white.main; } + // styles for the sidenav when miniSidenav={false} const drawerOpenStyles = () => ({ @@ -71,7 +72,7 @@ export default styled(Drawer)(({ theme, ownerState }) => { boxShadow: transparentSidenav ? 'none' : xxl, marginBottom: transparentSidenav ? 0 : 'inherit', left: '0', - width: pxToRem(96), + width: pxToRem(65), overflowX: 'hidden', transform: 'translateX(0)', transition: transitions.create(['width', 'background-color'], { diff --git a/src/components/Sidenav/index.js b/src/components/Sidenav/index.js index 3a7dfda..38573fd 100644 --- a/src/components/Sidenav/index.js +++ b/src/components/Sidenav/index.js @@ -48,7 +48,7 @@ import { setWhiteSidenav } from 'context'; -function Sidenav({ color, brand, brandName, routes, ...rest }) { +function Sidenav({ color, brandName, routes, ...rest }) { const [openCollapse, setOpenCollapse] = useState(false); const [openNestedCollapse, setOpenNestedCollapse] = useState(false); const [controller, dispatch] = useMaterialUIController(); @@ -59,6 +59,7 @@ function Sidenav({ color, brand, brandName, routes, ...rest }) { const items = pathname.split('/').slice(1); const itemParentName = items[1]; const itemName = items[items.length - 1]; + let textColor = 'white'; @@ -231,7 +232,7 @@ function Sidenav({ color, brand, brandName, routes, ...rest }) { variant="permanent" ownerState={{ transparentSidenav, whiteSidenav, miniSidenav, darkMode }} > - + - {brand && } sidenavLogoLabel(theme, { miniSidenav })} > - + {brandName} - + /> */} {renderRoutes} ); diff --git a/src/components/Sidenav/styles/sidenavCollapse.js b/src/components/Sidenav/styles/sidenavCollapse.js index e1ac126..c0b9024 100644 --- a/src/components/Sidenav/styles/sidenavCollapse.js +++ b/src/components/Sidenav/styles/sidenavCollapse.js @@ -13,12 +13,12 @@ Coded by www.creative-tim.com * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. */ function collapseItem(theme, ownerState) { - const { palette, transitions, breakpoints, boxShadows, borders, functions } = theme; + const { palette, transitions, breakpoints, boxShadows, functions } = theme; const { active, transparentSidenav, whiteSidenav, darkMode } = ownerState; const { white, transparent, dark, grey } = palette; const { md } = boxShadows; - const { borderRadius } = borders; + // const { borderRadius } = borders; const { pxToRem, rgba } = functions; return { @@ -41,9 +41,9 @@ function collapseItem(theme, ownerState) { display: 'flex', alignItems: 'center', width: '100%', - padding: `${pxToRem(8)} ${pxToRem(16)}`, - margin: `${pxToRem(1.5)} ${pxToRem(16)}`, - borderRadius: borderRadius.md, + padding: `${pxToRem(1.6)} ${pxToRem(14)}`, + margin: `${pxToRem(1.5)} ${pxToRem(0)}`, + borderRadius:'none', cursor: 'pointer', userSelect: 'none', whiteSpace: 'nowrap', @@ -96,9 +96,9 @@ const collapseIcon = ({ palette: { white, gradients } }, { active }) => ({ function collapseText(theme, ownerState) { const { typography, transitions, breakpoints, functions } = theme; - const { miniSidenav, transparentSidenav, active } = ownerState; + const { miniSidenav, transparentSidenav } = ownerState; - const { size, fontWeightRegular, fontWeightLight } = typography; + const { size, fontWeightRegular } = typography; const { pxToRem } = functions; return { @@ -115,7 +115,7 @@ function collapseText(theme, ownerState) { }, '& span': { - fontWeight: active ? fontWeightRegular : fontWeightLight, + fontWeight: fontWeightRegular, fontSize: size.sm, lineHeight: 0 } diff --git a/src/components/Sidenav/styles/sidenavItem.js b/src/components/Sidenav/styles/sidenavItem.js index 3b52724..a46be91 100644 --- a/src/components/Sidenav/styles/sidenavItem.js +++ b/src/components/Sidenav/styles/sidenavItem.js @@ -15,19 +15,19 @@ Coded by www.creative-tim.com * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. */ function item(theme, ownerState) { - const { palette, borders, functions, transitions } = theme; + const { palette, functions, transitions } = theme; const { active, color, transparentSidenav, whiteSidenav, darkMode } = ownerState; const { transparent, white, grey } = palette; - const { borderRadius } = borders; + // const { borderRadius } = borders; const { rgba } = functions; return { - pl: 3, + pl: 4.5, mt: 0.375, mb: 0.3, width: '100%', - borderRadius: borderRadius.md, + borderRadius: 'none', cursor: 'pointer', backgroundColor: () => { let backgroundValue = transparent.main; @@ -73,8 +73,8 @@ function itemContent(theme, ownerState) { alignItems: 'center', justifyContent: 'space-between', width: '100%', - padding: `${pxToRem(12)} ${pxToRem(16)}`, - marginLeft: pxToRem(18), + padding: `${pxToRem(7)} ${pxToRem(0)}`, + marginLeft: pxToRem(20), userSelect: 'none', position: 'relative', @@ -104,9 +104,9 @@ function itemContent(theme, ownerState) { position: 'absolute', top: '50%', transform: 'translateY(-50%)', - left: pxToRem(-15), + left: pxToRem(-25), opacity: 1, - borderRadius: '50%', + borderRadius: 'none', fontSize: size.sm } }; diff --git a/src/layouts/DashboardLayout/index.js b/src/layouts/DashboardLayout/index.js index 29398f8..5da4868 100644 --- a/src/layouts/DashboardLayout/index.js +++ b/src/layouts/DashboardLayout/index.js @@ -39,11 +39,11 @@ function DashboardLayout({ children }) { return ( ({ - p: 3, + p: 0, position: 'relative', [breakpoints.up('xl')]: { - marginLeft: miniSidenav ? pxToRem(120) : pxToRem(274), + marginLeft: miniSidenav ? pxToRem(65) : pxToRem(280), transition: transitions.create(['margin-left', 'margin-right'], { easing: transitions.easing.easeInOut, duration: transitions.duration.standard diff --git a/src/pages/dashboard/index.js b/src/pages/dashboard/index.js index 4c0ddbd..fbf2943 100644 --- a/src/pages/dashboard/index.js +++ b/src/pages/dashboard/index.js @@ -12,7 +12,7 @@ function DashboardScreen() { return ( - +

Hello Dashboard

 @@ -20,5 +20,4 @@ function DashboardScreen() { ); } - export default DashboardScreen; diff --git a/src/routes/index.js b/src/routes/index.js index aaece2c..8254b43 100644 --- a/src/routes/index.js +++ b/src/routes/index.js @@ -40,13 +40,13 @@ import DashboardScreen from 'pages/dashboard'; import LoginScreen from 'pages/authentication'; // Material Dashboard 2 PRO React components -import MDAvatar from 'components/MDAvatar'; +// import MDAvatar from 'components/MDAvatar'; // @mui icons import Icon from '@mui/material/Icon'; // Images -import profilePicture from 'assets/images/team-3.jpg'; +// import profilePicture from 'assets/images/team-3.jpg'; const routes = [ { @@ -58,25 +58,25 @@ const routes = [ ]; const protectedRoutes = [ + // { + // type: 'collapse', + // name: 'Brooklyn Alice', + // key: 'brooklyn-alice', + // icon: , + // collapse: [ + // { + // name: 'Logout', + // key: 'logout', + // route: '/authentication/sign-in/basic', + // component: + // } + // ] + // }, + // { type: 'divider', key: 'divider-0' }, { type: 'collapse', - name: 'Brooklyn Alice', - key: 'brooklyn-alice', - icon: , - collapse: [ - { - name: 'Logout', - key: 'logout', - route: '/authentication/sign-in/basic', - component: - } - ] - }, - { type: 'divider', key: 'divider-0' }, - { - type: 'collapse', - name: 'Dashboards', - key: 'dashboards', + name: 'Home', + key: 'Home', icon: dashboard, collapse: [ { @@ -86,17 +86,17 @@ const protectedRoutes = [ component: } ] - }, - { type: 'title', title: 'Pages', key: 'title-pages' }, - { - type: 'collapse', - name: 'Change Log', - key: 'changelog', - href: 'https://github.com/creativetimofficial/ct-material-dashboard/-pro-material-ui/blob/main/CHANGELOG.md', - icon: receipt_long, - noCollapse: true, - layout: '/app' } + // { type: 'title', title: 'Pages', key: 'title-pages' }, + // { + // type: 'collapse', + // name: 'Change Log', + // key: 'changelog', + // href: 'https://github.com/creativetimofficial/ct-material-dashboard/-pro-material-ui/blob/main/CHANGELOG.md', + // icon: receipt_long, + // noCollapse: true, + // layout: '/app' + // } ]; export { routes, protectedRoutes };