diff --git a/.github/workflows/prod.yml b/.github/workflows/prod.yml
index b0680587b..eca85b3e7 100644
--- a/.github/workflows/prod.yml
+++ b/.github/workflows/prod.yml
@@ -31,7 +31,7 @@ jobs:
run: |
cd vite
corepack enable
- yarn set version 4.10.3
+ yarn set version 4.17.1
yarn
yarn build
diff --git a/vite/.env b/vite/.env
index 70d3c4a74..019ddeca7 100644
--- a/vite/.env
+++ b/vite/.env
@@ -1,4 +1,4 @@
-VITE_APP_VERSION=v5.1.0
+VITE_APP_VERSION=v5.2.0
GENERATE_SOURCEMAP=false
## PUBLIC URL
diff --git a/vite/eslint.config.mjs b/vite/eslint.config.mjs
index 0627f768d..86914b321 100644
--- a/vite/eslint.config.mjs
+++ b/vite/eslint.config.mjs
@@ -79,7 +79,7 @@ export default [
}
],
- 'prettier/prettier': 'warn',
+ 'prettier/prettier': 'warn'
}
},
{
diff --git a/vite/index.html b/vite/index.html
index f26df0b30..028f4ddf6 100644
--- a/vite/index.html
+++ b/vite/index.html
@@ -2,22 +2,29 @@
Berry - React Material Free Admin Dashboard Template
-
+
-
+
-
+
+
+
+
+
+
+
+
diff --git a/vite/package.json b/vite/package.json
index eeb22dfba..ea0cef011 100644
--- a/vite/package.json
+++ b/vite/package.json
@@ -1,33 +1,33 @@
{
"name": "berry-material-react-js",
- "version": "5.1.0",
+ "version": "5.2.0",
"private": true,
"dependencies": {
"@emotion/react": "11.14.0",
"@emotion/styled": "11.14.1",
"@fontsource/inter": "5.2.8",
"@fontsource/poppins": "5.2.7",
- "@fontsource/roboto": "5.2.9",
- "@mui/icons-material": "7.3.5",
- "@mui/material": "7.3.5",
- "@tabler/icons-react": "3.35.0",
- "@vitejs/plugin-react": "5.1.1",
- "apexcharts": "5.3.6",
- "framer-motion": "12.23.25",
- "lodash-es": "4.17.21",
- "material-ui-popup-state": "5.3.6",
- "react": "19.2.0",
- "react-apexcharts": "1.9.0",
+ "@fontsource/roboto": "5.2.10",
+ "@mui/icons-material": "9.1.1",
+ "@mui/material": "9.1.2",
+ "@tabler/icons-react": "3.44.0",
+ "@vitejs/plugin-react": "6.0.3",
+ "apexcharts": "5.15.2",
+ "framer-motion": "12.42.0",
+ "lodash-es": "4.18.1",
+ "material-ui-popup-state": "5.3.7",
+ "react": "19.2.7",
+ "react-apexcharts": "2.1.1",
"react-device-detect": "2.2.3",
- "react-dom": "19.2.0",
- "react-router": "7.9.6",
- "react-router-dom": "7.9.6",
+ "react-dom": "19.2.7",
+ "react-router": "7.18.0",
+ "react-router-dom": "7.18.0",
"simplebar-react": "3.3.2",
"slick-carousel": "1.8.1",
- "swr": "2.3.7",
- "vite": "7.2.6",
+ "swr": "2.4.2",
+ "vite": "8.1.0",
"vite-jsconfig-paths": "2.0.1",
- "web-vitals": "5.1.0",
+ "web-vitals": "5.3.0",
"yup": "1.7.1"
},
"scripts": {
@@ -60,15 +60,15 @@
"@eslint/compat": "2.0.0",
"@eslint/eslintrc": "3.3.3",
"@eslint/js": "9.39.1",
- "eslint": "9.39.1",
+ "eslint": "10.5.0",
"eslint-config-prettier": "10.1.8",
"eslint-plugin-jsx-a11y": "6.10.2",
- "eslint-plugin-prettier": "5.5.4",
+ "eslint-plugin-prettier": "5.5.6",
"eslint-plugin-react": "7.37.5",
- "eslint-plugin-react-hooks": "7.0.1",
- "prettier": "3.7.3",
+ "eslint-plugin-react-hooks": "7.1.1",
+ "prettier": "3.8.5",
"prettier-eslint-cli": "8.0.1",
- "sass": "1.94.2"
+ "sass": "1.101.0"
},
- "packageManager": "yarn@4.10.3"
+ "packageManager": "yarn@4.17.1"
}
diff --git a/vite/public/favicon.ico b/vite/public/favicon.ico
new file mode 100644
index 000000000..ed2784d0a
Binary files /dev/null and b/vite/public/favicon.ico differ
diff --git a/vite/src/assets/scss/style.scss b/vite/src/assets/scss/style.scss
index bc611635e..86938a343 100644
--- a/vite/src/assets/scss/style.scss
+++ b/vite/src/assets/scss/style.scss
@@ -60,6 +60,31 @@
background-color: var(--palette-grey-200);
}
+.apexcharts-tooltip {
+ border: none !important;
+ border-radius: 5px !important;
+ background-color: var(--palette-background-paper) !important;
+ color: var(--palette-text-primary) !important;
+ padding: 0 !important;
+}
+
+.apexcharts-tooltip-arrow {
+ display: none !important;
+}
+
+.apexcharts-tooltip-series-group {
+ padding-top: 0px !important;
+ padding-bottom: 0px !important;
+}
+
+.apexcharts-tooltip-title {
+ border-radius: 5px 5px 0 0 !important;
+ background-color: var(--palette-grey-200) !important;
+ border-bottom: 1px solid var(--palette-grey-300) !important;
+ color: var(--palette-text-primary) !important;
+ font-weight: 400 !important;
+}
+
// ==============================|| ANIMATION KEYFRAMES ||============================== //
@keyframes wings {
diff --git a/vite/src/layout/Customization/FontFamily.jsx b/vite/src/layout/Customization/FontFamily.jsx
index 0799bcc27..93aac37a9 100644
--- a/vite/src/layout/Customization/FontFamily.jsx
+++ b/vite/src/layout/Customization/FontFamily.jsx
@@ -51,7 +51,7 @@ export default function FontFamilyPage() {
content={false}
sx={(theme) => ({
p: 0.75,
- bgcolor: fontFamily === item.value ? 'primary.light' : 'grey.50'
+ bgcolor: fontFamily === item.value ? 'primary.lighter' : 'grey.50'
})}
>
- GitHub
+ License
- Figma UI Kit
+ Hire us
+
+
+ Terms
+
+
+ Figma Design System
diff --git a/vite/src/layout/MainLayout/Header/NotificationSection/NotificationList.jsx b/vite/src/layout/MainLayout/Header/NotificationSection/NotificationList.jsx
index b94221847..fb7a8ac8c 100644
--- a/vite/src/layout/MainLayout/Header/NotificationSection/NotificationList.jsx
+++ b/vite/src/layout/MainLayout/Header/NotificationSection/NotificationList.jsx
@@ -18,7 +18,10 @@ import Box from '@mui/material/Box';
import { withAlpha } from 'utils/colorUtils';
// assets
-import { IconBrandTelegram, IconBuildingStore, IconMailbox, IconPhoto } from '@tabler/icons-react';
+import ImageOutlinedIcon from '@mui/icons-material/ImageOutlined';
+import MarkunreadMailboxOutlinedIcon from '@mui/icons-material/MarkunreadMailboxOutlined';
+import SendOutlinedIcon from '@mui/icons-material/SendOutlined';
+import StorefrontOutlinedIcon from '@mui/icons-material/StorefrontOutlined';
import User1 from 'assets/images/users/user-round.svg';
function ListItemWrapper({ children }) {
@@ -84,11 +87,11 @@ export default function NotificationList() {
-
+
Store Verification Done} />
@@ -112,17 +115,17 @@ export default function NotificationList() {
-
+
Check Your Mail.} />
All done! Now check your inbox as you're in for a sweet treat!
- } sx={{ width: 'min-content' }}>
+ } sx={{ width: 'min-content' }}>
Mail
@@ -149,9 +152,9 @@ export default function NotificationList() {
21 Jan 2020
-
-
-
+
+
+
demo.jpg
diff --git a/vite/src/layout/MainLayout/Header/NotificationSection/index.jsx b/vite/src/layout/MainLayout/Header/NotificationSection/index.jsx
index c094c4d6a..e93e37ffb 100644
--- a/vite/src/layout/MainLayout/Header/NotificationSection/index.jsx
+++ b/vite/src/layout/MainLayout/Header/NotificationSection/index.jsx
@@ -79,7 +79,7 @@ export default function NotificationSection() {
}, [open]);
const handleChange = (event) => {
- event?.target.value && setValue(event?.target.value);
+ if (event?.target.value) setValue(event?.target.value);
};
return (
@@ -91,12 +91,13 @@ export default function NotificationSection() {
...theme.typography.commonAvatar,
...theme.typography.mediumAvatar,
transition: 'all .2s ease-in-out',
- color: theme.vars.palette.warning.dark,
- background: theme.vars.palette.warning.light,
+ color: theme.vars.palette.warning.main,
+ background: theme.vars.palette.warning.lighter,
'&:hover, &[aria-controls="menu-list-grow"]': {
- color: theme.vars.palette.warning.light,
- background: theme.vars.palette.warning.dark
- }
+ color: theme.vars.palette.warning.lighter,
+ background: theme.vars.palette.warning.main
+ },
+ svg: { width: 20, height: 20 }
}}
ref={anchorRef}
aria-controls={open ? 'menu-list-grow' : undefined}
@@ -120,12 +121,12 @@ export default function NotificationSection() {
-
+
All Notification
-
+
Mark as all read
@@ -153,9 +154,7 @@ export default function NotificationSection() {
-
+
diff --git a/vite/src/layout/MainLayout/Header/ProfileSection/UpgradePlanCard.jsx b/vite/src/layout/MainLayout/Header/ProfileSection/UpgradePlanCard.jsx
index 1049c29b3..4ca5a688e 100644
--- a/vite/src/layout/MainLayout/Header/ProfileSection/UpgradePlanCard.jsx
+++ b/vite/src/layout/MainLayout/Header/ProfileSection/UpgradePlanCard.jsx
@@ -23,7 +23,7 @@ export default function UpgradePlanCard() {
return (
}
label={}
@@ -115,7 +113,7 @@ export default function ProfileSection() {
{open && (
-
+
@@ -127,18 +125,19 @@ export default function ProfileSection() {
Project Admin
setValue(e.target.value)}
placeholder="Search profile options"
startAdornment={
-
+
}
+ sx={{ my: 2 }}
aria-describedby="search-helper-text"
- slotProps={{ input: { 'aria-label': 'weight' } }}
+ slotProps={{ input: { 'aria-label': 'profile options' } }}
/>
@@ -154,7 +153,7 @@ export default function ProfileSection() {
>
-
+
diff --git a/vite/src/layout/MainLayout/Header/SearchSection/index.jsx b/vite/src/layout/MainLayout/Header/SearchSection/index.jsx
index 2237c1169..8ebc84c0a 100644
--- a/vite/src/layout/MainLayout/Header/SearchSection/index.jsx
+++ b/vite/src/layout/MainLayout/Header/SearchSection/index.jsx
@@ -30,12 +30,11 @@ function HeaderAvatar({ children, ref, ...others }) {
sx={{
...theme.typography.commonAvatar,
...theme.typography.mediumAvatar,
- color: theme.vars.palette.secondary.dark,
- background: theme.vars.palette.secondary.light,
- '&:hover': {
- color: theme.vars.palette.secondary.light,
- background: theme.vars.palette.secondary.dark
- }
+ color: 'secondary.dark',
+ bgcolor: 'secondary.lighter',
+ '&:hover': { color: 'secondary.lighter', bgcolor: 'secondary.dark' },
+
+ svg: { width: 20, height: 20 }
}}
{...others}
>
@@ -71,9 +70,9 @@ function MobileSearch({ value, setValue, popupState }) {
sx={{
...theme.typography.commonAvatar,
...theme.typography.mediumAvatar,
- bgcolor: 'orange.light',
- color: 'orange.dark',
- '&:hover': { bgcolor: 'orange.dark', color: 'orange.light' }
+ bgcolor: 'error.lighter',
+ color: 'error.dark',
+ '&:hover': { bgcolor: 'error.dark', color: 'error.lighter' }
}}
{...bindToggle(popupState)}
>
diff --git a/vite/src/layout/MainLayout/Header/index.jsx b/vite/src/layout/MainLayout/Header/index.jsx
index c2bf2ae10..4aba2d62d 100644
--- a/vite/src/layout/MainLayout/Header/index.jsx
+++ b/vite/src/layout/MainLayout/Header/index.jsx
@@ -38,16 +38,15 @@ export default function Header() {
...theme.typography.mediumAvatar,
overflow: 'hidden',
transition: 'all .2s ease-in-out',
- color: theme.vars.palette.secondary.dark,
- background: theme.vars.palette.secondary.light,
- '&:hover': {
- color: theme.vars.palette.secondary.light,
- background: theme.vars.palette.secondary.dark
- }
+ bgcolor: 'secondary.lighter',
+ color: 'secondary.dark',
+ '&:hover': { color: 'secondary.lighter', bgcolor: 'secondary.dark' },
+
+ svg: { width: 20, height: 20 }
}}
onClick={() => handlerDrawerOpen(!drawerOpen)}
>
-
+
diff --git a/vite/src/layout/MainLayout/MainContentStyled.js b/vite/src/layout/MainLayout/MainContentStyled.js
index a41e3986c..9aa419386 100644
--- a/vite/src/layout/MainLayout/MainContentStyled.js
+++ b/vite/src/layout/MainLayout/MainContentStyled.js
@@ -2,7 +2,7 @@
import { styled } from '@mui/material/styles';
// project imports
-import { drawerWidth } from 'store/constant';
+import { drawerWidth, HEADER_HEIGHT } from 'store/constant';
// ==============================|| MAIN LAYOUT - STYLED ||============================== //
@@ -12,10 +12,10 @@ const MainContentStyled = styled('main', {
backgroundColor: theme.vars.palette.grey[100],
minWidth: '1%',
width: '100%',
- minHeight: 'calc(100vh - 88px)',
+ minHeight: `calc(100vh - ${HEADER_HEIGHT}px)`,
flexGrow: 1,
padding: 20,
- marginTop: 88,
+ marginTop: HEADER_HEIGHT,
marginRight: 20,
borderRadius: `${borderRadius}px`,
borderBottomLeftRadius: 0,
@@ -28,7 +28,7 @@ const MainContentStyled = styled('main', {
[theme.breakpoints.up('md')]: {
marginLeft: -(drawerWidth - 72),
width: `calc(100% - ${drawerWidth}px)`,
- marginTop: 88
+ marginTop: HEADER_HEIGHT
}
}),
...(open && {
@@ -37,16 +37,16 @@ const MainContentStyled = styled('main', {
duration: theme.transitions.duration.shorter + 200
}),
marginLeft: 0,
- marginTop: 88,
+ marginTop: HEADER_HEIGHT,
width: `calc(100% - ${drawerWidth}px)`,
[theme.breakpoints.up('md')]: {
- marginTop: 88
+ marginTop: HEADER_HEIGHT
}
}),
[theme.breakpoints.down('md')]: {
marginLeft: 20,
padding: 16,
- marginTop: 88,
+ marginTop: HEADER_HEIGHT,
...(!open && {
width: `calc(100% - ${drawerWidth}px)`
})
diff --git a/vite/src/layout/MainLayout/MenuList/NavCollapse/index.jsx b/vite/src/layout/MainLayout/MenuList/NavCollapse/index.jsx
index 81429a494..19bd9f3dd 100644
--- a/vite/src/layout/MainLayout/MenuList/NavCollapse/index.jsx
+++ b/vite/src/layout/MainLayout/MenuList/NavCollapse/index.jsx
@@ -164,11 +164,11 @@ export default function NavCollapse({ menu, level, parentId }) {
height: 46,
alignItems: 'center',
justifyContent: 'center',
- '&:hover': { bgcolor: 'secondary.light' },
+ '&:hover': { bgcolor: 'secondary.lighter' },
...((isSelected || anchorEl) && {
- bgcolor: 'secondary.light',
- '&:hover': { bgcolor: 'secondary.light' }
+ bgcolor: 'secondary.lighter',
+ '&:hover': { bgcolor: 'secondary.lighter' }
})
})
}}
@@ -278,7 +278,7 @@ export default function NavCollapse({ menu, level, parentId }) {
height: '100%',
width: '1px',
opacity: 1,
- bgcolor: 'primary.light'
+ bgcolor: 'primary.lighter'
}
}}
>
diff --git a/vite/src/layout/MainLayout/MenuList/NavGroup/index.jsx b/vite/src/layout/MainLayout/MenuList/NavGroup/index.jsx
index 7bcf802dc..87ce3a57c 100644
--- a/vite/src/layout/MainLayout/MenuList/NavGroup/index.jsx
+++ b/vite/src/layout/MainLayout/MenuList/NavGroup/index.jsx
@@ -145,6 +145,5 @@ NavGroup.propTypes = {
lastItem: PropTypes.number,
remItems: PropTypes.array,
lastItemId: PropTypes.string,
- selectedID: PropTypes.oneOfType([PropTypes.any, PropTypes.string]),
setSelectedID: PropTypes.oneOfType([PropTypes.any, PropTypes.func])
};
diff --git a/vite/src/layout/MainLayout/MenuList/NavItem/index.jsx b/vite/src/layout/MainLayout/MenuList/NavItem/index.jsx
index 7acbde1f5..1528f6f00 100644
--- a/vite/src/layout/MainLayout/MenuList/NavItem/index.jsx
+++ b/vite/src/layout/MainLayout/MenuList/NavItem/index.jsx
@@ -5,7 +5,6 @@ import { Link, matchPath, useLocation } from 'react-router-dom';
// material-ui
import { useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';
-import Avatar from '@mui/material/Avatar';
import ButtonBase from '@mui/material/ButtonBase';
import Chip from '@mui/material/Chip';
import ListItemButton from '@mui/material/ListItemButton';
@@ -106,10 +105,10 @@ export default function NavItem({ item, level, isParents = false, setSelectedID
height: 46,
alignItems: 'center',
justifyContent: 'center',
- '&:hover': { bgcolor: 'secondary.light' },
+ '&:hover': { bgcolor: 'secondary.lighter' },
...(isSelected && {
- bgcolor: 'secondary.light',
- '&:hover': { bgcolor: 'secondary.light' }
+ bgcolor: 'secondary.lighter',
+ '&:hover': { bgcolor: 'secondary.lighter' }
})
})
}}
@@ -164,11 +163,7 @@ export default function NavItem({ item, level, isParents = false, setSelectedID
variant={item.chip?.variant}
size={item.chip?.size}
label={item.chip?.label}
- avatar={
-
- {item.chip?.avatar}
-
- }
+ avatar={item.chip?.avatar}
/>
diff --git a/vite/src/layout/MainLayout/Sidebar/MenuCard/index.jsx b/vite/src/layout/MainLayout/Sidebar/MenuCard/index.jsx
index a09a3f162..e8a2b8ea1 100644
--- a/vite/src/layout/MainLayout/Sidebar/MenuCard/index.jsx
+++ b/vite/src/layout/MainLayout/Sidebar/MenuCard/index.jsx
@@ -2,7 +2,6 @@ import PropTypes from 'prop-types';
import { memo } from 'react';
// material-ui
-import { useTheme } from '@mui/material/styles';
import Avatar from '@mui/material/Avatar';
import Card from '@mui/material/Card';
import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress';
@@ -23,12 +22,7 @@ function LinearProgressWithLabel({ value, ...others }) {
return (
-
+
Progress
{`${Math.round(value)}%`}
@@ -38,17 +32,7 @@ function LinearProgressWithLabel({ value, ...others }) {
variant="determinate"
value={value}
{...others}
- sx={{
- height: 10,
- borderRadius: 30,
- [`&.${linearProgressClasses.colorPrimary}`]: {
- bgcolor: 'background.paper'
- },
- [`& .${linearProgressClasses.bar}`]: {
- borderRadius: 5,
- bgcolor: 'primary.dark'
- }
- }}
+ sx={{ height: 10, borderRadius: 30, [`& .${linearProgressClasses.bar}`]: { borderRadius: 5 } }}
/>
);
@@ -57,12 +41,10 @@ function LinearProgressWithLabel({ value, ...others }) {
// ==============================|| SIDEBAR - MENU CARD ||============================== //
function MenuCard() {
- const theme = useTheme();
-
return (
-
+
Get Extra Space
diff --git a/vite/src/serviceWorker.jsx b/vite/src/serviceWorker.jsx
index 342e5be45..0692da705 100644
--- a/vite/src/serviceWorker.jsx
+++ b/vite/src/serviceWorker.jsx
@@ -12,10 +12,10 @@
const isLocalhost = Boolean(
window.location.hostname === 'localhost' ||
- // [::1] is the IPv6 localhost address.
- window.location.hostname === '[::1]' ||
- // 127.0.0.0/8 are considered localhost for IPv4.
- window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
+ // [::1] is the IPv6 localhost address.
+ window.location.hostname === '[::1]' ||
+ // 127.0.0.0/8 are considered localhost for IPv4.
+ window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
);
const publicURL = import.meta.env.PUBLIC_URL || '';
diff --git a/vite/src/store/constant.js b/vite/src/store/constant.js
index 75da000c8..70cb4805f 100644
--- a/vite/src/store/constant.js
+++ b/vite/src/store/constant.js
@@ -2,3 +2,4 @@
export const gridSpacing = 3;
export const drawerWidth = 260;
export const appDrawerWidth = 320;
+export const HEADER_HEIGHT = 80;
diff --git a/vite/src/themes/overrides/Alert.jsx b/vite/src/themes/overrides/Alert.jsx
index 4bc7dbcd5..c8c2eb286 100644
--- a/vite/src/themes/overrides/Alert.jsx
+++ b/vite/src/themes/overrides/Alert.jsx
@@ -63,11 +63,16 @@ export default function Alert(theme) {
alignItems: 'center',
variants: [
{ props: { variant: 'standard' }, style: standardVariant },
- { props: { variant: 'outlined' }, style: outlinedVariant },
+ {
+ props: { variant: 'outlined' },
+ style: (args) => ({
+ ...outlinedVariant(args),
+ border: '1px dashed'
+ })
+ },
{ props: { variant: 'filled' }, style: filledVariant }
]
- },
- outlined: { border: '1px dashed' }
+ }
}
}
};
diff --git a/vite/src/themes/overrides/Button.jsx b/vite/src/themes/overrides/Button.jsx
index d3bc0777b..8aecad48c 100644
--- a/vite/src/themes/overrides/Button.jsx
+++ b/vite/src/themes/overrides/Button.jsx
@@ -1,20 +1,71 @@
+// project imports
+import { withAlpha } from 'utils/colorUtils';
+
// ==============================|| OVERRIDES - BUTTON ||============================== //
export default function Button(theme) {
+ const disabledButtonBackground = withAlpha(theme.vars.palette.grey[100], 0.5);
+
return {
- MuiSlider: {
+ MuiButton: {
+ defaultProps: {
+ disableElevation: true
+ },
styleOverrides: {
root: {
+ borderRadius: 8,
+
'&.Mui-disabled': {
- color: theme.vars.palette.grey[300]
+ cursor: 'not-allowed',
+ pointerEvents: 'auto',
+ '&.MuiButton-contained': {
+ backgroundColor: disabledButtonBackground
+ },
+ '&:hover': {
+ backgroundColor: 'transparent',
+ '&.MuiButton-contained': {
+ backgroundColor: disabledButtonBackground
+ }
+ }
+ },
+
+ // loading styles
+ '&.MuiButton-loading': {
+ '.MuiButton-loadingIndicator': { position: 'relative' },
+
+ // Styles specific to loadingPositionEnd
+ '&.MuiButton-loadingPositionEnd': {
+ '.MuiButton-loadingIndicator': { right: 'unset', marginLeft: 8 },
+ '.MuiButton-endIcon': { display: 'none' }
+ },
+
+ // Styles specific to loadingPositionStart
+ '&.MuiButton-loadingPositionStart': {
+ '.MuiButton-loadingIndicator': { left: 'unset', marginRight: 8 },
+ '.MuiButton-startIcon': { display: 'none' }
+ }
}
},
- mark: {
- backgroundColor: theme.vars.palette.background.paper,
- width: '4px'
+ sizeSmall: {
+ height: 36,
+ fontSize: 12,
+ lineHeight: '20px',
+ letterSpacing: 0,
+ padding: '8px 16px'
+ },
+ sizeMedium: {
+ height: 44,
+ fontSize: 14,
+ lineHeight: '20px',
+ letterSpacing: 0,
+ padding: '12px 16px'
},
- valueLabel: {
- color: theme.vars.palette.primary.light
+ sizeLarge: {
+ height: 52,
+ fontSize: 16,
+ lineHeight: '20px',
+ letterSpacing: 0,
+ padding: 16
}
}
}
diff --git a/vite/src/themes/overrides/Chip.jsx b/vite/src/themes/overrides/Chip.jsx
index 37fe130dd..50471f271 100644
--- a/vite/src/themes/overrides/Chip.jsx
+++ b/vite/src/themes/overrides/Chip.jsx
@@ -1,9 +1,6 @@
-// project imports
-import { withAlpha } from 'utils/colorUtils';
-
// ===============================|| OVERRIDES - CHIP ||=============================== //
-export default function Chip(theme) {
+export default function Chip() {
return {
MuiChip: {
defaultProps: {
@@ -14,9 +11,8 @@ export default function Chip(theme) {
root: {
variants: [
{
- props: { variant: 'light' }, // Variant for light Chip
+ props: { variant: 'light' },
style: ({ ownerState, theme }) => {
- // Make sure color exists and is a key of palette
const colorKey = ownerState.color;
const paletteColor = theme.vars.palette[colorKey];
@@ -24,45 +20,48 @@ export default function Chip(theme) {
return {
color: paletteColor.main,
- backgroundColor: paletteColor.light,
-
- ...(ownerState.color === 'error' && {
- backgroundColor: withAlpha(paletteColor.light, 0.25)
- }),
- ...(ownerState.color === 'success' && {
- backgroundColor: withAlpha(paletteColor.light, 0.5)
- }),
- ...((ownerState.color === 'warning' || ownerState.color === 'success') && {
- color: paletteColor.dark
- }),
+ backgroundColor: paletteColor.lighter,
'&.MuiChip-clickable': {
'&:hover': {
- color: paletteColor.light,
- backgroundColor: paletteColor.dark
+ color: paletteColor.lighter,
+ backgroundColor: paletteColor.main
}
}
};
}
- },
- {
- props: { variant: 'outlined', color: 'warning' },
- style: {
- borderColor: theme.vars.palette.warning.dark,
- color: theme.vars.palette.warning.dark
- }
- },
- {
- props: { variant: 'outlined', color: 'success' },
- style: {
- borderColor: theme.vars.palette.success.dark,
- color: theme.vars.palette.success.dark
- }
}
],
'&.MuiChip-deletable .MuiChip-deleteIcon': {
color: 'inherit'
}
+ },
+ sizeMedium: {
+ height: 28
+ },
+ deleteIconMedium: {
+ fontSize: 20,
+ marginRight: 4
+ },
+ labelMedium: ({ ownerState }) => ({
+ paddingLeft: ownerState.variant === 'outlined' ? 9 : 10,
+ paddingRight: ownerState.variant === 'outlined' ? 9 : 10
+ }),
+ avatarMedium: {
+ width: 20,
+ height: 20,
+ fontSize: 10
+ },
+ avatar: ({ ownerState, theme }) => {
+ const colorKey = ownerState.color;
+ const paletteColor = theme.vars.palette[colorKey];
+
+ if (!paletteColor) return {};
+
+ return {
+ backgroundColor: paletteColor.main,
+ color: theme.vars.palette.common.white
+ };
}
}
}
diff --git a/vite/src/themes/overrides/DataGrid.jsx b/vite/src/themes/overrides/DataGrid.jsx
index 6a9d01ab6..f581567b7 100644
--- a/vite/src/themes/overrides/DataGrid.jsx
+++ b/vite/src/themes/overrides/DataGrid.jsx
@@ -1,3 +1,6 @@
+// project imports
+import { withAlpha } from 'utils/colorUtils';
+
// ==============================|| OVERRIDES - DATA GRID ||============================== //
export default function DataGrid(theme) {
@@ -19,12 +22,16 @@ export default function DataGrid(theme) {
},
'& .MuiFormControl-root>.MuiInputBase-root': {
- backgroundColor: `${theme.vars.palette.background.default} !important`,
+ backgroundColor: `${theme.vars.palette.background.default} !important`
+ },
+
+ '--DataGrid-rowBorderColor': `${theme.vars.palette.divider} !important`,
+ '& .MuiDataGrid-filler, & .MuiDataGrid-toolbar': {
borderColor: `${theme.vars.palette.divider} !important`
}
},
withBorderColor: {
- borderColor: theme.vars.palette.divider
+ borderColor: `${withAlpha(theme.vars.palette.divider, 0.5)} !important`
},
toolbarContainer: {
'& .MuiButton-root': {
@@ -34,10 +41,14 @@ export default function DataGrid(theme) {
},
columnHeader: {
color: theme.vars.palette.grey[600],
+ borderColor: `${theme.vars.palette.divider} !important`,
+
paddingLeft: 24,
paddingRight: 24
},
footerContainer: {
+ paddingLeft: 24,
+ paddingRight: 24,
'&.MuiDataGrid-withBorderColor': {
borderBottom: 'none'
}
@@ -54,17 +65,17 @@ export default function DataGrid(theme) {
borderWidth: 1,
paddingLeft: 24,
paddingRight: 24,
- borderColor: theme.vars.palette.divider,
+ borderColor: `${withAlpha(theme.vars.palette.divider, 0.5)} !important`,
'&.MuiDataGrid-cell--withRenderer > div': {
' > .high': {
- background: theme.vars.palette.success.light
+ background: theme.vars.palette.success.lighter
},
'& > .medium': {
- background: theme.vars.palette.warning.light
+ background: theme.vars.palette.warning.lighter
},
'& > .low': {
- background: theme.vars.palette.error.light
+ background: theme.vars.palette.error.lighter
}
}
}
diff --git a/vite/src/themes/overrides/DialogActions.js b/vite/src/themes/overrides/DialogActions.js
new file mode 100644
index 000000000..da73931c7
--- /dev/null
+++ b/vite/src/themes/overrides/DialogActions.js
@@ -0,0 +1,13 @@
+// ==============================|| OVERRIDES - DIALOG ACTIONS ||============================== //
+
+export default function DialogActions() {
+ return {
+ MuiDialogActions: {
+ styleOverrides: {
+ root: {
+ padding: 24
+ }
+ }
+ }
+ };
+}
diff --git a/vite/src/themes/overrides/IconButton.js b/vite/src/themes/overrides/IconButton.js
new file mode 100644
index 000000000..463b608f7
--- /dev/null
+++ b/vite/src/themes/overrides/IconButton.js
@@ -0,0 +1,74 @@
+// project imports
+import { withAlpha } from 'utils/colorUtils';
+
+const colors = ['primary', 'secondary', 'success', 'error', 'warning', 'info'];
+
+// ==============================|| OVERRIDES - ICON BUTTON ||============================== //
+
+export default function IconButton(theme) {
+ const createColorVariant = (color, variant, styleFn, theme) => {
+ const paletteColor = theme.vars.palette[color];
+ return {
+ props: { variant, color },
+ style: styleFn(paletteColor)
+ };
+ };
+
+ const commonDisabledStyles = {
+ '&.Mui-disabled': {
+ backgroundColor: withAlpha(theme.vars.palette.grey[100], 0.5)
+ },
+ '&.Mui-disabled:not(.MuiIconButton-loading)': {
+ color: theme.vars.palette.action.disabled
+ }
+ };
+
+ const colorContainedVariants = colors.map((color) =>
+ createColorVariant(
+ color,
+ 'contained',
+ (paletteColor) => ({
+ color: paletteColor.contrastText,
+ backgroundColor: paletteColor.main,
+ '&:hover': {
+ backgroundColor: paletteColor.dark
+ },
+ ...commonDisabledStyles
+ }),
+ theme
+ )
+ );
+
+ const colorOutlinedVariants = colors.map((color) =>
+ createColorVariant(
+ color,
+ 'outlined',
+ (paletteColor) => ({
+ color: paletteColor.main,
+ border: `1px solid ${paletteColor.main}`,
+ '&.Mui-disabled': {
+ borderColor: theme.vars.palette.action.disabledBackground
+ }
+ }),
+ theme
+ )
+ );
+
+ return {
+ MuiIconButton: {
+ styleOverrides: {
+ root: {
+ borderRadius: 8,
+ '&.Mui-disabled': {
+ pointerEvents: 'auto',
+ cursor: 'not-allowed'
+ },
+ variants: [...colorContainedVariants, ...colorOutlinedVariants]
+ },
+ sizeSmall: { width: 36, height: 36 },
+ sizeMedium: { width: 44, height: 44 },
+ sizeLarge: { width: 52, height: 52 }
+ }
+ }
+ };
+}
diff --git a/vite/src/themes/overrides/InputLabel.js b/vite/src/themes/overrides/InputLabel.js
new file mode 100644
index 000000000..b0ec0e5a1
--- /dev/null
+++ b/vite/src/themes/overrides/InputLabel.js
@@ -0,0 +1,18 @@
+// ==============================|| OVERRIDES - INPUT LABEL ||============================== //
+
+export default function InputLabel() {
+ return {
+ MuiInputLabel: {
+ styleOverrides: {
+ root: {
+ '.MuiFormControl-root:has(.MuiInputBase-sizeSmall) > &.MuiInputLabel-outlined': {
+ transform: `translate(14px, 12px) scale(1)`
+ },
+ '.MuiFormControl-root:has(.MuiInputBase-sizeSmall) > &.MuiInputLabel-outlined.MuiInputLabel-shrink': {
+ transform: `translate(14px, -9px) scale(0.75)`
+ }
+ }
+ }
+ }
+ };
+}
diff --git a/vite/src/themes/overrides/ListItemButton.jsx b/vite/src/themes/overrides/ListItemButton.jsx
index fea9dc8c8..378109420 100644
--- a/vite/src/themes/overrides/ListItemButton.jsx
+++ b/vite/src/themes/overrides/ListItemButton.jsx
@@ -11,9 +11,9 @@ export default function ListItemButton(theme) {
'&.Mui-selected': {
color: theme.vars.palette.secondary.dark,
- backgroundColor: theme.vars.palette.secondary.light,
+ backgroundColor: theme.vars.palette.secondary.lighter,
'&:hover': {
- backgroundColor: theme.vars.palette.secondary.light
+ backgroundColor: theme.vars.palette.secondary.lighter
},
'& .MuiListItemIcon-root': {
color: theme.vars.palette.secondary.dark
@@ -21,7 +21,7 @@ export default function ListItemButton(theme) {
},
'&:hover': {
- backgroundColor: theme.vars.palette.secondary.light,
+ backgroundColor: theme.vars.palette.secondary.lighter,
color: theme.vars.palette.secondary.dark,
'& .MuiListItemIcon-root': {
color: theme.vars.palette.secondary.dark
diff --git a/vite/src/themes/overrides/OutlinedInput.jsx b/vite/src/themes/overrides/OutlinedInput.jsx
index 844093fd1..56ae98019 100644
--- a/vite/src/themes/overrides/OutlinedInput.jsx
+++ b/vite/src/themes/overrides/OutlinedInput.jsx
@@ -3,43 +3,37 @@
export default function OutlinedInput(theme, borderRadius, outlinedFilled) {
return {
MuiOutlinedInput: {
+ defaultProps: {
+ size: 'small'
+ },
styleOverrides: {
root: {
background: outlinedFilled ? theme.vars.palette.grey[50] : 'transparent',
borderRadius: `${borderRadius}px`,
+ paddingLeft: 14,
+ paddingRight: 14,
- '& .MuiOutlinedInput-notchedOutline': {
- borderColor: theme.vars.palette.grey[400]
+ '&:hover .MuiOutlinedInput-notchedOutline': {
+ borderColor: theme.vars.palette.primary.lighter
},
- '&:hover $notchedOutline': {
- borderColor: theme.vars.palette.primary.light
+ '&.Mui-disabled': {
+ cursor: 'not-allowed',
+ input: { cursor: 'not-allowed' },
+ '& .MuiOutlinedInput-notchedOutline': { borderColor: theme.vars.palette.divider }
},
-
- '&.MuiInputBase-multiline': {
- padding: 1
- }
- },
- input: {
- fontWeight: 500,
- background: outlinedFilled ? theme.vars.palette.grey[50] : 'transparent',
- padding: '15.5px 14px',
- borderRadius: `${borderRadius}px`,
-
- '&.MuiInputBase-inputSizeSmall': {
- padding: '10px 14px',
-
- '&.MuiInputBase-inputAdornedStart': {
- paddingLeft: 0
+ variants: [
+ {
+ props: { size: 'small' },
+ style: {
+ '& input': { paddingTop: 12, paddingBottom: 12, height: 20 }
+ }
}
- }
- },
- inputAdornedStart: {
- paddingLeft: 4
+ ]
},
- notchedOutline: {
- borderRadius: `${borderRadius}px`
- }
+ multiline: { padding: `12px 14px` },
+ notchedOutline: { borderColor: theme.vars.palette.divider },
+ input: { paddingLeft: 0, paddingRight: 0 }
}
}
};
diff --git a/vite/src/themes/overrides/Select.jsx b/vite/src/themes/overrides/Select.jsx
index 9e68a9b84..45872de02 100644
--- a/vite/src/themes/overrides/Select.jsx
+++ b/vite/src/themes/overrides/Select.jsx
@@ -3,8 +3,21 @@
export default function Select() {
return {
MuiSelect: {
+ defaultProps: {
+ size: 'small'
+ },
styleOverrides: {
+ root: {
+ variants: [
+ {
+ props: { size: 'small' },
+ style: { '& .MuiSelect-select': { paddingTop: 12, paddingBottom: 12 } }
+ }
+ ]
+ },
select: {
+ height: 20,
+ minHeight: `unset`,
'&:focus': {
backgroundColor: 'transparent'
}
diff --git a/vite/src/themes/overrides/Slider.jsx b/vite/src/themes/overrides/Slider.jsx
index b0be7a951..80d2c8f62 100644
--- a/vite/src/themes/overrides/Slider.jsx
+++ b/vite/src/themes/overrides/Slider.jsx
@@ -14,7 +14,8 @@ export default function Slider(theme) {
width: '4px'
},
valueLabel: {
- color: theme.vars.palette.primary.light
+ backgroundColor: theme.vars.palette.grey[700],
+ color: theme.vars.palette.primary.lighter
}
}
}
diff --git a/vite/src/themes/overrides/Switch.js b/vite/src/themes/overrides/Switch.js
new file mode 100644
index 000000000..2c0bd00aa
--- /dev/null
+++ b/vite/src/themes/overrides/Switch.js
@@ -0,0 +1,15 @@
+/*************************** OVERRIDES - SWITCH ***************************/
+
+export default function Switch(theme) {
+ return {
+ MuiSwitch: {
+ styleOverrides: {
+ root: {
+ '& .MuiSwitch-switchBase.Mui-disabled .MuiSwitch-thumb': {
+ backgroundColor: theme.vars.palette.grey[300]
+ }
+ }
+ }
+ }
+ };
+}
diff --git a/vite/src/themes/overrides/TableCell.jsx b/vite/src/themes/overrides/TableCell.jsx
index 6612c37f7..dbd0577de 100644
--- a/vite/src/themes/overrides/TableCell.jsx
+++ b/vite/src/themes/overrides/TableCell.jsx
@@ -5,14 +5,16 @@ export default function TableCell(theme) {
MuiTableCell: {
styleOverrides: {
root: {
- borderColor: theme.vars.palette.grey[200],
-
- '&.MuiTableCell-head': {
- fontSize: '0.875rem',
- color: theme.vars.palette.grey[900],
- fontWeight: 500
+ borderColor: theme.vars.palette.grey[200]
+ },
+ head: {
+ color: theme.vars.palette.grey[900],
+ ':has(.MuiCheckbox-root)': {
+ paddingTop: 7,
+ paddingBottom: 7
}
- }
+ },
+ body: { paddingTop: 14, paddingBottom: 14 }
}
}
};
diff --git a/vite/src/themes/overrides/index.js b/vite/src/themes/overrides/index.js
index 992bdf364..dc904e997 100644
--- a/vite/src/themes/overrides/index.js
+++ b/vite/src/themes/overrides/index.js
@@ -14,15 +14,20 @@ import DataGrid from './DataGrid';
import DatePicker from './DatePicker';
import Divider from './Divider';
import DateTimePickerToolbar from './DateTimePickerToolbar';
+import DialogActions from './DialogActions';
import Dialog from './Dialog';
import DialogTitle from './DialogTitle';
+import IconButton from './IconButton';
import InputBase from './InputBase';
+import InputLabel from './InputLabel';
import ListItemButton from './ListItemButton';
import ListItemIcon from './ListItemIcon';
import ListItemText from './ListItemText';
+import OutlinedInput from './OutlinedInput';
import Paper from './Paper';
import Select from './Select';
import Slider from './Slider';
+import Switch from './Switch';
import TableCell from './TableCell';
import Tabs from './Tabs';
import Typography from './Typography';
@@ -42,16 +47,21 @@ export default function ComponentsOverrides(theme, borderRadius, outlinedFilled)
DataGrid(theme),
DatePicker(),
DateTimePickerToolbar(),
+ DialogActions(),
Dialog(),
DialogTitle(),
Divider(theme),
+ IconButton(theme),
InputBase(theme),
+ InputLabel(),
ListItemButton(theme),
ListItemIcon(theme),
ListItemText(theme),
+ OutlinedInput(theme, borderRadius, outlinedFilled),
Paper(borderRadius),
Select(),
Slider(theme),
+ Switch(theme),
TableCell(theme),
Tabs(theme),
Typography(theme)
diff --git a/vite/src/themes/palette.jsx b/vite/src/themes/palette.jsx
index 5ce312e32..eb9abc279 100644
--- a/vite/src/themes/palette.jsx
+++ b/vite/src/themes/palette.jsx
@@ -14,75 +14,9 @@ export function buildPalette(presetColor) {
colors = defaultColor;
}
- const lightColors = {
- primary: {
- light: colors.primaryLight,
- main: colors.primaryMain,
- dark: colors.primaryDark,
- 200: colors.primary200,
- 800: colors.primary800
- },
- secondary: {
- light: colors.secondaryLight,
- main: colors.secondaryMain,
- dark: colors.secondaryDark,
- 200: colors.secondary200,
- 800: colors.secondary800
- },
- error: {
- light: colors.errorLight,
- main: colors.errorMain,
- dark: colors.errorDark
- },
- orange: {
- light: colors.orangeLight,
- main: colors.orangeMain,
- dark: colors.orangeDark
- },
- warning: {
- light: colors.warningLight,
- main: colors.warningMain,
- dark: colors.warningDark,
- contrastText: colors.grey700
- },
- success: {
- light: colors.successLight,
- 200: colors.success200,
- main: colors.successMain,
- dark: colors.successDark
- },
- grey: {
- 50: colors.grey50,
- 100: colors.grey100,
- 500: colors.grey500,
- 600: colors.grey600,
- 700: colors.grey700,
- 900: colors.grey900
- },
- dark: {
- light: colors.darkTextPrimary,
- main: colors.darkLevel1,
- dark: colors.darkLevel2,
- 800: colors.darkBackground,
- 900: colors.darkPaper
- },
- text: {
- primary: colors.grey700,
- secondary: colors.grey500,
- dark: colors.grey900,
- hint: colors.grey100,
- heading: colors.grey900
- },
- divider: colors.grey200,
- background: {
- paper: colors.paper,
- default: colors.paper
- }
- };
-
- const commonColor = { common: { black: colors.darkPaper, white: '#fff' } };
+ const commonColor = { common: { black: '#111936', white: '#fff' } };
- const extendedLight = extendPaletteWithChannels(lightColors);
+ const extendedLight = extendPaletteWithChannels(colors.light);
const extendedCommon = extendPaletteWithChannels(commonColor);
return {
diff --git a/vite/src/themes/theme/default.js b/vite/src/themes/theme/default.js
index 38b50a2b7..03950f63f 100644
--- a/vite/src/themes/theme/default.js
+++ b/vite/src/themes/theme/default.js
@@ -1,82 +1,91 @@
// ==============================|| DEFAULT THEME COLORS ||============================== //
const defaultColor = {
- // paper & background
- paper: '#ffffff',
-
- // primary
- primaryLight: '#e3f2fd',
- primary200: '#90caf9',
- primaryMain: '#2196f3',
- primaryDark: '#1e88e5',
- primary800: '#1565c0',
-
- // secondary
- secondaryLight: '#ede7f6',
- secondary200: '#b39ddb',
- secondaryMain: '#673ab7',
- secondaryDark: '#5e35b1',
- secondary800: '#4527a0',
-
- // success
- successLight: '#b9f6ca',
- success200: '#69f0ae',
- successMain: '#00e676',
- successDark: '#00c853',
-
- // error
- errorLight: '#ef9a9a',
- errorMain: '#f44336',
- errorDark: '#c62828',
-
- // orange
- orangeLight: '#fbe9e7',
- orangeMain: '#ffab91',
- orangeDark: '#d84315',
-
- // warning
- warningLight: '#fff8e1',
- warningMain: '#ffe57f',
- warningDark: '#ffc107',
-
- // grey
- grey50: '#f8fafc',
- grey100: '#eef2f6',
- grey200: '#e3e8ef',
- grey300: '#cdd5df',
- grey500: '#697586',
- grey600: '#4b5565',
- grey700: '#364152',
- grey900: '#121926',
-
- // ==============================|| DARK THEME VARIANTS ||============================== //
-
- // paper & background
- darkPaper: '#111936',
- darkBackground: '#1a223f',
-
- // dark 800 & 900
- darkLevel1: '#29314f',
- darkLevel2: '#212946',
-
- // text variants
- darkTextTitle: '#d7dcec',
- darkTextPrimary: '#bdc8f0',
- darkTextSecondary: '#8492c4',
-
- // primary dark
- darkPrimaryLight: '#e3f2fd',
- darkPrimaryMain: '#2196f3',
- darkPrimaryDark: '#1e88e5',
- darkPrimary200: '#90caf9',
- darkPrimary800: '#1565c0',
-
- // secondary dark
- darkSecondaryLight: '#d1c4e9',
- darkSecondaryMain: '#7c4dff',
- darkSecondaryDark: '#651fff',
- darkSecondary200: '#b39ddb',
- darkSecondary800: '#6200ea'
+ light: {
+ primary: {
+ lighter: '#E3F2FD',
+ light: '#90CAF9',
+ main: '#2196F3',
+ dark: '#1E88E5',
+ darker: '#1565C0'
+ },
+ secondary: {
+ lighter: '#EDE7F6',
+ light: '#B39DDB',
+ main: '#673AB7',
+ dark: '#5E35B1',
+ darker: '#4527A0'
+ },
+ success: {
+ lighter: '#D4FFE0',
+ light: '#61FFB2',
+ main: '#11C86F',
+ dark: '#00B44B',
+ darker: '#04923F',
+ contrastText: '#FFFFFF'
+ },
+ error: {
+ lighter: '#FFE3E3',
+ light: '#EF9A9A',
+ main: '#F44336',
+ dark: '#C62828',
+ darker: '#A21313'
+ },
+ orange: {
+ lighter: '#FFEBD5',
+ light: '#FFB266',
+ main: '#FF8000',
+ dark: '#CC6600',
+ darker: '#AE5802'
+ },
+ warning: {
+ lighter: '#FFF6D7',
+ light: '#FFE479',
+ main: '#F8BB05',
+ dark: '#E6AD00',
+ darker: '#C29614',
+ contrastText: '#FFFFFF'
+ },
+ info: {
+ lighter: '#DFF4F9',
+ light: '#B0E1ED',
+ main: '#0AA0C4',
+ dark: '#08809D',
+ darker: '#066076'
+ },
+ grey: {
+ 50: '#F8FAFC',
+ 100: '#EEF2F6',
+ 200: '#E3E8EF',
+ 300: '#C3CCD8',
+ 400: '#95A4B8',
+ 500: '#8492A4',
+ 600: '#697586',
+ 700: '#4B5565',
+ 800: '#364152',
+ 900: '#121926'
+ },
+ dark: {
+ light: '#BDC8F0',
+ main: '#29314F',
+ dark: '#212946',
+ 800: '#1A223F',
+ 900: '#111936'
+ },
+ text: {
+ primary: '#364152',
+ secondary: '#697586',
+ dark: '#121926',
+ hint: '#EEF2F6',
+ heading: '#121926',
+ disabled: '#C3CCD8'
+ },
+ divider: '#E3E8EF',
+ background: {
+ paper: '#FFFFFF',
+ default: '#FFFFFF'
+ }
+ }
};
export default defaultColor;
diff --git a/vite/src/ui-component/cards/CardSecondaryAction.jsx b/vite/src/ui-component/cards/CardSecondaryAction.jsx
index 3ae8d8f12..cfa30d735 100644
--- a/vite/src/ui-component/cards/CardSecondaryAction.jsx
+++ b/vite/src/ui-component/cards/CardSecondaryAction.jsx
@@ -2,48 +2,48 @@ import PropTypes from 'prop-types';
// material-ui
import { useTheme } from '@mui/material/styles';
-import ButtonBase from '@mui/material/ButtonBase';
+import IconButton from '@mui/material/IconButton';
import Link from '@mui/material/Link';
import Tooltip from '@mui/material/Tooltip';
-// project imports
-import Avatar from '../extended/Avatar';
-
export default function CardSecondaryAction({ title, link, icon }) {
const theme = useTheme();
return (
-
- {!icon && (
-
-
-
- )}
- {icon && (
-
- {icon}
-
+
+ {icon || (
+
)}
-
+
);
}
diff --git a/vite/src/ui-component/cards/MainCard.jsx b/vite/src/ui-component/cards/MainCard.jsx
index 82bfdca46..890797523 100644
--- a/vite/src/ui-component/cards/MainCard.jsx
+++ b/vite/src/ui-component/cards/MainCard.jsx
@@ -14,7 +14,6 @@ const headerStyle = {
export default function MainCard({
border = false,
- boxShadow,
children,
content = true,
contentClass = '',
@@ -22,26 +21,22 @@ export default function MainCard({
headerSX = {},
darkTitle,
secondary,
- shadow,
sx = {},
title,
ref,
...others
}) {
- const defaultShadow = '0 2px 14px 0 rgb(32 40 45 / 8%)';
-
return (
({
- border: border ? '1px solid' : 'none',
- borderColor: 'divider',
- ':hover': {
- boxShadow: boxShadow ? shadow || defaultShadow : 'inherit'
+ sx={[
+ {
+ border: border ? '1px solid' : 'none',
+ borderColor: 'divider'
},
- ...(typeof sx === 'function' ? sx(theme) : sx || {})
- })}
+ ...(Array.isArray(sx) ? sx : [sx])
+ ]}
>
{/* card header and action */}
{!darkTitle && title && }
@@ -65,7 +60,6 @@ export default function MainCard({
MainCard.propTypes = {
border: PropTypes.bool,
- boxShadow: PropTypes.bool,
children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
content: PropTypes.bool,
contentClass: PropTypes.string,
@@ -73,7 +67,6 @@ MainCard.propTypes = {
headerSX: PropTypes.object,
darkTitle: PropTypes.bool,
secondary: PropTypes.any,
- shadow: PropTypes.string,
sx: PropTypes.object,
title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
ref: PropTypes.object,
diff --git a/vite/src/ui-component/cards/SubCard.jsx b/vite/src/ui-component/cards/SubCard.jsx
index e460bcc9b..dd714fed1 100644
--- a/vite/src/ui-component/cards/SubCard.jsx
+++ b/vite/src/ui-component/cards/SubCard.jsx
@@ -24,16 +24,15 @@ export default function SubCard({
actions,
...others
}) {
- const defaultShadow = '0 2px 14px 0 rgb(32 40 45 / 8%)';
-
return (
({
- border: '1px solid',
- borderColor: 'divider',
- ':hover': { boxShadow: defaultShadow },
- ...(typeof sx === 'function' ? sx(theme) : sx || {})
- })}
+ sx={[
+ {
+ border: '1px solid',
+ borderColor: 'divider'
+ },
+ ...(Array.isArray(sx) ? sx : [sx])
+ ]}
{...others}
>
{/* card header and action */}
@@ -60,7 +59,7 @@ export default function SubCard({
}
SubCard.propTypes = {
- children: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.any]),
+ children: PropTypes.oneOfType([PropTypes.string, PropTypes.any, PropTypes.node]),
className: PropTypes.string,
content: PropTypes.bool,
contentClass: PropTypes.string,
diff --git a/vite/src/ui-component/cards/TotalIncomeDarkCard.jsx b/vite/src/ui-component/cards/TotalIncomeDarkCard.jsx
index dc5d76825..cb6752423 100644
--- a/vite/src/ui-component/cards/TotalIncomeDarkCard.jsx
+++ b/vite/src/ui-component/cards/TotalIncomeDarkCard.jsx
@@ -1,6 +1,6 @@
import PropTypes from 'prop-types';
// material-ui
-import { styled, useTheme } from '@mui/material/styles';
+import { useTheme } from '@mui/material/styles';
import Avatar from '@mui/material/Avatar';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
@@ -16,34 +16,6 @@ import TotalIncomeCard from 'ui-component/cards/Skeleton/TotalIncomeCard';
// assets
import TableChartOutlinedIcon from '@mui/icons-material/TableChartOutlined';
-// styles
-const CardWrapper = styled(MainCard)(({ theme }) => ({
- backgroundColor: theme.vars.palette.primary.dark,
- color: theme.vars.palette.primary.light,
- overflow: 'hidden',
- position: 'relative',
- '&:after': {
- content: '""',
- position: 'absolute',
- width: 210,
- height: 210,
- background: `linear-gradient(210.04deg, ${theme.vars.palette.primary[200]} -50.94%, rgba(144, 202, 249, 0) 83.49%)`,
- borderRadius: '50%',
- top: -30,
- right: -180
- },
- '&:before': {
- content: '""',
- position: 'absolute',
- width: 210,
- height: 210,
- background: `linear-gradient(140.9deg, ${theme.vars.palette.primary[200]} -14.02%, rgba(144, 202, 249, 0) 77.58%)`,
- borderRadius: '50%',
- top: -160,
- right: -130
- }
-}));
-
export default function TotalIncomeDarkCard({ isLoading }) {
const theme = useTheme();
@@ -52,21 +24,42 @@ export default function TotalIncomeDarkCard({ isLoading }) {
{isLoading ? (
) : (
-
+
-
-
+
+
}
secondary={
-
+
Total Income
}
@@ -89,7 +82,7 @@ export default function TotalIncomeDarkCard({ isLoading }) {
-
+
)}
);
diff --git a/vite/src/ui-component/cards/TotalIncomeLightCard.jsx b/vite/src/ui-component/cards/TotalIncomeLightCard.jsx
index ddf1810b9..beb8936e1 100644
--- a/vite/src/ui-component/cards/TotalIncomeLightCard.jsx
+++ b/vite/src/ui-component/cards/TotalIncomeLightCard.jsx
@@ -1,7 +1,7 @@
import PropTypes from 'prop-types';
// material-ui
-import { useTheme, styled } from '@mui/material/styles';
+import { useTheme } from '@mui/material/styles';
import Avatar from '@mui/material/Avatar';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
@@ -13,33 +13,6 @@ import Box from '@mui/material/Box';
// project imports
import MainCard from 'ui-component/cards/MainCard';
import TotalIncomeCard from 'ui-component/cards/Skeleton/TotalIncomeCard';
-import { withAlpha } from 'utils/colorUtils';
-
-// styles
-const CardWrapper = styled(MainCard)(({ theme }) => ({
- overflow: 'hidden',
- position: 'relative',
- '&:after': {
- content: '""',
- position: 'absolute',
- width: 210,
- height: 210,
- background: `linear-gradient(210.04deg, ${theme.vars.palette.warning.dark} -50.94%, rgba(144, 202, 249, 0) 83.49%)`,
- borderRadius: '50%',
- top: -30,
- right: -180
- },
- '&:before': {
- content: '""',
- position: 'absolute',
- width: 210,
- height: 210,
- background: `linear-gradient(140.9deg, ${theme.vars.palette.warning.dark} -14.02%, rgba(144, 202, 249, 0) 70.50%)`,
- borderRadius: '50%',
- top: -160,
- right: -130
- }
-}));
export default function TotalIncomeLightCard({ isLoading, total, icon, label }) {
const theme = useTheme();
@@ -49,20 +22,39 @@ export default function TotalIncomeLightCard({ isLoading, total, icon, label })
{isLoading ? (
) : (
-
+
-
+
{icon}
@@ -78,7 +70,7 @@ export default function TotalIncomeLightCard({ isLoading, total, icon, label })
-
+
)}
);
diff --git a/vite/src/ui-component/extended/Accordion.jsx b/vite/src/ui-component/extended/Accordion.jsx
index 876fde81f..622296045 100644
--- a/vite/src/ui-component/extended/Accordion.jsx
+++ b/vite/src/ui-component/extended/Accordion.jsx
@@ -14,8 +14,8 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
export default function Accordion({ data, defaultExpandedId = null, expandIcon, square, toggle }) {
const [expanded, setExpanded] = useState(null);
- const handleChange = (panel) => (event, newExpanded) => {
- toggle && setExpanded(newExpanded ? panel : false);
+ const handleChange = (panel) => (_event, newExpanded) => {
+ if (toggle) setExpanded(newExpanded ? panel : false);
};
useEffect(() => {
@@ -50,7 +50,7 @@ export default function Accordion({ data, defaultExpandedId = null, expandIcon,
Accordion.propTypes = {
data: PropTypes.array,
- defaultExpandedId: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.any]),
+ defaultExpandedId: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.any]),
expandIcon: PropTypes.node,
square: PropTypes.bool,
toggle: PropTypes.bool
diff --git a/vite/src/ui-component/extended/AppBar.jsx b/vite/src/ui-component/extended/AppBar.jsx
index 88e7c70b0..1d2ae72db 100644
--- a/vite/src/ui-component/extended/AppBar.jsx
+++ b/vite/src/ui-component/extended/AppBar.jsx
@@ -65,16 +65,23 @@ export default function AppBar({ ...others }) {
-
@@ -87,7 +94,7 @@ export default function AppBar({ ...others }) {
-
+
@@ -95,7 +102,7 @@ export default function AppBar({ ...others }) {
-
+
@@ -103,7 +110,7 @@ export default function AppBar({ ...others }) {
-
+
@@ -111,7 +118,7 @@ export default function AppBar({ ...others }) {
-
+
diff --git a/vite/src/ui-component/extended/Breadcrumbs.jsx b/vite/src/ui-component/extended/Breadcrumbs.jsx
index 025248a1a..f5ead38f6 100644
--- a/vite/src/ui-component/extended/Breadcrumbs.jsx
+++ b/vite/src/ui-component/extended/Breadcrumbs.jsx
@@ -146,8 +146,11 @@ export default function Breadcrumbs({
{title && !titleBottom && }
@@ -261,8 +264,11 @@ export default function Breadcrumbs({
{title && !titleBottom && }
diff --git a/vite/src/ui-component/extended/Form/AppForm.jsx b/vite/src/ui-component/extended/Form/AppForm.jsx
new file mode 100644
index 000000000..6dcc6283f
--- /dev/null
+++ b/vite/src/ui-component/extended/Form/AppForm.jsx
@@ -0,0 +1,18 @@
+import PropTypes from 'prop-types';
+
+// third party
+import { FormikProvider } from 'formik';
+
+// ==============================|| APP FORM WRAPPER ||============================== //
+
+export default function AppForm({ form, children }) {
+ return (
+
+
+
+ );
+}
+
+AppForm.propTypes = { form: PropTypes.object, children: PropTypes.node };
diff --git a/vite/src/ui-component/extended/Form/CustomFormControl.jsx b/vite/src/ui-component/extended/Form/CustomFormControl.jsx
index b84eab033..81092443f 100644
--- a/vite/src/ui-component/extended/Form/CustomFormControl.jsx
+++ b/vite/src/ui-component/extended/Form/CustomFormControl.jsx
@@ -12,7 +12,7 @@ const CustomFormControl = styled(FormControl)(() => ({
}
},
'& > div > input': {
- padding: '30.5px 14px 11.5px !important'
+ padding: '30.5px 14px 11.5px 0px !important'
},
'& legend': {
display: 'none'
diff --git a/vite/src/ui-component/extended/Form/FormAutocomplete.jsx b/vite/src/ui-component/extended/Form/FormAutocomplete.jsx
new file mode 100644
index 000000000..885b1ddc6
--- /dev/null
+++ b/vite/src/ui-component/extended/Form/FormAutocomplete.jsx
@@ -0,0 +1,151 @@
+import PropTypes from 'prop-types';
+import { useMemo } from 'react';
+
+// material-ui
+import Autocomplete from '@mui/material/Autocomplete';
+import InputLabel from '@mui/material/InputLabel';
+import Stack from '@mui/material/Stack';
+import TextField from '@mui/material/TextField';
+
+// third party
+import { useField } from 'formik';
+
+// ==============================|| FORM - AUTOCOMPLETE ||============================== //
+
+export default function FormAutocomplete({
+ name,
+ label,
+ placeholder,
+ required,
+ options,
+ textFieldProps,
+ inputLabel,
+ sx,
+ id,
+ inputLabelSx,
+ onValueChange,
+ renderInput: renderInputProp,
+ ...rest
+}) {
+ const [field, meta, helpers] = useField(name);
+ const fieldId = id ?? name;
+
+ const selected = useMemo(() => {
+ if (rest.multiple) {
+ const formikValues = field.value || [];
+ return options.filter((o) => formikValues.includes(o.value));
+ }
+
+ const found = options.find((o) => o.value === field.value);
+ return found ?? (rest.freeSolo && field.value ? field.value : null);
+ }, [field.value, options, rest.multiple, rest.freeSolo]);
+
+ const errorState = meta.touched && Boolean(meta.error);
+ const helperText = meta.touched && meta.error ? meta.error : undefined;
+
+ const input = (
+ {
+ if (option == null) {
+ return '';
+ }
+ return typeof option === 'string' ? option : option.label;
+ }}
+ isOptionEqualToValue={(option, val) => {
+ if (option == null || val == null) {
+ return false;
+ }
+ const valueToCheck = typeof val === 'string' ? val : val.value;
+ return option.value === valueToCheck;
+ }}
+ onChange={(event, val, reason, details) => {
+ if (rest.multiple) {
+ const selectedArray = val || [];
+ helpers.setValue(selectedArray.map((o) => (typeof o === 'string' ? o : o.value)));
+ } else {
+ const newVal = val;
+ helpers.setValue(typeof newVal === 'string' ? newVal : (newVal?.value ?? ''));
+ }
+ onValueChange?.(event, val, reason, details);
+ }}
+ onBlur={() => helpers.setTouched(true)}
+ renderInput={(params) => {
+ const { InputProps: pInputProps, inputProps: phtmlInputProps, slotProps: pSlotProps, ...otherParams } = params;
+ const { InputProps: tfInputProps, inputProps: tfhtmlInputProps, slotProps: tfSlotProps, ...otherTfProps } = textFieldProps || {};
+
+ return renderInputProp ? (
+ renderInputProp(params)
+ ) : (
+
+ );
+ }}
+ {...rest}
+ />
+ );
+
+ if (inputLabel) {
+ return (
+
+
+ {inputLabel}
+
+ {input}
+
+ );
+ }
+
+ return input;
+}
+
+FormAutocomplete.propTypes = {
+ name: PropTypes.string,
+ label: PropTypes.string,
+ placeholder: PropTypes.string,
+ required: PropTypes.bool,
+ options: PropTypes.any,
+ textFieldProps: PropTypes.object,
+ inputLabel: PropTypes.string,
+ sx: PropTypes.object,
+ id: PropTypes.any,
+ inputLabelSx: PropTypes.object,
+ onValueChange: PropTypes.object,
+ renderInput: PropTypes.node,
+ rest: PropTypes.any
+};
diff --git a/vite/src/ui-component/extended/Form/FormControl.jsx b/vite/src/ui-component/extended/Form/FormControl.jsx
index 75427e773..ab50f5efb 100644
--- a/vite/src/ui-component/extended/Form/FormControl.jsx
+++ b/vite/src/ui-component/extended/Form/FormControl.jsx
@@ -8,10 +8,10 @@ import MUIFormControl from '@mui/material/FormControl';
export default function FormControl({ captionLabel, formState, iconPrimary, iconSecondary, placeholder, textPrimary, textSecondary }) {
const IconPrimary = iconPrimary;
- const primaryIcon = iconPrimary ? : null;
+ const primaryIcon = iconPrimary ? : null;
const IconSecondary = iconSecondary;
- const secondaryIcon = iconSecondary ? : null;
+ const secondaryIcon = iconSecondary ? : null;
const errorState = formState === 'error';
diff --git a/vite/src/ui-component/extended/Form/FormControlSelect.jsx b/vite/src/ui-component/extended/Form/FormControlSelect.jsx
deleted file mode 100644
index a09e6dafb..000000000
--- a/vite/src/ui-component/extended/Form/FormControlSelect.jsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import PropTypes from 'prop-types';
-import { useState } from 'react';
-
-// material-ui
-import Divider from '@mui/material/Divider';
-import FormControl from '@mui/material/FormControl';
-import InputAdornment from '@mui/material/InputAdornment';
-import MenuItem from '@mui/material/MenuItem';
-import TextField from '@mui/material/TextField';
-
-export default function FormControlSelect({
- captionLabel,
- currencies,
- formState,
- iconPrimary,
- iconSecondary,
- selected,
- textPrimary,
- textSecondary
-}) {
- const IconPrimary = iconPrimary;
- const primaryIcon = iconPrimary ? : null;
-
- const IconSecondary = iconSecondary;
- const secondaryIcon = iconSecondary ? : null;
-
- const errorState = formState === 'error';
- const val = selected || '';
-
- const [currency, setCurrency] = useState(val);
- const handleChange = (event) => {
- event?.target.value && setCurrency(event?.target.value);
- };
-
- return (
-
-
- {primaryIcon && {primaryIcon}}
- {textPrimary && (
- <>
- {textPrimary}
-
-
- )}
-
- ),
- endAdornment: (
- <>
- {secondaryIcon && {secondaryIcon}}
- {textSecondary && (
- <>
-
- {textSecondary}
-
- )}
-
- )
- }
- }}
- >
- {currencies?.map((option, index) => (
-
- ))}
-
-
- );
-}
-
-FormControlSelect.propTypes = {
- captionLabel: PropTypes.string,
- currencies: PropTypes.object,
- formState: PropTypes.string,
- iconPrimary: PropTypes.any,
- iconSecondary: PropTypes.any,
- selected: PropTypes.string,
- textPrimary: PropTypes.string,
- textSecondary: PropTypes.string
-};
diff --git a/vite/src/ui-component/extended/Form/FormInput.jsx b/vite/src/ui-component/extended/Form/FormInput.jsx
new file mode 100644
index 000000000..68247251d
--- /dev/null
+++ b/vite/src/ui-component/extended/Form/FormInput.jsx
@@ -0,0 +1,66 @@
+import PropTypes from 'prop-types';
+import InputLabel from '@mui/material/InputLabel';
+import Stack from '@mui/material/Stack';
+import TextField from '@mui/material/TextField';
+
+// third party
+import { useField } from 'formik';
+
+// ==============================|| FORM - INPUT ||============================== //
+
+export default function FormInput({ name, label, inputLabel, sx, inputLabelSx, onChange, helperText, id, required, ...rest }) {
+ const [field, meta] = useField(name);
+ const fieldId = id ?? name;
+
+ const input = (
+ {
+ field.onChange(e);
+ onChange?.(e);
+ }}
+ error={meta.touched && Boolean(meta.error)}
+ helperText={meta.touched && meta.error ? String(meta.error) : helperText}
+ required={required}
+ {...rest}
+ />
+ );
+
+ if (inputLabel) {
+ return (
+
+
+ {inputLabel}
+
+ {input}
+
+ );
+ }
+
+ return input;
+}
+
+FormInput.propTypes = {
+ name: PropTypes.string,
+ label: PropTypes.any,
+ inputLabel: PropTypes.string,
+ sx: PropTypes.object,
+ inputLabelSx: PropTypes.object,
+ onChange: PropTypes.any,
+ helperText: PropTypes.any,
+ id: PropTypes.any,
+ required: PropTypes.any,
+ rest: PropTypes.any
+};
diff --git a/vite/src/ui-component/extended/Form/FormPhoneInput.jsx b/vite/src/ui-component/extended/Form/FormPhoneInput.jsx
new file mode 100644
index 000000000..de864d946
--- /dev/null
+++ b/vite/src/ui-component/extended/Form/FormPhoneInput.jsx
@@ -0,0 +1,113 @@
+import PropTypes from 'prop-types';
+// material-ui
+import Divider from '@mui/material/Divider';
+import InputAdornment from '@mui/material/InputAdornment';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
+import Stack from '@mui/material/Stack';
+import TextField from '@mui/material/TextField';
+
+// third party
+import { useField } from 'formik';
+
+// assets
+import KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined';
+
+// ==============================|| FORM - PHONE INPUT ||============================== //
+
+export default function FormPhoneInput({
+ name,
+ dialCodeName,
+ dialCodes,
+ label,
+ inputLabel,
+ sx,
+ inputLabelSx,
+ onChange,
+ helperText,
+ id,
+ required,
+ ...rest
+}) {
+ const [field, meta] = useField(name);
+ const [dialCodeField] = useField(dialCodeName);
+
+ const fieldId = id ?? name;
+
+ const input = (
+ {
+ field.onChange(e);
+ onChange?.(e);
+ }}
+ error={meta.touched && Boolean(meta.error)}
+ helperText={meta.touched && meta.error ? meta.error : helperText}
+ required={inputLabel ? false : required}
+ slotProps={{
+ input: {
+ startAdornment: (
+
+
+
+
+ )
+ }
+ }}
+ {...rest}
+ />
+ );
+
+ if (inputLabel) {
+ return (
+
+
+ {inputLabel}
+
+ {input}
+
+ );
+ }
+
+ return input;
+}
+
+FormPhoneInput.propTypes = {
+ name: PropTypes.string,
+ dialCodeName: PropTypes.string,
+ dialCodes: PropTypes.object,
+ label: PropTypes.any,
+ inputLabel: PropTypes.string,
+ sx: PropTypes.any,
+ inputLabelSx: PropTypes.any,
+ onChange: PropTypes.any,
+ helperText: PropTypes.any,
+ id: PropTypes.any,
+ required: PropTypes.any,
+ rest: PropTypes.any
+};
diff --git a/vite/src/ui-component/extended/Form/InputLabel.jsx b/vite/src/ui-component/extended/Form/InputLabel.jsx
index 2b96e75b9..8c8992256 100644
--- a/vite/src/ui-component/extended/Form/InputLabel.jsx
+++ b/vite/src/ui-component/extended/Form/InputLabel.jsx
@@ -11,6 +11,8 @@ const BInputLabel = styled((props) => , {
marginBottom: horizontal ? 0 : 8
}));
+// ==============================|| FORM - INPUT LABEL ||============================== //
+
export default function InputLabel({ children, horizontal = false, ...others }) {
return (
diff --git a/vite/src/ui-component/extended/Form/index.js b/vite/src/ui-component/extended/Form/index.js
new file mode 100644
index 000000000..ef33e95ae
--- /dev/null
+++ b/vite/src/ui-component/extended/Form/index.js
@@ -0,0 +1,5 @@
+export { default as AppForm } from './AppForm';
+export { default as FormInput } from './FormInput';
+export { default as FormSelect } from './FormSelect';
+export { default as FormAutocomplete } from './FormAutocomplete';
+export { default as FormPhoneInput } from './FormPhoneInput';
diff --git a/vite/src/views/dashboard/Default/BajajAreaChartCard.jsx b/vite/src/views/dashboard/Default/BajajAreaChartCard.jsx
index d77fcb6a5..e2e24b5cc 100644
--- a/vite/src/views/dashboard/Default/BajajAreaChartCard.jsx
+++ b/vite/src/views/dashboard/Default/BajajAreaChartCard.jsx
@@ -21,7 +21,7 @@ export default function BajajAreaChartCard() {
state: { fontFamily }
} = useConfig();
- const secondary800 = theme.vars.palette.secondary[800];
+ const secondary800 = theme.vars.palette.secondary['darker'];
const [chartOptions, setChartOptions] = useState(bajajChartOptions);
const [series] = useState([{ data: [0, 15, 10, 50, 30, 40, 25] }]);
@@ -46,7 +46,7 @@ export default function BajajAreaChartCard() {
}, [fontFamily, secondary800]);
return (
-
+
diff --git a/vite/src/views/dashboard/Default/EarningCard.jsx b/vite/src/views/dashboard/Default/EarningCard.jsx
index b300e4c4e..7cc1c41bd 100644
--- a/vite/src/views/dashboard/Default/EarningCard.jsx
+++ b/vite/src/views/dashboard/Default/EarningCard.jsx
@@ -1,5 +1,5 @@
import PropTypes from 'prop-types';
-import React from 'react';
+import { useState } from 'react';
// material-ui
import { useTheme } from '@mui/material/styles';
@@ -27,7 +27,7 @@ import ArchiveTwoToneIcon from '@mui/icons-material/ArchiveOutlined';
export default function EarningCard({ isLoading }) {
const theme = useTheme();
- const [anchorEl, setAnchorEl] = React.useState(null);
+ const [anchorEl, setAnchorEl] = useState(null);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
@@ -55,7 +55,7 @@ export default function EarningCard({ isLoading }) {
position: 'absolute',
width: 210,
height: 210,
- background: theme.vars.palette.secondary[800],
+ bgcolor: theme.vars.palette.secondary.darker,
borderRadius: '50%',
top: { xs: -85 },
right: { xs: -95 }
@@ -65,7 +65,7 @@ export default function EarningCard({ isLoading }) {
position: 'absolute',
width: 210,
height: 210,
- background: theme.vars.palette.secondary[800],
+ bgcolor: theme.vars.palette.secondary.darker,
borderRadius: '50%',
top: { xs: -125 },
right: { xs: -15 },
@@ -78,28 +78,25 @@ export default function EarningCard({ isLoading }) {
-
+
-
+