feat: migrating mui components (#75)

* feat: migrate MUI on progress * feat: fix search component * fix: remove mui core 4 * fix: remove mui core 4
myriadsocial · Nov 7, 2022 · 82960ce · 82960ce
1 parent 1cf593c
commit 82960ce
Show file tree

Hide file tree

Showing 22 changed files with 95 additions and 1,150 deletions.
diff --git a/package.json b/package.json
@@ -38,9 +38,6 @@
     "@emotion/styled": "^11.10.5",
     "@fontsource/mulish": "^4.5.13",
     "@heroicons/react": "^1.0.6",
-    "@material-ui/core": "^4.12.4",
-    "@material-ui/icons": "^4.11.3",
-    "@material-ui/lab": "^4.0.0-alpha.61",
     "@mui/icons-material": "^5.10.6",
     "@mui/material": "^5.10.8",
     "@polkadot/api": "^9.4.3",

diff --git a/src/components/atoms/Modal/Modal.styles.ts b/src/components/atoms/Modal/Modal.styles.ts
diff --git a/src/components/atoms/Modal/Modal.tsx b/src/components/atoms/Modal/Modal.tsx
@@ -1,16 +1,11 @@
-import { XIcon } from '@heroicons/react/solid';
-
 import React from 'react';
 
-import { IconButton, SvgIcon, Typography } from '@material-ui/core';
-import Dialog, { DialogProps } from '@material-ui/core/Dialog';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogTitle from '@material-ui/core/DialogTitle';
-
 import ShowIf from 'src/components/molecules/common/show-if.component';
 
-import { useStyles } from './Modal.styles';
+import { Dialog, DialogProps, IconButton } from '@mui/material';
 import { AllignTitle, TitleSize } from './Modal.types';
+import Image from 'next/image';
+import { IcClosePurple } from 'public/icons';
 
 export type ModalProps = DialogProps & {
   title?: string | React.ReactNode;
@@ -36,8 +31,6 @@ export const Modal: React.FC<ModalProps> = (props) => {
     ...otherProps
   } = props;
 
-  const styles = useStyles({ align, titleSize, gutter, fullScreen });
-
   const handleClose = () => {
     onClose();
   };
@@ -47,43 +40,37 @@ export const Modal: React.FC<ModalProps> = (props) => {
       onClose={handleClose}
       {...otherProps}
       fullScreen={fullScreen}
-      className={styles.root}
-      classes={{ paper: styles.paper }}
       disableEnforceFocus
+      PaperProps={{ style: { borderRadius: 10 } }}
     >
       <ShowIf condition={!fullScreen}>
-        <DialogTitle
-          disableTypography
-          className={[styles.title, className].join(' ')}
-        >
-          <Typography variant={titleSize === 'small' ? 'h5' : 'h4'}>
-            {title}
-          </Typography>
+        <div className="items-center">
+          <div className="p-7 text-xl font-bold">{title}</div>
           {subtitle &&
           (typeof subtitle === 'string' || subtitle instanceof String) ? (
-            <Typography
-              variant="subtitle1"
-              display="block"
-              className={styles.subtitle}
-            >
-              {subtitle}
-            </Typography>
+            <div className="text-base">{subtitle}</div>
           ) : (
             <>{subtitle}</>
           )}
           <IconButton
-            color="secondary"
             aria-label="close"
             size="small"
-            className={styles.close}
+            style={{
+              position: 'absolute',
+              right: 30,
+              top: 30,
+              fill: 'currentcolor',
+              width: 30,
+              height: 30,
+            }}
             onClick={onClose}
           >
-            <SvgIcon component={XIcon} color="primary" fontSize="medium" />
+            <Image src={IcClosePurple} height={20} width={20} alt="" />
           </IconButton>
-        </DialogTitle>
+        </div>
       </ShowIf>
 
-      <DialogContent className={styles.content}> {children} </DialogContent>
+      <div className="px-4 py-2"> {children} </div>
     </Dialog>
   );
 };
diff --git a/src/components/molecules/PolkadotAccountList/PolkadotAccountList.styles.ts b/src/components/molecules/PolkadotAccountList/PolkadotAccountList.styles.ts
diff --git a/src/components/molecules/PolkadotAccountList/PolkadotAccountList.tsx b/src/components/molecules/PolkadotAccountList/PolkadotAccountList.tsx
@@ -2,21 +2,13 @@ import React from 'react';
 
 import dynamic from 'next/dynamic';
 
-import { Typography } from '@material-ui/core';
-import Button from '@material-ui/core/Button';
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemAvatar from '@material-ui/core/ListItemAvatar';
-import ListItemText from '@material-ui/core/ListItemText';
-import YouTubeIcon from '@material-ui/icons/YouTube';
-
 import { InjectedAccountWithMeta } from '@polkadot/extension-inject/types';
 
+import { Button, ListItemButton } from '@mui/material';
 import { Modal } from '../../atoms/Modal';
 import { AllignTitle } from '../../atoms/Modal/Modal.types';
 import { PolkadotLink } from '../common/PolkadotLink.component';
 import ShowIf from '../common/show-if.component';
-import { useStyles } from './PolkadotAccountList.styles';
 
 type PolkadotAccountListProps = {
   isOpen: boolean;
@@ -35,8 +27,6 @@ export const PolkadotAccountList: React.FC<PolkadotAccountListProps> = ({
   title,
   align,
 }) => {
-  const styles = useStyles();
-
   const IdenticonWithoutSSR = dynamic(
     () => import('@polkadot/react-identicon'),
     {
@@ -51,54 +41,59 @@ export const PolkadotAccountList: React.FC<PolkadotAccountListProps> = ({
       onClose={onClose}
       align={align ?? 'center'}
     >
-      <div className={styles.wrapper}>
+      <div className="w-[380px]">
         <ShowIf condition={accounts.length == 0}>
-          <Typography className={styles.help}>
+          <div className="p-1 text-center max-w-[390px] ml-auto mr-auto text-base font-semibold">
             Please open your&nbsp;
             <PolkadotLink />
             &nbsp;extension and create new account or import existing.Then
             reload this page.
-          </Typography>
+          </div>
 
-          <div className={styles.buttonGroup}>
+          <div className="w-full py-2 flex flex-wrap justify-between">
             <Button
               variant="contained"
-              fullWidth
               size="medium"
-              href="https://polkadot.js.org/extension"
-              startIcon={<YouTubeIcon />}
+              fullWidth
+              style={{
+                padding: 8,
+                borderRadius: 20,
+                fontFamily: 'mulish',
+                textTransform: 'capitalize',
+                backgroundColor: '#BCBCBC',
+                fontSize: 14,
+              }}
             >
-              Watch Tutorial Video
+              <div>Watch Tutorial Video</div>
             </Button>
           </div>
         </ShowIf>
         <ShowIf condition={accounts.length > 0}>
-          <List className={styles.list}>
+          <div className="mb-4">
             {accounts.map((account) => {
               return (
-                <ListItem
-                  disableGutters
+                <button
                   onClick={() => onSelect(account)}
                   key={account.address}
-                  className={styles.list}
-                  button
+                  className="hover:bg-selected-yellow flex w-[360px] p-2 overflow-hidden items-center"
                 >
-                  <ListItemAvatar>
-                    <IdenticonWithoutSSR
-                      value={account.address}
-                      size={48}
-                      theme="polkadot"
-                    />
-                  </ListItemAvatar>
-                  <ListItemText
-                    primary={account.meta.name}
-                    secondary={account.address}
-                    className={styles.accountDetail}
+                  <IdenticonWithoutSSR
+                    value={account.address}
+                    size={48}
+                    theme="polkadot"
                   />
-                </ListItem>
+                  <div className="ml-2">
+                    <div className="text-sm text-left text-[#0A0A0A]">
+                      {account.meta.name}
+                    </div>
+                    <div className="max-w-sm text-left text-xs text-[#616161]">
+                      {account.address}
+                    </div>
+                  </div>
+                </button>
               );
             })}
-          </List>
+          </div>
         </ShowIf>
       </div>
     </Modal>