fix: replace feather icons with remix icons on swarm button (#414)

* fix: replace feather icons with remix icons on swarm button

* fix: remove feather icons package (#415)

* fix: remove all feather icons and replace with remix icons

* fix: few stray weird icons

package.json

@@ -53,7 +53,6 @@
     "react": ">= 17.0.2",
     "react-copy-to-clipboard": "5.0.4",
     "react-dom": ">= 17.0.2",
-    "react-feather": "2.0.9",
     "react-identicons": "1.2.5",
     "react-router": "6.2.1",
     "react-router-dom": "6.2.1",

src/components/Card.tsx

@@ -1,6 +1,7 @@
 import { createStyles, makeStyles, Theme, Typography } from '@material-ui/core'
 import { ReactElement } from 'react'
-import { AlertCircle, Check } from 'react-feather'
+import Check from 'remixicon-react/CheckLineIcon'
+import AlertCircle from 'remixicon-react/ErrorWarningFillIcon'
 import { SwarmButton, SwarmButtonProps } from './SwarmButton'
 
 interface Props {
@@ -60,11 +61,7 @@ export default function Card({ buttonProps, icon, title, subtitle, status }: Pro
       <div className={classes.wrapper}>
         <div className={classes.iconWrapper}>
           {icon}
-          {status === 'ok' ? (
-            <Check size="13" stroke="#09ca6c" />
-          ) : (
-            <AlertCircle size="13" fill="#f44336" stroke="white" />
-          )}
+          {status === 'ok' ? <Check size="13" color="#09ca6c" /> : <AlertCircle size="13" color="#f44336" />}
         </div>
         <Typography variant="h2" style={{ marginBottom: '8px' }}>
           {title}

src/components/CashoutModal.tsx

@@ -7,7 +7,7 @@ import DialogContentText from '@material-ui/core/DialogContentText'
 import DialogTitle from '@material-ui/core/DialogTitle'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useState } from 'react'
-import { Zap } from 'react-feather'
+import Zap from 'remixicon-react/FlashlightLineIcon'
 import { Context as SettingsContext } from '../providers/Settings'
 import EthereumAddress from './EthereumAddress'
 

src/components/ClipboardCopy.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react'
 import IconButton from '@material-ui/core/IconButton'
 import { CopyToClipboard } from 'react-copy-to-clipboard'
-import { Clipboard } from 'react-feather'
+import Clipboard from 'remixicon-react/ClipboardLineIcon'
 import { useSnackbar } from 'notistack'
 
 interface Props {

src/components/ExpandableListItem.tsx

@@ -1,7 +1,7 @@
 import { ReactElement, ReactNode } from 'react'
 import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
 import { Typography, Grid, IconButton, Tooltip } from '@material-ui/core'
-import { Info } from 'react-feather'
+import Info from 'remixicon-react/InformationLineIcon'
 import ListItem from '@material-ui/core/ListItem'
 
 const useStyles = makeStyles((theme: Theme) =>

src/components/ExpandableListItemInput.tsx

@@ -2,10 +2,14 @@ import { Grid, IconButton, InputBase, ListItem, Typography } from '@material-ui/
 import Collapse from '@material-ui/core/Collapse'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import { ChangeEvent, ReactElement, useState } from 'react'
-import { Edit, Minus, Search, X } from 'react-feather'
+import Check from 'remixicon-react/CheckLineIcon'
+import Edit from 'remixicon-react/PencilLineIcon'
+import Minus from 'remixicon-react/SubtractLineIcon'
+import X from 'remixicon-react/CloseLineIcon'
 import ExpandableListItemActions from './ExpandableListItemActions'
 import ExpandableListItemNote from './ExpandableListItemNote'
 import { SwarmButton } from './SwarmButton'
+import type { RemixiconReactIconProps } from 'remixicon-react'
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -53,6 +57,7 @@ interface Props {
   expandedOnly?: boolean
   confirmLabel?: string
   confirmLabelDisabled?: boolean
+  confirmIcon?: React.ComponentType<RemixiconReactIconProps>
   loading?: boolean
   onChange?: (value: string) => void
   onConfirm?: (value: string) => void
@@ -67,6 +72,7 @@ export default function ExpandableListItemKey({
   onChange,
   confirmLabel,
   confirmLabelDisabled,
+  confirmIcon,
   expandedOnly,
   helperText,
   placeholder,
@@ -137,7 +143,7 @@ export default function ExpandableListItemKey({
               (inputValue === '' && value === undefined) // Disable if no initial value was not provided and the field is empty. The undefined check is improtant so that it is possible to submit with empty input in other cases
             }
             loading={loading}
-            iconType={Search}
+            iconType={confirmIcon ?? Check}
             onClick={() => {
               if (onConfirm) onConfirm(inputValue)
             }}

src/components/ExpandableListItemKey.tsx

@@ -3,7 +3,8 @@ import Collapse from '@material-ui/core/Collapse'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import { ReactElement, useState } from 'react'
 import { CopyToClipboard } from 'react-copy-to-clipboard'
-import { Eye, Minus } from 'react-feather'
+import Eye from 'remixicon-react/EyeLineIcon'
+import Minus from 'remixicon-react/SubtractLineIcon'
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({

src/components/Feedback.tsx

@@ -2,7 +2,7 @@ import { ReactElement, useEffect, useState } from 'react'
 import * as Sentry from '@sentry/react'
 import { Link } from '@material-ui/core'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
-import { MessageSquare } from 'react-feather'
+import MessageSquare from 'remixicon-react/Chat4LineIcon'
 
 import config from '../config'
 import SideBarItem from './SideBarItem'

src/components/SideBarStatus.tsx

@@ -1,6 +1,6 @@
 import { ReactElement, useContext } from 'react'
 import { useLocation, matchPath } from 'react-router-dom'
-import { ArrowRight } from 'react-feather'
+import ArrowRight from 'remixicon-react/ArrowRightLineIcon'
 
 import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'
 import { ListItemText, ListItemIcon, ListItem, Typography } from '@material-ui/core'

src/components/SwarmButton.tsx

@@ -1,9 +1,9 @@
 import { Button, ButtonProps, CircularProgress, createStyles, makeStyles } from '@material-ui/core'
 import React, { ReactElement } from 'react'
-import { IconProps } from 'react-feather'
+import type { RemixiconReactIconProps } from 'remixicon-react'
 
 export interface SwarmButtonProps extends ButtonProps {
-  iconType: React.ComponentType<IconProps>
+  iconType: React.ComponentType<RemixiconReactIconProps>
   loading?: boolean
   cancel?: boolean
   variant?: 'text' | 'contained' | 'outlined'
@@ -18,7 +18,7 @@ const useStyles = makeStyles(() =>
       color: '#242424',
       '&:hover, &:focus': {
         '& svg': {
-          stroke: '#fff',
+          fill: '#fff',
           transition: '0.1s',
         },
       },

src/components/TroubleshootConnectionCard.tsx

@@ -1,7 +1,7 @@
 import { Button, Grid, Link as MuiLink, Typography } from '@material-ui/core/'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import type { ReactElement } from 'react'
-import { Activity } from 'react-feather'
+import Activity from 'remixicon-react/PulseLineIcon'
 import { Link } from 'react-router-dom'
 import { config } from '../config'
 import { ROUTES } from '../routes'

src/containers/DepositModal.tsx

@@ -1,5 +1,5 @@
 import { ReactElement, useContext } from 'react'
-import { Download } from 'react-feather'
+import Download from 'remixicon-react/DownloadLineIcon'
 import { Context as SettingsContext } from '../providers/Settings'
 
 import WithdrawDepositModal from '../components/WithdrawDepositModal'

src/containers/WithdrawModal.tsx

@@ -1,6 +1,6 @@
 import { BigNumber } from 'bignumber.js'
 import { ReactElement, useContext } from 'react'
-import { Upload } from 'react-feather'
+import Upload from 'remixicon-react/UploadLineIcon'
 import WithdrawDepositModal from '../components/WithdrawDepositModal'
 import { Context as SettingsContext } from '../providers/Settings'
 

src/pages/account/feeds/AccountFeeds.tsx

@@ -1,6 +1,9 @@
 import { Box } from '@material-ui/core'
 import { ReactElement, useContext, useState } from 'react'
-import { Download, Info, PlusSquare, Trash } from 'react-feather'
+import Download from 'remixicon-react/Download2LineIcon'
+import Info from 'remixicon-react/InformationLineIcon'
+import PlusSquare from 'remixicon-react/AddBoxLineIcon'
+import Trash from 'remixicon-react/DeleteBin7LineIcon'
 import { useNavigate } from 'react-router'
 import ExpandableList from '../../../components/ExpandableList'
 import ExpandableListItem from '../../../components/ExpandableListItem'

src/pages/account/stamps/AccountStamps.tsx

@@ -1,6 +1,6 @@
 import { CircularProgress, Container, createStyles, makeStyles } from '@material-ui/core'
 import { ReactElement, useContext, useEffect } from 'react'
-import { PlusSquare } from 'react-feather'
+import PlusSquare from 'remixicon-react/AddBoxLineIcon'
 import { useNavigate } from 'react-router'
 import { SwarmButton } from '../../../components/SwarmButton'
 import TroubleshootConnectionCard from '../../../components/TroubleshootConnectionCard'

src/pages/account/wallet/AccountWallet.tsx

@@ -1,6 +1,8 @@
 import { Box, Grid, Typography } from '@material-ui/core'
 import { ReactElement, useContext } from 'react'
-import { Download, Gift, Link } from 'react-feather'
+import Download from 'remixicon-react/DownloadLineIcon'
+import Gift from 'remixicon-react/GiftLineIcon'
+import Link from 'remixicon-react/LinkIcon'
 import { useNavigate } from 'react-router'
 import ExpandableListItem from '../../../components/ExpandableListItem'
 import ExpandableListItemActions from '../../../components/ExpandableListItemActions'

src/pages/feeds/CreateNewFeed.tsx

@@ -2,7 +2,8 @@ import { Box, Grid, Typography } from '@material-ui/core'
 import { Form, Formik } from 'formik'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useState } from 'react'
-import { Check, X } from 'react-feather'
+import Check from 'remixicon-react/CheckLineIcon'
+import X from 'remixicon-react/CloseLineIcon'
 import { useNavigate } from 'react-router'
 import { DocumentationText } from '../../components/DocumentationText'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'

src/pages/feeds/DeleteFeedDialog.tsx

@@ -1,6 +1,7 @@
 import { Box, Typography } from '@material-ui/core'
 import { ReactElement } from 'react'
-import { Trash, X } from 'react-feather'
+import X from 'remixicon-react/CloseLineIcon'
+import Trash from 'remixicon-react/DeleteBin7LineIcon'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import { SwarmButton } from '../../components/SwarmButton'
 import { SwarmDialog } from '../../components/SwarmDialog'

src/pages/feeds/ExportFeedDialog.tsx

@@ -2,7 +2,8 @@ import { Box, createStyles, makeStyles, Typography } from '@material-ui/core'
 import { saveAs } from 'file-saver'
 import { useSnackbar } from 'notistack'
 import { ReactElement } from 'react'
-import { Clipboard, Download } from 'react-feather'
+import Download from 'remixicon-react/DownloadLineIcon'
+import Clipboard from 'remixicon-react/ClipboardLineIcon'
 import { Code } from '../../components/Code'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import { SwarmButton } from '../../components/SwarmButton'

src/pages/feeds/FeedPasswordDialog.tsx

@@ -1,6 +1,7 @@
 import { Box, Typography } from '@material-ui/core'
 import { ReactElement, useState } from 'react'
-import { Check, X } from 'react-feather'
+import Check from 'remixicon-react/CheckLineIcon'
+import X from 'remixicon-react/CloseLineIcon'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import { SwarmButton } from '../../components/SwarmButton'
 import { SwarmDialog } from '../../components/SwarmDialog'

src/pages/feeds/FeedSubpage.tsx

@@ -1,7 +1,7 @@
 import * as swarmCid from '@ethersphere/swarm-cid'
 import { Box } from '@material-ui/core'
 import { ReactElement, useContext, useEffect, useState } from 'react'
-import { X } from 'react-feather'
+import X from 'remixicon-react/CloseLineIcon'
 import { useNavigate, useParams } from 'react-router-dom'
 import { DocumentationText } from '../../components/DocumentationText'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'

src/pages/feeds/ImportFeedDialog.tsx

@@ -1,7 +1,8 @@
 import { Box, createStyles, makeStyles, TextareaAutosize, Theme } from '@material-ui/core'
 import { useSnackbar } from 'notistack'
 import React, { ReactElement, useContext, useRef, useState } from 'react'
-import { Check, Upload } from 'react-feather'
+import Check from 'remixicon-react/CheckLineIcon'
+import Upload from 'remixicon-react/UploadLineIcon'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import { SwarmButton } from '../../components/SwarmButton'
 import { SwarmDialog } from '../../components/SwarmDialog'

src/pages/feeds/UpdateFeed.tsx

@@ -1,7 +1,8 @@
 import { Box, Grid, Typography } from '@material-ui/core'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useEffect, useState } from 'react'
-import { Bookmark, X } from 'react-feather'
+import X from 'remixicon-react/CloseLineIcon'
+import Bookmark from 'remixicon-react/BookmarkLineIcon'
 import { useNavigate, useParams } from 'react-router'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import { HistoryHeader } from '../../components/HistoryHeader'

src/pages/feeds/index.tsx

@@ -1,6 +1,9 @@
 import { Box, Typography } from '@material-ui/core'
 import { ReactElement, useContext, useState } from 'react'
-import { Download, Info, PlusSquare, Trash } from 'react-feather'
+import Download from 'remixicon-react/DownloadLineIcon'
+import PlusSquare from 'remixicon-react/AddBoxLineIcon'
+import Info from 'remixicon-react/InformationLineIcon'
+import Trash from 'remixicon-react/DeleteBin7LineIcon'
 import { useNavigate } from 'react-router'
 import ExpandableList from '../../components/ExpandableList'
 import ExpandableListItem from '../../components/ExpandableListItem'

src/pages/files/AssetPreview.tsx

@@ -1,7 +1,8 @@
 import { Box, Grid, Typography } from '@material-ui/core'
 import { Web } from '@material-ui/icons'
 import { ReactElement } from 'react'
-import { File, Folder } from 'react-feather'
+import File from 'remixicon-react/FileLineIcon'
+import Folder from 'remixicon-react/FolderLineIcon'
 import { FitImage } from '../../components/FitImage'
 import { shortenText } from '../../utils'
 import { getHumanReadableFileSize } from '../../utils/file'

src/pages/files/Download.tsx

@@ -3,6 +3,7 @@ import { ManifestJs } from '@ethersphere/manifest-js'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
+import Search from 'remixicon-react/SearchLineIcon'
 import ExpandableListItemInput from '../../components/ExpandableListItemInput'
 import { History } from '../../components/History'
 import { Context, defaultUploadOrigin } from '../../providers/File'
@@ -88,6 +89,7 @@ export function Download(): ReactElement {
         helperText={referenceError}
         confirmLabel={'Find'}
         confirmLabelDisabled={Boolean(referenceError) || loading}
+        confirmIcon={Search}
         placeholder="e.g. 31fb0362b1a42536134c86bc58b97ac0244e5c6630beec3e27c2d1cecb38c605"
         expandedOnly
         mapperFn={value => recognizeEnsOrSwarmHash(value)}

src/pages/files/DownloadActionBar.tsx

@@ -1,6 +1,9 @@
 import { Box, Grid } from '@material-ui/core'
 import { ReactElement } from 'react'
-import { Bookmark, Download, Link, X } from 'react-feather'
+import X from 'remixicon-react/CloseLineIcon'
+import Bookmark from 'remixicon-react/BookmarkLineIcon'
+import Download from 'remixicon-react/DownloadLineIcon'
+import Link from 'remixicon-react/LinkIcon'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import { SwarmButton } from '../../components/SwarmButton'
 

src/pages/files/UploadActionBar.tsx

@@ -1,6 +1,10 @@
 import { Box, Grid } from '@material-ui/core'
 import { ReactElement } from 'react'
-import { ArrowLeft, Check, Layers, PlusSquare, X } from 'react-feather'
+import Check from 'remixicon-react/CheckLineIcon'
+import X from 'remixicon-react/CloseLineIcon'
+import ArrowLeft from 'remixicon-react/ArrowLeftLineIcon'
+import PlusSquare from 'remixicon-react/AddBoxLineIcon'
+import Layers from 'remixicon-react/StackLineIcon'
 import { DocumentationText } from '../../components/DocumentationText'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import { SwarmButton } from '../../components/SwarmButton'

src/pages/files/UploadArea.tsx

@@ -2,7 +2,9 @@ import { createStyles, makeStyles, Theme } from '@material-ui/core'
 import { DropzoneArea } from 'material-ui-dropzone'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useState } from 'react'
-import { FilePlus, FolderPlus, PlusCircle } from 'react-feather'
+import PlusCircle from 'remixicon-react/AddCircleLineIcon'
+import FilePlus from 'remixicon-react/FileAddLineIcon'
+import FolderPlus from 'remixicon-react/FolderAddLineIcon'
 import { useNavigate } from 'react-router-dom'
 import { DocumentationText } from '../../components/DocumentationText'
 import { SwarmButton } from '../../components/SwarmButton'

src/pages/gift-code/index.tsx

@@ -1,7 +1,8 @@
 import { Box, Typography } from '@material-ui/core'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useEffect, useState } from 'react'
-import { Check, X } from 'react-feather'
+import Check from 'remixicon-react/CheckLineIcon'
+import X from 'remixicon-react/CloseLineIcon'
 import { useNavigate } from 'react-router'
 import { Wallet } from 'ethers'
 import ExpandableListItem from '../../components/ExpandableListItem'