From d5b8a4ade9861e83b90b1ae12743ddc0200c83d3 Mon Sep 17 00:00:00 2001 From: Mark Stacey Date: Tue, 27 Oct 2020 16:53:20 -0230 Subject: [PATCH] Revert "Update main-quote-summary designs/styles (#9612)" (#9722) This reverts commit 5456d55c88cb8934efdae936a78522a9064e5854. --- app/_locales/en/messages.json | 7 + app/images/down-arrow-grey.svg | 3 - ui/app/components/ui/url-icon/index.scss | 2 +- ui/app/components/ui/url-icon/url-icon.js | 4 +- .../exchange-rate-display.js | 10 +- .../pages/swaps/main-quote-summary/index.scss | 127 ++++++++---------- .../main-quote-summary/main-quote-summary.js | 110 ++++++++------- .../main-quote-summary.stories.js | 37 +++-- ui/app/pages/swaps/swaps.util.js | 2 - ui/app/pages/swaps/view-quote/index.scss | 20 ++- ui/app/pages/swaps/view-quote/view-quote.js | 34 ++--- 11 files changed, 194 insertions(+), 162 deletions(-) delete mode 100644 app/images/down-arrow-grey.svg diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 953e042d5..427f29078 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -1863,6 +1863,13 @@ "swapsAlmostDone": { "message": "Almost done..." }, + "swapsBestQuote": { + "message": "Best quote" + }, + "swapsConvertToAbout": { + "message": "Convert $1 to about", + "description": "This message is part of a quote for a swap. The $1 is the amount being converted, and the amount it is being swapped for is below this message" + }, "swapsMaxSlippage": { "message": "Max slippage" }, diff --git a/app/images/down-arrow-grey.svg b/app/images/down-arrow-grey.svg deleted file mode 100644 index fcdb33eec..000000000 --- a/app/images/down-arrow-grey.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ui/app/components/ui/url-icon/index.scss b/ui/app/components/ui/url-icon/index.scss index 14d5524cb..482f327d3 100644 --- a/ui/app/components/ui/url-icon/index.scss +++ b/ui/app/components/ui/url-icon/index.scss @@ -20,9 +20,9 @@ border-radius: 50%; background: #bbc0c5; flex: 0 1 auto; - display: flex; justify-content: center; align-items: center; + text-align: center; padding-top: 2px; } } diff --git a/ui/app/components/ui/url-icon/url-icon.js b/ui/app/components/ui/url-icon/url-icon.js index 197f9d855..3dfc1dbb4 100644 --- a/ui/app/components/ui/url-icon/url-icon.js +++ b/ui/app/components/ui/url-icon/url-icon.js @@ -7,14 +7,13 @@ export default function UrlIcon ({ url, className, name, - fallbackClassName, }) { return ( ) } @@ -23,5 +22,4 @@ UrlIcon.propTypes = { url: PropTypes.string, className: PropTypes.string, name: PropTypes.string, - fallbackClassName: PropTypes.string, } diff --git a/ui/app/pages/swaps/exchange-rate-display/exchange-rate-display.js b/ui/app/pages/swaps/exchange-rate-display/exchange-rate-display.js index 13119483a..16e7b5325 100644 --- a/ui/app/pages/swaps/exchange-rate-display/exchange-rate-display.js +++ b/ui/app/pages/swaps/exchange-rate-display/exchange-rate-display.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types' import BigNumber from 'bignumber.js' import classnames from 'classnames' import { calcTokenAmount } from '../../../helpers/utils/token-util' -import { formatSwapsValueForDisplay } from '../swaps.util' +import { toPrecisionWithoutTrailingZeros } from '../../../helpers/utils/util' export default function ExchangeRateDisplay ({ primaryTokenValue, @@ -13,7 +13,6 @@ export default function ExchangeRateDisplay ({ secondaryTokenDecimals = 18, secondaryTokenSymbol, arrowColor = 'black', - boldSymbols = true, className, }) { const [showPrimaryToSecondary, setShowPrimaryToSecondary] = useState(true) @@ -38,16 +37,16 @@ export default function ExchangeRateDisplay ({ } else if ((new BigNumber(rate, 10).lt('0.000001', 10))) { rateToDisplay = rate } else { - rateToDisplay = formatSwapsValueForDisplay(rate) + rateToDisplay = toPrecisionWithoutTrailingZeros(rate, 9) } return (
1 - {baseSymbol} + {baseSymbol} {comparisonSymbol} {rateToDisplay} - {ratiodSymbol} + {ratiodSymbol}
span { + margin-left: 4px; + } + } + &__quote-details-top { + height: 94px; display: flex; flex-flow: column; justify-content: center; align-items: center; width: 100%; + padding: 12px; + padding-top: 2px; + margin-top: 4px; + } + + &__bold { + font-weight: 900; + } + + &__quote-small-white { + white-space: nowrap; + width: 100%; + text-align: center; + font-size: 14px; + margin-bottom: 8px; + margin-top: 6px; } &__quote-large { display: flex; - align-items: flex-start; - margin-top: 8px; - height: 50px; + align-items: flex-end; } &__quote-large-number { - font-size: 60px; - line-height: 48px; + font-size: 40px; + line-height: 32px; + margin-right: 6px; + } + + &__quote-large-symbol { + display: flex; + align-items: flex-end; + font-size: 32px; + line-height: 32px; } &__quote-large-white { @@ -110,10 +104,7 @@ justify-content: center; align-items: center; width: 287px; - margin-top: 14px; - } - - &__exchange-rate-display { - color: $Grey-500; + border-top: 1px solid rgba(255, 255, 255, 0.2); + height: 42px; } } diff --git a/ui/app/pages/swaps/main-quote-summary/main-quote-summary.js b/ui/app/pages/swaps/main-quote-summary/main-quote-summary.js index e25340449..0af388c8f 100644 --- a/ui/app/pages/swaps/main-quote-summary/main-quote-summary.js +++ b/ui/app/pages/swaps/main-quote-summary/main-quote-summary.js @@ -1,77 +1,94 @@ -import React from 'react' +import React, { useContext } from 'react' import PropTypes from 'prop-types' import BigNumber from 'bignumber.js' +import classnames from 'classnames' +import { I18nContext } from '../../../contexts/i18n' import { calcTokenAmount } from '../../../helpers/utils/token-util' import { toPrecisionWithoutTrailingZeros } from '../../../helpers/utils/util' import Tooltip from '../../../components/ui/tooltip' -import UrlIcon from '../../../components/ui/url-icon' +import SunCheckIcon from '../../../components/ui/icon/sun-check-icon.component' import ExchangeRateDisplay from '../exchange-rate-display' import { formatSwapsValueForDisplay } from '../swaps.util' +import QuoteBackdrop from './quote-backdrop' -function getFontSizesAndLineHeights (fontSizeScore) { - if (fontSizeScore <= 9) { - return [60, 48] - } - if (fontSizeScore <= 13) { +function getFontSizes (fontSizeScore) { + if (fontSizeScore <= 11) { return [40, 32] } - return [26, 15] + if (fontSizeScore <= 16) { + return [30, 24] + } + return [24, 14] +} + +function getLineHeight (fontSizeScore) { + if (fontSizeScore <= 11) { + return 32 + } + if (fontSizeScore <= 16) { + return 26 + } + return 18 +} + +// Returns a numerical value based on the length of the two passed strings: amount and symbol. +// The returned value equals the number of digits in the amount string plus a value calculated +// from the length of the symbol string. The returned number will be passed to the getFontSizes function +// to determine the font size to apply to the amount and symbol strings when rendered. The +// desired maximum digits and letters to show in the ultimately rendered string is 20, and in +// such cases there can also be ellipsis shown and a decimal, combinding for a rendered "string" +// length of ~22. As the symbol will always have a smaller font size than the amount, the +// additive value of the symbol length to the font size score is corrected based on the total +// number of alphanumeric characters in both strings and the desired rendered length of 22. +function getFontSizeScore (amount, symbol) { + const amountLength = amount.match(/\d+/gu).join('').length + const symbolModifier = Math.min((amountLength + symbol.length) / 22, 1) + return amountLength + (symbol.length * symbolModifier) } export default function MainQuoteSummary ({ + isBestQuote, sourceValue, sourceSymbol, sourceDecimals, - sourceIconUrl, destinationValue, destinationSymbol, destinationDecimals, - destinationIconUrl, }) { + const t = useContext(I18nContext) + const sourceAmount = toPrecisionWithoutTrailingZeros(calcTokenAmount(sourceValue, sourceDecimals).toString(10), 12) const destinationAmount = calcTokenAmount(destinationValue, destinationDecimals) const amountToDisplay = formatSwapsValueForDisplay(destinationAmount) - const amountDigitLength = amountToDisplay.match(/\d+/gu).join('').length - const [numberFontSize, lineHeight] = getFontSizesAndLineHeights(amountDigitLength) + const fontSizeScore = getFontSizeScore(amountToDisplay, destinationSymbol) + const [numberFontSize, symbolFontSize] = getFontSizes(fontSizeScore) + const lineHeight = getLineHeight(fontSizeScore) + let ellipsedAmountToDisplay = amountToDisplay - if (amountDigitLength > 20) { - ellipsedAmountToDisplay = `${amountToDisplay.slice(0, 20)}...` + if (fontSizeScore > 20) { + ellipsedAmountToDisplay = `${amountToDisplay.slice(0, amountToDisplay.length - (fontSizeScore - 20))}...` } return (
+
+ +
+
+ {isBestQuote && } + {isBestQuote && t('swapsBestQuote')} +
-
- - { formatSwapsValueForDisplay(sourceAmount) } - - - { sourceSymbol } -
- -
- - { destinationSymbol } -
+ + {t('swapsConvertToAbout', [{`${sourceAmount} ${sourceSymbol}`}])} +
{`${ellipsedAmountToDisplay}`} + {`${destinationSymbol}`}
@@ -92,9 +110,8 @@ export default function MainQuoteSummary ({ secondaryTokenValue={destinationValue} secondaryTokenDecimals={destinationDecimals} secondaryTokenSymbol={destinationSymbol} - arrowColor="#037DD6" - boldSymbols={false} - className="main-quote-summary__exchange-rate-display" + className="exchange-rate-display--white" + arrowColor="white" />
@@ -103,6 +120,7 @@ export default function MainQuoteSummary ({ } MainQuoteSummary.propTypes = { + isBestQuote: PropTypes.bool, sourceValue: PropTypes.oneOfType([ PropTypes.string, PropTypes.instanceOf(BigNumber), @@ -115,6 +133,4 @@ MainQuoteSummary.propTypes = { ]).isRequired, destinationDecimals: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), destinationSymbol: PropTypes.string.isRequired, - sourceIconUrl: PropTypes.string, - destinationIconUrl: PropTypes.string, } diff --git a/ui/app/pages/swaps/main-quote-summary/main-quote-summary.stories.js b/ui/app/pages/swaps/main-quote-summary/main-quote-summary.stories.js index 239175d75..f6c1ffeb2 100644 --- a/ui/app/pages/swaps/main-quote-summary/main-quote-summary.stories.js +++ b/ui/app/pages/swaps/main-quote-summary/main-quote-summary.stories.js @@ -1,5 +1,5 @@ import React from 'react' -import { text, number } from '@storybook/addon-knobs/react' +import { text, number, boolean } from '@storybook/addon-knobs/react' import MainQuoteSummary from './main-quote-summary' export default { @@ -8,17 +8,28 @@ export default { export const BestQuote = () => { return ( -
- -
+ + ) +} + +export const NotBestQuote = () => { + return ( + ) } diff --git a/ui/app/pages/swaps/swaps.util.js b/ui/app/pages/swaps/swaps.util.js index 36f3c697a..14f9204d2 100644 --- a/ui/app/pages/swaps/swaps.util.js +++ b/ui/app/pages/swaps/swaps.util.js @@ -375,7 +375,6 @@ export function quotesToRenderableData (quotes, gasPrice, conversionRate, curren destinationTokenDecimals: destinationTokenInfo.decimals, destinationTokenSymbol: destinationTokenInfo.symbol, destinationTokenValue: formatSwapsValueForDisplay(destinationValue), - destinationIconUrl: destinationTokenInfo.iconUrl, isBestQuote: quote.isBestQuote, liquiditySourceKey, feeInEth, @@ -387,7 +386,6 @@ export function quotesToRenderableData (quotes, gasPrice, conversionRate, curren sourceTokenDecimals: sourceTokenInfo.decimals, sourceTokenSymbol: sourceTokenInfo.symbol, sourceTokenValue: sourceValue, - sourceTokenIconUrl: sourceTokenInfo.iconUrl, ethValueOfTrade, minimumAmountReceived, metaMaskFee: fee, diff --git a/ui/app/pages/swaps/view-quote/index.scss b/ui/app/pages/swaps/view-quote/index.scss index a7fef1f42..1b76853fb 100644 --- a/ui/app/pages/swaps/view-quote/index.scss +++ b/ui/app/pages/swaps/view-quote/index.scss @@ -44,13 +44,13 @@ display: flex; align-items: center; justify-content: center; - min-height: 46px; } &__view-other-button, &__view-other-button-fade { display: flex; align-items: center; + margin-bottom: 16px; position: absolute; @include H7; @@ -87,12 +87,10 @@ } &__insufficient-eth-warning-wrapper { + margin-top: 8px; width: 100%; align-items: center; justify-content: center; - width: intrinsic; /* Safari/WebKit uses a non-standard name */ - width: max-content; - max-width: 340px; @media screen and (min-width: 576px) { min-height: 36px; @@ -129,6 +127,7 @@ &__fee-card-container { width: 100%; + margin-top: 8px; margin-bottom: 8px; @media screen and (min-width: 576px) { @@ -140,8 +139,21 @@ } } + &__main-quote-summary-container { + margin-top: 24px; + + @media screen and (max-width: 576px) { + margin-top: 0; + } + + &--thin { + margin-top: 8px; + } + } + &__metamask-rate { display: flex; + margin-top: 8%; } &__metamask-rate-text { diff --git a/ui/app/pages/swaps/view-quote/view-quote.js b/ui/app/pages/swaps/view-quote/view-quote.js index 24a0008fa..a658abfe2 100644 --- a/ui/app/pages/swaps/view-quote/view-quote.js +++ b/ui/app/pages/swaps/view-quote/view-quote.js @@ -114,6 +114,7 @@ export default function ViewQuote () { const topQuote = useSelector(getTopQuote) const usedQuote = selectedQuote || topQuote + const { isBestQuote } = usedQuote const fetchParamsSourceToken = fetchParams?.sourceToken const usedGasLimit = ( @@ -190,11 +191,9 @@ export default function ViewQuote () { destinationTokenDecimals, destinationTokenSymbol, destinationTokenValue, - destinationIconUrl, sourceTokenDecimals, sourceTokenSymbol, sourceTokenValue, - sourceTokenIconUrl, } = renderableDataForUsedQuote const { feeInFiat, feeInEth } = getRenderableNetworkFeesForQuote( @@ -482,19 +481,24 @@ export default function ViewQuote () { labelKey="swapNewQuoteIn" />
- +
+ +