@arcblock/ux 1.17.21 → 2.0.0

package/lib/Toast/index.js

@@ -9,25 +9,25 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _CheckCircle = _interopRequireDefault(require("@material-ui/icons/CheckCircle"));
+var _CheckCircle = _interopRequireDefault(require("@mui/icons-material/CheckCircle"));
 
-var _Error = _interopRequireDefault(require("@material-ui/icons/Error"));
+var _Error = _interopRequireDefault(require("@mui/icons-material/Error"));
 
-var _Info = _interopRequireDefault(require("@material-ui/icons/Info"));
+var _Info = _interopRequireDefault(require("@mui/icons-material/Info"));
 
-var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
+var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
 
-var _Warning = _interopRequireDefault(require("@material-ui/icons/Warning"));
+var _Warning = _interopRequireDefault(require("@mui/icons-material/Warning"));
 
-var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 
-var _Snackbar = _interopRequireDefault(require("@material-ui/core/Snackbar"));
+var _Snackbar = _interopRequireDefault(require("@mui/material/Snackbar"));
 
-var _SnackbarContent = _interopRequireDefault(require("@material-ui/core/SnackbarContent"));
+var _SnackbarContent = _interopRequireDefault(require("@mui/material/SnackbarContent"));
 
-var _colors = require("@material-ui/core/colors");
+var _colors = require("@mui/material/colors");
 
-var _styles = require("@material-ui/core/styles");
+var _styles = require("@mui/styles");
 
 const _excluded = ["className", "message", "onClose", "variant"];
 
@@ -93,7 +93,8 @@ function SnackbarContentWrapper(props) {
       key: "close",
       "aria-label": "close",
       color: "inherit",
-      onClick: onClose
+      onClick: onClose,
+      size: "large"
     }, /*#__PURE__*/_react.default.createElement(_Close.default, {
       className: classes.icon
     }))]

package/lib/Video/index.js

