mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
Dark mode: user preferenced currency eth logo (#14210)
This commit is contained in:
parent
c54f9b3097
commit
53da89cea1
@ -1,3 +0,0 @@
|
||||
<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19.9 30L7.5 22.7 19.9 40l12.4-17.3zm.2-30L7.7 20.4l12.4 7.3 12.4-7.2z" fill="#38393a"/>
|
||||
</svg>
|
Before Width: | Height: | Size: 170 B |
@ -44,7 +44,7 @@ const ConfirmDetailRow = (props) => {
|
||||
type={PRIMARY}
|
||||
value={value}
|
||||
showEthLogo
|
||||
ethLogoHeight="18"
|
||||
ethLogoHeight={18}
|
||||
style={{ color: primaryValueTextColor }}
|
||||
hideLabel
|
||||
/>
|
||||
|
@ -6,7 +6,7 @@ import { useUserPreferencedCurrency } from '../../../hooks/useUserPreferencedCur
|
||||
|
||||
export default function UserPreferencedCurrencyDisplay({
|
||||
'data-testid': dataTestId,
|
||||
ethLogoHeight = 12,
|
||||
ethLogoHeight = 14,
|
||||
ethNumberOfDecimals,
|
||||
fiatNumberOfDecimals,
|
||||
numberOfDecimals: propsNumberOfDecimals,
|
||||
@ -23,7 +23,13 @@ export default function UserPreferencedCurrencyDisplay({
|
||||
return (
|
||||
currency === ETH &&
|
||||
showEthLogo && (
|
||||
<img src="./images/eth.svg" height={ethLogoHeight} alt="" />
|
||||
<i
|
||||
className="fab fa-ethereum"
|
||||
style={{
|
||||
color: 'var(--color-icon-default)',
|
||||
fontSize: ethLogoHeight,
|
||||
}}
|
||||
/>
|
||||
)
|
||||
);
|
||||
}, [currency, showEthLogo, ethLogoHeight]);
|
||||
@ -49,7 +55,7 @@ UserPreferencedCurrencyDisplay.propTypes = {
|
||||
hideTitle: PropTypes.bool,
|
||||
style: PropTypes.object,
|
||||
showEthLogo: PropTypes.bool,
|
||||
ethLogoHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
ethLogoHeight: PropTypes.number,
|
||||
type: PropTypes.oneOf([PRIMARY, SECONDARY]),
|
||||
ethNumberOfDecimals: PropTypes.oneOfType([
|
||||
PropTypes.string,
|
||||
|
@ -0,0 +1,60 @@
|
||||
import React from 'react';
|
||||
import { PRIMARY, SECONDARY, ETH } from '../../../helpers/constants/common';
|
||||
|
||||
import UserPreferencedCurrencyDisplay from '.';
|
||||
|
||||
export default {
|
||||
title: 'Components/App/UserPreferencedCurrencyDisplay',
|
||||
id: __filename,
|
||||
argTypes: {
|
||||
className: {
|
||||
control: 'text',
|
||||
},
|
||||
'data-testid': {
|
||||
control: 'text',
|
||||
},
|
||||
prefix: {
|
||||
control: 'text',
|
||||
},
|
||||
value: {
|
||||
control: 'text',
|
||||
},
|
||||
numberOfDecimals: {
|
||||
control: 'number',
|
||||
},
|
||||
hideLabel: {
|
||||
control: 'boolean',
|
||||
},
|
||||
hideTitle: {
|
||||
control: 'boolean',
|
||||
},
|
||||
style: {
|
||||
control: 'object',
|
||||
},
|
||||
showEthLogo: {
|
||||
control: 'boolean',
|
||||
},
|
||||
ethLogoHeight: {
|
||||
control: 'number',
|
||||
},
|
||||
type: {
|
||||
control: 'select',
|
||||
options: [PRIMARY, SECONDARY],
|
||||
},
|
||||
ethNumberOfDecimals: {
|
||||
control: 'number',
|
||||
},
|
||||
fiatNumberOfDecimals: {
|
||||
control: 'number',
|
||||
},
|
||||
},
|
||||
args: {
|
||||
type: ETH,
|
||||
},
|
||||
};
|
||||
|
||||
export const DefaultStory = (args) => (
|
||||
<UserPreferencedCurrencyDisplay {...args} />
|
||||
);
|
||||
|
||||
DefaultStory.storyName = 'Default';
|
@ -35,7 +35,9 @@ export default function CurrencyDisplay({
|
||||
style={style}
|
||||
title={(!hideTitle && title) || null}
|
||||
>
|
||||
{prefixComponent}
|
||||
<span className="currency-display-component__prefix">
|
||||
{prefixComponent}
|
||||
</span>
|
||||
<span className="currency-display-component__text">
|
||||
{parts.prefix}
|
||||
{parts.value}
|
||||
|
@ -10,6 +10,10 @@
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&__prefix {
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
&__suffix {
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
@ -873,7 +873,7 @@ export default class ConfirmTransactionBase extends Component {
|
||||
value={hexTransactionAmount}
|
||||
type={PRIMARY}
|
||||
showEthLogo
|
||||
ethLogoHeight="28"
|
||||
ethLogoHeight={24}
|
||||
hideLabel
|
||||
/>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user