update icons; integrate react-icons lib (#263)

ChainSafe · Jul 19, 2023 · ee96660 · ee96660
1 parent 332dd95
commit ee96660
Show file tree

Hide file tree

Showing 21 changed files with 101 additions and 151 deletions.
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -5,7 +5,6 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@fontsource/jost": "^5.0.3",
-    "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.13.6",
     "@mui/styled-engine": "^5.13.2",
     "@polkadot/api": "^10.9.1",

diff --git a/packages/ui/src/components/CallInfo.tsx b/packages/ui/src/components/CallInfo.tsx
@@ -7,7 +7,7 @@ import { useApi } from '../contexts/ApiContext'
 import { getExtrinsicName, isProxyCall } from '../utils'
 import { formatBnBalance } from '../utils/formatBnBalance'
 import MultisigCompactDisplay from './MultisigCompactDisplay'
-import { Launch as LaunchIcon } from '@mui/icons-material'
+import { HiOutlineArrowTopRightOnSquare as LaunchIcon } from 'react-icons/hi2'
 import { Link } from './library'
 import { usePjsLinks } from '../hooks/usePjsLinks'
 import { Alert } from '@mui/material'
@@ -126,10 +126,7 @@ const CallInfo = ({
             href={link}
             target="_blank"
           >
-            <LaunchIcon
-              className="icon"
-              fontSize="small"
-            />
+            <LaunchIcon size={20} />
           </Linkstyled>
         )}
       </CallNameStyled>

diff --git a/packages/ui/src/components/Drawer/DrawerMenu.tsx b/packages/ui/src/components/Drawer/DrawerMenu.tsx
@@ -1,5 +1,5 @@
 import IconButton from '@mui/material/IconButton'
-import { ChevronRight as ChevronRightIcon } from '@mui/icons-material'
+import { HiOutlineChevronRight as ChevronRightIcon } from 'react-icons/hi2'
 import Divider from '@mui/material/Divider'
 import List from '@mui/material/List'
 import ListItem from '@mui/material/ListItem'
@@ -30,7 +30,7 @@ function DrawerMenu({ handleDrawerClose }: DrawerMenuProps) {
     <>
       <DrawerHeader>
         <IconButton onClick={handleDrawerClose}>
-          <ChevronRightIcon />
+          <ChevronRightIcon size={20} />
         </IconButton>
       </DrawerHeader>
       <Divider />

diff --git a/packages/ui/src/components/Expander.tsx b/packages/ui/src/components/Expander.tsx
@@ -1,7 +1,7 @@
 import { Box, Collapse } from '@mui/material'
 import { ReactNode, useState } from 'react'
 import { styled } from '@mui/material/styles'
-import { KeyboardArrowRight as KeyboardArrowRightIcon } from '@mui/icons-material'
+import { HiChevronRight as ChevronRightIcon } from 'react-icons/hi2'
 
 interface Props {
   className?: string
@@ -19,7 +19,7 @@ const Expander = ({ className = '', title, content, expanded = false }: Props) =
         onClick={() => setOpen(!open)}
         className="titleWrapper"
       >
-        <KeyboardArrowRightIcon className={`${open ? 'rotated' : ''} expanderIcon`} />
+        <ChevronRightIcon className={`${open ? 'rotated' : ''} expanderIcon`} />
         {title}
       </div>
       <Collapse in={open}>{content}</Collapse>

diff --git a/packages/ui/src/components/Header/index.tsx b/packages/ui/src/components/Header/index.tsx
@@ -5,7 +5,7 @@ import { useMemo } from 'react'
 import MuiAppBar from '@mui/material/AppBar'
 import MultiProxySelection from '../select/MultiProxySelection'
 import { useAccounts } from '../../contexts/AccountsContext'
-import { Menu as MenuIcon } from '@mui/icons-material'
+import { HiOutlineBars3 as MenuIcon } from 'react-icons/hi2'
 import { useMultiProxy } from '../../contexts/MultiProxyContext'
 import { ROUTES } from '../../pages/routes'
 import { isEmptyArray } from '../../utils'
@@ -91,17 +91,15 @@ const RouterLinkStyled = styled(RouterLink)`
   }
 `
 
-const BoxStyled = styled(Box)(
-  ({ theme }) => `
-    display: none;
-    
-    @media (min-width: ${theme.breakpoints.values.sm}px) {
-        flex-grow: 1;
-        display: flex;
-        align-items: center;
-    }
+const BoxStyled = styled(Box)`
+  display: none;
+
+  @media (min-width: ${({ theme }) => theme.breakpoints.values.sm}px) {
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+  }
 `
-)
 
 const LogoWrapperStyled = styled(Box)`
   display: flex;
@@ -116,13 +114,12 @@ const LogoStyled = styled('img')`
   height: 3rem;
 `
 
-const IconButtonStyled = styled(IconButton)(
-  ({ theme }) => `
-    display: block;
-    @media (min-width: ${theme.breakpoints.values.sm}px) {
-        display: none;
-    }
+const IconButtonStyled = styled(IconButton)`
+  display: block;
+
+  @media (min-width: ${({ theme }) => theme.breakpoints.values.sm}px) {
+    display: none;
+  }
 `
-)
 
 export default Header
diff --git a/packages/ui/src/components/IdentityIcon.tsx b/packages/ui/src/components/IdentityIcon.tsx
@@ -1,9 +1,10 @@
 import { Tooltip } from '@mui/material'
 import { DeriveAccountRegistration } from '@polkadot/api-derive/types'
 import {
-  CheckCircleRounded as CheckCircleRoundedIcon,
-  RemoveCircleOutlineRounded as RemoveCircleOutlineRoundedIcon
-} from '@mui/icons-material'
+  HiOutlineCheckCircle as CheckCircleRoundedIcon,
+  HiOutlineMinusCircle as RemoveCircleOutlineRoundedIcon
+} from 'react-icons/hi2'
+
 import { useMemo } from 'react'
 import { styled } from '@mui/material/styles'
 

diff --git a/packages/ui/src/components/NewMulisigAlert.tsx b/packages/ui/src/components/NewMulisigAlert.tsx
@@ -1,6 +1,6 @@
 import { Alert, IconButton } from '@mui/material'
 import { styled } from '@mui/material/styles'
-import { Close as CloseIcon } from '@mui/icons-material'
+import { HiOutlineXMark as CloseIcon } from 'react-icons/hi2'
 
 interface Props {
   className?: string
@@ -24,7 +24,7 @@ const NewMulisigAlert = ({ className = '', onClose }: Props) => {
         color="inherit"
         onClick={onClose}
       >
-        <CloseIcon fontSize="small" />
+        <CloseIcon size={20} />
       </IconButton>
     </Alert>
   )

diff --git a/packages/ui/src/components/OptionsMenu.tsx b/packages/ui/src/components/OptionsMenu.tsx
@@ -3,7 +3,7 @@ import MenuItem from '@mui/material/MenuItem'
 import { IconButton, ListItemIcon, ListItemText } from '@mui/material'
 import { MouseEvent, ReactNode, useCallback, useState } from 'react'
 import { styled } from '@mui/material/styles'
-import { MoreVert as MoreVertIcon } from '@mui/icons-material'
+import { HiEllipsisVertical as MoreVertIcon } from 'react-icons/hi2'
 
 export interface MenuOption {
   text: string

diff --git a/packages/ui/src/components/Settings/index.tsx b/packages/ui/src/components/Settings/index.tsx
diff --git a/packages/ui/src/components/SuccessCreation.tsx b/packages/ui/src/components/SuccessCreation.tsx
@@ -1,6 +1,6 @@
 import { Box, Grid } from '@mui/material'
 import { styled } from '@mui/material/styles'
-import { AccessTime as AccessTimeIcon } from '@mui/icons-material'
+import { HiOutlineClock as AccessTimeIcon } from 'react-icons/hi2'
 
 interface Props {
   className?: string

diff --git a/packages/ui/src/components/Toasts/ToastBar.tsx b/packages/ui/src/components/Toasts/ToastBar.tsx
@@ -1,6 +1,6 @@
 import { IconButton, Snackbar } from '@mui/material'
 import { Toast, useToasts } from '../../contexts/ToastContext'
-import { Close as CloseIcon } from '@mui/icons-material'
+import { HiOutlineXMark as CloseIcon } from 'react-icons/hi2'
 import ToastContent from './ToastContent'
 import React, { useCallback } from 'react'
 import { styled } from '@mui/material/styles'
@@ -44,7 +44,7 @@ const ToastBar = ({ toast, className }: Props) => {
           color="inherit"
           onClick={handleClose}
         >
-          <CloseIcon fontSize="small" />
+          <CloseIcon size={20} />
         </IconButton>
       }
       message={<ToastContent toast={toast} />}

diff --git a/packages/ui/src/components/Toasts/ToastContent.tsx b/packages/ui/src/components/Toasts/ToastContent.tsx
@@ -1,9 +1,6 @@
 import { Box, CircularProgress } from '@mui/material'
-import {
-  Launch as LaunchIcon,
-  ErrorOutline as ErrorOutlineIcon,
-  CheckCircleOutline as CheckCircleOutlineIcon
-} from '@mui/icons-material'
+import { MdErrorOutline as ErrorOutlineIcon } from 'react-icons/md'
+import { HiOutlineArrowTopRightOnSquare as LaunchIcon, HiOutlineCheckCircle } from 'react-icons/hi2'
 import { styled } from '@mui/material/styles'
 import { useCallback } from 'react'
 import { Toast } from '../../contexts/ToastContext'
@@ -26,11 +23,11 @@ const ToastContent = ({ className, toast }: ToastContentProps) => {
     <div className={className}>
       <div className="iconContainer">
         {type === 'success' ? (
-          <CheckCircleOutlineIcon className="toastIcon" />
+          <HiOutlineCheckCircle size={25} />
         ) : type === 'loading' ? (
-          <CircularProgress className="toastIcon" />
+          <CircularProgress size={25} />
         ) : (
-          <ErrorOutlineIcon className="toastIcon errorIcon" />
+          <ErrorOutlineIconStyled size={25} />
         )}
       </div>
       <Box
@@ -44,35 +41,30 @@ const ToastContent = ({ className, toast }: ToastContentProps) => {
           className="linkIcon"
           onClick={onOpenLink}
         >
-          <LaunchIcon fontSize="small" />
+          <LaunchIcon size={20} />
         </Box>
       )}
     </div>
   )
 }
 
-export default styled(ToastContent)(
-  ({ theme }) => `
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-
-    .linkIcon {
-        display: flex;
-        cursor: pointer;
-        padding-left: 1rem; 
-    }
+const ErrorOutlineIconStyled = styled(ErrorOutlineIcon)`
+  color: ${({ theme }) => theme.custom.error};
+`
 
-    .iconContainer {
-        margin-right: 1rem;
-    }
+export default styled(ToastContent)`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 
-    .toastIcon {
-        font-size: 2.5rem;
-    }
+  .linkIcon {
+    display: flex;
+    cursor: pointer;
+    padding-left: 1rem;
+  }
 
-    .errorIcon {
-        color: ${theme.custom.error}
-    }
+  .iconContainer {
+    margin-right: 1rem;
+    display: flex;
+  }
 `
-)
diff --git a/packages/ui/src/components/Transactions/Transaction.tsx b/packages/ui/src/components/Transactions/Transaction.tsx
@@ -2,7 +2,8 @@ import { Badge, Box, Paper } from '@mui/material'
 import { Button } from '../library'
 import { styled } from '@mui/material/styles'
 import CallInfo from '../CallInfo'
-import { Gesture as GestureIcon, QuestionMark as QuestionMarkIcon } from '@mui/icons-material'
+import { MdOutlineGesture as GestureIcon } from 'react-icons/md'
+import { HiOutlineQuestionMarkCircle as QuestionMarkIcon } from 'react-icons/hi2'
 import { AggregatedData } from './TransactionList'
 import { useCallback, useMemo, useState } from 'react'
 import ProposalSigningModal from '../modals/ProposalSigning'
@@ -51,9 +52,15 @@ const Transaction = ({
         anchorOrigin={{ horizontal: 'left', vertical: 'top' }}
       >
         {!aggregatedData.callData ? (
-          <QuestionMarkIcon className="callIcon unknownCall" />
+          <QuestionMarkIcon
+            size={112}
+            className="callIcon"
+          />
         ) : (
-          <GestureIcon className="callIcon" />
+          <GestureIcon
+            size={112}
+            className="callIcon"
+          />
         )}
       </Badge>
       <TransactionCallInfoBoxStyled>
@@ -98,25 +105,21 @@ const TransactionFooterStyled = styled('div')`
   display: flex;
 `
 
-const TransactionCallInfoBoxStyled = styled(Box)(
-  ({ theme }) => `
+const TransactionCallInfoBoxStyled = styled(Box)`
   flex: 1 1 0;
   width: 100%;
 
-  @media (min-width: ${theme.breakpoints.values.sm}px) {
+  @media (min-width: ${({ theme }) => theme.breakpoints.values.sm}px) {
     overflow: hidden;
   }
 `
-)
 
-export default styled(Transaction)(
-  ({ theme }) => `
+export default styled(Transaction)`
   display: flex;
   flex-direction: column;
   margin-bottom: 1rem;
 
-
-  @media (min-width: ${theme.breakpoints.values.sm}px) {
+  @media (min-width: ${({ theme }) => theme.breakpoints.values.sm}px) {
     flex-direction: row;
     margin-left: 0.5rem;
   }
@@ -129,8 +132,7 @@ export default styled(Transaction)(
   }
 
   .callIcon {
-    font-size: 7rem;
-    background-color: ${theme.custom.background.primary};
+    background-color: ${({ theme }) => theme.custom.background.primary};
     margin: 0.5rem;
     padding: 1rem;
     height: auto;
@@ -141,17 +143,16 @@ export default styled(Transaction)(
     max-height: 1.3125rem;
     left: 29px;
     top: 19px;
-    border-radius: ${theme.custom.borderRadius};
+    border-radius: ${({ theme }) => theme.custom.borderRadius};
     padding: 0.25rem 0.5rem;
     max-width: 2.625rem;
     font-size: 0.625rem;
     font-weight: 500;
-    border: 1px solid ${theme.custom.gray[400]};
+    border: 1px solid ${({ theme }) => theme.custom.gray[400]};
   }
 
   .badge.red > .MuiBadge-badge {
-    background-color: ${theme.custom.proxyBadge.multi};
-    color: ${theme.custom.text.black};
+    background-color: ${({ theme }) => theme.custom.proxyBadge.multi};
+    color: ${({ theme }) => theme.custom.text.black};
   }
 `
-)
diff --git a/packages/ui/src/components/Transactions/TransactionList.tsx b/packages/ui/src/components/Transactions/TransactionList.tsx
@@ -10,7 +10,7 @@ import { useAccounts } from '../../contexts/AccountsContext'
 import { ISanitizedCall, parseGenericCall } from '../../utils'
 import { GenericCall } from '@polkadot/types'
 import { AnyJson, AnyTuple } from '@polkadot/types/types'
-import { Flare as FlareIcon } from '@mui/icons-material'
+import { MdOutlineFlare as FlareIcon } from 'react-icons/md'
 import Transaction from './Transaction'
 import { HexString } from '../../types'
 import dayjs from 'dayjs'
@@ -188,7 +188,10 @@ const TransactionList = ({ className }: Props) => {
       )}
       {!pendingTxData.length && !isLoadingPendingTxs && (
         <Paper className="noCall">
-          <FlareIcon className="noCallIcon" />
+          <FlareIcon
+            size={24}
+            className="noCallIcon"
+          />
           <div className="noCallText">You're all set!</div>
         </Paper>
       )}