@arcblock/ux 2.1.29 → 2.1.32

package/lib/Blocklet/blocklet.js

@@ -15,7 +15,7 @@ var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularPr
 
 var _Avatar = _interopRequireDefault(require("@arcblock/did-connect/lib/Avatar"));
 
-var _styles = require("@mui/styles");
+var _styles = require("@mui/material/styles");
 
 var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
 

package/lib/BlockletNFT/index.js

@@ -19,7 +19,7 @@ var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularPr
 
 var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
 
-var _useTheme = _interopRequireDefault(require("@mui/styles/useTheme"));
+var _styles = require("@mui/material/styles");
 
 var _Avatar = _interopRequireDefault(require("@arcblock/did-connect/lib/Avatar"));
 
@@ -139,7 +139,7 @@ function BlockletNFT(_ref2) {
 
   const _onMainClick = wrapHandler(onMainClick);
 
-  const theme = (0, _useTheme.default)();
+  const theme = (0, _styles.useTheme)();
   const isDownSm = (0, _useMediaQuery.default)(theme.breakpoints.down('md'));
   const isDownMd = (0, _useMediaQuery.default)(theme.breakpoints.down('lg'));
   const isUpLg = (0, _useMediaQuery.default)(theme.breakpoints.up('lg')); // If size is auto, need calculate actual size according to screen size

package/lib/Dialog/dialog.js

@@ -19,7 +19,7 @@ var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 
 var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
 
-var _styles = require("@mui/styles");
+var _styles = require("@mui/material/styles");
 
 var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
 

package/lib/ErrorBoundary/fallback.js

@@ -10,7 +10,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _useTheme = _interopRequireDefault(require("@mui/styles/useTheme"));
+var _styles = require("@mui/material/styles");
 
 var _colors = require("@mui/material/colors");
 
@@ -26,7 +26,7 @@ function InternalErrorFallback(_ref) {
     desc,
     retryFunc
   } = _ref;
-  const theme = (0, _useTheme.default)();
+  const theme = (0, _styles.useTheme)();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, {
     role: "alert",
     $theme: theme,

package/lib/Footer/index.js

@@ -11,6 +11,8 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
+var _Container = _interopRequireDefault(require("@mui/material/Container"));
+
 var _Util = require("../Util");
 
 var _Logo = _interopRequireDefault(require("../Logo"));
@@ -35,32 +37,35 @@ function Footer(props) {
     className: className,
     style: style,
     dark: dark,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
-      component: "div",
-      className: "footer",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
-        component: "p",
-        className: "footer-item",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-          className: "footer-copy",
-          children: ["Copyright \xA9 ", copyYear, " "]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          className: "footer-brand",
-          children: brand
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
-        component: "p",
-        className: "footer-item",
-        style: {
-          justifyContent: 'flex-end',
-          flexShrink: 0
-        },
-        children: ["Powered by", /*#__PURE__*/(0, _jsxRuntime.jsx)(_Logo.default, {
-          mode: dark ? 'light' : 'dark',
-          layout: "horizontal",
-          className: "logo-container"
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Container.default, {
+      maxWidth: false,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+        component: "div",
+        className: "footer",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+          component: "p",
+          className: "footer-item",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+            className: "footer-copy",
+            children: ["Copyright \xA9 ", copyYear, " "]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: "footer-brand",
+            children: brand
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+          component: "p",
+          className: "footer-item",
+          style: {
+            justifyContent: 'flex-end',
+            flexShrink: 0
+          },
+          children: ["Powered by", /*#__PURE__*/(0, _jsxRuntime.jsx)(_Logo.default, {
+            mode: dark ? 'light' : 'dark',
+            layout: "horizontal",
+            className: "logo-container"
+          })]
         })]
-      })]
+      })
     })
   });
 }
