diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 000000000..9013602e1 --- /dev/null +++ b/.eslintrc @@ -0,0 +1,54 @@ +{ + "root": true, + "env": { + "browser": true, + "es2021": true + }, + "extends": ["airbnb", "prettier", "plugin:jsx-a11y/recommended", "plugin:react-hooks/recommended"], + "settings": { + "import/resolver": { + "node": { + "moduleDirectory": ["node_modules", "src/"] + } + } + }, + "parser": "@babel/eslint-parser", + "parserOptions": { + "ecmaFeatures": { + "experimentalObjectRestSpread": true, + "impliedStrict": true + }, + "ecmaVersion": 12 + }, + "plugins": ["prettier", "react", "react-hooks"], + "rules": { + "react/jsx-filename-extension": 0, + "no-param-reassign": 0, + "react/prop-types": 1, + "react/require-default-props": 0, + "react/no-array-index-key": 0, + "react/jsx-props-no-spreading": 0, + "react/forbid-prop-types": 0, + "import/order": 0, + "no-console": 0, + "jsx-a11y/anchor-is-valid": 0, + "no-shadow": 0, + "no-unused-vars": [ + 1, + { + "ignoreRestSiblings": false + } + ], + "prettier/prettier": [ + 2, + { + "bracketSpacing": true, + "printWidth": 140, + "singleQuote": true, + "trailingComma": "none", + "tabWidth": 4, + "useTabs": false + } + ] + } +} diff --git a/README.md b/README.md index b9073115e..e24d9a7c9 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,8 @@ Berry is a creative free react admin template build using the Material-UI. It is meant to be the best User Experience with highly customizable feature-riched pages. It is a complete game-changer React Dashboard Template with easy and intuitive responsive design as on retina screens or laptops. +![IMG_8566.jpg](https://berrydashboard.io/imp-images/berry-github-free-repo.jpg) + Berry - Free React Admin Template - Help you to create React web applications faster & beautiful | Product Hunt [Pro version](https://berrydashboard.io) of Berry react template contains features like TypeScript, Apps, Authentication Methods (i.e. JWT, Auth0, Firebase), Advance Components, Form Plugins, Layouts, Widgets, and many more. diff --git a/jsconfig.json b/jsconfig.json new file mode 100644 index 000000000..d2071c6a9 --- /dev/null +++ b/jsconfig.json @@ -0,0 +1,9 @@ +{ + "compilerOptions": { + "target": "esnext", + "module": "commonjs", + "baseUrl": "src" + }, + "include": ["src/**/*"], + "exclude": ["node_modules"] +} diff --git a/package.json b/package.json index 767f22de8..16abad45b 100644 --- a/package.json +++ b/package.json @@ -1,9 +1,9 @@ { "name": "berry-material-react-free", - "version": "1.3.0", + "version": "2.0.0", "private": true, - "homepage": "https://berrydashboard.io/free", "dependencies": { + "@emotion/cache": "^11.4.0", "@emotion/react": "^11.4.0", "@emotion/styled": "^11.3.0", "@material-ui/core": "^5.0.0-beta.0", @@ -20,16 +20,17 @@ "clsx": "^1.1.1", "formik": "^2.2.6", "framer-motion": "^4.1.13", + "history": "^5.0.0", "material-ui-popup-state": "^1.8.0", + "prop-types": "^15.7.2", "react": "^17.0.2", "react-apexcharts": "^1.3.7", "react-device-detect": "^1.17.0", "react-dom": "^17.0.2", "react-perfect-scrollbar": "^1.5.8", - "react-redux": "^7.2.3", - "react-router": "^5.2.0", - "react-router-dom": "^5.2.0", + "react-router": "6.0.0-beta.0", + "react-router-dom": "6.0.0-beta.0", "react-scripts": "^4.0.3", "redux": "^4.0.5", "yup": "^0.32.9" @@ -41,7 +42,14 @@ "eject": "react-scripts eject" }, "eslintConfig": { - "extends": "react-app" + "extends": [ + "react-app" + ] + }, + "babel": { + "presets": [ + "@babel/preset-react" + ] }, "browserslist": { "production": [ @@ -56,7 +64,17 @@ ] }, "devDependencies": { - "@material-ui/codemod": "^5.0.0-alpha.35", + "@babel/core": "^7.14.8", + "@babel/eslint-parser": "^7.14.7", + "eslint": "^7.31.0", + "eslint-config-airbnb": "18.2.1", + "eslint-config-prettier": "^8.3.0", + "eslint-plugin-import": "2.22.1", + "eslint-plugin-jsx-a11y": "6.4.1", + "eslint-plugin-prettier": "^3.4.0", + "eslint-plugin-react": "7.21.5", + "eslint-plugin-react-hooks": "^4.2.0", + "prettier": "^2.2.1", "sass": "^1.32.11" } } diff --git a/src/App.js b/src/App.js index 903c01eef..df11e0e56 100644 --- a/src/App.js +++ b/src/App.js @@ -8,19 +8,19 @@ import { CssBaseline, StyledEngineProvider } from '@material-ui/core'; import Routes from './routes'; // defaultTheme -import theme from './themes'; +import themes from './themes'; // project imports import NavigationScroll from './layout/NavigationScroll'; -//-----------------------|| APP ||-----------------------// +// ===========================|| APP ||=========================== // const App = () => { const customization = useSelector((state) => state.customization); return ( - + diff --git a/src/assets/scss/_themes-vars.module.scss b/src/assets/scss/_themes-vars.module.scss index ccfd33d23..ff8998914 100644 --- a/src/assets/scss/_themes-vars.module.scss +++ b/src/assets/scss/_themes-vars.module.scss @@ -46,7 +46,7 @@ $grey600: #757575; $grey700: #616161; $grey900: #212121; -//-----------------------|| JAVASCRIPT ||-----------------------// +// ===========================|| JAVASCRIPT ||=========================== // :export { // paper & background diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss index fd8ed854f..028a75c2a 100644 --- a/src/assets/scss/style.scss +++ b/src/assets/scss/style.scss @@ -4,13 +4,13 @@ // third-party @import '~react-perfect-scrollbar/dist/css/styles.css'; -//-----------------------|| APEXCHART ||-----------------------// +// ===========================|| APEXCHART ||=========================== // .apexcharts-legend-series .apexcharts-legend-marker { margin-right: 8px; } -//-----------------------|| PERFECT SCROLLBAR ||-----------------------// +// ===========================|| PERFECT SCROLLBAR ||=========================== // .scrollbar-container { .ps__rail-y { @@ -48,7 +48,7 @@ } } -//-----------------------|| ANIMATION KEYFRAMES ||-----------------------// +// ===========================|| ANIMATION KEYFRAMES ||=========================== // @keyframes wings { 50% { diff --git a/src/config.js b/src/config.js index bd66b231f..789a94805 100644 --- a/src/config.js +++ b/src/config.js @@ -1,7 +1,7 @@ const config = { // basename: only at build time to set, and don't add '/' at end off BASENAME for breadcrumbs, also don't put only '/' use blank('') instead, // like '/berry-material-react/react/default' - basename: '/free', + basename: '', defaultPath: '/dashboard/default', fontFamily: `'Roboto', sans-serif`, borderRadius: 12 diff --git a/src/hooks/useScriptRef.js b/src/hooks/useScriptRef.js index 019b9f4c0..965bb8231 100644 --- a/src/hooks/useScriptRef.js +++ b/src/hooks/useScriptRef.js @@ -1,6 +1,6 @@ import { useEffect, useRef } from 'react'; -//-----------------------|| ELEMENT REFERENCE HOOKS ||-----------------------// +// ===========================|| ELEMENT REFERENCE HOOKS ||=========================== // const useScriptRef = () => { const scripted = useRef(true); diff --git a/src/index.js b/src/index.js index 2d220eabe..3397161f7 100644 --- a/src/index.js +++ b/src/index.js @@ -9,16 +9,15 @@ import { Provider } from 'react-redux'; import { store } from './store'; import * as serviceWorker from './serviceWorker'; import App from './App'; -import config from './config'; // style + assets import './assets/scss/style.scss'; -//-----------------------|| REACT DOM RENDER ||-----------------------// +// ===========================|| REACT DOM RENDER ||=========================== // ReactDOM.render( - + , diff --git a/src/layout/Customization/index.js b/src/layout/Customization/index.js index 6573863b2..ad7ef6748 100644 --- a/src/layout/Customization/index.js +++ b/src/layout/Customization/index.js @@ -21,10 +21,10 @@ import { import PerfectScrollbar from 'react-perfect-scrollbar'; // project imports -import SubCard from '../../ui-component/cards/SubCard'; -import AnimateButton from '../../ui-component/extended/AnimateButton'; -import { SET_BORDER_RADIUS, SET_FONT_FAMILY } from '../../store/actions'; // THEME_RTL -import { gridSpacing } from '../../store/constant'; +import SubCard from 'ui-component/cards/SubCard'; +import AnimateButton from 'ui-component/extended/AnimateButton'; +import { SET_BORDER_RADIUS, SET_FONT_FAMILY } from 'store/actions'; // THEME_RTL +import { gridSpacing } from 'store/constant'; // assets import { IconSettings } from '@tabler/icons'; @@ -34,7 +34,7 @@ function valueText(value) { return `${value}px`; } -//-----------------------|| LIVE CUSTOMIZATION ||-----------------------// +// ===========================|| LIVE CUSTOMIZATION ||=========================== // const Customization = () => { const theme = useTheme(); @@ -54,7 +54,7 @@ const Customization = () => { }; useEffect(() => { - dispatch({ type: SET_BORDER_RADIUS, borderRadius: borderRadius }); + dispatch({ type: SET_BORDER_RADIUS, borderRadius }); }, [dispatch, borderRadius]); let initialFont; @@ -91,7 +91,7 @@ const Customization = () => { }, [dispatch, fontFamily]); return ( - + <> {/* toggle button */} @@ -211,7 +211,7 @@ const Customization = () => { - + ); }; diff --git a/src/layout/MainLayout/Header/NotificationSection/NotificationList.js b/src/layout/MainLayout/Header/NotificationSection/NotificationList.js index 7fedd4966..e79f66551 100644 --- a/src/layout/MainLayout/Header/NotificationSection/NotificationList.js +++ b/src/layout/MainLayout/Header/NotificationSection/NotificationList.js @@ -21,7 +21,7 @@ import { // assets import { IconBrandTelegram, IconBuildingStore, IconMailbox, IconPhoto } from '@tabler/icons'; -import User1 from './../../../../assets/images/users/user-round.svg'; +import User1 from 'assets/images/users/user-round.svg'; // style constant const useStyles = makeStyles((theme) => ({ @@ -102,7 +102,7 @@ const useStyles = makeStyles((theme) => ({ } })); -//-----------------------|| NOTIFICATION LIST ITEM ||-----------------------// +// ===========================|| NOTIFICATION LIST ITEM ||=========================== // const NotificationList = () => { const classes = useStyles(); @@ -194,7 +194,7 @@ const NotificationList = () => { - All done! Now check your inbox as you're in for a sweet treat! + All done! Now check your inbox as you're in for a sweet treat! diff --git a/src/layout/MainLayout/Header/NotificationSection/index.js b/src/layout/MainLayout/Header/NotificationSection/index.js index 4342b1bd2..603b674b8 100644 --- a/src/layout/MainLayout/Header/NotificationSection/index.js +++ b/src/layout/MainLayout/Header/NotificationSection/index.js @@ -26,8 +26,8 @@ import { import PerfectScrollbar from 'react-perfect-scrollbar'; // project imports -import MainCard from '../../../../ui-component/cards/MainCard'; -import Transitions from '../../../../ui-component/extended/Transitions'; +import MainCard from 'ui-component/cards/MainCard'; +import Transitions from 'ui-component/extended/Transitions'; import NotificationList from './NotificationList'; // assets @@ -104,7 +104,7 @@ const status = [ } ]; -//-----------------------|| NOTIFICATION ||-----------------------// +// ===========================|| NOTIFICATION ||=========================== // const NotificationSection = () => { const classes = useStyles(); @@ -139,7 +139,7 @@ const NotificationSection = () => { }; return ( - + <> { )} - + ); }; diff --git a/src/layout/MainLayout/Header/ProfileSection/UpgradePlanCard.js b/src/layout/MainLayout/Header/ProfileSection/UpgradePlanCard.js index a4d1e3696..c5de06aa3 100644 --- a/src/layout/MainLayout/Header/ProfileSection/UpgradePlanCard.js +++ b/src/layout/MainLayout/Header/ProfileSection/UpgradePlanCard.js @@ -5,7 +5,7 @@ import { makeStyles } from '@material-ui/styles'; import { Button, Card, CardContent, Grid, Stack, Typography } from '@material-ui/core'; // project imports -import AnimateButton from './../../../../ui-component/extended/AnimateButton'; +import AnimateButton from 'ui-component/extended/AnimateButton'; // style constant const useStyles = makeStyles((theme) => ({ @@ -53,7 +53,7 @@ const useStyles = makeStyles((theme) => ({ } })); -//-----------------------|| PROFILE MENU - UPGRADE PLAN CARD ||-----------------------// +// ===========================|| PROFILE MENU - UPGRADE PLAN CARD ||=========================== // const UpgradePlanCard = () => { const classes = useStyles(); diff --git a/src/layout/MainLayout/Header/ProfileSection/index.js b/src/layout/MainLayout/Header/ProfileSection/index.js index e43febd88..a04e5b6db 100644 --- a/src/layout/MainLayout/Header/ProfileSection/index.js +++ b/src/layout/MainLayout/Header/ProfileSection/index.js @@ -1,5 +1,4 @@ import React from 'react'; -import { Link as RouterLink } from 'react-router-dom'; import { useSelector } from 'react-redux'; // material-ui @@ -28,13 +27,13 @@ import ListItemButton from '@material-ui/core/ListItemButton'; import PerfectScrollbar from 'react-perfect-scrollbar'; // project imports -import MainCard from '../../../../ui-component/cards/MainCard'; -import Transitions from '../../../../ui-component/extended/Transitions'; +import MainCard from 'ui-component/cards/MainCard'; +import Transitions from 'ui-component/extended/Transitions'; import UpgradePlanCard from './UpgradePlanCard'; // assets -import { IconLogout, IconSearch, IconSettings, IconUser } from '@tabler/icons'; -import User1 from './../../../../assets/images/users/user-round.svg'; +import { IconLogout, IconSearch, IconSettings } from '@tabler/icons'; +import User1 from 'assets/images/users/user-round.svg'; // style const const useStyles = makeStyles((theme) => ({ @@ -62,7 +61,7 @@ const useStyles = makeStyles((theme) => ({ backgroundColor: theme.palette.primary.light, '&[aria-controls="menu-list-grow"], &:hover': { borderColor: theme.palette.primary.main, - background: theme.palette.primary.main + '!important', + background: `${theme.palette.primary.main}!important`, color: theme.palette.primary.light, '& svg': { stroke: theme.palette.primary.light @@ -113,7 +112,7 @@ const useStyles = makeStyles((theme) => ({ } })); -//-----------------------|| PROFILE MENU ||-----------------------// +// ===========================|| PROFILE MENU ||=========================== // const ProfileSection = () => { const classes = useStyles(); @@ -123,17 +122,14 @@ const ProfileSection = () => { const [sdm, setSdm] = React.useState(true); const [value, setValue] = React.useState(''); const [notification, setNotification] = React.useState(false); - const [selectedIndex, setSelectedIndex] = React.useState(1); + const [selectedIndex] = React.useState(1); const [open, setOpen] = React.useState(false); const anchorRef = React.useRef(null); const handleLogout = async () => { console.error('Logout'); }; - const handleListItemClick = (event, index) => { - setSelectedIndex(index); - handleClose(event); - }; + const handleToggle = () => { setOpen((prevOpen) => !prevOpen); }; @@ -144,6 +140,7 @@ const ProfileSection = () => { setOpen(false); }; + const prevOpen = React.useRef(open); React.useEffect(() => { if (prevOpen.current === true && open === false) { @@ -153,7 +150,7 @@ const ProfileSection = () => { prevOpen.current = open; }, [open]); return ( - + <> { handleListItemClick(event, 0)} - component={React.forwardRef((props, ref) => ( - - ))} - > - - - - Account Settings} /> - - handleListItemClick(event, 1)} - component={React.forwardRef((props, ref) => ( - - ))} - > - - - - - - Social Profile - - - - - - } - /> - - @@ -328,7 +286,7 @@ const ProfileSection = () => { )} - + ); }; diff --git a/src/layout/MainLayout/Header/SearchSection/index.js b/src/layout/MainLayout/Header/SearchSection/index.js index 2e3a0675c..08cd0ded5 100644 --- a/src/layout/MainLayout/Header/SearchSection/index.js +++ b/src/layout/MainLayout/Header/SearchSection/index.js @@ -8,7 +8,7 @@ import { Avatar, Box, ButtonBase, Card, CardContent, Grid, InputAdornment, Outli import PopupState, { bindPopper, bindToggle } from 'material-ui-popup-state'; // project imports -import Transitions from '../../../../ui-component/extended/Transitions'; +import Transitions from 'ui-component/extended/Transitions'; // assets import { IconAdjustmentsHorizontal, IconSearch, IconX } from '@tabler/icons'; @@ -78,18 +78,18 @@ const useStyles = makeStyles((theme) => ({ } })); -//-----------------------|| SEARCH INPUT ||-----------------------// +// ===========================|| SEARCH INPUT ||=========================== // const SearchSection = () => { const classes = useStyles(); const [value, setValue] = useState(''); return ( - + <> {(popupState) => ( - + <> { )} - + )} @@ -190,7 +190,7 @@ const SearchSection = () => { }} /> - + ); }; diff --git a/src/layout/MainLayout/Header/index.js b/src/layout/MainLayout/Header/index.js index fc3f11fae..bf57e8358 100644 --- a/src/layout/MainLayout/Header/index.js +++ b/src/layout/MainLayout/Header/index.js @@ -39,13 +39,13 @@ const useStyles = makeStyles((theme) => ({ } })); -//-----------------------|| MAIN NAVBAR / HEADER ||-----------------------// +// ===========================|| MAIN NAVBAR / HEADER ||=========================== // const Header = ({ handleLeftDrawerToggle }) => { const classes = useStyles(); return ( - + <> {/* logo & toggler button */}
@@ -66,7 +66,7 @@ const Header = ({ handleLeftDrawerToggle }) => { {/* notification & profile */} - + ); }; diff --git a/src/layout/MainLayout/LogoSection/index.js b/src/layout/MainLayout/LogoSection/index.js index 61c95ef65..c7e618ca3 100644 --- a/src/layout/MainLayout/LogoSection/index.js +++ b/src/layout/MainLayout/LogoSection/index.js @@ -5,17 +5,15 @@ import { Link } from 'react-router-dom'; import { ButtonBase } from '@material-ui/core'; // project imports -import config from './../../../config'; -import Logo from './../../../ui-component/Logo'; +import config from 'config'; +import Logo from 'ui-component/Logo'; -//-----------------------|| MAIN LOGO ||-----------------------// +// ===========================|| MAIN LOGO ||=========================== // -const LogoSection = () => { - return ( - - - - ); -}; +const LogoSection = () => ( + + + +); export default LogoSection; diff --git a/src/layout/MainLayout/Sidebar/MenuCard/index.js b/src/layout/MainLayout/Sidebar/MenuCard/index.js index 002cff80d..467781ae2 100644 --- a/src/layout/MainLayout/Sidebar/MenuCard/index.js +++ b/src/layout/MainLayout/Sidebar/MenuCard/index.js @@ -5,7 +5,7 @@ import { makeStyles } from '@material-ui/styles'; import { Button, Card, CardContent, Grid, Link, Stack, Typography } from '@material-ui/core'; // project imports -import AnimateButton from './../../../../ui-component/extended/AnimateButton'; +import AnimateButton from 'ui-component/extended/AnimateButton'; // style constant const useStyles = makeStyles((theme) => ({ @@ -53,7 +53,7 @@ const useStyles = makeStyles((theme) => ({ } })); -//-----------------------|| PROFILE MENU - UPGRADE PLAN CARD ||-----------------------// +// ===========================|| PROFILE MENU - UPGRADE PLAN CARD ||=========================== // const UpgradePlanCard = () => { const classes = useStyles(); diff --git a/src/layout/MainLayout/Sidebar/MenuList/NavCollapse/index.js b/src/layout/MainLayout/Sidebar/MenuList/NavCollapse/index.js index 826ca1595..e15737247 100644 --- a/src/layout/MainLayout/Sidebar/MenuList/NavCollapse/index.js +++ b/src/layout/MainLayout/Sidebar/MenuList/NavCollapse/index.js @@ -8,7 +8,7 @@ import { Collapse, List, ListItemIcon, ListItemText, Typography } from '@materia import ListItemButton from '@material-ui/core/ListItemButton'; // project imports -import NavItem from './../NavItem'; +import NavItem from '../NavItem'; // assets import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord'; @@ -72,7 +72,7 @@ const useStyles = makeStyles((theme) => ({ } })); -//-----------------------|| SIDEBAR MENU LIST COLLAPSE ITEMS ||-----------------------// +// ===========================|| SIDEBAR MENU LIST COLLAPSE ITEMS ||=========================== // const NavCollapse = ({ menu, level }) => { const classes = useStyles(); @@ -112,16 +112,16 @@ const NavCollapse = ({ menu, level }) => { /> ); - let menuIconClass = !menu.icon ? classes.listIcon : classes.menuIcon; + const menuIconClass = !menu.icon ? classes.listIcon : classes.menuIcon; return ( - + <> 1 ? classes.listItemNoBack : classes.listItem} - sx={{ borderRadius: customization.borderRadius + 'px' }} + sx={{ borderRadius: `${customization.borderRadius}px` }} selected={selected === menu.id} onClick={handleClick} - style={{ paddingLeft: level * 23 + 'px' }} + style={{ paddingLeft: `${level * 23}px` }} > {menuIcon} { {menus} - + ); }; diff --git a/src/layout/MainLayout/Sidebar/MenuList/NavGroup/index.js b/src/layout/MainLayout/Sidebar/MenuList/NavGroup/index.js index 3f3a12396..5bfc47770 100644 --- a/src/layout/MainLayout/Sidebar/MenuList/NavGroup/index.js +++ b/src/layout/MainLayout/Sidebar/MenuList/NavGroup/index.js @@ -6,8 +6,8 @@ import { makeStyles } from '@material-ui/styles'; import { Divider, List, Typography } from '@material-ui/core'; // project imports -import NavItem from './../NavItem'; -import NavCollapse from './../NavCollapse'; +import NavItem from '../NavItem'; +import NavCollapse from '../NavCollapse'; // style constant const useStyles = makeStyles((theme) => ({ @@ -23,7 +23,7 @@ const useStyles = makeStyles((theme) => ({ } })); -//-----------------------|| SIDEBAR MENU LIST GROUP ||-----------------------// +// ===========================|| SIDEBAR MENU LIST GROUP ||=========================== // const NavGroup = ({ item }) => { const classes = useStyles(); @@ -45,7 +45,7 @@ const NavGroup = ({ item }) => { }); return ( - + <> { {/* group divider */} - + ); }; diff --git a/src/layout/MainLayout/Sidebar/MenuList/NavItem/index.js b/src/layout/MainLayout/Sidebar/MenuList/NavItem/index.js index b6c7ecaaa..f4cb17205 100644 --- a/src/layout/MainLayout/Sidebar/MenuList/NavItem/index.js +++ b/src/layout/MainLayout/Sidebar/MenuList/NavItem/index.js @@ -9,7 +9,7 @@ import { Avatar, Chip, ListItemIcon, ListItemText, Typography, useMediaQuery } f import ListItemButton from '@material-ui/core/ListItemButton'; // project imports -import { MENU_OPEN, SET_MENU } from '../../../../../store/actions'; +import { MENU_OPEN, SET_MENU } from 'store/actions'; // assets import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord'; @@ -45,7 +45,7 @@ const useStyles = makeStyles((theme) => ({ } })); -//-----------------------|| SIDEBAR MENU LIST ITEMS ||-----------------------// +// ===========================|| SIDEBAR MENU LIST ITEMS ||=========================== // const NavItem = ({ item, level }) => { const classes = useStyles(); @@ -73,14 +73,14 @@ const NavItem = ({ item, level }) => { itemTarget = '_blank'; } - let listItemProps = { component: React.forwardRef((props, ref) => ) }; + let listItemProps = { component: React.forwardRef((props, ref) => ) }; if (item.external) { listItemProps = { component: 'a', href: item.url }; } const itemHandler = (id) => { - dispatch({ type: MENU_OPEN, id: id }); - matchesSM && dispatch({ type: SET_MENU, opened: false }); + dispatch({ type: MENU_OPEN, id }); + if (matchesSM) dispatch({ type: SET_MENU, opened: false }); }; // active menu item on page load @@ -100,11 +100,11 @@ const NavItem = ({ item, level }) => { {...listItemProps} disabled={item.disabled} className={level > 1 ? classes.listItemNoBack : classes.listItem} - sx={{ borderRadius: customization.borderRadius + 'px' }} + sx={{ borderRadius: `${customization.borderRadius}px` }} selected={customization.isOpen.findIndex((id) => id === item.id) > -1} onClick={() => itemHandler(item.id)} target={itemTarget} - style={{ paddingLeft: level * 23 + 'px' }} + style={{ paddingLeft: `${level * 23}px` }} > {itemIcon} { const navItems = menuItem.items.map((item) => { diff --git a/src/layout/MainLayout/Sidebar/index.js b/src/layout/MainLayout/Sidebar/index.js index cbb9a0f88..2dd5c92b1 100644 --- a/src/layout/MainLayout/Sidebar/index.js +++ b/src/layout/MainLayout/Sidebar/index.js @@ -13,7 +13,7 @@ import { BrowserView, MobileView } from 'react-device-detect'; import MenuList from './MenuList'; import LogoSection from '../LogoSection'; import MenuCard from './MenuCard'; -import { drawerWidth } from './../../../store/constant'; +import { drawerWidth } from 'store/constant'; // style constant const useStyles = makeStyles((theme) => ({ @@ -48,7 +48,7 @@ const useStyles = makeStyles((theme) => ({ } })); -//-----------------------|| SIDEBAR DRAWER ||-----------------------// +// ===========================|| SIDEBAR DRAWER ||=========================== // const Sidebar = ({ drawerOpen, drawerToggle, window }) => { const classes = useStyles(); @@ -56,7 +56,7 @@ const Sidebar = ({ drawerOpen, drawerToggle, window }) => { const matchUpMd = useMediaQuery(theme.breakpoints.up('md')); const drawer = ( - + <>
@@ -74,7 +74,7 @@ const Sidebar = ({ drawerOpen, drawerToggle, window }) => { - + ); const container = window !== undefined ? () => window().document.body : undefined; diff --git a/src/layout/MainLayout/index.js b/src/layout/MainLayout/index.js index 5a4c32d78..c62ad6690 100644 --- a/src/layout/MainLayout/index.js +++ b/src/layout/MainLayout/index.js @@ -1,6 +1,6 @@ -import PropTypes from 'prop-types'; import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; +import { Outlet } from 'react-router-dom'; // material-ui import { makeStyles, useTheme } from '@material-ui/styles'; @@ -10,13 +10,13 @@ import { AppBar, CssBaseline, Toolbar, useMediaQuery } from '@material-ui/core'; import clsx from 'clsx'; // project imports -import Breadcrumbs from './../../ui-component/extended/Breadcrumbs'; +import Breadcrumbs from 'ui-component/extended/Breadcrumbs'; import Header from './Header'; import Sidebar from './Sidebar'; -import Customization from './../Customization'; -import navigation from './../../menu-items'; -import { drawerWidth } from '../../store/constant'; -import { SET_MENU } from './../../store/actions'; +import Customization from '../Customization'; +import navigation from 'menu-items'; +import { drawerWidth } from 'store/constant'; +import { SET_MENU } from 'store/actions'; // assets import { IconChevronRight } from '@tabler/icons'; @@ -74,9 +74,9 @@ const useStyles = makeStyles((theme) => ({ } })); -//-----------------------|| MAIN LAYOUT ||-----------------------// +// ===========================|| MAIN LAYOUT ||=========================== // -const MainLayout = ({ children }) => { +const MainLayout = () => { const classes = useStyles(); const theme = useTheme(); const matchDownMd = useMediaQuery(theme.breakpoints.down('md')); @@ -121,19 +121,13 @@ const MainLayout = ({ children }) => { } ])} > - {/*
*/} {/* breadcrumb */} -
{children}
- {/*
*/} +
); }; -MainLayout.propTypes = { - children: PropTypes.node -}; - export default MainLayout; diff --git a/src/layout/MinimalLayout/index.js b/src/layout/MinimalLayout/index.js index 02a9d76b9..f8b81c9dc 100644 --- a/src/layout/MinimalLayout/index.js +++ b/src/layout/MinimalLayout/index.js @@ -1,22 +1,16 @@ -import PropTypes from 'prop-types'; import React from 'react'; +import { Outlet } from 'react-router-dom'; // project imports -import Customization from './../Customization'; +import Customization from '../Customization'; -//-----------------------|| MINIMAL LAYOUT ||-----------------------// +// ===========================|| MINIMAL LAYOUT ||=========================== // -const MinimalLayout = (props) => { - return ( - - {props.children} - - - ); -}; - -MinimalLayout.propTypes = { - children: PropTypes.node -}; +const MinimalLayout = () => ( + <> + + + +); export default MinimalLayout; diff --git a/src/layout/NavMotion.js b/src/layout/NavMotion.js index 287178050..0daa894c8 100644 --- a/src/layout/NavMotion.js +++ b/src/layout/NavMotion.js @@ -4,7 +4,7 @@ import React from 'react'; // third-party import { motion } from 'framer-motion'; -//-----------------------|| ANIMATION FOR CONTENT ||-----------------------// +// ===========================|| ANIMATION FOR CONTENT ||=========================== // const NavMotion = ({ children }) => { const motionVariants = { diff --git a/src/layout/NavigationScroll.js b/src/layout/NavigationScroll.js index 20185464c..4ff8a3ee9 100644 --- a/src/layout/NavigationScroll.js +++ b/src/layout/NavigationScroll.js @@ -1,10 +1,13 @@ import PropTypes from 'prop-types'; import { useEffect } from 'react'; -import { withRouter } from 'react-router-dom'; +import { useLocation } from 'react-router-dom'; -//-----------------------|| NAVIGATION SCROLL TO TOP ||-----------------------// +// ===========================|| NAVIGATION SCROLL TO TOP ||=========================== // + +const NavigationScroll = ({ children }) => { + const location = useLocation(); + const { pathname } = location; -const NavigationScroll = ({ children, location: { pathname } }) => { useEffect(() => { window.scrollTo({ top: 0, @@ -21,4 +24,4 @@ NavigationScroll.propTypes = { location: PropTypes.object }; -export default withRouter(NavigationScroll); +export default NavigationScroll; diff --git a/src/menu-items/dashboard.js b/src/menu-items/dashboard.js index b7b411cc3..223dd6bfe 100644 --- a/src/menu-items/dashboard.js +++ b/src/menu-items/dashboard.js @@ -3,13 +3,13 @@ import { IconDashboard, IconDeviceAnalytics } from '@tabler/icons'; // constant const icons = { - IconDashboard: IconDashboard, + IconDashboard, IconDeviceAnalytics }; -//-----------------------|| DASHBOARD MENU ITEMS ||-----------------------// +// ===========================|| DASHBOARD MENU ITEMS ||=========================== // -export const dashboard = { +const dashboard = { id: 'dashboard', title: 'Dashboard', type: 'group', @@ -19,8 +19,10 @@ export const dashboard = { title: 'Dashboard', type: 'item', url: '/dashboard/default', - icon: icons['IconDashboard'], + icon: icons.IconDashboard, breadcrumbs: false } ] }; + +export default dashboard; diff --git a/src/menu-items/index.js b/src/menu-items/index.js index 83178c93d..2a50ea036 100644 --- a/src/menu-items/index.js +++ b/src/menu-items/index.js @@ -1,9 +1,9 @@ -import { dashboard } from './dashboard'; -import { pages } from './pages'; -import { utilities } from './utilities'; -import { other } from './other'; +import dashboard from './dashboard'; +import pages from './pages'; +import utilities from './utilities'; +import other from './other'; -//-----------------------|| MENU ITEMS ||-----------------------// +// ===========================|| MENU ITEMS ||=========================== // const menuItems = { items: [dashboard, pages, utilities, other] diff --git a/src/menu-items/other.js b/src/menu-items/other.js index 54c6c36ef..5c4a0f759 100644 --- a/src/menu-items/other.js +++ b/src/menu-items/other.js @@ -3,14 +3,14 @@ import { IconBrandChrome, IconHelp, IconSitemap } from '@tabler/icons'; // constant const icons = { - IconBrandChrome: IconBrandChrome, - IconHelp: IconHelp, - IconSitemap: IconSitemap + IconBrandChrome, + IconHelp, + IconSitemap }; -//-----------------------|| SAMPLE PAGE & DOCUMENTATION MENU ITEMS ||-----------------------// +// ===========================|| SAMPLE PAGE & DOCUMENTATION MENU ITEMS ||=========================== // -export const other = { +const other = { id: 'sample-docs-roadmap', type: 'group', children: [ @@ -19,7 +19,7 @@ export const other = { title: 'Sample Page', type: 'item', url: '/sample-page', - icon: icons['IconBrandChrome'], + icon: icons.IconBrandChrome, breadcrumbs: false }, { @@ -27,9 +27,11 @@ export const other = { title: 'Documentation', type: 'item', url: 'https://codedthemes.gitbook.io/berry/', - icon: icons['IconHelp'], + icon: icons.IconHelp, external: true, target: true } ] }; + +export default other; diff --git a/src/menu-items/pages.js b/src/menu-items/pages.js index 489e80d8a..1affc258b 100644 --- a/src/menu-items/pages.js +++ b/src/menu-items/pages.js @@ -3,16 +3,16 @@ import { IconKey, IconReceipt2, IconBug, IconBellRinging, IconPhoneCall } from ' // constant const icons = { - IconKey: IconKey, - IconReceipt2: IconReceipt2, - IconBug: IconBug, - IconBellRinging: IconBellRinging, - IconPhoneCall: IconPhoneCall + IconKey, + IconReceipt2, + IconBug, + IconBellRinging, + IconPhoneCall }; -//-----------------------|| EXTRA PAGES MENU ITEMS ||-----------------------// +// ===========================|| EXTRA PAGES MENU ITEMS ||=========================== // -export const pages = { +const pages = { id: 'pages', title: 'Pages', caption: 'Pages Caption', @@ -22,7 +22,7 @@ export const pages = { id: 'authentication', title: 'Authentication', type: 'collapse', - icon: icons['IconKey'], + icon: icons.IconKey, children: [ { id: 'login3', @@ -42,3 +42,5 @@ export const pages = { } ] }; + +export default pages; diff --git a/src/menu-items/utilities.js b/src/menu-items/utilities.js index 75bbab445..43dce8e50 100644 --- a/src/menu-items/utilities.js +++ b/src/menu-items/utilities.js @@ -3,17 +3,17 @@ import { IconBrandFramer, IconTypography, IconPalette, IconShadow, IconWindmill, // constant const icons = { - IconTypography: IconTypography, - IconPalette: IconPalette, - IconShadow: IconShadow, - IconWindmill: IconWindmill, - IconBrandFramer: IconBrandFramer, - IconLayoutGridAdd: IconLayoutGridAdd + IconTypography, + IconPalette, + IconShadow, + IconWindmill, + IconBrandFramer, + IconLayoutGridAdd }; -//-----------------------|| UTILITIES MENU ITEMS ||-----------------------// +// ===========================|| UTILITIES MENU ITEMS ||=========================== // -export const utilities = { +const utilities = { id: 'utilities', title: 'Utilities', type: 'group', @@ -23,7 +23,7 @@ export const utilities = { title: 'Typography', type: 'item', url: '/utils/util-typography', - icon: icons['IconTypography'], + icon: icons.IconTypography, breadcrumbs: false }, { @@ -31,7 +31,7 @@ export const utilities = { title: 'Color', type: 'item', url: '/utils/util-color', - icon: icons['IconPalette'], + icon: icons.IconPalette, breadcrumbs: false }, { @@ -39,14 +39,14 @@ export const utilities = { title: 'Shadow', type: 'item', url: '/utils/util-shadow', - icon: icons['IconShadow'], + icon: icons.IconShadow, breadcrumbs: false }, { id: 'icons', title: 'Icons', type: 'collapse', - icon: icons['IconWindmill'], + icon: icons.IconWindmill, children: [ { id: 'tabler-icons', @@ -66,3 +66,5 @@ export const utilities = { } ] }; + +export default utilities; diff --git a/src/routes/AuthenticationRoutes.js b/src/routes/AuthenticationRoutes.js index 3c5574e22..c2d6ae37f 100644 --- a/src/routes/AuthenticationRoutes.js +++ b/src/routes/AuthenticationRoutes.js @@ -1,29 +1,28 @@ import React, { lazy } from 'react'; -import { Route, Switch, useLocation } from 'react-router-dom'; -import Loadable from '../ui-component/Loadable'; +import Loadable from 'ui-component/Loadable'; // project imports -import MinimalLayout from './../layout/MinimalLayout'; +import MinimalLayout from 'layout/MinimalLayout'; // login option 3 routing -const AuthLogin3 = Loadable(lazy(() => import('../views/pages/authentication/authentication3/Login3'))); -const AuthRegister3 = Loadable(lazy(() => import('../views/pages/authentication/authentication3/Register3'))); +const AuthLogin3 = Loadable(lazy(() => import('views/pages/authentication/authentication3/Login3'))); +const AuthRegister3 = Loadable(lazy(() => import('views/pages/authentication/authentication3/Register3'))); -//-----------------------|| AUTHENTICATION ROUTING ||-----------------------// +// ===========================|| AUTHENTICATION ROUTING ||=========================== // -const AuthenticationRoutes = () => { - const location = useLocation(); - - return ( - - - - - - - - - ); +const AuthenticationRoutes = { + path: '/', + element: , + children: [ + { + path: '/pages/login/login3', + element: + }, + { + path: '/pages/register/register3', + element: + } + ] }; export default AuthenticationRoutes; diff --git a/src/routes/MainRoutes.js b/src/routes/MainRoutes.js index c8969fc1e..2c1902804 100644 --- a/src/routes/MainRoutes.js +++ b/src/routes/MainRoutes.js @@ -1,57 +1,62 @@ import React, { lazy } from 'react'; -import { Route, Switch, useLocation } from 'react-router-dom'; // project imports -import MainLayout from './../layout/MainLayout'; -import Loadable from '../ui-component/Loadable'; +import MainLayout from 'layout/MainLayout'; +import Loadable from 'ui-component/Loadable'; // dashboard routing -const DashboardDefault = Loadable(lazy(() => import('../views/dashboard/Default'))); +const DashboardDefault = Loadable(lazy(() => import('views/dashboard/Default'))); // utilities routing -const UtilsTypography = Loadable(lazy(() => import('../views/utilities/Typography'))); -const UtilsColor = Loadable(lazy(() => import('../views/utilities/Color'))); -const UtilsShadow = Loadable(lazy(() => import('../views/utilities/Shadow'))); -const UtilsMaterialIcons = Loadable(lazy(() => import('../views/utilities/MaterialIcons'))); -const UtilsTablerIcons = Loadable(lazy(() => import('../views/utilities/TablerIcons'))); +const UtilsTypography = Loadable(lazy(() => import('views/utilities/Typography'))); +const UtilsColor = Loadable(lazy(() => import('views/utilities/Color'))); +const UtilsShadow = Loadable(lazy(() => import('views/utilities/Shadow'))); +const UtilsMaterialIcons = Loadable(lazy(() => import('views/utilities/MaterialIcons'))); +const UtilsTablerIcons = Loadable(lazy(() => import('views/utilities/TablerIcons'))); // sample page routing -const SamplePage = Loadable(lazy(() => import('../views/sample-page'))); - -//-----------------------|| MAIN ROUTING ||-----------------------// - -const MainRoutes = () => { - const location = useLocation(); - - return ( - - - - - - - - - - - - - - - - ); +const SamplePage = Loadable(lazy(() => import('views/sample-page'))); + +// ===========================|| MAIN ROUTING ||=========================== // + +const MainRoutes = { + path: '/', + element: , + children: [ + { + path: '/', + element: + }, + { + path: '/dashboard/default', + element: + }, + { + path: '/utils/util-typography', + element: + }, + { + path: '/utils/util-color', + element: + }, + { + path: '/utils/util-shadow', + element: + }, + { + path: '/icons/tabler-icons', + element: + }, + { + path: '/icons/material-icons', + element: + }, + + { + path: '/sample-page', + element: + } + ] }; export default MainRoutes; diff --git a/src/routes/index.js b/src/routes/index.js index 2410fe115..654afe94a 100644 --- a/src/routes/index.js +++ b/src/routes/index.js @@ -1,28 +1,11 @@ -import React from 'react'; -import { Redirect, Switch } from 'react-router-dom'; +import { useRoutes } from 'react-router-dom'; // routes import MainRoutes from './MainRoutes'; import AuthenticationRoutes from './AuthenticationRoutes'; -// project imports -import config from './../config'; +// ===========================|| ROUTING RENDER ||=========================== // -//-----------------------|| ROUTING RENDER ||-----------------------// - -const Routes = () => { - return ( - - - - {/* Routes for authentication pages */} - - - {/* Routes for main layouts */} - - - - ); -}; - -export default Routes; +export default function ThemeRoutes() { + return useRoutes([MainRoutes, AuthenticationRoutes]); +} diff --git a/src/serviceWorker.js b/src/serviceWorker.js index 95d65ed91..46998ffa1 100644 --- a/src/serviceWorker.js +++ b/src/serviceWorker.js @@ -18,39 +18,6 @@ const isLocalhost = Boolean( window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/) ); -export function register(config) { - if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { - // The URL constructor is available in all browsers that support SW. - const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); - if (publicUrl.origin !== window.location.origin) { - // Our service worker won't work if PUBLIC_URL is on a different origin - // from what our page is served on. This might happen if a CDN is used to - // serve assets; see https://github.com/facebook/create-react-app/issues/2374 - return; - } - - window.addEventListener('load', () => { - const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; - - if (isLocalhost) { - // This is running on localhost. Let's check if a service worker still exists or not. - checkValidServiceWorker(swUrl, config); - - // Add some additional logging to localhost, pointing developers to the - // service worker/PWA documentation. - navigator.serviceWorker.ready.then(() => { - console.log( - 'This web app is being served cache-first by a service worker. To learn more, visit https://bit.ly/CRA-PWA' - ); - }); - } else { - // Is not localhost. Just register service worker - registerValidSW(swUrl, config); - } - }); - } -} - function registerValidSW(swUrl, config) { navigator.serviceWorker .register(swUrl) @@ -119,6 +86,39 @@ function checkValidServiceWorker(swUrl, config) { }); } +export function register(config) { + if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { + // The URL constructor is available in all browsers that support SW. + const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); + if (publicUrl.origin !== window.location.origin) { + // Our service worker won't work if PUBLIC_URL is on a different origin + // from what our page is served on. This might happen if a CDN is used to + // serve assets; see https://github.com/facebook/create-react-app/issues/2374 + return; + } + + window.addEventListener('load', () => { + const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; + + if (isLocalhost) { + // This is running on localhost. Let's check if a service worker still exists or not. + checkValidServiceWorker(swUrl, config); + + // Add some additional logging to localhost, pointing developers to the + // service worker/PWA documentation. + navigator.serviceWorker.ready.then(() => { + console.log( + 'This web app is being served cache-first by a service worker. To learn more, visit https://bit.ly/CRA-PWA' + ); + }); + } else { + // Is not localhost. Just register service worker + registerValidSW(swUrl, config); + } + }); + } +} + export function unregister() { if ('serviceWorker' in navigator) { navigator.serviceWorker.ready diff --git a/src/store/customizationReducer.js b/src/store/customizationReducer.js index 7e2a5b369..a6922b99a 100644 --- a/src/store/customizationReducer.js +++ b/src/store/customizationReducer.js @@ -1,22 +1,23 @@ // project imports -import config from '../config'; +import config from 'config'; // action - state management import * as actionTypes from './actions'; export const initialState = { - isOpen: [], //for active default menu + isOpen: [], // for active default menu fontFamily: config.fontFamily, borderRadius: config.borderRadius, opened: true }; -//-----------------------|| CUSTOMIZATION REDUCER ||-----------------------// +// ===========================|| CUSTOMIZATION REDUCER ||=========================== // const customizationReducer = (state = initialState, action) => { + let id; switch (action.type) { case actionTypes.MENU_OPEN: - const id = action.id; + id = action.id; return { ...state, isOpen: [id] diff --git a/src/store/index.js b/src/store/index.js index 7a44ff077..dec70de3c 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1,8 +1,9 @@ import { createStore } from 'redux'; import reducer from './reducer'; -//-----------------------|| REDUX - MAIN STORE ||-----------------------// +// ===========================|| REDUX - MAIN STORE ||=========================== // const store = createStore(reducer); +const persister = 'Demo'; -export { store }; +export { store, persister }; diff --git a/src/store/reducer.js b/src/store/reducer.js index 4effc321c..36aef9946 100644 --- a/src/store/reducer.js +++ b/src/store/reducer.js @@ -3,7 +3,7 @@ import { combineReducers } from 'redux'; // reducer import import customizationReducer from './customizationReducer'; -//-----------------------|| COMBINE REDUCER ||-----------------------// +// ===========================|| COMBINE REDUCER ||=========================== // const reducer = combineReducers({ customization: customizationReducer diff --git a/src/themes/compStyleOverride.js b/src/themes/compStyleOverride.js index cdefc725f..6f7f6da4c 100644 --- a/src/themes/compStyleOverride.js +++ b/src/themes/compStyleOverride.js @@ -2,7 +2,7 @@ * MUI Components whose styles are override as per theme * @param {JsonObject} theme Plain Json Object */ -export function componentStyleOverrides(theme) { +export default function componentStyleOverrides(theme) { return { MuiButton: { styleOverrides: { @@ -22,7 +22,7 @@ export function componentStyleOverrides(theme) { backgroundImage: 'none' }, rounded: { - borderRadius: theme.customization.borderRadius + 'px' + borderRadius: `${theme.customization.borderRadius}px` } } }, @@ -107,7 +107,7 @@ export function componentStyleOverrides(theme) { styleOverrides: { root: { background: theme.colors.grey50, - borderRadius: theme.customization.borderRadius + 'px', + borderRadius: `${theme.customization.borderRadius}px`, '& .MuiOutlinedInput-notchedOutline': { borderColor: theme.colors.grey400 }, @@ -122,7 +122,7 @@ export function componentStyleOverrides(theme) { fontWeight: 500, background: theme.colors.grey50, padding: '15.5px 14px', - borderRadius: theme.customization.borderRadius + 'px', + borderRadius: `${theme.customization.borderRadius}px`, '&.MuiInputBase-inputSizeSmall': { padding: '10px 14px', '&.MuiInputBase-inputAdornedStart': { @@ -134,7 +134,7 @@ export function componentStyleOverrides(theme) { paddingLeft: 4 }, notchedOutline: { - borderRadius: theme.customization.borderRadius + 'px' + borderRadius: `${theme.customization.borderRadius}px` } } }, diff --git a/src/themes/index.js b/src/themes/index.js index fef896ccd..a3e95bb8b 100644 --- a/src/themes/index.js +++ b/src/themes/index.js @@ -1,12 +1,12 @@ import { createTheme } from '@material-ui/core/styles'; // assets -import colors from '../assets/scss/_themes-vars.module.scss'; +import colors from 'assets/scss/_themes-vars.module.scss'; // project imports -import { componentStyleOverrides } from './compStyleOverride'; -import { themePalette } from './palette'; -import { themeTypography } from './typography'; +import componentStyleOverrides from './compStyleOverride'; +import themePalette from './palette'; +import themeTypography from './typography'; /** * Represent theme style and structure as per Material-UI @@ -15,7 +15,7 @@ import { themeTypography } from './typography'; export function theme(customization) { const color = colors; - let themeOption = { + const themeOption = { colors: color, heading: color.grey900, paper: color.paper, @@ -27,7 +27,7 @@ export function theme(customization) { menuSelected: color.secondaryDark, menuSelectedBack: color.secondaryLight, divider: color.grey200, - customization: customization + customization }; return createTheme({ diff --git a/src/themes/palette.js b/src/themes/palette.js index 4f389e0b8..5e9359d9c 100644 --- a/src/themes/palette.js +++ b/src/themes/palette.js @@ -2,7 +2,7 @@ * Color intention that you want to used in your theme * @param {JsonObject} theme Theme customization object */ -export function themePalette(theme) { +export default function themePalette(theme) { return { mode: theme.customization.navType, common: { diff --git a/src/themes/typography.js b/src/themes/typography.js index bc8fce037..bf6616f01 100644 --- a/src/themes/typography.js +++ b/src/themes/typography.js @@ -2,7 +2,7 @@ * Typography used in theme * @param {JsonObject} theme theme customization object */ -export function themeTypography(theme) { +export default function themeTypography(theme) { return { fontFamily: theme.customization.fontFamily, h6: { @@ -90,7 +90,7 @@ export function themeTypography(theme) { padding: '20px', marginTop: '88px', marginRight: '20px', - borderRadius: theme.customization.borderRadius + 'px' + borderRadius: `${theme.customization.borderRadius}px` }, menuCaption: { fontSize: '0.875rem', diff --git a/src/ui-component/Loadable.js b/src/ui-component/Loadable.js index ebfa689a0..07739626b 100644 --- a/src/ui-component/Loadable.js +++ b/src/ui-component/Loadable.js @@ -3,12 +3,13 @@ import React, { Suspense } from 'react'; // project imports import Loader from './Loader'; -//-----------------------|| LOADABLE - LAZY LOADING ||-----------------------// - -const Loadable = (Component) => (props) => ( - }> - - -); +// ===========================|| LOADABLE - LAZY LOADING ||=========================== // + +const Loadable = (Component) => (props) => + ( + }> + + + ); export default Loadable; diff --git a/src/ui-component/Loader.js b/src/ui-component/Loader.js index 929dda84e..deaf68889 100644 --- a/src/ui-component/Loader.js +++ b/src/ui-component/Loader.js @@ -18,7 +18,7 @@ const useStyles = makeStyles((theme) => ({ } })); -//-----------------------|| Loader ||-----------------------// +// ===========================|| Loader ||=========================== // const Loader = () => { const classes = useStyles(); diff --git a/src/ui-component/Logo.js b/src/ui-component/Logo.js index 2aa4f715e..f0243e7eb 100644 --- a/src/ui-component/Logo.js +++ b/src/ui-component/Logo.js @@ -11,7 +11,7 @@ import { useTheme } from '@material-ui/styles'; * */ -//-----------------------|| LOGO SVG ||-----------------------// +// ===========================|| LOGO SVG ||=========================== // const Logo = () => { const theme = useTheme(); diff --git a/src/ui-component/cards/AuthFooter.js b/src/ui-component/cards/AuthFooter.js index 77a204596..9bee5eb06 100644 --- a/src/ui-component/cards/AuthFooter.js +++ b/src/ui-component/cards/AuthFooter.js @@ -3,19 +3,17 @@ import React from 'react'; // material-ui import { Link, Typography, Stack } from '@material-ui/core'; -//-----------------------|| FOOTER - AUTHENTICATION 2 & 3 ||-----------------------// +// ===========================|| FOOTER - AUTHENTICATION 2 & 3 ||=========================== // -const AuthFooter = () => { - return ( - - - berrydashboard.io - - - © codedthemes.com - - - ); -}; +const AuthFooter = () => ( + + + berrydashboard.io + + + © codedthemes.com + + +); export default AuthFooter; diff --git a/src/ui-component/cards/CardSecondaryAction.js b/src/ui-component/cards/CardSecondaryAction.js index 04e786501..f6fac9bfe 100644 --- a/src/ui-component/cards/CardSecondaryAction.js +++ b/src/ui-component/cards/CardSecondaryAction.js @@ -6,15 +6,15 @@ import { useTheme } from '@material-ui/styles'; import { ButtonBase, Link, Tooltip } from '@material-ui/core'; // project imports -import Avatar from './../extended/Avatar'; +import Avatar from '../extended/Avatar'; -//-----------------------|| CARD SECONDARY ACTION ||-----------------------// +// ===========================|| CARD SECONDARY ACTION ||=========================== // const CardSecondaryAction = ({ title, link, icon }) => { const theme = useTheme(); return ( - + {!icon && ( diff --git a/src/ui-component/cards/MainCard.js b/src/ui-component/cards/MainCard.js index dfee381e2..941aba152 100644 --- a/src/ui-component/cards/MainCard.js +++ b/src/ui-component/cards/MainCard.js @@ -10,7 +10,7 @@ const headerSX = { '& .MuiCardHeader-action': { mr: 0 } }; -//-----------------------|| CUSTOM MAIN CARD ||-----------------------// +// ===========================|| CUSTOM MAIN CARD ||=========================== // const MainCard = React.forwardRef( ( @@ -40,7 +40,7 @@ const MainCard = React.forwardRef( border: border ? '1px solid' : 'none', borderColor: theme.palette.primary[200] + 75, ':hover': { - boxShadow: boxShadow ? (shadow ? shadow : '0 2px 14px 0 rgb(32 40 45 / 8%)') : 'inherit' + boxShadow: boxShadow ? shadow || '0 2px 14px 0 rgb(32 40 45 / 8%)' : 'inherit' }, ...sx }} diff --git a/src/ui-component/cards/Skeleton/EarningCard.js b/src/ui-component/cards/Skeleton/EarningCard.js index 6a4e1920e..4512b53b2 100644 --- a/src/ui-component/cards/Skeleton/EarningCard.js +++ b/src/ui-component/cards/Skeleton/EarningCard.js @@ -13,7 +13,7 @@ const useStyles = makeStyles({ } }); -//-----------------------|| SKELETON EARNING CARD ||-----------------------// +// ===========================|| SKELETON EARNING CARD ||=========================== // const EarningCard = () => { const classes = useStyles(); diff --git a/src/ui-component/cards/Skeleton/ImagePlaceholder.js b/src/ui-component/cards/Skeleton/ImagePlaceholder.js index f967acc00..8490938c5 100644 --- a/src/ui-component/cards/Skeleton/ImagePlaceholder.js +++ b/src/ui-component/cards/Skeleton/ImagePlaceholder.js @@ -3,10 +3,8 @@ import React from 'react'; // material-ui import Skeleton from '@material-ui/core/Skeleton'; -//-----------------------|| SKELETON IMAGE CARD ||-----------------------// +// ===========================|| SKELETON IMAGE CARD ||=========================== // -const ImagePlaceholder = ({ ...others }) => { - return ; -}; +const ImagePlaceholder = ({ ...others }) => ; export default ImagePlaceholder; diff --git a/src/ui-component/cards/Skeleton/PopularCard.js b/src/ui-component/cards/Skeleton/PopularCard.js index 119615735..7cb7484bc 100644 --- a/src/ui-component/cards/Skeleton/PopularCard.js +++ b/src/ui-component/cards/Skeleton/PopularCard.js @@ -4,7 +4,7 @@ import { makeStyles } from '@material-ui/styles'; import { Card, CardContent, Grid, Skeleton } from '@material-ui/core'; // project imports -import { gridSpacing } from './../../../store/constant'; +import { gridSpacing } from 'store/constant'; // style constant const useStyles = makeStyles({ @@ -16,7 +16,7 @@ const useStyles = makeStyles({ } }); -//-----------------------|| SKELETON - POPULAR CARD ||-----------------------// +// ===========================|| SKELETON - POPULAR CARD ||=========================== // const PopularCard = () => { const classes = useStyles(); diff --git a/src/ui-component/cards/Skeleton/TotalGrowthBarChart.js b/src/ui-component/cards/Skeleton/TotalGrowthBarChart.js index 44733e8db..a62706fd8 100644 --- a/src/ui-component/cards/Skeleton/TotalGrowthBarChart.js +++ b/src/ui-component/cards/Skeleton/TotalGrowthBarChart.js @@ -5,39 +5,37 @@ import { Card, CardContent, Grid } from '@material-ui/core'; import Skeleton from '@material-ui/core/Skeleton'; // project imports -import { gridSpacing } from '../../../store/constant'; +import { gridSpacing } from 'store/constant'; -//-----------------------|| SKELETON TOTAL GROWTH BAR CHART ||-----------------------// +// ===========================|| SKELETON TOTAL GROWTH BAR CHART ||=========================== // -const TotalGrowthBarChart = () => { - return ( - - - - - - - - - - - - - +const TotalGrowthBarChart = () => ( + + + + + + + + + + + + - - - + + + - - - - - - ); -}; + + + + + + +); export default TotalGrowthBarChart; diff --git a/src/ui-component/cards/Skeleton/TotalIncomeCard.js b/src/ui-component/cards/Skeleton/TotalIncomeCard.js index d78ad1588..ee84f266b 100644 --- a/src/ui-component/cards/Skeleton/TotalIncomeCard.js +++ b/src/ui-component/cards/Skeleton/TotalIncomeCard.js @@ -15,7 +15,7 @@ const useStyles = makeStyles({ } }); -//-----------------------|| SKELETON - TOTAL INCOME DARK/LIGHT Card ||-----------------------// +// ===========================|| SKELETON - TOTAL INCOME DARK/LIGHT Card ||=========================== // const TotalIncomeCard = () => { const classes = useStyles(); diff --git a/src/ui-component/cards/SubCard.js b/src/ui-component/cards/SubCard.js index 150edf557..9c36af4b0 100644 --- a/src/ui-component/cards/SubCard.js +++ b/src/ui-component/cards/SubCard.js @@ -5,7 +5,7 @@ import React from 'react'; import { useTheme } from '@material-ui/styles'; import { Card, CardContent, CardHeader, Divider, Typography } from '@material-ui/core'; -//-----------------------|| CUSTOM SUB CARD ||-----------------------// +// ===========================|| CUSTOM SUB CARD ||=========================== // const SubCard = ({ children, content, contentClass, darkTitle, secondary, sx = {}, title, ...others }) => { const theme = useTheme(); diff --git a/src/ui-component/extended/AnimateButton.js b/src/ui-component/extended/AnimateButton.js index c200866e7..1fb723172 100644 --- a/src/ui-component/extended/AnimateButton.js +++ b/src/ui-component/extended/AnimateButton.js @@ -4,7 +4,7 @@ import React from 'react'; // third-party import { motion, useCycle } from 'framer-motion'; -//-----------------------|| ANIMATION BUTTON ||-----------------------// +// ===========================|| ANIMATION BUTTON ||=========================== // const AnimateButton = React.forwardRef(({ children, type, direction, offset, scale }, ref) => { let offset1; @@ -45,17 +45,17 @@ const AnimateButton = React.forwardRef(({ children, type, direction, offset, sca case 'slide': if (direction === 'up' || direction === 'down') { return ( - cycleY()} onHoverStart={() => cycleY()}> - {children} - - ); - } else { - return ( - cycleX()} onHoverStart={() => cycleX()}> + cycleY()} onHoverStart={() => cycleY()}> {children} ); } + return ( + cycleX()} onHoverStart={() => cycleX()}> + {children} + + ); + case 'scale': default: if (typeof scale === 'number') { diff --git a/src/ui-component/extended/Avatar.js b/src/ui-component/extended/Avatar.js index 3714e89f3..674d93d98 100644 --- a/src/ui-component/extended/Avatar.js +++ b/src/ui-component/extended/Avatar.js @@ -38,37 +38,37 @@ const useStyles = makeStyles((theme) => ({ primaryOutline: { background: theme.palette.background.paper, color: theme.palette.primary.main, - border: '2px solid ' + theme.palette.primary.main + border: `2px solid ${theme.palette.primary.main}` }, secondaryOutline: { background: theme.palette.background.paper, color: theme.palette.secondary.main, - border: '2px solid ' + theme.palette.secondary.main + border: `2px solid ${theme.palette.secondary.main}` }, errorOutline: { background: theme.palette.background.paper, color: theme.palette.error.main, - border: '2px solid ' + theme.palette.error.main + border: `2px solid ${theme.palette.error.main}` }, warningOutline: { background: theme.palette.background.paper, color: theme.palette.warning.dark, - border: '2px solid ' + theme.palette.warning.dark + border: `2px solid ${theme.palette.warning.dark}` }, infoOutline: { background: theme.palette.background.paper, color: theme.palette.info.main, - border: '2px solid ' + theme.palette.info.main + border: `2px solid ${theme.palette.info.main}` }, successOutline: { background: theme.palette.background.paper, color: theme.palette.success.dark, - border: '2px solid ' + theme.palette.success.dark + border: `2px solid ${theme.palette.success.dark}` }, greyOutline: { background: theme.palette.background.paper, color: theme.palette.grey[500], - border: '2px solid ' + theme.palette.grey[500] + border: `2px solid ${theme.palette.grey[500]}` }, badge: { width: theme.spacing(3.5), @@ -96,17 +96,15 @@ const useStyles = makeStyles((theme) => ({ } })); -//-----------------------|| AVATAR ||-----------------------// +// ===========================|| AVATAR ||=========================== // const Avatar = ({ className, color, outline, size, ...others }) => { const classes = useStyles(); let avatarClass = []; - avatarClass = color - ? outline - ? [classes[color + 'Outline'], ...avatarClass] - : [classes[color + 'Background'], ...avatarClass] - : avatarClass; + const outlineColor = outline ? [classes[`${color}Outline`], ...avatarClass] : [classes[`${color}Background`], ...avatarClass]; + + avatarClass = color ? outlineColor : avatarClass; avatarClass = size ? [classes[size], ...avatarClass] : avatarClass; if (className) { avatarClass = className ? [...avatarClass, className] : avatarClass; diff --git a/src/ui-component/extended/Breadcrumbs.js b/src/ui-component/extended/Breadcrumbs.js index 299b43bb6..9a7ad0578 100644 --- a/src/ui-component/extended/Breadcrumbs.js +++ b/src/ui-component/extended/Breadcrumbs.js @@ -8,8 +8,8 @@ import { Card, CardContent, Divider, Grid, Typography } from '@material-ui/core' import MuiBreadcrumbs from '@material-ui/core/Breadcrumbs'; // project imports -import config from './../../config'; -import { gridSpacing } from './../../store/constant'; +import config from 'config'; +import { gridSpacing } from 'store/constant'; // assets import AccountTreeTwoToneIcon from '@material-ui/icons/AccountTreeTwoTone'; @@ -34,7 +34,7 @@ const useStyles = makeStyles((theme) => ({ }, icon: { marginRight: theme.spacing(0.75), - marginTop: '-' + theme.spacing(0.25), + marginTop: `-${theme.spacing(0.25)}`, width: '1rem', height: '1rem', color: theme.palette.secondary.main @@ -68,7 +68,7 @@ const useStyles = makeStyles((theme) => ({ } })); -//-----------------------|| BREADCRUMBS ||-----------------------// +// ===========================|| BREADCRUMBS ||=========================== // const Breadcrumbs = ({ card, divider, icon, icons, maxItems, navigation, rightAlign, separator, title, titleBottom, ...others }) => { const classes = useStyles(); @@ -76,15 +76,6 @@ const Breadcrumbs = ({ card, divider, icon, icons, maxItems, navigation, rightAl const [main, setMain] = useState([]); const [item, setItem] = useState([]); - useEffect(() => { - navigation.items.map((item, index) => { - if (item.type && item.type === 'group') { - getCollapse(item, index); - } - return false; - }); - }); - // set active item state const getCollapse = (item) => { if (item.children) { @@ -102,6 +93,15 @@ const Breadcrumbs = ({ card, divider, icon, icons, maxItems, navigation, rightAl } }; + useEffect(() => { + navigation.items.map((item, index) => { + if (item.type && item.type === 'group') { + getCollapse(item, index); + } + return false; + }); + }); + // item separator const SeparatorIcon = separator; const separatorIcon = separator ? : '/'; @@ -118,7 +118,8 @@ const Breadcrumbs = ({ card, divider, icon, icons, maxItems, navigation, rightAl contentClass = classes.noPadding; } - let mainContent, itemContent; + let mainContent; + let itemContent; let breadcrumbContent = ''; let itemTitle = ''; let CollapseIcon; @@ -168,7 +169,7 @@ const Breadcrumbs = ({ card, divider, icon, icons, maxItems, navigation, rightAl )} - + {icons && } {icon && } diff --git a/src/ui-component/extended/Transitions.js b/src/ui-component/extended/Transitions.js index bf6274f12..85c011095 100644 --- a/src/ui-component/extended/Transitions.js +++ b/src/ui-component/extended/Transitions.js @@ -4,7 +4,7 @@ import React from 'react'; // material-ui import { Box, Collapse, Fade, Grow, Slide, Zoom } from '@material-ui/core'; -//-----------------------|| TRANSITIONS ||-----------------------// +// ===========================|| TRANSITIONS ||=========================== // const Transitions = React.forwardRef(({ children, position, type, direction, ...others }, ref) => { let positionSX = { diff --git a/src/utils/password-strength.js b/src/utils/password-strength.js index 0395f0230..ee936e37c 100644 --- a/src/utils/password-strength.js +++ b/src/utils/password-strength.js @@ -2,22 +2,16 @@ * Password validator for login pages */ -import value from '../assets/scss/_themes-vars.module.scss'; +import value from 'assets/scss/_themes-vars.module.scss'; // has number -const hasNumber = (value) => { - return new RegExp(/[0-9]/).test(value); -}; +const hasNumber = (number) => new RegExp(/[0-9]/).test(number); // has mix of small and capitals -const hasMixed = (value) => { - return new RegExp(/[a-z]/).test(value) && new RegExp(/[A-Z]/).test(value); -}; +const hasMixed = (number) => new RegExp(/[a-z]/).test(number) && new RegExp(/[A-Z]/).test(number); // has special chars -const hasSpecial = (value) => { - return new RegExp(/[!#@$%^&*)(+=._-]/).test(value); -}; +const hasSpecial = (number) => new RegExp(/[!#@$%^&*)(+=._-]/).test(number); // set color based on password strength export const strengthColor = (count) => { @@ -26,15 +20,16 @@ export const strengthColor = (count) => { if (count < 4) return { label: 'Normal', color: value.orangeMain }; if (count < 5) return { label: 'Good', color: value.successMain }; if (count < 6) return { label: 'Strong', color: value.successDark }; + return false; }; // password strength indicator -export const strengthIndicator = (value) => { +export const strengthIndicator = (number) => { let strengths = 0; - if (value.length > 5) strengths++; - if (value.length > 7) strengths++; - if (hasNumber(value)) strengths++; - if (hasSpecial(value)) strengths++; - if (hasMixed(value)) strengths++; + if (number.length > 5) strengths += 1; + if (number.length > 7) strengths += 1; + if (hasNumber(number)) strengths += 1; + if (hasSpecial(number)) strengths += 1; + if (hasMixed(number)) strengths += 1; return strengths; }; diff --git a/src/views/dashboard/Default/BajajAreaChartCard.js b/src/views/dashboard/Default/BajajAreaChartCard.js index 5b8421864..83f971ae1 100644 --- a/src/views/dashboard/Default/BajajAreaChartCard.js +++ b/src/views/dashboard/Default/BajajAreaChartCard.js @@ -29,7 +29,7 @@ const useStyles = makeStyles((theme) => ({ } })); -//===========================|| DASHBOARD DEFAULT - BAJAJ AREA CHART CARD ||===========================// +//= ==========================|| DASHBOARD DEFAULT - BAJAJ AREA CHART CARD ||===========================// const BajajAreaChartCard = () => { const classes = useStyles(); diff --git a/src/views/dashboard/Default/EarningCard.js b/src/views/dashboard/Default/EarningCard.js index bf6b5cce6..276c8674b 100644 --- a/src/views/dashboard/Default/EarningCard.js +++ b/src/views/dashboard/Default/EarningCard.js @@ -6,11 +6,11 @@ import { makeStyles } from '@material-ui/styles'; import { Avatar, Grid, Menu, MenuItem, Typography } from '@material-ui/core'; // project imports -import MainCard from './../../../ui-component/cards/MainCard'; -import SkeletonEarningCard from './../../../ui-component/cards/Skeleton/EarningCard'; +import MainCard from 'ui-component/cards/MainCard'; +import SkeletonEarningCard from 'ui-component/cards/Skeleton/EarningCard'; // assets -import EarningIcon from './../../../assets/images/icons/earning.svg'; +import EarningIcon from 'assets/images/icons/earning.svg'; import MoreHorizIcon from '@material-ui/icons/MoreHoriz'; import ArrowUpwardIcon from '@material-ui/icons/ArrowUpward'; import GetAppTwoToneIcon from '@material-ui/icons/GetAppOutlined'; @@ -98,7 +98,7 @@ const useStyles = makeStyles((theme) => ({ } })); -//===========================|| DASHBOARD DEFAULT - EARNING CARD ||===========================// +//= ==========================|| DASHBOARD DEFAULT - EARNING CARD ||===========================// const EarningCard = ({ isLoading }) => { const classes = useStyles(); @@ -114,7 +114,7 @@ const EarningCard = ({ isLoading }) => { }; return ( - + <> {isLoading ? ( ) : ( @@ -187,7 +187,7 @@ const EarningCard = ({ isLoading }) => { )} - + ); }; diff --git a/src/views/dashboard/Default/PopularCard.js b/src/views/dashboard/Default/PopularCard.js index 7d895c089..c2229fa8a 100644 --- a/src/views/dashboard/Default/PopularCard.js +++ b/src/views/dashboard/Default/PopularCard.js @@ -7,9 +7,9 @@ import { Avatar, Button, CardActions, CardContent, Divider, Grid, Menu, MenuItem // project imports import BajajAreaChartCard from './BajajAreaChartCard'; -import MainCard from './../../../ui-component/cards/MainCard'; -import SkeletonPopularCard from './../../../ui-component/cards/Skeleton/PopularCard'; -import { gridSpacing } from './../../../store/constant'; +import MainCard from 'ui-component/cards/MainCard'; +import SkeletonPopularCard from 'ui-component/cards/Skeleton/PopularCard'; +import { gridSpacing } from 'store/constant'; // assets import ChevronRightOutlinedIcon from '@material-ui/icons/ChevronRightOutlined'; @@ -56,7 +56,7 @@ const useStyles = makeStyles((theme) => ({ } })); -//-----------------------|| DASHBOARD DEFAULT - POPULAR CARD ||-----------------------// +// ===========================|| DASHBOARD DEFAULT - POPULAR CARD ||=========================== // const PopularCard = ({ isLoading }) => { const classes = useStyles(); @@ -72,7 +72,7 @@ const PopularCard = ({ isLoading }) => { }; return ( - + <> {isLoading ? ( ) : ( @@ -284,7 +284,7 @@ const PopularCard = ({ isLoading }) => { )} - + ); }; diff --git a/src/views/dashboard/Default/TotalGrowthBarChart.js b/src/views/dashboard/Default/TotalGrowthBarChart.js index 9fe4f9ee1..b4c2a6ea7 100644 --- a/src/views/dashboard/Default/TotalGrowthBarChart.js +++ b/src/views/dashboard/Default/TotalGrowthBarChart.js @@ -9,9 +9,9 @@ import ApexCharts from 'apexcharts'; import Chart from 'react-apexcharts'; // project imports -import SkeletonTotalGrowthBarChart from './../../../ui-component/cards/Skeleton/TotalGrowthBarChart'; -import MainCard from './../../../ui-component/cards/MainCard'; -import { gridSpacing } from './../../../store/constant'; +import SkeletonTotalGrowthBarChart from 'ui-component/cards/Skeleton/TotalGrowthBarChart'; +import MainCard from 'ui-component/cards/MainCard'; +import { gridSpacing } from 'store/constant'; // chart data import chartData from './chart-data/total-growth-bar-chart'; @@ -31,13 +31,13 @@ const status = [ } ]; -//-----------------------|| DASHBOARD DEFAULT - TOTAL GROWTH BAR CHART ||-----------------------// +// ===========================|| DASHBOARD DEFAULT - TOTAL GROWTH BAR CHART ||=========================== // const TotalGrowthBarChart = ({ isLoading }) => { const [value, setValue] = React.useState('today'); const theme = useTheme(); - const primary = theme.palette.text.primary; + const { primary } = theme.palette.text; const grey200 = theme.palette.grey[200]; const primary200 = theme.palette.primary[200]; @@ -84,7 +84,7 @@ const TotalGrowthBarChart = ({ isLoading }) => { }, [primary200, primaryDark, secondaryMain, secondaryLight, primary, grey200, isLoading, grey500]); return ( - + <> {isLoading ? ( ) : ( @@ -124,7 +124,7 @@ const TotalGrowthBarChart = ({ isLoading }) => { )} - + ); }; diff --git a/src/views/dashboard/Default/TotalIncomeDarkCard.js b/src/views/dashboard/Default/TotalIncomeDarkCard.js index d75b5d8fc..db3c6afa9 100644 --- a/src/views/dashboard/Default/TotalIncomeDarkCard.js +++ b/src/views/dashboard/Default/TotalIncomeDarkCard.js @@ -6,8 +6,8 @@ import { makeStyles } from '@material-ui/styles'; import { Avatar, List, ListItem, ListItemAvatar, ListItemText, Typography } from '@material-ui/core'; // project imports -import MainCard from './../../../ui-component/cards/MainCard'; -import TotalIncomeCard from './../../../ui-component/cards/Skeleton/TotalIncomeCard'; +import MainCard from 'ui-component/cards/MainCard'; +import TotalIncomeCard from 'ui-component/cards/Skeleton/TotalIncomeCard'; // assets import TableChartOutlinedIcon from '@material-ui/icons/TableChartOutlined'; @@ -24,7 +24,7 @@ const useStyles = makeStyles((theme) => ({ position: 'absolute', width: '210px', height: '210px', - background: 'linear-gradient(210.04deg, ' + theme.palette.primary[200] + ' -50.94%, rgba(144, 202, 249, 0) 83.49%)', + background: `linear-gradient(210.04deg, ${theme.palette.primary[200]} -50.94%, rgba(144, 202, 249, 0) 83.49%)`, borderRadius: '50%', top: '-30px', right: '-180px' @@ -34,7 +34,7 @@ const useStyles = makeStyles((theme) => ({ position: 'absolute', width: '210px', height: '210px', - background: 'linear-gradient(140.9deg, ' + theme.palette.primary[200] + ' -14.02%, rgba(144, 202, 249, 0) 77.58%)', + background: `linear-gradient(140.9deg, ${theme.palette.primary[200]} -14.02%, rgba(144, 202, 249, 0) 77.58%)`, borderRadius: '50%', top: '-160px', right: '-130px' @@ -62,13 +62,13 @@ const useStyles = makeStyles((theme) => ({ } })); -//-----------------------|| DASHBOARD - TOTAL INCOME DARK CARD ||-----------------------// +// ===========================|| DASHBOARD - TOTAL INCOME DARK CARD ||=========================== // const TotalIncomeDarkCard = ({ isLoading }) => { const classes = useStyles(); return ( - + <> {isLoading ? ( ) : ( @@ -101,7 +101,7 @@ const TotalIncomeDarkCard = ({ isLoading }) => { )} - + ); }; diff --git a/src/views/dashboard/Default/TotalIncomeLightCard.js b/src/views/dashboard/Default/TotalIncomeLightCard.js index 4e02173c4..bbbe20f17 100644 --- a/src/views/dashboard/Default/TotalIncomeLightCard.js +++ b/src/views/dashboard/Default/TotalIncomeLightCard.js @@ -6,8 +6,8 @@ import { makeStyles } from '@material-ui/styles'; import { Avatar, List, ListItem, ListItemAvatar, ListItemText, Typography } from '@material-ui/core'; // project imports -import MainCard from './../../../ui-component/cards/MainCard'; -import TotalIncomeCard from './../../../ui-component/cards/Skeleton/TotalIncomeCard'; +import MainCard from 'ui-component/cards/MainCard'; +import TotalIncomeCard from 'ui-component/cards/Skeleton/TotalIncomeCard'; // assets import StorefrontTwoToneIcon from '@material-ui/icons/StorefrontTwoTone'; @@ -22,7 +22,7 @@ const useStyles = makeStyles((theme) => ({ position: 'absolute', width: '210px', height: '210px', - background: 'linear-gradient(210.04deg, ' + theme.palette.warning.dark + ' -50.94%, rgba(144, 202, 249, 0) 83.49%)', + background: `linear-gradient(210.04deg, ${theme.palette.warning.dark} -50.94%, rgba(144, 202, 249, 0) 83.49%)`, borderRadius: '50%', top: '-30px', right: '-180px' @@ -32,7 +32,7 @@ const useStyles = makeStyles((theme) => ({ position: 'absolute', width: '210px', height: '210px', - background: 'linear-gradient(140.9deg, ' + theme.palette.warning.dark + ' -14.02%, rgba(144, 202, 249, 0) 70.50%)', + background: `linear-gradient(140.9deg, ${theme.palette.warning.dark} -14.02%, rgba(144, 202, 249, 0) 70.50%)`, borderRadius: '50%', top: '-160px', right: '-130px' @@ -57,13 +57,13 @@ const useStyles = makeStyles((theme) => ({ } })); -//-----------------------|| DASHBOARD - TOTAL INCOME LIGHT CARD ||-----------------------// +// ===========================|| DASHBOARD - TOTAL INCOME LIGHT CARD ||=========================== // const TotalIncomeLightCard = ({ isLoading }) => { const classes = useStyles(); return ( - + <> {isLoading ? ( ) : ( @@ -92,7 +92,7 @@ const TotalIncomeLightCard = ({ isLoading }) => { )} - + ); }; diff --git a/src/views/dashboard/Default/TotalOrderLineChartCard.js b/src/views/dashboard/Default/TotalOrderLineChartCard.js index a788088e6..3d30cf12a 100644 --- a/src/views/dashboard/Default/TotalOrderLineChartCard.js +++ b/src/views/dashboard/Default/TotalOrderLineChartCard.js @@ -9,8 +9,8 @@ import { Avatar, Button, Grid, Typography } from '@material-ui/core'; import Chart from 'react-apexcharts'; // project imports -import MainCard from './../../../ui-component/cards/MainCard'; -import SkeletonTotalOrderCard from './../../../ui-component/cards/Skeleton/EarningCard'; +import MainCard from 'ui-component/cards/MainCard'; +import SkeletonTotalOrderCard from 'ui-component/cards/Skeleton/EarningCard'; import ChartDataMonth from './chart-data/total-order-month-line-chart'; import ChartDataYear from './chart-data/total-order-year-line-chart'; @@ -95,7 +95,7 @@ const useStyles = makeStyles((theme) => ({ } })); -//-----------------------|| DASHBOARD - TOTAL ORDER LINE CHART CARD ||-----------------------// +// ===========================|| DASHBOARD - TOTAL ORDER LINE CHART CARD ||=========================== // const TotalOrderLineChartCard = ({ isLoading }) => { const classes = useStyles(); @@ -106,7 +106,7 @@ const TotalOrderLineChartCard = ({ isLoading }) => { }; return ( - + <> {isLoading ? ( ) : ( @@ -168,7 +168,7 @@ const TotalOrderLineChartCard = ({ isLoading }) => { )} - + ); }; diff --git a/src/views/dashboard/Default/chart-data/bajaj-area-chart.js b/src/views/dashboard/Default/chart-data/bajaj-area-chart.js index cb8e002ad..9092b9a63 100644 --- a/src/views/dashboard/Default/chart-data/bajaj-area-chart.js +++ b/src/views/dashboard/Default/chart-data/bajaj-area-chart.js @@ -1,4 +1,4 @@ -//-----------------------|| DASHBOARD - BAJAJ AREA CHART ||-----------------------// +// ===========================|| DASHBOARD - BAJAJ AREA CHART ||=========================== // const chartData = { type: 'area', @@ -26,7 +26,7 @@ const chartData = { }, y: { title: { - formatter: (seriesName) => 'Ticket ' + formatter: () => 'Ticket ' } }, marker: { diff --git a/src/views/dashboard/Default/chart-data/total-growth-bar-chart.js b/src/views/dashboard/Default/chart-data/total-growth-bar-chart.js index c1402892b..0bc1ab0b8 100644 --- a/src/views/dashboard/Default/chart-data/total-growth-bar-chart.js +++ b/src/views/dashboard/Default/chart-data/total-growth-bar-chart.js @@ -1,4 +1,4 @@ -//-----------------------|| DASHBOARD - TOTAL GROWTH BAR CHART ||-----------------------// +// ===========================|| DASHBOARD - TOTAL GROWTH BAR CHART ||=========================== // const chartData = { height: 480, diff --git a/src/views/dashboard/Default/chart-data/total-order-month-line-chart.js b/src/views/dashboard/Default/chart-data/total-order-month-line-chart.js index fdc1f187b..afe6ec1d4 100644 --- a/src/views/dashboard/Default/chart-data/total-order-month-line-chart.js +++ b/src/views/dashboard/Default/chart-data/total-order-month-line-chart.js @@ -1,4 +1,4 @@ -//-----------------------|| DASHBOARD - TOTAL ORDER MONTH CHART ||-----------------------// +// ===========================|| DASHBOARD - TOTAL ORDER MONTH CHART ||=========================== // const chartData = { type: 'line', @@ -35,7 +35,7 @@ const chartData = { }, y: { title: { - formatter: (seriesName) => 'Total Order' + formatter: () => 'Total Order' } }, marker: { diff --git a/src/views/dashboard/Default/chart-data/total-order-year-line-chart.js b/src/views/dashboard/Default/chart-data/total-order-year-line-chart.js index d1f3dae52..302c92f6d 100644 --- a/src/views/dashboard/Default/chart-data/total-order-year-line-chart.js +++ b/src/views/dashboard/Default/chart-data/total-order-year-line-chart.js @@ -1,4 +1,4 @@ -//-----------------------|| DASHBOARD - TOTAL ORDER YEAR CHART ||-----------------------// +// ===========================|| DASHBOARD - TOTAL ORDER YEAR CHART ||=========================== // const chartData = { type: 'line', @@ -35,7 +35,7 @@ const chartData = { }, y: { title: { - formatter: (seriesName) => 'Total Order' + formatter: () => 'Total Order' } }, marker: { diff --git a/src/views/dashboard/Default/index.js b/src/views/dashboard/Default/index.js index 1fd51c1e9..b91397699 100644 --- a/src/views/dashboard/Default/index.js +++ b/src/views/dashboard/Default/index.js @@ -10,9 +10,9 @@ import TotalOrderLineChartCard from './TotalOrderLineChartCard'; import TotalIncomeDarkCard from './TotalIncomeDarkCard'; import TotalIncomeLightCard from './TotalIncomeLightCard'; import TotalGrowthBarChart from './TotalGrowthBarChart'; -import { gridSpacing } from './../../../store/constant'; +import { gridSpacing } from 'store/constant'; -//-----------------------|| DEFAULT DASHBOARD ||-----------------------// +// ===========================|| DEFAULT DASHBOARD ||=========================== // const Dashboard = () => { const [isLoading, setLoading] = useState(true); diff --git a/src/views/pages/authentication/AuthCardWrapper.js b/src/views/pages/authentication/AuthCardWrapper.js index e6b9bffd8..c155b12f1 100644 --- a/src/views/pages/authentication/AuthCardWrapper.js +++ b/src/views/pages/authentication/AuthCardWrapper.js @@ -5,7 +5,7 @@ import React from 'react'; import { makeStyles } from '@material-ui/styles'; // project import -import MainCard from './../../../ui-component/cards/MainCard'; +import MainCard from 'ui-component/cards/MainCard'; // style constant const useStyles = makeStyles((theme) => ({ @@ -23,14 +23,14 @@ const useStyles = makeStyles((theme) => ({ } }, content: { - padding: theme.spacing(5) + ' !important', + padding: `${theme.spacing(5)} !important`, [theme.breakpoints.down('lg')]: { - padding: theme.spacing(3) + ' !important' + padding: `${theme.spacing(3)} !important` } } })); -//-----------------------|| AUTHENTICATION CARD WRAPPER ||-----------------------// +// ===========================|| AUTHENTICATION CARD WRAPPER ||=========================== // const AuthCardWrapper = ({ children, ...other }) => { const classes = useStyles(); diff --git a/src/views/pages/authentication/AuthWrapper1.js b/src/views/pages/authentication/AuthWrapper1.js index d3e4f9111..ab3859e2c 100644 --- a/src/views/pages/authentication/AuthWrapper1.js +++ b/src/views/pages/authentication/AuthWrapper1.js @@ -1,7 +1,7 @@ // material-ui import { styled } from '@material-ui/styles'; -//-----------------------|| AUTHENTICATION 1 WRAPPER ||-----------------------// +// ===========================|| AUTHENTICATION 1 WRAPPER ||=========================== // const AuthWrapper1 = styled('div')(({ theme }) => ({ backgroundColor: theme.palette.primary.light, diff --git a/src/views/pages/authentication/authentication3/Login3.js b/src/views/pages/authentication/authentication3/Login3.js index c2f4e1c07..09bcd27fb 100644 --- a/src/views/pages/authentication/authentication3/Login3.js +++ b/src/views/pages/authentication/authentication3/Login3.js @@ -2,19 +2,19 @@ import React from 'react'; import { Link as RouterLink } from 'react-router-dom'; // material-ui -import { useTheme } from '@material-ui/core'; +import { useTheme } from '@material-ui/core/styles'; import { Divider, Grid, Stack, Typography, useMediaQuery } from '@material-ui/core'; // project imports -import AuthWrapper1 from './../AuthWrapper1'; -import AuthCardWrapper from './../AuthCardWrapper'; -import FirebaseLogin from './../firebase-forms/FirebaseLogin'; -import Logo from './../../../../ui-component/Logo'; -import AuthFooter from './../../../../ui-component/cards/AuthFooter'; +import AuthWrapper1 from '../AuthWrapper1'; +import AuthCardWrapper from '../AuthCardWrapper'; +import FirebaseLogin from '../firebase-forms/FirebaseLogin'; +import Logo from 'ui-component/Logo'; +import AuthFooter from 'ui-component/cards/AuthFooter'; // assets -//================================|| AUTH3 - LOGIN ||================================// +//= ===============================|| AUTH3 - LOGIN ||================================// const Login = () => { const theme = useTheme(); @@ -70,7 +70,7 @@ const Login = () => { variant="subtitle1" sx={{ textDecoration: 'none' }} > - Don't have an account? + Don't have an account? diff --git a/src/views/pages/authentication/authentication3/Register3.js b/src/views/pages/authentication/authentication3/Register3.js index 3ad1333f2..5f38d7202 100644 --- a/src/views/pages/authentication/authentication3/Register3.js +++ b/src/views/pages/authentication/authentication3/Register3.js @@ -2,19 +2,19 @@ import React from 'react'; import { Link as RouterLink } from 'react-router-dom'; // material-ui -import { useTheme } from '@material-ui/core'; +import { useTheme } from '@material-ui/core/styles'; import { Divider, Grid, Stack, Typography, useMediaQuery } from '@material-ui/core'; // project imports -import AuthWrapper1 from './../AuthWrapper1'; -import AuthCardWrapper from './../AuthCardWrapper'; -import Logo from './../../../../ui-component/Logo'; -import FirebaseRegister from './../firebase-forms/FirebaseRegister'; -import AuthFooter from './../../../../ui-component/cards/AuthFooter'; +import AuthWrapper1 from '../AuthWrapper1'; +import AuthCardWrapper from '../AuthCardWrapper'; +import Logo from 'ui-component/Logo'; +import FirebaseRegister from '../firebase-forms/FirebaseRegister'; +import AuthFooter from 'ui-component/cards/AuthFooter'; // assets -//===============================|| AUTH3 - REGISTER ||===============================// +//= ==============================|| AUTH3 - REGISTER ||===============================// const Register = () => { const theme = useTheme(); diff --git a/src/views/pages/authentication/firebase-forms/FirebaseLogin.js b/src/views/pages/authentication/firebase-forms/FirebaseLogin.js index 1a530767a..6ed2b314d 100644 --- a/src/views/pages/authentication/firebase-forms/FirebaseLogin.js +++ b/src/views/pages/authentication/firebase-forms/FirebaseLogin.js @@ -26,14 +26,14 @@ import * as Yup from 'yup'; import { Formik } from 'formik'; // project imports -import useScriptRef from '../../../../hooks/useScriptRef'; -import AnimateButton from '../../../../ui-component/extended/AnimateButton'; +import useScriptRef from 'hooks/useScriptRef'; +import AnimateButton from 'ui-component/extended/AnimateButton'; // assets import Visibility from '@material-ui/icons/Visibility'; import VisibilityOff from '@material-ui/icons/VisibilityOff'; -import Google from './../../../../assets/images/icons/social-google.svg'; +import Google from 'assets/images/icons/social-google.svg'; // style constant const useStyles = makeStyles((theme) => ({ @@ -59,8 +59,8 @@ const useStyles = makeStyles((theme) => ({ cursor: 'unset', margin: theme.spacing(2), padding: '5px 56px', - borderColor: theme.palette.grey[100] + ' !important', - color: theme.palette.grey[900] + '!important', + borderColor: `${theme.palette.grey[100]} !important`, + color: `${theme.palette.grey[900]}!important`, fontWeight: 500 }, loginIcon: { @@ -74,7 +74,7 @@ const useStyles = makeStyles((theme) => ({ } })); -//============================|| FIREBASE - LOGIN ||============================// +//= ===========================|| FIREBASE - LOGIN ||============================// const FirebaseLogin = (props, { ...others }) => { const classes = useStyles(); @@ -97,13 +97,13 @@ const FirebaseLogin = (props, { ...others }) => { }; return ( - + <>