From 53da89cea111c65a1048acbcfcdb1c8633315351 Mon Sep 17 00:00:00 2001 From: George Marshall Date: Fri, 25 Mar 2022 10:35:11 -0700 Subject: [PATCH] Dark mode: user preferenced currency eth logo (#14210) --- app/images/eth.svg | 3 - .../confirm-detail-row.component.js | 2 +- ...-preferenced-currency-display.component.js | 12 +++- ...er-preferenced-currency-display.stories.js | 60 +++++++++++++++++++ .../currency-display.component.js | 4 +- ui/components/ui/currency-display/index.scss | 4 ++ .../confirm-transaction-base.component.js | 2 +- 7 files changed, 78 insertions(+), 9 deletions(-) delete mode 100644 app/images/eth.svg create mode 100644 ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.stories.js diff --git a/app/images/eth.svg b/app/images/eth.svg deleted file mode 100644 index 04e726b13..000000000 --- a/app/images/eth.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ui/components/app/confirm-page-container/confirm-detail-row/confirm-detail-row.component.js b/ui/components/app/confirm-page-container/confirm-detail-row/confirm-detail-row.component.js index 4ee4ecbd4..fcef11674 100644 --- a/ui/components/app/confirm-page-container/confirm-detail-row/confirm-detail-row.component.js +++ b/ui/components/app/confirm-page-container/confirm-detail-row/confirm-detail-row.component.js @@ -44,7 +44,7 @@ const ConfirmDetailRow = (props) => { type={PRIMARY} value={value} showEthLogo - ethLogoHeight="18" + ethLogoHeight={18} style={{ color: primaryValueTextColor }} hideLabel /> diff --git a/ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.component.js b/ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.component.js index 9143c94a1..6589a818e 100644 --- a/ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.component.js +++ b/ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.component.js @@ -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 && ( - + ) ); }, [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, diff --git a/ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.stories.js b/ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.stories.js new file mode 100644 index 000000000..0fcdf1f9f --- /dev/null +++ b/ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.stories.js @@ -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) => ( + +); + +DefaultStory.storyName = 'Default'; diff --git a/ui/components/ui/currency-display/currency-display.component.js b/ui/components/ui/currency-display/currency-display.component.js index b7bc3108b..3a62ce396 100644 --- a/ui/components/ui/currency-display/currency-display.component.js +++ b/ui/components/ui/currency-display/currency-display.component.js @@ -35,7 +35,9 @@ export default function CurrencyDisplay({ style={style} title={(!hideTitle && title) || null} > - {prefixComponent} + + {prefixComponent} + {parts.prefix} {parts.value} diff --git a/ui/components/ui/currency-display/index.scss b/ui/components/ui/currency-display/index.scss index 074a65df3..8f9ebf301 100644 --- a/ui/components/ui/currency-display/index.scss +++ b/ui/components/ui/currency-display/index.scss @@ -10,6 +10,10 @@ text-overflow: ellipsis; } + &__prefix { + padding-right: 4px; + } + &__suffix { padding-left: 4px; } diff --git a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js index a2aa251fb..29b5e987a 100644 --- a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js +++ b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js @@ -873,7 +873,7 @@ export default class ConfirmTransactionBase extends Component { value={hexTransactionAmount} type={PRIMARY} showEthLogo - ethLogoHeight="28" + ethLogoHeight={24} hideLabel /> );