Support MUI v5.0.0-beta.1

CHANGELOG.md

@@ -1,3 +1,12 @@
+### v1.1.0
+
+###### Jul 23, 2021
+
+- Support MUI v5.0.0-beta.1
+- Upgrade some dependencies to the latest versions
+
+---
+
 ### v1.0.0
 
 ###### Jun 28, 2021

package.json

@@ -40,16 +40,16 @@
     "@emotion/styled": "^11.3.0",
     "@iconify/icons-ant-design": "^1.1.0",
     "@iconify/icons-eva": "^1.1.0",
-    "@iconify/icons-ic": "^1.1.6",
+    "@iconify/icons-ic": "^1.1.7",
     "@iconify/react": "^1.1.4",
-    "@material-ui/core": "^5.0.0-alpha.38",
-    "@material-ui/lab": "^5.0.0-alpha.38",
-    "@material-ui/styles": "^5.0.0-alpha.36",
-    "@material-ui/utils": "^5.0.0-alpha.36",
+    "@material-ui/core": "^5.0.0-beta.1",
+    "@material-ui/lab": "^5.0.0-alpha.40",
+    "@material-ui/styles": "^5.0.0-beta.1",
+    "@material-ui/utils": "^5.0.0-beta.0",
     "@testing-library/jest-dom": "^5.14.1",
-    "apexcharts": "^3.27.1",
+    "apexcharts": "^3.27.3",
     "change-case": "^4.1.2",
-    "date-fns": "^2.22.1",
+    "date-fns": "^2.23.0",
     "faker": "^5.5.3",
     "formik": "^2.2.9",
     "framer-motion": "^4.1.17",
@@ -63,19 +63,19 @@
     "react-helmet-async": "^1.0.9",
     "react-router-dom": "^6.0.0-beta.0",
     "react-scripts": "4.0.0",
-    "simplebar": "^5.3.4",
-    "simplebar-react": "^2.3.4",
-    "web-vitals": "^2.0.1",
+    "simplebar": "^5.3.5",
+    "simplebar-react": "^2.3.5",
+    "web-vitals": "^2.1.0",
     "yup": "^0.32.9"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.6",
+    "@babel/core": "^7.14.8",
     "@babel/eslint-parser": "^7.14.7",
-    "eslint": "^7.29.0",
+    "eslint": "^7.31.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-react-app": "^6.0.0",
-    "eslint-plugin-flowtype": "^5.7.2",
+    "eslint-plugin-flowtype": "^5.8.1",
     "eslint-plugin-import": "^2.23.4",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^3.4.0",

src/components/ColorPreview.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 // material
-import { alpha, experimentalStyled as styled } from '@material-ui/core/styles';
+import { alpha, styled } from '@material-ui/core/styles';
 import { Box, Typography } from '@material-ui/core';
 
 // ----------------------------------------------------------------------

src/components/Label.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 // material
-import { alpha, experimentalStyled as styled } from '@material-ui/core/styles';
+import { alpha, styled } from '@material-ui/core/styles';
 
 // ----------------------------------------------------------------------
 

src/components/MenuPopover.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 // material
 import { Popover } from '@material-ui/core';
-import { alpha, experimentalStyled as styled } from '@material-ui/core/styles';
+import { alpha, styled } from '@material-ui/core/styles';
 
 // ----------------------------------------------------------------------
 

src/components/NavSection.js

@@ -5,12 +5,12 @@ import { NavLink as RouterLink, matchPath, useLocation } from 'react-router-dom'
 import arrowIosForwardFill from '@iconify/icons-eva/arrow-ios-forward-fill';
 import arrowIosDownwardFill from '@iconify/icons-eva/arrow-ios-downward-fill';
 // material
-import { alpha, useTheme, experimentalStyled as styled } from '@material-ui/core/styles';
-import { Box, List, ListItem, Collapse, ListItemText, ListItemIcon } from '@material-ui/core';
+import { alpha, useTheme, styled } from '@material-ui/core/styles';
+import { Box, List, Collapse, ListItemText, ListItemIcon, ListItemButton } from '@material-ui/core';
 
 // ----------------------------------------------------------------------
 
