@arcblock/ux 2.4.0 → 2.4.3

package/src/Theme/theme.js

@@ -1,10 +1,10 @@
 // https://app.zeplin.io/styleguide/5d1436f1e97c2156f49c0725/colors
-import { createTheme, responsiveFontSizes } from '@mui/material/styles';
+import { createTheme as _createTheme, responsiveFontSizes } from '@mui/material/styles';
 import '@fontsource/lato/400.css';
 import '@fontsource/lato/700.css';
 import colors from '../Colors';
 
-const muiDarkTheme = createTheme({ palette: { mode: 'dark' } });
+const muiDarkTheme = _createTheme({ palette: { mode: 'dark' } });
 
 // https://material-ui.com/customization/default-theme/
 // eslint-disable-next-line import/prefer-default-export
@@ -37,7 +37,7 @@ export const create = ({ mode = 'light', pageWidth = 'md', palette, typography,
           palette || {}
         );
 
-  const theme = createTheme({
+  const theme = _createTheme({
     themeName: 'ArcBlock',
     palette: _palette,
     typography: Object.assign(
@@ -162,3 +162,5 @@ export const create = ({ mode = 'light', pageWidth = 'md', palette, typography,
 
   return enhanced;
 };
+
+export const createTheme = create;

package/src/Video/index.js

@@ -1,11 +1,10 @@
 import { useState } from 'react';
 import PropTypes from 'prop-types';
 import Player from 'react-player';
-import styled from '@emotion/styled';
-
 import CircularProgress from '@mui/material/CircularProgress';
 
 import { mergeProps } from '../Util';
+import { styled } from '../Theme';
 
 const { string, number, array, oneOfType, object } = PropTypes;
 
@@ -50,7 +49,7 @@ Video.defaultProps = {
   style: {},
 };
 
-const Placeholder = styled.div`
+const Placeholder = styled('div')`
   background-color: #222222;
   display: flex;
   justify-content: center;

package/src/Wallet/Action.js

@@ -1,12 +1,11 @@
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
-
 import Typography from '@mui/material/Typography';
 
 import logo from './images/abtwallet.png';
 import { mergeProps } from '../Util';
 import colors from '../Colors';
 import Button from '../Button';
+import { styled } from '../Theme';
 
 export default function WalletAction(props) {
   const newProps = mergeProps(props, WalletAction, ['style']);
@@ -62,7 +61,7 @@ const sizes = {
   },
 };
 
-const Content = styled.div`
+const Content = styled('div')`
   display: flex;
   justify-content: center;
   align-items: center;

package/src/Wallet/Download.js

@@ -1,6 +1,4 @@
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
-
 import Typography from '@mui/material/Typography';
 import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
 
@@ -10,6 +8,7 @@ import { ReactComponent as AndroidDownloadIcon } from './images/android_download
 
 import Button from '../Button';
 import { mergeProps } from '../Util';
+import { styled } from '../Theme';
 
 export default function WalletDownload(props) {
   const browser = useBrowser();
@@ -97,7 +96,7 @@ WalletDownload.defaultProps = {
   locale: 'zh',
 };
 
-const Container = styled.div`
+const Container = styled('div')`
   display: flex;
   flex-direction: ${(props) => (props.layout === 'vertical' ? 'column' : 'row')};
   align-items: center;

package/src/Wallet/Open.js

@@ -1,8 +1,9 @@
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
 import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
 import Fab from '@mui/material/Fab';
 
+import { styled } from '../Theme';
+
 export default function OpenInWallet({ locale, link }) {
   const buttonText = locale === 'zh' ? '在 DID 钱包打开' : 'Open in DID Wallet';
   const browser = useBrowser();

package/src/WechatPrompt/index.js

@@ -1,11 +1,10 @@
-import styled from '@emotion/styled';
-
 import Typography from '@mui/material/Typography';
 import Dialog from '@mui/material/Dialog';
 import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
 
 import IosImage from './images/ios.png';
 import AndroidImage from './images/android.png';
+import { styled } from '../Theme';
 
 export default function WechatPrompt() {
   const browser = useBrowser();
@@ -45,7 +44,7 @@ export default function WechatPrompt() {
   );
 }
 
-const Container = styled.div`
+const Container = styled('div')`
   .wechat-title {
     height: 80px;
     line-height: 80px;

package/src/withTheme/index.js

@@ -1,74 +1,61 @@
-import * as React from 'react';
-import { Global, ThemeProvider, css } from '@emotion/react';
-import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
+import { useEffect } from 'react';
+import { Global, css } from '@emotion/react';
 import CssBaseline from '@mui/material/CssBaseline';
 
-import { create } from '../Theme';
+import { createTheme, ThemeProvider } from '../Theme';
 
-const globalStyles = css`
-  font-family: ${(props) => props.theme.typography.fontFamily};
-  color: ${(props) => props.theme.typography.color.main};
+function withTheme(Component, { mode = 'light', pageWidth = 'md', palette, typography } = {}) {
+  const theme = createTheme({ mode, pageWidth, palette, typography });
 
-  a,
-  a:hover,
-  a:active {
-    text-decoration: none;
-    color: ${(props) => props.theme.palette.primary.dark};
-  }
+  const globalStyles = css`
+    font-family: ${theme.typography.fontFamily};
+    color: ${theme.typography.color.main};
 
-  a:hover {
-    color: ${(props) => props.theme.palette.primary.main};
-  }
+    a,
+    a:hover,
+    a:active {
+      text-decoration: none;
+      color: ${theme.palette.primary.dark};
+    }
 
-  .section--latest-post {
-    p:last-of-type {
-      margin: 0;
+    a:hover {
+      color: ${theme.palette.primary.main};
     }
-  }
 
-  .has-scrolled {
-    .section--footnotes {
-      position: static !important;
-      transition-property: background-color;
-      transition-duration: 600ms;
-      transition-timing-function: ease;
-      .footnote__title {
-        color: #fff;
+    .section--latest-post {
+      p:last-of-type {
+        margin: 0;
       }
     }
-  }
-`;
 
-function withTheme(Component, { mode = 'light', pageWidth = 'md', palette, typography } = {}) {
-  class WithTheme extends React.Component {
-    constructor(props) {
-      super(props);
-
-      this.theme = create({ mode, pageWidth, palette, typography });
+    .has-scrolled {
+      .section--footnotes {
+        position: static !important;
+        transition-property: background-color;
+        transition-duration: 600ms;
+        transition-timing-function: ease;
+        .footnote__title {
+          color: #fff;
+        }
+      }
     }
+  `;
 
-    componentDidMount() {
-      // Remove the server-side injected CSS.
+  return function WithTheme(props) {
+    useEffect(() => {
       const jssStyles = document.querySelector('#jss-server-side');
       if (jssStyles && jssStyles.parentNode) {
         jssStyles.parentNode.removeChild(jssStyles);
       }
-    }
-
-    render() {
-      return (
-        <MuiThemeProvider theme={this.theme}>
-          <CssBaseline />
-          <Global styles={globalStyles} />
-          <ThemeProvider theme={this.theme}>
-            <Component {...this.props} />
-          </ThemeProvider>
-        </MuiThemeProvider>
-      );
-    }
-  }
-
-  return WithTheme;
+    }, []);
+    return (
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        <Global styles={globalStyles} />
+        <Component {...props} />
+      </ThemeProvider>
+    );
+  };
 }
 
 export default withTheme;