m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 01:47:00 +01:00
Code

Dark mode: advanded-gas-fee-input-subtext icons (#14197)

Browse Source
This commit is contained in:
George Marshall 2022-03-25 07:30:22 -07:00 committed by GitHub
parent 30ef26101a
commit e850bcbc4a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 19 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/images/down-arrow.svg
View File

@ -1,3 +0,0 @@
<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.66555 3.36981C8.38934 3.36981 8.19599 3.59078 8.18218 3.85319L8.26504 7.11251L4.30138 3.14884C4.10803 2.95549 3.83181 2.95549 3.63846 3.14884L3.19652 3.59078C3.01698 3.77032 3.00317 4.06035 3.19652 4.2537L7.16019 8.21736L3.92849 8.1345C3.65227 8.1345 3.44511 8.34166 3.4313 8.60406V9.21173C3.44511 9.47413 3.65227 9.68129 3.90087 9.68129H9.28703C9.53562 9.68129 9.74278 9.47413 9.74278 9.22554V3.83938C9.74278 3.59078 9.53562 3.38362 9.27322 3.36981H8.66555Z" fill="#D73A49"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 592 B

3
app/images/level-arrow.svg
View File

@ -1,3 +0,0 @@
<svg width="10" height="9" viewBox="0 0 10 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.12476 0.974243C3.92944 1.16956 3.94897 1.46252 4.12476 1.65784L6.48804 3.90393L0.882568 3.90393C0.609131 3.90393 0.413818 4.09924 0.413818 4.37268L0.413818 4.99768C0.413818 5.25159 0.609131 5.46643 0.882568 5.46643L6.48804 5.46643L4.14429 7.69299C3.94897 7.88831 3.94897 8.18127 4.12476 8.37659L4.55444 8.80627C4.74976 8.98206 5.04272 8.98206 5.21851 8.80627L9.0271 4.99768C9.20288 4.8219 9.20288 4.52893 9.0271 4.35315L5.21851 0.544555C5.04272 0.368774 4.74976 0.368774 4.55444 0.544555L4.12476 0.974243Z" fill="#BBC0C5"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 637 B

1
app/images/up-arrow.svg
View File

@ -1 +0,0 @@
<svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.022 4.82c0 .275.22.469.483.482l3.26-.082L3.8 9.183a.451.451 0 0 0 0 .663l.442.442c.18.18.47.193.663 0l3.963-3.964-.082 3.232a.49.49 0 0 0 .47.497h.607a.484.484 0 0 0 .47-.47V4.199a.46.46 0 0 0-.456-.456H4.49a.484.484 0 0 0-.47.47v.607Z" fill="#219E37"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 347 B

28
ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/advanced-gas-fee-input-subtext.js
View File

@ -1,5 +1,6 @@
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { isNullish } from '../../../../helpers/utils/util';
import { formatGasFeeOrFeeRange } from '../../../../helpers/utils/gas';
@ -11,21 +12,21 @@ function determineTrendInfo(trend, t) {
switch (trend) {
case 'up':
return {
className: 'advanced-gas-fee-input-subtext__up',
imageSrc: '/images/up-arrow.svg',
imageAlt: t('upArrow'),
className: 'fa-arrow-up advanced-gas-fee-input-subtext__up',
color: 'var(--color-success-default)',
title: t('upArrow'),
};
case 'down':
return {
className: 'advanced-gas-fee-input-subtext__down',
imageSrc: '/images/down-arrow.svg',
imageAlt: t('downArrow'),
className: 'fa-arrow-down advanced-gas-fee-input-subtext__down',
color: 'var(--color-error-default)',
title: t('downArrow'),
};
case 'level':
return {
className: 'advanced-gas-fee-input-subtext__level',
imageSrc: '/images/level-arrow.svg',
imageAlt: t('levelArrow'),
className: 'fa-arrow-right advanced-gas-fee-input-subtext__level',
color: 'var(--color-icon-default)',
title: t('levelArrow'),
};
default:
return null;
@ -52,10 +53,11 @@ const AdvancedGasFeeInputSubtext = ({ latest, historical, trend }) => {
{formatGasFeeOrFeeRange(latest)}
</span>
{trendInfo === null ? null : (
<span className={trendInfo.className}>
<img
src={trendInfo.imageSrc}
alt={trendInfo.imageAlt}
<span className="advanced-gas-fee-input-subtext__icon">
<i
className={classnames('fa', trendInfo.className)}
style={{ color: trendInfo.color }}
title={trendInfo.title}
data-testid="fee-arrow"
/>
</span>

6
ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/advanced-gas-fee-input-subtext.test.js
View File

@ -45,7 +45,7 @@ describe('AdvancedGasFeeInputSubtext', () => {
},
});
expect(screen.getByAltText('up arrow')).toBeInTheDocument();
expect(screen.getByTitle('up arrow')).toBeInTheDocument();
});
it('should render a fee trend arrow image if given "down" as the trend', () => {
@ -56,7 +56,7 @@ describe('AdvancedGasFeeInputSubtext', () => {
},
});
expect(screen.getByAltText('down arrow')).toBeInTheDocument();
expect(screen.getByTitle('down arrow')).toBeInTheDocument();
});
it('should render a fee trend arrow image if given "level" as the trend', () => {
@ -67,7 +67,7 @@ describe('AdvancedGasFeeInputSubtext', () => {
},
});
expect(screen.getByAltText('level arrow')).toBeInTheDocument();
expect(screen.getByTitle('level arrow')).toBeInTheDocument();
});
it('should not render a fee trend arrow image if given an invalid trend', () => {

2
ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/index.scss
View File

@ -21,7 +21,7 @@
padding-top: 2px;
}
img {
&__icon {
margin-right: 8px;
}
}