-const ListItemStyle = styled((props) => <ListItem button disableGutters {...props} />)(
+const ListItemStyle = styled((props) => <ListItemButton disableGutters {...props} />)(
   ({ theme }) => ({
     ...theme.typography.body2,
     height: 48,

src/components/Scrollbar.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import SimpleBarReact from 'simplebar-react';
 // material
-import { alpha, experimentalStyled as styled } from '@material-ui/core/styles';
+import { alpha, styled } from '@material-ui/core/styles';
 import { Box } from '@material-ui/core';
 
 // ----------------------------------------------------------------------

src/components/_dashboard/app/AppBugReports.js

@@ -1,7 +1,7 @@
 import { Icon } from '@iconify/react';
 import bugFilled from '@iconify/icons-ant-design/bug-filled';
 // material
-import { alpha, experimentalStyled as styled } from '@material-ui/core/styles';
+import { alpha, styled } from '@material-ui/core/styles';
 import { Card, Typography } from '@material-ui/core';
 // utils
 import { fShortenNumber } from '../../../utils/formatNumber';

src/components/_dashboard/app/AppCurrentSubject.js

@@ -1,7 +1,7 @@
 import { merge } from 'lodash';
 import ReactApexChart from 'react-apexcharts';
 // material
-import { useTheme, experimentalStyled as styled } from '@material-ui/core/styles';
+import { useTheme, styled } from '@material-ui/core/styles';
 import { Card, CardHeader } from '@material-ui/core';
 //
 import { BaseOptionChart } from '../../charts';

src/components/_dashboard/app/AppCurrentVisits.js

@@ -1,7 +1,7 @@
 import { merge } from 'lodash';
 import ReactApexChart from 'react-apexcharts';
 // material
-import { useTheme, experimentalStyled as styled } from '@material-ui/core/styles';
+import { useTheme, styled } from '@material-ui/core/styles';
 import { Card, CardHeader } from '@material-ui/core';
 // utils
 import { fNumber } from '../../../utils/formatNumber';

src/components/_dashboard/app/AppItemOrders.js

@@ -1,7 +1,7 @@
 import { Icon } from '@iconify/react';
 import windowsFilled from '@iconify/icons-ant-design/windows-filled';
 // material
-import { alpha, experimentalStyled as styled } from '@material-ui/core/styles';
+import { alpha, styled } from '@material-ui/core/styles';
 import { Card, Typography } from '@material-ui/core';
 // utils
 import { fShortenNumber } from '../../../utils/formatNumber';

src/components/_dashboard/app/AppNewUsers.js

@@ -1,7 +1,7 @@
 import { Icon } from '@iconify/react';
 import appleFilled from '@iconify/icons-ant-design/apple-filled';
 // material
-import { alpha, experimentalStyled as styled } from '@material-ui/core/styles';
+import { alpha, styled } from '@material-ui/core/styles';
 import { Card, Typography } from '@material-ui/core';
 // utils
 import { fShortenNumber } from '../../../utils/formatNumber';

src/components/_dashboard/app/AppWeeklySales.js

@@ -1,7 +1,7 @@
 import { Icon } from '@iconify/react';
 import androidFilled from '@iconify/icons-ant-design/android-filled';
 // material
-import { alpha, experimentalStyled as styled } from '@material-ui/core/styles';
+import { alpha, styled } from '@material-ui/core/styles';
 import { Card, Typography } from '@material-ui/core';
 // utils
 import { fShortenNumber } from '../../../utils/formatNumber';

src/components/_dashboard/blog/BlogPostCard.js

@@ -5,7 +5,7 @@ import { Link as RouterLink } from 'react-router-dom';
 import shareFill from '@iconify/icons-eva/share-fill';
 import messageCircleFill from '@iconify/icons-eva/message-circle-fill';
 // material
-import { alpha, experimentalStyled as styled } from '@material-ui/core/styles';
+import { alpha, styled } from '@material-ui/core/styles';
 import { Box, Link, Card, Grid, Avatar, Typography, CardContent } from '@material-ui/core';
 // utils
 import { fDate } from '../../../utils/formatTime';

src/components/_dashboard/blog/BlogPostsSearch.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import { Icon } from '@iconify/react';
 import searchFill from '@iconify/icons-eva/search-fill';
 // material
-import { experimentalStyled as styled } from '@material-ui/core/styles';
+import { styled } from '@material-ui/core/styles';
 import { Box, TextField, Autocomplete, InputAdornment } from '@material-ui/core';
 
 // ----------------------------------------------------------------------

src/components/_dashboard/products/ProductCard.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import { Link as RouterLink } from 'react-router-dom';
 // material
 import { Box, Card, Link, Typography, Stack } from '@material-ui/core';
-import { experimentalStyled as styled } from '@material-ui/core/styles';
+import { styled } from '@material-ui/core/styles';
 // utils
 import { fCurrency } from '../../../utils/formatNumber';
 //

src/components/_dashboard/products/ProductCartWidget.js

@@ -1,7 +1,7 @@
 import { Icon } from '@iconify/react';
 import shoppingCartFill from '@iconify/icons-eva/shopping-cart-fill';
 // material
-import { experimentalStyled as styled } from '@material-ui/core/styles';
+import { styled } from '@material-ui/core/styles';
 import { Badge } from '@material-ui/core';
 
 // ----------------------------------------------------------------------

src/components/_dashboard/user/UserListToolbar.js

@@ -4,7 +4,7 @@ import searchFill from '@iconify/icons-eva/search-fill';
 import trash2Fill from '@iconify/icons-eva/trash-2-fill';
 import roundFilterList from '@iconify/icons-ic/round-filter-list';
 // material
-import { experimentalStyled as styled } from '@material-ui/core/styles';
+import { styled } from '@material-ui/core/styles';
 import {
   Box,
   Toolbar,

src/layouts/AuthLayout.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import { Link as RouterLink } from 'react-router-dom';
 // material
-import { experimentalStyled as styled } from '@material-ui/core/styles';
+import { styled } from '@material-ui/core/styles';
 import { Typography } from '@material-ui/core';
 // components
 import Logo from '../components/Logo';

src/layouts/LogoOnlyLayout.js

@@ -1,6 +1,6 @@
 import { Link as RouterLink, Outlet } from 'react-router-dom';
 // material
-import { experimentalStyled as styled } from '@material-ui/core/styles';
+import { styled } from '@material-ui/core/styles';
 // components
 import Logo from '../components/Logo';
 

src/layouts/dashboard/DashboardNavbar.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import { Icon } from '@iconify/react';
 import menu2Fill from '@iconify/icons-eva/menu-2-fill';
 // material
-import { alpha, experimentalStyled as styled } from '@material-ui/core/styles';
+import { alpha, styled } from '@material-ui/core/styles';
 import { Box, Stack, AppBar, Toolbar, IconButton } from '@material-ui/core';
 // components
 import { MHidden } from '../../components/@material-extend';
@@ -55,7 +55,7 @@ export default function DashboardNavbar({ onOpenSidebar }) {
         <Searchbar />
         <Box sx={{ flexGrow: 1 }} />
 
-        <Stack direction="row" spacing={{ xs: 0.5, sm: 1.5 }}>
+        <Stack direction="row" alignItems="center" spacing={{ xs: 0.5, sm: 1.5 }}>
           <LanguagePopover />
           <NotificationsPopover />
           <AccountPopover />

src/layouts/dashboard/DashboardSidebar.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import { useEffect } from 'react';
 import { Link as RouterLink, useLocation } from 'react-router-dom';
 // material
-import { experimentalStyled as styled } from '@material-ui/core/styles';
+import { styled } from '@material-ui/core/styles';
 import { Box, Link, Button, Drawer, Typography, Avatar, Stack } from '@material-ui/core';
 // components
 import Logo from '../../components/Logo';
@@ -96,7 +96,7 @@ export default function DashboardSidebar({ isOpenSidebar, onCloseSidebar }) {
         >
           <Box
             component="img"
-            src="/static/illustrations/illustration_rocket.png"
+            src="/static/illustrations/illustration_avatar.png"
             sx={{ width: 100, position: 'absolute', top: -50 }}
           />