replace fa icons with io5

mat-sz · Oct 26, 2023 · 071a51b · 071a51b
1 parent 44fa796
commit 071a51b
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 37 deletions.
diff --git a/web/src/sections/Transfers/Actions.tsx b/web/src/sections/Transfers/Actions.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { IoCheckmarkDone, IoCloseSharp } from 'react-icons/io5';
+import { IoCheckmarkDone, IoClose } from 'react-icons/io5';
 import { useTranslation } from 'react-i18not';
 
 import styles from './Actions.module.scss';
@@ -39,7 +39,7 @@ export const Actions: React.FC<Props> = ({ transfers }) => {
           </IconButton>
         )}
         <IconButton round onClick={cancelAll} title={t('cancelAll')}>
-          <IoCloseSharp />
+          <IoClose />
         </IconButton>
       </div>
     </>

diff --git a/web/src/sections/Transfers/Transfer/TransferActions.tsx b/web/src/sections/Transfers/Transfer/TransferActions.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { IoCloseSharp, IoCheckmark, IoArrowDown } from 'react-icons/io5';
+import { IoClose, IoCheckmark, IoArrowDown } from 'react-icons/io5';
 import { observer } from 'mobx-react-lite';
 import { useTranslation } from 'react-i18not';
 
@@ -51,7 +51,7 @@ export const TransferActions: React.FC<TransferProps> = observer(
           className={styles.negative}
           title={t('cancel')}
         >
-          <IoCloseSharp />
+          <IoClose />
         </IconButton>
       </div>
     );

diff --git a/web/src/sections/Transfers/Transfer/TransferIcon.tsx b/web/src/sections/Transfers/Transfer/TransferIcon.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
 import { useTranslation } from 'react-i18not';
 import {
-  FaFile,
-  FaFileAlt,
-  FaFileVideo,
-  FaFileAudio,
-  FaFileImage,
-  FaFileArchive,
-} from 'react-icons/fa';
+  IoDocument,
+  IoDocumentText,
+  IoFilm,
+  IoMusicalNotes,
+  IoImage,
+  IoArchive,
+} from 'react-icons/io5';
 
 import styles from './TransferIcon.module.scss';
 import { fileType } from '../../../utils/file.js';
@@ -23,19 +23,18 @@ const typeIcon = (mime: string) => {
 
   switch (type) {
     case FileType.ARCHIVE:
-      return <FaFileArchive />;
+      return <IoArchive />;
     case FileType.IMAGE:
-      return <FaFileImage />;
+      return <IoImage />;
     case FileType.AUDIO:
-      return <FaFileAudio />;
+      return <IoMusicalNotes />;
     case FileType.VIDEO:
-      return <FaFileVideo />;
+      return <IoFilm />;
     case FileType.BINARY:
-      return <FaFileAlt />;
     case FileType.TEXT:
-      return <FaFileAlt />;
+      return <IoDocumentText />;
     default:
-      return <FaFile />;
+      return <IoDocument />;
   }
 };
 

diff --git a/web/src/sections/Transfers/Transfer/TransferTarget.tsx b/web/src/sections/Transfers/Transfer/TransferTarget.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
 import { useTranslation } from 'react-i18not';
 import {
-  FaTimes,
-  FaArrowDown,
-  FaArrowUp,
-  FaAngleDoubleDown,
-  FaCheck,
-  FaAngleDoubleUp,
-  FaHourglassHalf,
-  FaHourglassEnd,
-} from 'react-icons/fa';
+  IoClose,
+  IoArrowDown,
+  IoArrowUp,
+  IoCaretUp,
+  IoCaretDown,
+  IoCheckmark,
+  IoHourglassOutline,
+  IoLink,
+} from 'react-icons/io5';
 import { observer } from 'mobx-react-lite';
 
 import styles from './TransferTarget.module.scss';
@@ -26,23 +26,23 @@ interface TransferIconProps {
 const stateIcon = (state: TransferState, receiving: boolean) => {
   switch (state) {
     case TransferState.INCOMING:
-      return <FaArrowDown />;
+      return <IoArrowDown />;
     case TransferState.OUTGOING:
-      return <FaArrowUp />;
+      return <IoArrowUp />;
     case TransferState.FAILED:
-      return <FaTimes />;
+      return <IoClose />;
     case TransferState.IN_PROGRESS:
       if (receiving) {
-        return <FaAngleDoubleDown />;
+        return <IoCaretDown />;
       } else {
-        return <FaAngleDoubleUp />;
+        return <IoCaretUp />;
       }
     case TransferState.CONNECTING:
-      return <FaHourglassHalf />;
+      return <IoHourglassOutline />;
     case TransferState.CONNECTED:
-      return <FaHourglassEnd />;
+      return <IoLink />;
     case TransferState.COMPLETE:
-      return <FaCheck />;
+      return <IoCheckmark />;
   }
 };
 

diff --git a/web/src/sections/YourTile/ClientName.tsx b/web/src/sections/YourTile/ClientName.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18not';
-import { IoPencil, IoCheckmark, IoCloseSharp } from 'react-icons/io5';
+import { IoPencil, IoCheckmark, IoClose } from 'react-icons/io5';
 import { observer } from 'mobx-react-lite';
 
 import styles from './ClientName.module.scss';
@@ -57,7 +57,7 @@ export const ClientName: React.FC = observer(() => {
             <IoCheckmark />
           </IconButton>
           <IconButton round onClick={onCancel} title={t('cancel')}>
-            <IoCloseSharp />
+            <IoClose />
           </IconButton>
         </div>
       )}