diff --git a/app/images/icons/cancelled.svg b/app/images/icons/cancelled.svg deleted file mode 100755 index 34a3e097b..000000000 --- a/app/images/icons/cancelled.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/images/icons/confirm.svg b/app/images/icons/confirm.svg deleted file mode 100644 index fd81b03b7..000000000 --- a/app/images/icons/confirm.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/images/icons/error.svg b/app/images/icons/error.svg deleted file mode 100644 index 2fcbc612f..000000000 --- a/app/images/icons/error.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/images/icons/new.svg b/app/images/icons/new.svg deleted file mode 100755 index 6ed612bd9..000000000 --- a/app/images/icons/new.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/images/icons/retry.svg b/app/images/icons/retry.svg deleted file mode 100755 index b394bfb86..000000000 --- a/app/images/icons/retry.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/images/icons/submitted.svg b/app/images/icons/submitted.svg deleted file mode 100755 index df2ce7044..000000000 --- a/app/images/icons/submitted.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui/components/app/app-components.scss b/ui/components/app/app-components.scss index 664aa9523..45d0a84a3 100644 --- a/ui/components/app/app-components.scss +++ b/ui/components/app/app-components.scss @@ -61,6 +61,7 @@ @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 new file mode 100644 index 000000000..80f97c70b --- /dev/null +++ b/ui/components/app/transaction-activity-log/transaction-activity-log-icon/index.scss @@ -0,0 +1,5 @@ +.transaction-activity-log-icon { + &__icon { + color: var(--color-icon-default); + } +} diff --git a/ui/components/app/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.component.js b/ui/components/app/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.component.js index 7f52daaa8..891562805 100644 --- a/ui/components/app/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.component.js +++ b/ui/components/app/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.component.js @@ -13,15 +13,15 @@ import { TRANSACTION_CANCEL_SUCCESS_EVENT, } from '../transaction-activity-log.constants'; -const imageHash = { - [TRANSACTION_CREATED_EVENT]: '/images/icons/new.svg', - [TRANSACTION_SUBMITTED_EVENT]: '/images/icons/submitted.svg', - [TRANSACTION_RESUBMITTED_EVENT]: '/images/icons/retry.svg', - [TRANSACTION_CONFIRMED_EVENT]: '/images/icons/confirm.svg', - [TRANSACTION_DROPPED_EVENT]: '/images/icons/cancelled.svg', - [TRANSACTION_ERRORED_EVENT]: '/images/icons/error.svg', - [TRANSACTION_CANCEL_ATTEMPTED_EVENT]: '/images/icons/cancelled.svg', - [TRANSACTION_CANCEL_SUCCESS_EVENT]: '/images/icons/cancelled.svg', +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 default class TransactionActivityLogIcon extends PureComponent { @@ -36,11 +36,19 @@ export default class TransactionActivityLogIcon extends PureComponent { render() { const { className, eventKey } = this.props; - const imagePath = imageHash[eventKey]; + const iconClassName = imageHash[eventKey]; return (
- {imagePath ? : null} + {iconClassName ? ( + + ) : null}
); } diff --git a/ui/components/app/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.stories.js b/ui/components/app/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.stories.js new file mode 100644 index 000000000..94bda3be5 --- /dev/null +++ b/ui/components/app/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.stories.js @@ -0,0 +1,21 @@ +import React from 'react'; +import { imageHash } from './transaction-activity-log-icon.component'; +import TransactionActivityLogIcon from '.'; + +export default { + title: 'Components/App/TransactionActivityLog/TransactionActivityLogIcon', + id: __filename, + argTypes: { + className: { + control: 'text', + }, + eventKey: { + control: 'select', + options: Object.keys(imageHash), + }, + }, +}; + +export const DefaultStory = (args) => ; + +DefaultStory.storyName = 'Default';