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

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'

src/pages/info/index.tsx

@@ -1,6 +1,11 @@
 import { ReactElement, useContext } from 'react'
 import { Button } from '@material-ui/core'
-import { Globe, Briefcase, Search, Settings, ArrowUp, RefreshCcw } from 'react-feather'
+import Wallet from 'remixicon-react/Wallet3LineIcon'
+import ExchangeFunds from 'remixicon-react/ExchangeFundsLineIcon'
+import Search from 'remixicon-react/SearchLineIcon'
+import Globe from 'remixicon-react/GlobalLineIcon'
+import Settings from 'remixicon-react/Settings2LineIcon'
+import Upload from 'remixicon-react/UploadLineIcon'
 
 import { Context as BeeContext } from '../../providers/Bee'
 import Card from '../../components/Card'
@@ -46,11 +51,11 @@ export default function Status(): ReactElement {
         {nodeInfo?.beeMode && ['light', 'full', 'dev'].includes(nodeInfo.beeMode) ? (
           <Card
             buttonProps={{
-              iconType: Briefcase,
-              children: 'Manage your wallet.',
+              iconType: Wallet,
+              children: 'Manage your wallet',
               onClick: () => navigate(ROUTES.ACCOUNT_WALLET),
             }}
-            icon={<Briefcase />}
+            icon={<Wallet />}
             title={`${balance?.bzz.toSignificantDigits(4)} xBZZ | ${balance?.dai.toSignificantDigits(4)} xDAI`}
             subtitle="Current wallet balance."
             status="ok"
@@ -58,11 +63,11 @@ export default function Status(): ReactElement {
         ) : (
           <Card
             buttonProps={{
-              iconType: Settings,
+              iconType: Wallet,
               children: 'Setup wallet',
               onClick: () => navigate(ROUTES.WALLET),
             }}
-            icon={<ArrowUp />}
+            icon={<Upload />}
             title="Your wallet is not setup."
             subtitle="To share content on Swarm, please setup your wallet."
             status="error"
@@ -75,11 +80,11 @@ export default function Status(): ReactElement {
             chequebookBalance?.availableBalance.toBigNumber.isGreaterThan(0) ? (
               <Card
                 buttonProps={{
-                  iconType: RefreshCcw,
+                  iconType: ExchangeFunds,
                   children: 'View chequebook',
                   onClick: () => navigate(ROUTES.ACCOUNT_CHEQUEBOOK),
                 }}
-                icon={<RefreshCcw />}
+                icon={<ExchangeFunds />}
                 title={`${chequebookBalance?.availableBalance.toSignificantDigits(4)} xBZZ`}
                 subtitle="Current chequebook balance."
                 status="ok"
@@ -87,11 +92,11 @@ export default function Status(): ReactElement {
             ) : (
               <Card
                 buttonProps={{
-                  iconType: RefreshCcw,
+                  iconType: ExchangeFunds,
                   children: 'View chequebook',
                   onClick: () => navigate(ROUTES.ACCOUNT_CHEQUEBOOK),
                 }}
-                icon={<RefreshCcw />}
+                icon={<ExchangeFunds />}
                 title={
                   chequebookBalance?.availableBalance
                     ? `${chequebookBalance.availableBalance.toFixedDecimal(4)} xBZZ`

src/pages/rpc/Confirmation.tsx

@@ -1,6 +1,9 @@
 import { Box, createStyles, Grid, makeStyles, Typography } from '@material-ui/core'
 import { ReactElement } from 'react'
-import { Battery, BatteryCharging, Check, Gift } from 'react-feather'
+import Check from 'remixicon-react/CheckLineIcon'
+import BankCard from 'remixicon-react/BankCard2LineIcon'
+import MoneyDollarCircle from 'remixicon-react/MoneyDollarCircleLineIcon'
+import Gift from 'remixicon-react/GiftLineIcon'
 import { useNavigate } from 'react-router'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import { HistoryHeader } from '../../components/HistoryHeader'
@@ -45,10 +48,10 @@ export default function Confirmation(): ReactElement {
           </Typography>
         </Box>
         <ExpandableListItemActions>
-          <SwarmButton iconType={Battery} onClick={() => navigate(ROUTES.TOP_UP_BANK_CARD)}>
+          <SwarmButton iconType={BankCard} onClick={() => navigate(ROUTES.TOP_UP_BANK_CARD)}>
             Get started with bank card
           </SwarmButton>
-          <SwarmButton iconType={BatteryCharging} onClick={() => navigate(ROUTES.TOP_UP_CRYPTO)}>
+          <SwarmButton iconType={MoneyDollarCircle} onClick={() => navigate(ROUTES.TOP_UP_CRYPTO)}>
             Use DAI
           </SwarmButton>
           <SwarmButton iconType={Gift} onClick={() => navigate(ROUTES.TOP_UP_GIFT_CODE)}>

src/pages/rpc/index.tsx

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

src/pages/stamps/PostageStampCreation.tsx

@@ -3,7 +3,7 @@ import BigNumber from 'bignumber.js'
 import { Form, Formik, FormikHelpers } from 'formik'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext } from 'react'
-import { Check } from 'react-feather'
+import Check from 'remixicon-react/CheckLineIcon'
 import { SwarmButton } from '../../components/SwarmButton'
 import { SwarmTextInput } from '../../components/SwarmTextInput'
 import { Context as BeeContext } from '../../providers/Bee'

src/pages/stamps/index.tsx

@@ -1,7 +1,7 @@
 import { CircularProgress, Container } from '@material-ui/core'
 import { createStyles, makeStyles } from '@material-ui/core/styles'
 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/top-up/GiftCardFund.tsx

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

src/pages/top-up/GiftCardTopUpIndex.tsx

@@ -2,7 +2,7 @@ import { Box, Typography } from '@material-ui/core'
 import { Wallet } from 'ethers'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useState } from 'react'
-import { ArrowRight } from 'react-feather'
+import ArrowRight from 'remixicon-react/ArrowRightLineIcon'
 import { useNavigate } from 'react-router'
 import { Context as TopUpContext } from '../../providers/TopUp'
 import { HistoryHeader } from '../../components/HistoryHeader'

src/pages/top-up/Swap.tsx

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

src/pages/top-up/index.tsx

@@ -1,6 +1,6 @@
 import { Box, Grid, Typography } from '@material-ui/core'
 import { ReactElement, useContext } from 'react'
-import { Check } from 'react-feather'
+import Check from 'remixicon-react/CheckLineIcon'
 import { useNavigate } from 'react-router'
 import ExpandableListItem from '../../components/ExpandableListItem'
 import ExpandableListItemKey from '../../components/ExpandableListItemKey'