From 54f831ede499277f1eb9396bc07643ee204cbafe Mon Sep 17 00:00:00 2001 From: Jordan Frankfurt Date: Fri, 7 Oct 2022 12:35:27 -0500 Subject: [PATCH] fix(token-details): make breakpoints more consistent and use only theme.breakpoint values (#4836) * fix(token-details): make breakpoints more consistent and use only theme.breakpoint values * feat(token-details): design patch for mobile swap button footer * render mobile balance footer w/ only swap button when user is disconnected * don't render BalanceSummary if no balances are provided * full width swap button footer until breakpoints.lg --- .../Tokens/TokenDetails/BalanceSummary.tsx | 5 +- .../MobileBalanceSummaryFooter.tsx | 132 ++++++++---------- src/pages/TokenDetails/index.tsx | 49 ++----- 3 files changed, 77 insertions(+), 109 deletions(-) diff --git a/src/components/Tokens/TokenDetails/BalanceSummary.tsx b/src/components/Tokens/TokenDetails/BalanceSummary.tsx index 7fc96007f1..2c38bada63 100644 --- a/src/components/Tokens/TokenDetails/BalanceSummary.tsx +++ b/src/components/Tokens/TokenDetails/BalanceSummary.tsx @@ -91,6 +91,7 @@ export default function BalanceSummary({ tokenAmount, nativeCurrencyAmount, isNa tokenAmount.currency.address.toLowerCase() === nativeCurrencyAmount.currency.wrapped.address.toLowerCase() if ( + (!tokenAmount && !nativeCurrencyAmount) || (!tokenAmount && !tokenIsWrappedNative && !isNative) || (!isNative && !tokenIsWrappedNative && tokenAmount?.equalTo(0)) || (isNative && tokenAmount?.equalTo(0) && nativeCurrencyAmount?.equalTo(0)) @@ -130,8 +131,8 @@ export default function BalanceSummary({ tokenAmount, nativeCurrencyAmount, isNa Your balance - {currencies.map((props) => ( - + {currencies.map((props, i) => ( + ))} diff --git a/src/components/Tokens/TokenDetails/MobileBalanceSummaryFooter.tsx b/src/components/Tokens/TokenDetails/MobileBalanceSummaryFooter.tsx index 65c9c0b57a..9e873c873e 100644 --- a/src/components/Tokens/TokenDetails/MobileBalanceSummaryFooter.tsx +++ b/src/components/Tokens/TokenDetails/MobileBalanceSummaryFooter.tsx @@ -1,85 +1,81 @@ import { Trans } from '@lingui/macro' import { formatToDecimal } from 'analytics/utils' import { useStablecoinValue } from 'hooks/useStablecoinPrice' -import { Link } from 'react-router-dom' import styled from 'styled-components/macro' +import { StyledInternalLink } from 'theme' import { currencyAmountToPreciseFloat, formatDollar } from 'utils/formatDollarAmt' -import { SMALLEST_MOBILE_MEDIA_BREAKPOINT } from '../constants' import { BalanceSummaryProps } from './BalanceSummary' const Wrapper = styled.div` - height: fit-content; + align-content: center; + align-items: center; border: 1px solid ${({ theme }) => theme.backgroundOutline}; background-color: ${({ theme }) => theme.backgroundSurface}; border-radius: 20px 20px 0px 0px; + bottom: 56px; + color: ${({ theme }) => theme.textSecondary}; display: flex; - padding: 12px 16px; + flex-direction: row; font-weight: 500; font-size: 14px; - line-height: 20px; - width: 100%; - color: ${({ theme }) => theme.textSecondary}; - position: fixed; + height: fit-content; + justify-content: space-between; left: 0; - bottom: 56px; - display: flex; - flex-direction: column; - align-content: center; + line-height: 20px; + padding: 12px 16px; + position: fixed; + width: 100%; - // 768 hardcoded to match NFT-redesign navbar breakpoints - // src/nft/css/sprinkles.css.ts - // change to match theme breakpoints when this navbar is updated - @media screen and (min-width: 768px) { - display: none !important; + @media screen and (min-width: ${({ theme }) => theme.breakpoint.md}px) { + bottom: 0px; + } + @media screen and (min-width: ${({ theme }) => theme.breakpoint.lg}px) { + display: none; } ` const BalanceValue = styled.div` + color: ${({ theme }) => theme.textPrimary}; font-size: 20px; line-height: 28px; display: flex; gap: 8px; ` const BalanceTotal = styled.div` + align-items: center; display: flex; + flex-direction: row; flex-wrap: wrap; gap: 8px; - color: ${({ theme }) => theme.textPrimary}; ` const BalanceInfo = styled.div` display: flex; - justify-content: flex-start; + flex: 10 1 auto; flex-direction: column; + justify-content: flex-start; ` const FiatValue = styled.span` - display: flex; - align-self: flex-end; font-size: 12px; - line-height: 24px; + line-height: 16px; - @media only screen and (max-width: ${SMALLEST_MOBILE_MEDIA_BREAKPOINT}) { - line-height: 16px; + @media screen and (min-width: ${({ theme }) => theme.breakpoint.sm}px) { + line-height: 24px; } ` -const SwapButton = styled.button` +const SwapButton = styled(StyledInternalLink)` background-color: ${({ theme }) => theme.accentAction}; - border-radius: 12px; - display: flex; - align-items: center; border: none; + border-radius: 12px; color: ${({ theme }) => theme.accentTextLightPrimary}; - padding: 12px 16px; - width: 120px; - height: 44px; - font-size: 16px; - font-weight: 600; - justify-content: center; -` -const TotalBalancesSection = styled.div` display: flex; - color: ${({ theme }) => theme.textSecondary}; - justify-content: space-between; - align-items: center; + flex: 1 1 auto; + padding: 12px 16px; + font-size: 1em; + font-weight: 600; + height: 44px; + justify-content: center; + margin: auto; + max-width: 100vw; ` export default function MobileBalanceSummaryFooter({ @@ -101,43 +97,35 @@ export default function MobileBalanceSummaryFooter({ : undefined const nativeBalanceUsd = nativeBalanceUsdValue ? currencyAmountToPreciseFloat(nativeBalanceUsdValue) : undefined - if ((!tokenAmount && !nativeCurrencyAmount) || (nativeCurrencyAmount?.equalTo(0) && tokenAmount?.equalTo(0))) { - return null - } - const outputTokenAddress = tokenAmount?.currency.address ?? nativeCurrencyAmount?.wrapped.currency.address return ( - - {Boolean(formattedBalance !== undefined && !isNative) && ( - - Your {tokenAmount?.currency?.symbol} balance - - - {formattedBalance} {tokenAmount?.currency?.symbol} - - {formatDollar(balanceUsd, true)} - - - )} - {isNative && ( - - Your {nativeCurrencyAmount?.currency?.symbol} balance - - - {formattedNativeBalance} {nativeCurrencyAmount?.currency?.symbol} - - {formatDollar(nativeBalanceUsd, true)} - - - )} - - - Swap - - - + {Boolean(formattedBalance !== undefined && !isNative && tokenAmount?.greaterThan(0)) && ( + + Your {tokenAmount?.currency?.symbol} balance + + + {formattedBalance} {tokenAmount?.currency?.symbol} + + {formatDollar(balanceUsd, true)} + + + )} + {Boolean(isNative && nativeCurrencyAmount?.greaterThan(0)) && ( + + Your {nativeCurrencyAmount?.currency?.symbol} balance + + + {formattedNativeBalance} {nativeCurrencyAmount?.currency?.symbol} + + {formatDollar(nativeBalanceUsd, true)} + + + )} + + Swap + ) } diff --git a/src/pages/TokenDetails/index.tsx b/src/pages/TokenDetails/index.tsx index 780d62e279..ef0a512c94 100644 --- a/src/pages/TokenDetails/index.tsx +++ b/src/pages/TokenDetails/index.tsx @@ -1,11 +1,5 @@ import { Token } from '@uniswap/sdk-core' import { useWeb3React } from '@web3-react/core' -import { - LARGE_MEDIA_BREAKPOINT, - MAX_WIDTH_MEDIA_BREAKPOINT, - MOBILE_MEDIA_BREAKPOINT, - SMALL_MEDIA_BREAKPOINT, -} from 'components/Tokens/constants' import { filterTimeAtom } from 'components/Tokens/state' import { AboutSection } from 'components/Tokens/TokenDetails/About' import AddressSection from 'components/Tokens/TokenDetails/AddressSection' @@ -39,36 +33,21 @@ const Hr = styled.hr` ` export const TokenDetailsLayout = styled.div` display: flex; - gap: 60px; - padding: 68px 20px; - width: 100%; + padding: 0 8px; justify-content: center; + width: 100%; - @media only screen and (max-width: ${MAX_WIDTH_MEDIA_BREAKPOINT}) { + @media screen and (min-width: ${({ theme }) => theme.breakpoint.sm}px) { + gap: 16px; + padding: 0 16px; + } + @media screen and (min-width: ${({ theme }) => theme.breakpoint.md}px) { + gap: 20px; + padding: 48px 20px; + } + @media screen and (min-width: ${({ theme }) => theme.breakpoint.xl}px) { gap: 40px; } - - @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) { - padding-top: 48px; - } - - @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) { - padding-top: 20px; - } - - @media only screen and (max-width: ${LARGE_MEDIA_BREAKPOINT}) { - gap: 0px; - } - - @media only screen and (max-width: ${SMALL_MEDIA_BREAKPOINT}) { - padding-left: 16px; - padding-right: 16px; - } - - @media only screen and (max-width: ${MOBILE_MEDIA_BREAKPOINT}) { - padding-left: 8px; - padding-right: 8px; - } ` export const LeftPanel = styled.div` flex: 1; @@ -76,13 +55,13 @@ export const LeftPanel = styled.div` overflow: hidden; ` export const RightPanel = styled.div` - display: flex; + display: none; flex-direction: column; gap: 20px; width: ${WIDGET_WIDTH}px; - @media only screen and (max-width: ${LARGE_MEDIA_BREAKPOINT}) { - display: none; + @media screen and (min-width: ${({ theme }) => theme.breakpoint.lg}px) { + display: flex; } `