@@ -83,4 +88,10 @@ Footer.defaultProps = {
 const Container = _styledComponents.default.div.withConfig({
   displayName: "Footer__Container",
   componentId: "sc-1qpifuv-0"
-})(["margin-top:64px;padding:24px 0 32px;border-top:1px solid ", ";box-sizing:border-box;width:100%;@media (max-width:540px){padding:8px 0;}.footer{display:flex;align-items:center;justify-content:space-between;.footer-item{color:", ";display:flex;align-items:center;flex-wrap:wrap;font-size:0.9rem;}.footer-brand{margin-left:8px;margin-right:8px;}.logo-container{margin:0 24px;width:90px;opacity:0.5;}@media (max-width:540px){.footer-item{font-size:0.7rem;}.logo-container{margin:0 0 0 16px;width:70px;height:40px;}}@media (max-width:380px){.footer-item{font-size:0.65rem;}.logo-container{margin:0 0 0 8px;height:24px;}}}"], props => props.dark ? props.theme.palette.grey[900] : '#dee2e7', props => props.theme.palette.grey[900]);
+})(["margin-top:64px;padding:24px 0 32px;border-top:1px solid ", ";box-sizing:border-box;width:100%;@media (max-width:540px){padding:8px 0;}.footer{display:flex;align-items:center;justify-content:space-between;.footer-item{color:", ";display:flex;align-items:center;flex-wrap:wrap;font-size:0.9rem;}.footer-brand{margin-left:8px;margin-right:8px;}.logo-container{margin-left:24px;width:90px;opacity:0.5;}@media (max-width:540px){.footer-item{font-size:0.7rem;}.logo-container{margin:0 0 0 16px;width:70px;height:40px;}}@media (max-width:380px){.footer-item{font-size:0.65rem;}.logo-container{margin:0 0 0 8px;height:24px;}}}"], props => props.dark ? props.theme.palette.grey[900] : '#dee2e7', _ref => {
+  let {
+    theme,
+    dark
+  } = _ref;
+  return dark ? theme.palette.grey[500] : theme.palette.grey[900];
+});

package/lib/Header/header.js

@@ -13,7 +13,7 @@ var _Box = _interopRequireDefault(require("@mui/material/Box"));
 
 var _Container = _interopRequireDefault(require("@mui/material/Container"));
 
-var _useTheme = _interopRequireDefault(require("@mui/styles/useTheme"));
+var _styles = require("@mui/material/styles");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
@@ -47,7 +47,7 @@ function Header(_ref) {
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  const theme = (0, _useTheme.default)();
+  const theme = (0, _styles.useTheme)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, _objectSpread(_objectSpread({}, rest), {}, {
     $theme: theme,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Container.default, {

package/lib/Header/responsive-header.js

@@ -15,7 +15,7 @@ var _Menu = _interopRequireDefault(require("@mui/icons-material/Menu"));
 
 var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 
-var _useTheme = _interopRequireDefault(require("@mui/styles/useTheme"));
+var _styles = require("@mui/material/styles");
 
 var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
 
@@ -54,7 +54,7 @@ function ResponsiveHeader(_ref) {
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  const theme = (0, _useTheme.default)();
+  const theme = (0, _styles.useTheme)();
   const isMobile = (0, _useMediaQuery.default)(theme.breakpoints.down('md'));
   const [drawerOpen, setDrawerOpen] = (0, _react.useState)(false);
 

package/lib/Layout/dashboard/index.js

@@ -15,7 +15,7 @@ var _reactHelmet = _interopRequireDefault(require("react-helmet"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _useTheme = _interopRequireDefault(require("@mui/styles/useTheme"));
+var _styles = require("@mui/material/styles");
 
 var _Container = _interopRequireDefault(require("@mui/material/Container"));
 
@@ -77,7 +77,7 @@ function Dashboard(_ref2) {
   } = _ref2,
       rest = _objectWithoutProperties(_ref2, _excluded2);
 
-  const theme = (0, _useTheme.default)();
+  const theme = (0, _styles.useTheme)();
   const location = (0, _reactRouterDom.useLocation)();
   const navItems = (0, _react.useMemo)(() => links.map(link => _objectSpread(_objectSpread({}, link), {}, {
     label: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Link, {
@@ -131,9 +131,7 @@ function Dashboard(_ref2) {
           maxWidth: false
         }), {}, {
           children: children
-        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Footer.default, {
-          className: "dashboard-footer"
-        })]
+        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Footer.default, {})]
       })]
     })]
   }));