@@ -13,7 +13,7 @@ var _reactPlayer = _interopRequireDefault(require("react-player"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _CircularProgress = _interopRequireDefault(require("@material-ui/core/CircularProgress"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
 
 var _Util = require("../Util");
 

package/lib/Wallet/Action.js

@@ -11,7 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
 var _abtwallet = _interopRequireDefault(require("./images/abtwallet.png"));
 

package/lib/Wallet/Download.js

@@ -11,7 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
 var _useBrowser = _interopRequireDefault(require("@arcblock/react-hooks/lib/useBrowser"));
 

package/lib/Wallet/Open.js

@@ -13,7 +13,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _useBrowser = _interopRequireDefault(require("@arcblock/react-hooks/lib/useBrowser"));
 
-var _Fab = _interopRequireDefault(require("@material-ui/core/Fab"));
+var _Fab = _interopRequireDefault(require("@mui/material/Fab"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 

package/lib/WechatPrompt/index.js

@@ -9,9 +9,9 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
-var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
+var _Dialog = _interopRequireDefault(require("@mui/material/Dialog"));
 
 var _useBrowser = _interopRequireDefault(require("@arcblock/react-hooks/lib/useBrowser"));
 

package/lib/withTheme/index.js

@@ -9,9 +9,9 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = require("styled-components");
 
-var _styles = require("@material-ui/core/styles");
+var _styles = require("@mui/material/styles");
 
-var _CssBaseline = _interopRequireDefault(require("@material-ui/core/CssBaseline"));
+var _CssBaseline = _interopRequireDefault(require("@mui/material/CssBaseline"));
 
 var _Theme = require("../Theme");
 
@@ -48,7 +48,7 @@ function withTheme(Component) {
     }
 
     render() {
-      return /*#__PURE__*/_react.default.createElement(_styles.MuiThemeProvider, {
+      return /*#__PURE__*/_react.default.createElement(_styles.ThemeProvider, {
         theme: this.theme
       }, /*#__PURE__*/_react.default.createElement(_CssBaseline.default, null), /*#__PURE__*/_react.default.createElement(GlobalStyle, {
         theme: this.theme

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "1.17.21",
+  "version": "2.0.0",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -50,17 +50,19 @@
   },
   "peerDependencies": {
     "@sentry/browser": "^5.0.8",
-    "react": ">=16.12.0",
+    "react": ">=18.1.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "72ee6788c33de8033ac6fcc884554c9e2bdb0849",
+  "gitHead": "e246936f30652b6d526c33b1462f8ad5e93e7722",
   "dependencies": {
-    "@arcblock/icons": "^1.17.21",
-    "@arcblock/react-hooks": "^1.17.21",
+    "@arcblock/icons": "^2.0.0",
+    "@arcblock/react-hooks": "^2.0.0",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
     "@fontsource/lato": "^4.5.3",
-    "@material-ui/core": "^4.12.3",
-    "@material-ui/icons": "4.11.2",
+    "@mui/icons-material": "^5.6.2",
+    "@mui/material": "^5.6.4",
     "@solana/qr-code-styling": "^1.6.0-beta.0",
     "axios": "^0.21.2",
     "base64-url": "^2.3.3",
@@ -72,7 +74,7 @@
     "is-svg": "^4.3.1",
     "js-cookie": "^2.2.0",
     "lodash": "^4.17.21",
-    "mdi-material-ui": "^6.22.1",
+    "mdi-material-ui": "^7.2.0",
     "react-cookie-consent": "^6.4.1",
     "react-helmet": "^6.1.0",
     "react-intersection-observer": "^8.31.1",

package/src/ActionButton/index.js

@@ -56,7 +56,7 @@ ActionButton.defaultProps = {
   color: '',
   border: '',
   width: '',
-  theme: 'default',
+  theme: 'inherit',
   variant: 'outlined',
   size: 'large',
   children: null,

package/src/ActivityIndicator/index.js

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import green from '@material-ui/core/colors/green';
-import blue from '@material-ui/core/colors/blue';
+import green from '@mui/material/colors/green';
+import blue from '@mui/material/colors/blue';
 
 import Logo from '../Logo';
 import colors from '../Colors';

package/src/Alert/index.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import Typography from '@material-ui/core/Typography';
-import blueGrey from '@material-ui/core/colors/blueGrey';
+import Typography from '@mui/material/Typography';
+import blueGrey from '@mui/material/colors/blueGrey';
 
 import Icon from '../Icon';
 import { mergeProps } from '../Util';

package/src/Async/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import CircularProgress from '@material-ui/core/CircularProgress';
+import CircularProgress from '@mui/material/CircularProgress';
 
 export default function LoadAsyncComponent(importComponent, key = 'default', showProgress = true) {
   class AsyncComponent extends React.Component {

package/src/Badge/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 
 import colors from '../Colors';
 import { mergeProps } from '../Util';

package/src/Blocklet/blocklet.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import Typography from '@material-ui/core/Typography';
-import CircularProgress from '@material-ui/core/CircularProgress';
+import Typography from '@mui/material/Typography';
+import CircularProgress from '@mui/material/CircularProgress';
 import Avatar from '@arcblock/did-connect/lib/Avatar';
-import useTheme from '@material-ui/core/styles/useTheme';
-import useMediaQuery from '@material-ui/core/useMediaQuery';
+import { useTheme } from '@mui/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
 
 import Button from '../Button';
 import Img from '../Img';

package/src/BlockletNFT/index.js

@@ -1,11 +1,11 @@
 import React, { useRef } from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import Portal from '@material-ui/core/Portal';
-import Typography from '@material-ui/core/Typography';
-import CircularProgress from '@material-ui/core/CircularProgress';
-import useMediaQuery from '@material-ui/core/useMediaQuery';
-import useTheme from '@material-ui/core/styles/useTheme';
+import Portal from '@mui/material/Portal';
+import Typography from '@mui/material/Typography';
+import CircularProgress from '@mui/material/CircularProgress';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import useTheme from '@mui/styles/useTheme';
 import Avatar from '@arcblock/did-connect/lib/Avatar';
 
 import Icon from '../Icon';
@@ -238,8 +238,8 @@ export default function BlockletNFT({
   const _onMainClick = wrapHandler(onMainClick);
 
   const theme = useTheme();
-  const isDownSm = useMediaQuery(theme.breakpoints.down('sm'));
-  const isDownMd = useMediaQuery(theme.breakpoints.down('md'));
+  const isDownSm = useMediaQuery(theme.breakpoints.down('md'));
+  const isDownMd = useMediaQuery(theme.breakpoints.down('lg'));
   const isUpLg = useMediaQuery(theme.breakpoints.up('lg'));
 
   // If size is auto, need calculate actual size according to screen size

package/src/Button/index.js

@@ -1,4 +1,4 @@
-import Button from '@material-ui/core/Button';
+import Button from '@mui/material/Button';
 import wrap from './wrap';
 
 export default wrap(Button);

package/src/Button/wrap.js

@@ -8,14 +8,6 @@ import colors from '../Colors';
 import { mergeProps } from '../Util';
 
 const extendedColors = {
-  danger: {
-    contained: { backgroundColor: colors.error.main, color: colors.common.white },
-    outlined: { borderColor: colors.error.main, color: colors.error.main },
-  },
-  warning: {
-    contained: { backgroundColor: colors.warning.main, color: colors.common.white },
-    outlined: { borderColor: colors.warning.main, color: colors.warning.main },
-  },
   did: {
     contained: { backgroundColor: colors.did.primary, color: colors.common.white },
     outlined: { borderColor: colors.did.primary, color: colors.did.primary },
@@ -44,8 +36,9 @@ export default function (BaseComponent) {
       default:
     }
 
-    // mui 只支持 4 种 color 值: default/inherit/primary/secondary (传入这 4 种之外的值会报 warning),
+    // mui v4 只支持 4 种 color 值: default/inherit/primary/secondary (传入这 4 种之外的值会报 warning),
     // 这里扩展 danger/warning/reverse/did 四种 color
+    // !! 已升级到 mui v5, error/warning 等 color 已经默认支持, extendedColors 只扩展了 did/reverse
     const matched = extendedColors[color] && extendedColors[color][rest.variant];
     const styles = Object.assign({}, style, {
       boxShadow: 'none',

package/src/ButtonGroup/index.js

@@ -1,6 +1,6 @@
-import ButtonGroup from '@material-ui/core/ButtonGroup';
+import ButtonGroup from '@mui/material/ButtonGroup';
 import wrap from '../Button/wrap';
 
-// deprecated, ux ButtonGroup 组件废弃, 建议直接使用 @material-ui/core/ButtonGroup
+// deprecated, ux ButtonGroup 组件废弃, 建议直接使用 @mui/material/ButtonGroup
 // (该定制组件原本目的是调整 ButtonGroup 的圆角, 但最新设计规范已经不再使用较大的圆角, 改为使用 mui button 默认的圆角)
 export default wrap(ButtonGroup);

package/src/ClickToCopy/index.js

@@ -3,8 +3,8 @@ import Copy from 'copy-to-clipboard';
 import PropTypes from 'prop-types';
 import useWindowSize from 'react-use/lib/useWindowSize';
 
-import Tooltip from '@material-ui/core/Tooltip';
-import Typography from '@material-ui/core/Typography';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
 import styled from 'styled-components';
 
 import Toast from '../Toast';

package/src/CodeBlock/index.js

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import Copy from 'copy-to-clipboard';
-import Button from '@material-ui/core/IconButton';
+import Button from '@mui/material/IconButton';
 import useMountedState from 'react-use/lib/useMountedState';
 
 import hljs from 'highlight.js/lib/highlight';
@@ -23,8 +23,8 @@ import plaintext from 'highlight.js/lib/languages/plaintext';
 
 import 'highlight.js/styles/atom-one-dark.css';
 
-import CopyIcon from '@material-ui/icons/FileCopy';
-import CheckIcon from '@material-ui/icons/Check';
+import CopyIcon from '@mui/icons-material/FileCopy';
+import CheckIcon from '@mui/icons-material/Check';
 import colors from '../Colors';
 
 hljs.registerLanguage('javascript', javascript);

package/src/ContactForm/index.js

@@ -5,8 +5,8 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import axios from 'axios';
 
-import Typography from '@material-ui/core/Typography';
-import CircularProgress from '@material-ui/core/CircularProgress';
+import Typography from '@mui/material/Typography';
+import CircularProgress from '@mui/material/CircularProgress';
 
 import { mergeProps } from '../Util';
 import Button from '../Button';
@@ -116,7 +116,7 @@ export default class ContactForm extends React.Component {
           <Button
             variant="outlined"
             type="submit"
-            color="default"
+            color="inherit"
             size="large"
             disabled={loading}
             className="subscribe-btn-empty">

package/src/CookieConsent/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import Button from '@material-ui/core/Button';
+import Button from '@mui/material/Button';
 import CookieConsent, { resetCookieConsentValue } from 'react-cookie-consent';
 
 export { resetCookieConsentValue };
@@ -19,6 +19,8 @@ const translations = {
   },
 };
 
+const AcceptButton = props => <Button variant="contained" {...props} />;
+
 /**
  * DefaultCookieConsent, 对 react-cookie-consent package 封装, 以便 arcblock 内部产品可以快速使用
  * - 默认内容
@@ -34,9 +36,8 @@ export default function DefaultCookieConsent({ children, locale, style, ...rest
       <CookieConsent
         disableStyles
         disableButtonStyles
-        ButtonComponent={Button}
+        ButtonComponent={AcceptButton}
         buttonText={translations[locale].agree}
-        buttonClasses="MuiButton-contained MuiButton-containedPrimary"
         buttonStyle={{ marginTop: 16, padding: '6px 16px' }}
         {...rest}>
         {children || <p style={{ margin: 0 }}>{translations[locale].content}</p>}

package/src/Dialog/dialog.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import MuiDialog from '@material-ui/core/Dialog';
-import MuiDialogContent from '@material-ui/core/DialogContent';
-import DialogActions from '@material-ui/core/DialogActions';
-import IconButton from '@material-ui/core/IconButton';
-import useMediaQuery from '@material-ui/core/useMediaQuery';
-import { useTheme } from '@material-ui/core/styles';
-import CloseIcon from '@material-ui/icons/Close';
+import MuiDialog from '@mui/material/Dialog';
+import MuiDialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import IconButton from '@mui/material/IconButton';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { useTheme } from '@mui/styles';
+import CloseIcon from '@mui/icons-material/Close';
 
 /**
  * Dialog
@@ -29,7 +29,7 @@ const Dialog = ({
 }) => {
   const theme = useTheme();
   // 不管是否是 mobile 设备, 只要屏宽 < sm, dialog 就处于 mobile 模式
-  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
   const showHeader = title || showCloseButton || toolbar;
   const handleOnClose = (e, reason) => {
     // escapeKeyDown/backdropClick
@@ -48,7 +48,10 @@ const Dialog = ({
   );
 
   const closeButton = (
-    <IconButton className="ux-dialog_closeButton" onClick={e => handleOnClose(e, 'closeButton')}>
+    <IconButton
+      className="ux-dialog_closeButton"
+      onClick={e => handleOnClose(e, 'closeButton')}
+      size="large">
       <CloseIcon />
     </IconButton>
   );

package/src/Footer/index.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 
 import { mergeProps } from '../Util';
 import Logo from '../Logo';

package/src/Header/header.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import Box from '@material-ui/core/Box';
-import Container from '@material-ui/core/Container';
-import useTheme from '@material-ui/core/styles/useTheme';
+import Box from '@mui/material/Box';
+import Container from '@mui/material/Container';
+import useTheme from '@mui/styles/useTheme';
 
 /**
  * Header 组件
@@ -128,7 +128,7 @@ const Root = styled.div`
     display: flex;
     align-items: center;
   }
-  ${props => props.$theme.breakpoints.down('md')} {
+  ${props => props.$theme.breakpoints.down('lg')} {
     .header-brand {
       margin-right: 12px;
       .header-brand-title {
@@ -138,7 +138,7 @@ const Root = styled.div`
       }
     }
   }
-  ${props => props.$theme.breakpoints.down('sm')} {
+  ${props => props.$theme.breakpoints.down('md')} {
     .header-container {
       height: 56px;
     }

package/src/Header/responsive-header.js

@@ -1,11 +1,11 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import MenuIcon from '@material-ui/icons/Menu';
-import Button from '@material-ui/core/IconButton';
-import useTheme from '@material-ui/core/styles/useTheme';
-import useMediaQuery from '@material-ui/core/useMediaQuery';
-import Drawer from '@material-ui/core/Drawer';
+import MenuIcon from '@mui/icons-material/Menu';
+import Button from '@mui/material/IconButton';
+import useTheme from '@mui/styles/useTheme';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import Drawer from '@mui/material/Drawer';
 import Header from './header';
 
 /**
@@ -17,7 +17,7 @@ import Header from './header';
  */
 function ResponsiveHeader({ menu, prepend, children, ...rest }) {
   const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
   const [drawerOpen, setDrawerOpen] = useState(false);
   const _children =
     typeof children === 'function'
@@ -81,7 +81,7 @@ const Root = styled(Header)`
   .header-menu {
     display: none;
   }
-  ${props => props.$theme.breakpoints.down('sm')} {
+  ${props => props.$theme.breakpoints.down('md')} {
     .header-menu {
       display: block;
     }

package/src/Icon/index.js

@@ -10,6 +10,7 @@ const variants = {
   solid: 'fas',
 };
 
+// eslint-disable-next-line react/prop-types
 const Icon = ({ name, color, size, variant, rounded, style, className, forwardedRef, ...rest }) => {
   const content = (
     <i

package/src/Img/index.js

@@ -1,12 +1,19 @@
 import React, { useEffect, useMemo, useState } from 'react';
+import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
-import { makeStyles, SvgIcon } from '@material-ui/core';
+import { SvgIcon } from '@mui/material';
 import { useInView } from 'react-intersection-observer';
 import Alert from 'mdi-material-ui/Alert';
 import ImageIcon from 'mdi-material-ui/Image';
 
-const useStyles = makeStyles(() => ({
-  root: {
+const PREFIX = 'Img';
+
+const classes = {
+  root: `${PREFIX}-root`,
+};
+
+const Root = styled('div')(() => ({
+  [`& .${classes.root}`]: {
     position: 'relative',
     overflow: 'hidden',
     '& .image--state, & .image--img': {
@@ -56,7 +63,6 @@ function Img({
   onSuccess,
   ...rest
 }) {
-  const classes = useStyles();
   const [ref, inView] = lazy ? useInView({ threshold: 0, triggerOnce: true }) : [null, true];
 
   const [imgState, setImgState] = useState('init');
@@ -117,7 +123,7 @@ function Img({
 
   return (
     // paddingTop 要求元素本身的宽度为 100%，所以只能加一个外层元素去限制宽度
-    <div ref={ref} style={outerStyle} {...rest}>
+    <Root ref={ref} style={outerStyle} {...rest}>
       <div className={`image ${className} ${classes.root}`} style={mergedStyle}>
         {!fallback && imgState === 'error' && (
           <div className="image--state" title="loading image">
@@ -131,7 +137,7 @@ function Img({
         )}
         {imgState === 'loaded' && <img className="image--img" src={src} alt={alt} />}
       </div>
-    </div>
+    </Root>
   );
 }
 

package/src/InfoRow/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import camelCase from 'lodash/camelCase';
 import upperFirst from 'lodash/upperFirst';
 import styled from 'styled-components';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 
 const InfoRow = ({ name, nameFormatter, layout, children, valueComponent, nameWidth, ...rest }) => (
   <Container layout={layout} width={nameWidth} {...rest}>

package/src/Layout/dashboard/header.js

@@ -1,20 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import Button from '@material-ui/core/IconButton';
-import AppBar from '@material-ui/core/AppBar';
-import Toolbar from '@material-ui/core/Toolbar';
-import Box from '@material-ui/core/Box';
-import Typography from '@material-ui/core/Typography';
-import Hidden from '@material-ui/core/Hidden';
-import MenuIcon from '@material-ui/icons/Menu';
+import Button from '@mui/material/IconButton';
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Hidden from '@mui/material/Hidden';
+import MenuIcon from '@mui/icons-material/Menu';
 import { Link } from 'react-router-dom';
 
 import Logo from '../../Logo';
 
 const StyledAppBar = styled(AppBar)`
   && {
-    z-index: ${props => props.theme.zIndex.drawer + 1};
+    z-index: ${props => props.theme.zIndex.drawer};
     background: ${props => props.theme.palette.background.default};
     box-shadow: none;
     top: 0;
@@ -71,7 +71,7 @@ const StyledAppBar = styled(AppBar)`
   .header-menu {
     display: none;
   }
-  ${props => props.theme.breakpoints.down('sm')} {
+  ${props => props.theme.breakpoints.down('md')} {
     .header-title {
       display: none;
     }
@@ -116,7 +116,7 @@ export default function Header({
           <MenuIcon />
         </Button>
         <Link to={homeUrl} className="header-link">
-          <Hidden smDown>
+          <Hidden mdDown>
             <div className="header-logo">{logo || <Logo showText={false} />}</div>
           </Hidden>
           <div className="header-title">