UX: Icons: Stop using FA in TransactionActivityLog

MetaMask · Feb 8, 2023 · 84408fa · 84408fa
1 parent 7e97ff2
commit 84408fa
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 26 deletions.
diff --git a/ui/components/app/app-components.scss b/ui/components/app/app-components.scss
@@ -73,7 +73,6 @@
 @import 'token-cell/token-cell';
 @import 'token-list-display/token-list-display';
 @import 'transaction-activity-log/index';
-@import 'transaction-activity-log/transaction-activity-log-icon/index';
 @import 'transaction-breakdown/index';
 @import 'transaction-detail/index';
 @import 'transaction-detail-item/index';

diff --git a/ui/components/app/transaction-activity-log/transaction-activity-log-icon/index.scss b/ui/components/app/transaction-activity-log/transaction-activity-log-icon/index.scss
diff --git a/...ion-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.component.js b/...ion-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.component.js
@@ -12,16 +12,18 @@ import {
   TRANSACTION_CANCEL_ATTEMPTED_EVENT,
   TRANSACTION_CANCEL_SUCCESS_EVENT,
 } from '../transaction-activity-log.constants';
+import { Icon, ICON_NAMES } from '../../../component-library';
+import { Color } from '../../../../helpers/constants/design-system';
 
-export const imageHash = {
-  [TRANSACTION_CREATED_EVENT]: 'fa-plus',
-  [TRANSACTION_SUBMITTED_EVENT]: 'fa-arrow-up',
-  [TRANSACTION_RESUBMITTED_EVENT]: 'fa-retweet',
-  [TRANSACTION_CONFIRMED_EVENT]: 'fa-check',
-  [TRANSACTION_DROPPED_EVENT]: 'fa-times',
-  [TRANSACTION_ERRORED_EVENT]: 'fa-exclamation',
-  [TRANSACTION_CANCEL_ATTEMPTED_EVENT]: 'fa-times',
-  [TRANSACTION_CANCEL_SUCCESS_EVENT]: 'fa-times',
+export const ACTIVITY_ICONS = {
+  [TRANSACTION_CREATED_EVENT]: ICON_NAMES.ADD,
+  [TRANSACTION_SUBMITTED_EVENT]: ICON_NAMES.ARROW_UP,
+  [TRANSACTION_RESUBMITTED_EVENT]: ICON_NAMES.PROGRAMMING_ARROWS,
+  [TRANSACTION_CONFIRMED_EVENT]: ICON_NAMES.CHECK,
+  [TRANSACTION_DROPPED_EVENT]: ICON_NAMES.CLOSE,
+  [TRANSACTION_ERRORED_EVENT]: ICON_NAMES.DANGER,
+  [TRANSACTION_CANCEL_ATTEMPTED_EVENT]: ICON_NAMES.CLOSE,
+  [TRANSACTION_CANCEL_SUCCESS_EVENT]: ICON_NAMES.CLOSE,
 };
 
 export default class TransactionActivityLogIcon extends PureComponent {
@@ -31,24 +33,16 @@ export default class TransactionActivityLogIcon extends PureComponent {
 
   static propTypes = {
     className: PropTypes.string,
-    eventKey: PropTypes.oneOf(Object.keys(imageHash)),
+    eventKey: PropTypes.oneOf(Object.keys(ACTIVITY_ICONS)),
   };
 
   render() {
     const { className, eventKey } = this.props;
-    const iconClassName = imageHash[eventKey];
+    const icon = ACTIVITY_ICONS[eventKey];
 
     return (
       <div className={classnames('transaction-activity-log-icon', className)}>
-        {iconClassName ? (
-          <i
-            className={classnames(
-              'fa',
-              'transaction-activity-log-icon__icon',
-              iconClassName,
-            )}
-          />
-        ) : null}
+        {icon ? (<Icon name={icon} color={Color.iconDefault} />) : null}
       </div>
     );
   }