@@ -155,7 +153,7 @@ Dashboard.defaultProps = {
 const Wrapper = _styledComponents.default.div.withConfig({
   displayName: "dashboard__Wrapper",
   componentId: "sc-arvc7q-0"
-})(["&.dashboard{display:flex;flex-direction:column;height:100vh;}.dashboard-body{overflow:hidden;flex:1;}.dashboard-sidebar{box-sizing:border-box;flex:0 0 auto;width:104px;&:hover{overflow-y:auto;}}.dashboard-main{display:flex;flex-direction:column;overflow:auto;flex:1;}.dashboard-content{flex:1;}.dashboard-footer{padding-left:30px;}"]);
+})(["&.dashboard{display:flex;flex-direction:column;height:100vh;}.dashboard-body{overflow:hidden;flex:1;}.dashboard-sidebar{box-sizing:border-box;flex:0 0 auto;width:104px;&:hover{overflow-y:auto;}}.dashboard-main{display:flex;flex-direction:column;overflow:auto;flex:1;}.dashboard-content{flex:1;}"]);
 
 const StyledUxHeader = (0, _styledComponents.default)(_Header.ResponsiveHeader).withConfig({
   displayName: "dashboard__StyledUxHeader",

package/lib/Layout/dashboard-legacy/index.js

@@ -46,7 +46,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 const Wrapper = _styledComponents.default.div.withConfig({
   displayName: "dashboard-legacy__Wrapper",
   componentId: "sc-z8z10v-0"
-})(["&.dashboard{display:flex;flex-direction:column;height:100vh;}.dashboard__body{overflow:hidden;flex:1;}.dashboard__main{display:flex;flex-direction:column;overflow:auto;flex:1;}.dashboard__content{flex:1;}.dashboard__footer{padding-left:30px;}.drawerPaper{position:relative;white-space:nowrap;width:120px;background:", ";box-shadow:2px 16px 10px 0 rgba(0,0,0,", ");border:0;}"], props => props.theme.palette.background.default, props => props.theme.mode === 'light' ? 0.05 : 0.5);
+})(["&.dashboard{display:flex;flex-direction:column;height:100vh;}.dashboard__body{overflow:hidden;flex:1;}.dashboard__main{display:flex;flex-direction:column;overflow:auto;flex:1;}.dashboard__content{flex:1;}.drawerPaper{position:relative;white-space:nowrap;width:120px;background:", ";box-shadow:2px 16px 10px 0 rgba(0,0,0,", ");border:0;}"], props => props.theme.palette.background.default, props => props.theme.mode === 'light' ? 0.05 : 0.5);
 
 function Dashboard(_ref) {
   let {
@@ -126,9 +126,7 @@ function Dashboard(_ref) {
           maxWidth: isFullWidth ? false : 'lg',
           className: "dashboard__content",
           children: children
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Footer.default, {
-          className: "dashboard__footer"
-        })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Footer.default, {})]
       })]
     })]
   }));

package/lib/Layout/dashboard-legacy/sidebar.js

@@ -11,10 +11,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _withTheme = _interopRequireDefault(require("@mui/styles/withTheme"));
-
 var _reactRouterDom = require("react-router-dom");
 
