m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Dark mode: transaction activity log icons (#14139)

Browse Source
This commit is contained in:
George Marshall 2022-03-23 08:24:56 -07:00 committed by GitHub
parent 4ad22252c5
commit 532c326793
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 46 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/images/icons/cancelled.svg
View File

@ -1 +0,0 @@
<svg fill="none" height="8" viewBox="0 0 7 8" width="7" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m1.97959 1.19291c-.31242-.312422-.81896-.312422-1.131375 0-.312419.31242-.312419.81895 0 1.13137l1.675725 1.67572-1.675725 1.67572c-.312419.31242-.312419.81895 0 1.13137.312415.31242.818955.31242 1.131375 0l1.67572-1.67572 1.67591 1.67591c.31242.31242.81895.31242 1.13137 0s.31242-.81895 0-1.13137l-1.67591-1.67591 1.67591-1.67591c.31242-.31242.31242-.81895 0-1.13137-.31242-.312423-.81895-.312423-1.13137 0l-1.67591 1.67591z" fill="#f9fbff" fill-rule="evenodd"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 589 B

1
app/images/icons/confirm.svg
View File

@ -1 +0,0 @@
<svg fill="none" height="5" viewBox="0 0 7 5" width="7" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m5.97989.212475c.29348.2833.29348.74262 0 1.025915l-3.81928 3.68674-1.940496-1.87315c-.2934852-.2833-.2934852-.74262 0-1.02592.293485-.2833.769318-.2833 1.062806 0l.87769.84723 2.75647-2.660815c.29349-.2833.76932-.2833 1.06281 0z" fill="#fff" fill-rule="evenodd"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 390 B

1
app/images/icons/error.svg
View File

@ -1 +0,0 @@
<svg fill="none" height="8" viewBox="0 0 2 8" width="2" xmlns="http://www.w3.org/2000/svg"><g fill="#fff"><rect height="5" rx="1" width="2"/><rect height="2" rx="1" width="2" y="6"/></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 192 B

1
app/images/icons/new.svg
View File

@ -1 +0,0 @@
<svg fill="none" height="10" viewBox="0 0 10 10" width="10" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m1.76923 4.2003c-.44183 0-.799999.35817-.799999.8s.358169.8.799999.8h2.43125v2.43047c0 .44183.35817.8.8.8s.8-.35817.8-.8v-2.43047h2.43029c.44183 0 .8-.35817.8-.8s-.35817-.8-.8-.8h-2.43029v-2.43107c0-.44183-.35817-.800001-.8-.800001s-.8.358171-.8.800001v2.43107z" fill="#f9fbff" fill-rule="evenodd"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 429 B

1
app/images/icons/retry.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 7.5 KiB

1
app/images/icons/submitted.svg
View File

@ -1 +0,0 @@
<svg fill="none" height="6" viewBox="0 0 7 6" width="7" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m5.24834.0498428c.44182 0 .8.3581732.8.8000012v3.999996c0 .44183-.35818.8-.8.8-.44183 0-.8-.35817-.8-.8v-2.16706l-2.88276 2.88275c-.31242.31242-.818948.31242-1.131368 0-.312419-.31242-.312419-.81895 0-1.13137l2.784318-2.78432h-1.97019c-.441833 0-.800005-.35817-.800005-.799996 0-.441828.358172-.8000012.800005-.8000012z" fill="#f9fbff" fill-rule="evenodd"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 483 B

1
ui/components/app/app-components.scss
View File

@ -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';

5
ui/components/app/transaction-activity-log/transaction-activity-log-icon/index.scss Normal file
View File

@ -0,0 +1,5 @@
.transaction-activity-log-icon {
&__icon {
color: var(--color-icon-default);
}
}

30
ui/components/app/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.component.js
View File

@ -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 (
<div className={classnames('transaction-activity-log-icon', className)}>
{imagePath ? <img src={imagePath} height="9" width="9" alt="" /> : null}
{iconClassName ? (
<i
className={classnames(
'fa',
'transaction-activity-log-icon__icon',
iconClassName,
)}
/>
) : null}
</div>
);
}

21
ui/components/app/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.stories.js Normal file
View File

@ -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) => <TransactionActivityLogIcon {...args} />;
DefaultStory.storyName = 'Default';