+var _styles = require("@mui/material/styles");
+
 var _Button = _interopRequireDefault(require("@mui/material/Button"));
 
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
@@ -27,7 +27,7 @@ var _Logo = _interopRequireDefault(require("../../Logo"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["location", "theme", "images", "links", "prefix", "addons", "logo"];
+const _excluded = ["location", "images", "links", "prefix", "addons", "logo"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -44,7 +44,6 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 function Sidebar(_ref) {
   let {
     location,
-    theme,
     images,
     links,
     prefix,
@@ -53,6 +52,8 @@ function Sidebar(_ref) {
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
+  const theme = (0, _styles.useTheme)();
+
   const isSelected = (url, name) => {
     const pattern = new RegExp("/".concat(name));
     return pattern.test(location.pathname);
@@ -100,7 +101,6 @@ function Sidebar(_ref) {
 
 Sidebar.propTypes = {
   location: _propTypes.default.object.isRequired,
-  theme: _propTypes.default.object.isRequired,
   images: _propTypes.default.object.isRequired,
   links: _propTypes.default.array.isRequired,
   prefix: _propTypes.default.string,
@@ -122,6 +122,6 @@ const MenuItem = (0, _styledComponents.default)(_Button.default).withConfig({
   componentId: "sc-gtwxx4-1"
 })(["&&{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;transition:all 200ms ease-in-out;background:", ";padding:24px 0;border-left:2px solid ", ";border-radius:0;&:hover{background:", ";border-left-color:", ";}.menu-title{margin-top:8px;font-size:12px;font-weight:500;text-align:center;text-transform:capitalize;letter-spacing:normal;width:80%;color:", ";}}"], props => props.selected ? gradient : '', props => props.selected ? _colors.teal.A700 : 'transparent', gradient, _colors.teal.A700, props => props.theme.palette.text.primary);
 
-var _default = (0, _reactRouterDom.withRouter)((0, _withTheme.default)(Sidebar));
+var _default = (0, _reactRouterDom.withRouter)(Sidebar);
 
 exports.default = _default;

package/lib/Locale/selector.js

@@ -11,7 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _styles = require("@mui/styles");
+var _styles = require("@mui/material/styles");
 
 var _Button = _interopRequireDefault(require("@mui/material/Button"));
 

package/lib/NavMenu/style.js

@@ -12,7 +12,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const NavMenuBase = _styledComponents.default.nav.withConfig({
   displayName: "style__NavMenuBase",
   componentId: "sc-2g7isz-0"
-})(["background-color:", ";font-size:14px;ul{list-style:none;margin:0;padding:0;}.navmenu-item,.navmenu-sub{display:flex;align-items:center;}a{color:inherit;}.navmenu-item,.navmenu-sub{color:", ";}.navmenu-item--active,.navmenu-item:hover,.navmenu-sub--opened{color:", ";}.navmenu-item{position:relative;cursor:pointer;transition:color 0.2s ease-in-out;a{text-decoration:none;white-space:nowrap;}a::before{position:absolute;top:0;right:0;bottom:0;left:0;background-color:transparent;content:'';}}.navmenu-sub{position:relative;cursor:pointer;}.navmenu-item-icon,.navmenu-sub-icon,.navmenu-sub-expand-icon{display:flex;line-height:1;}.navmenu-item-icon,.navmenu-sub-icon{margin-right:4px;}.navmenu-item-icon > *,.navmenu-sub-icon > *{font-size:1.5em;}.navmenu-sub-expand-icon{margin-left:8px;> *{width:0.8em;height:0.8em;transition:transform 0.2s ease-in-out;}}"], props => props.$bgColor, props => props.$textColor, props => props.$activeTextColor);
+})(["background-color:", ";font-size:14px;ul{list-style:none;margin:0;padding:0;}.navmenu-item,.navmenu-sub{display:flex;align-items:center;}a{color:inherit;}.navmenu-item,.navmenu-sub{color:", ";}.navmenu-item--active,.navmenu-item:hover,.navmenu-sub--opened{color:", ";}.navmenu-item{position:relative;cursor:pointer;transition:color 0.2s ease-in-out;a{text-decoration:none;white-space:nowrap;}a::before{position:absolute;top:0;right:0;bottom:0;left:0;background-color:transparent;content:'';}}.navmenu-sub{position:relative;cursor:pointer;}.navmenu-item-icon,.navmenu-sub-icon,.navmenu-sub-expand-icon{display:flex;line-height:1;}.navmenu-item-icon,.navmenu-sub-icon{margin-right:4px;}.navmenu-item-icon > *,.navmenu-sub-icon > *{width:auto;max-height:20px;font-size:1.5em;}.navmenu-sub-expand-icon{margin-left:8px;> *{width:0.8em;height:0.8em;transition:transform 0.2s ease-in-out;}}"], props => props.$bgColor, props => props.$textColor, props => props.$activeTextColor);
 
 const HorizontalStyle = (0, _styledComponents.default)(NavMenuBase).withConfig({
   displayName: "style__HorizontalStyle",

package/lib/Result/common.js

@@ -11,7 +11,7 @@ exports.InternalServerError = InternalServerError;
 exports.Maintenance = Maintenance;
 exports.PageNotFound = PageNotFound;
 
-var _useTheme = _interopRequireDefault(require("@mui/styles/useTheme"));
+var _styles = require("@mui/material/styles");
 
 var _Info = _interopRequireDefault(require("@mui/icons-material/Info"));
 
@@ -161,7 +161,7 @@ function Info(props) {
 Info.status = 'info';
 
 function StyledErrorIcon(props) {
-  const theme = (0, _useTheme.default)();
+  const theme = (0, _styles.useTheme)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CancelRounded.default, _objectSpread({
     style: {
       color: theme.palette.error.main,
@@ -171,7 +171,7 @@ function StyledErrorIcon(props) {
 }
 
 function StyledInfoIcon(props) {
-  const theme = (0, _useTheme.default)();
+  const theme = (0, _styles.useTheme)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Info.default, _objectSpread({
     style: {
       color: theme.palette.info.main,

package/lib/Tag/index.js

@@ -13,7 +13,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
-var _useTheme = _interopRequireDefault(require("@mui/styles/useTheme"));
+var _styles = require("@mui/material/styles");
 
 var _Util = require("../Util");
 
@@ -73,7 +73,7 @@ function Tag(props) {
 
   const {
     palette
-  } = (0, _useTheme.default)();
+  } = (0, _styles.useTheme)();
   const styles = Object.assign({}, types[type] || types.primary, style);
 
   if (palette[type]) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.1.29",
+  "version": "2.1.32",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -52,10 +52,10 @@
     "react": ">=18.1.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "710f8e28829c64030a36e3d9301358834b8937e4",
+  "gitHead": "4df5f98bc5e564e6d828c96315899e8c91d59000",
   "dependencies": {
-    "@arcblock/icons": "^2.1.29",
-    "@arcblock/react-hooks": "^2.1.29",
+    "@arcblock/icons": "^2.1.32",
+    "@arcblock/react-hooks": "^2.1.32",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",

package/src/Blocklet/blocklet.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import Typography from '@mui/material/Typography';
 import CircularProgress from '@mui/material/CircularProgress';
 import Avatar from '@arcblock/did-connect/lib/Avatar';
-import { useTheme } from '@mui/styles';
+import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 
 import Button from '../Button';

package/src/BlockletNFT/index.js

@@ -5,7 +5,7 @@ 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 { useTheme } from '@mui/material/styles';
 import Avatar from '@arcblock/did-connect/lib/Avatar';
 
 import Icon from '../Icon';

package/src/Dialog/dialog.js

@@ -5,7 +5,7 @@ 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 { useTheme } from '@mui/material/styles';
 import CloseIcon from '@mui/icons-material/Close';
 
 /**

package/src/ErrorBoundary/fallback.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import useTheme from '@mui/styles/useTheme';
+import { useTheme } from '@mui/material/styles';
 import { red } from '@mui/material/colors';
 import Button from '../Button';
 

package/src/Footer/index.js

@@ -2,6 +2,7 @@
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import Typography from '@mui/material/Typography';
+import MuiContainer from '@mui/material/Container';
 
 import { mergeProps } from '../Util';
 import Logo from '../Logo';
@@ -15,16 +16,18 @@ export default function Footer(props) {
 
   return (
     <Container className={className} style={style} dark={dark}>
-      <Typography component="div" className="footer">
-        <Typography component="p" className="footer-item">
-          <span className="footer-copy">Copyright &copy; {copyYear} </span>
-          <span className="footer-brand">{brand}</span>
+      <MuiContainer maxWidth={false}>
+        <Typography component="div" className="footer">
+          <Typography component="p" className="footer-item">
+            <span className="footer-copy">Copyright &copy; {copyYear} </span>
+            <span className="footer-brand">{brand}</span>
+          </Typography>
+          <Typography component="p" className="footer-item" style={{ justifyContent: 'flex-end', flexShrink: 0 }}>
+            Powered by
+            <Logo mode={dark ? 'light' : 'dark'} layout="horizontal" className="logo-container" />
+          </Typography>
         </Typography>
-        <Typography component="p" className="footer-item" style={{ justifyContent: 'flex-end', flexShrink: 0 }}>
-          Powered by
-          <Logo mode={dark ? 'light' : 'dark'} layout="horizontal" className="logo-container" />
-        </Typography>
-      </Typography>
+      </MuiContainer>
     </Container>
   );
 }
@@ -62,7 +65,7 @@ const Container = styled.div`
     justify-content: space-between;
 
     .footer-item {
-      color: ${(props) => props.theme.palette.grey[900]};
+      color: ${({ theme, dark }) => (dark ? theme.palette.grey[500] : theme.palette.grey[900])};
       display: flex;
       align-items: center;
       flex-wrap: wrap;
@@ -75,7 +78,7 @@ const Container = styled.div`
     }
 
     .logo-container {
-      margin: 0 24px;
+      margin-left: 24px;
       width: 90px;
       opacity: 0.5;
     }

package/src/Header/header.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
-import useTheme from '@mui/styles/useTheme';
+import { useTheme } from '@mui/material/styles';
 
 /**
  * Header 组件

package/src/Header/responsive-header.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import MenuIcon from '@mui/icons-material/Menu';
 import Button from '@mui/material/IconButton';
-import useTheme from '@mui/styles/useTheme';
+import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import Drawer from '@mui/material/Drawer';
 import Header from './header';

package/src/Layout/dashboard/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { withRouter, Link, useLocation, matchPath } from 'react-router-dom';
 import Helmet from 'react-helmet';
 import styled from 'styled-components';
-import useTheme from '@mui/styles/useTheme';
+import { useTheme } from '@mui/material/styles';
 import Container from '@mui/material/Container';
 import Hidden from '@mui/material/Hidden';
 import Box from '@mui/material/Box';
@@ -69,7 +69,7 @@ function Dashboard({ children, title, headerProps, links, fullWidth, ...rest })
           <Container className="dashboard-content" {...(fullWidth && { maxWidth: false })}>
             {children}
           </Container>
-          <Footer className="dashboard-footer" />
+          <Footer />
         </Box>
       </Box>
     </Wrapper>
@@ -117,9 +117,6 @@ const Wrapper = styled.div`
   .dashboard-content {
     flex: 1;
   }
-  .dashboard-footer {
-    padding-left: 30px;
-  }
 `;
 
 const StyledUxHeader = styled(ResponsiveHeader)`

package/src/Layout/dashboard-legacy/index.js

@@ -30,9 +30,6 @@ const Wrapper = styled.div`
   .dashboard__content {
     flex: 1;
   }
-  .dashboard__footer {
-    padding-left: 30px;
-  }
 
   .drawerPaper {
     position: relative;
@@ -105,7 +102,7 @@ export default function Dashboard({
           <Container maxWidth={isFullWidth ? false : 'lg'} className="dashboard__content">
             {children}
           </Container>
-          <Footer className="dashboard__footer" />
+          <Footer />
         </Box>
       </Box>
     </Wrapper>

package/src/Layout/dashboard-legacy/sidebar.js

@@ -1,9 +1,9 @@
 import { memo } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import withTheme from '@mui/styles/withTheme';
 
 import { withRouter, Link } from 'react-router-dom';
+import { useTheme } from '@mui/material/styles';
 import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
 import { teal } from '@mui/material/colors';
@@ -11,7 +11,8 @@ import { teal } from '@mui/material/colors';
 import ImageIcon from '../../Icon/image';
 import Logo from '../../Logo';
 
-function Sidebar({ location, theme, images, links, prefix, addons, logo, ...rest }) {
+function Sidebar({ location, images, links, prefix, addons, logo, ...rest }) {
+  const theme = useTheme();
   const isSelected = (url, name) => {
     const pattern = new RegExp(`/${name}`);
     return pattern.test(location.pathname);
@@ -47,7 +48,6 @@ function Sidebar({ location, theme, images, links, prefix, addons, logo, ...rest
 
 Sidebar.propTypes = {
   location: PropTypes.object.isRequired,
-  theme: PropTypes.object.isRequired,
   images: PropTypes.object.isRequired,
   links: PropTypes.array.isRequired,
   prefix: PropTypes.string,
@@ -117,4 +117,4 @@ const MenuItem = styled(Button)`
   }
 `;
 
-export default withRouter(withTheme(Sidebar));
+export default withRouter(Sidebar);

package/src/Locale/selector.js

@@ -3,7 +3,7 @@ import { useState, useContext, useRef } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
-import { useTheme } from '@mui/styles';
+import { useTheme } from '@mui/material/styles';
 import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
 import IconButton from '@mui/material/IconButton';

package/src/NavMenu/style.js

@@ -63,6 +63,8 @@ const NavMenuBase = styled.nav`
   }
   .navmenu-item-icon > *,
   .navmenu-sub-icon > * {
+    width: auto;
+    max-height: 20px;
     font-size: 1.5em;
   }
   .navmenu-sub-expand-icon {

package/src/Result/common.js

@@ -1,6 +1,6 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable no-param-reassign */
-import useTheme from '@mui/styles/useTheme';
+import { useTheme } from '@mui/material/styles';
 import InfoIcon from '@mui/icons-material/Info';
 import CancelRoundedIcon from '@mui/icons-material/CancelRounded';
 import Result from './result';

package/src/Tag/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 import Typography from '@mui/material/Typography';
-import useTheme from '@mui/styles/useTheme';
+import { useTheme } from '@mui/material/styles';
 
 import { mergeProps } from '../Util';
 import colors from '../Colors';