fix: style and copy updates to the swap box (#7006)

* add you pay/you receive label to swap inputs * update styles * update snapshots
2023-08-02 13:39:05 -05:00 · 2023-08-02 13:39:05 -05:00 · 1ffb9421b2
commit 1ffb9421b2
parent 7978ed97a9
9 changed files with 898 additions and 787 deletions
--- a/src/assets/svg/settings.svg
+++ b/src/assets/svg/settings.svg
@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M20.83 14.6C19.9 14.06 19.33 13.07 19.33 12C19.33 10.93 19.9 9.93999 20.83 9.39999C20.99 9.29999 21.05 9.1 20.95 8.94L19.28 6.06C19.22 5.95 19.11 5.89001 19 5.89001C18.94 5.89001 18.88 5.91 18.83 5.94C18.37 6.2 17.85 6.34 17.33 6.34C16.8 6.34 16.28 6.19999 15.81 5.92999C14.88 5.38999 14.31 4.41 14.31 3.34C14.31 3.15 14.16 3 13.98 3H10.02C9.83999 3 9.69 3.15 9.69 3.34C9.69 4.41 9.12 5.38999 8.19 5.92999C7.72 6.19999 7.20001 6.34 6.67001 6.34C6.15001 6.34 5.63001 6.2 5.17001 5.94C5.01001 5.84 4.81 5.9 4.72 6.06L3.04001 8.94C3.01001 8.99 3 9.05001 3 9.10001C3 9.22001 3.06001 9.32999 3.17001 9.39999C4.10001 9.93999 4.67001 10.92 4.67001 11.99C4.67001 13.07 4.09999 14.06 3.17999 14.6H3.17001C3.01001 14.7 2.94999 14.9 3.04999 15.06L4.72 17.94C4.78 18.05 4.89 18.11 5 18.11C5.06 18.11 5.12001 18.09 5.17001 18.06C6.11001 17.53 7.26 17.53 8.19 18.07C9.11 18.61 9.67999 19.59 9.67999 20.66C9.67999 20.85 9.82999 21 10.02 21H13.98C14.16 21 14.31 20.85 14.31 20.66C14.31 19.59 14.88 18.61 15.81 18.07C16.28 17.8 16.8 17.66 17.33 17.66C17.85 17.66 18.37 17.8 18.83 18.06C18.99 18.16 19.19 18.1 19.28 17.94L20.96 15.06C20.99 15.01 21 14.95 21 14.9C21 14.78 20.94 14.67 20.83 14.6ZM12 15C10.34 15 9 13.66 9 12C9 10.34 10.34 9 12 9C13.66 9 15 10.34 15 12C15 13.66 13.66 15 12 15Z"
+    fill="currentColor" />
+</svg>
--- a/src/components/CurrencyInputPanel/FiatValue.tsx
+++ b/src/components/CurrencyInputPanel/FiatValue.tsx
@ -37,7 +37,7 @@ export function FiatValue({

  return (
    <Row gap="sm">
-      <ThemedText.BodySmall>
+      <ThemedText.BodySmall color="textSecondary">
        {fiatValue.data ? (
          formatNumber(fiatValue.data, NumberType.FiatTokenPrice)
        ) : (
--- a/src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx
+++ b/src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx
@ -71,7 +71,7 @@ const CurrencySelect = styled(ButtonGray)<{
  user-select: none;
  border: none;
  font-size: 24px;
-  font-weight: 400;
+  font-weight: 500;
  width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')};
  padding: ${({ selected }) => (selected ? '4px 8px 4px 4px' : '6px 6px 6px 8px')};
  gap: 8px;
@ -189,7 +189,7 @@ interface SwapCurrencyInputPanelProps {
  onUserInput: (value: string) => void
  onMax?: () => void
  showMaxButton: boolean
-  label?: ReactNode
+  label: ReactNode
  onCurrencySelect?: (currency: Currency) => void
  currency?: Currency | null
  hideBalance?: boolean
@ -229,6 +229,7 @@ export default function SwapCurrencyInputPanel({
  locked = false,
  loading = false,
  disabled = false,
+  label,
  ...rest
 }: SwapCurrencyInputPanelProps) {
  const [modalOpen, setModalOpen] = useState(false)
@ -255,6 +256,7 @@ export default function SwapCurrencyInputPanel({
        </FixedContainer>
      )}
      <Container hideInput={hideInput}>
+        <ThemedText.SubHeaderSmall color="textTertiary">{label}</ThemedText.SubHeaderSmall>
        <InputRow style={hideInput ? { padding: '0', borderRadius: '8px' } : {}}>
          {!hideInput && (
            <StyledNumericalInput
--- a/src/components/CurrencyInputPanel/index.tsx
+++ b/src/components/CurrencyInputPanel/index.tsx
@ -40,7 +40,7 @@ const FixedContainer = styled.div`
  width: 100%;
  height: 100%;
  position: absolute;
-  border-radius: 20px;
+  border-radius: 16px;
  background-color: ${({ theme }) => theme.backgroundInteractive};
  display: flex;
  align-items: center;
--- a/src/components/Settings/MenuButton/index.tsx
+++ b/src/components/Settings/MenuButton/index.tsx
@ -1,6 +1,6 @@
 import { t, Trans } from '@lingui/macro'
+import { ReactComponent as Settings } from 'assets/svg/settings.svg'
 import Row from 'components/Row'
-import { Settings } from 'react-feather'
 import { useUserSlippageTolerance } from 'state/user/hooks'
 import { SlippageTolerance } from 'state/user/types'
 import styled from 'styled-components/macro'
@ -8,10 +8,10 @@ import { ThemedText } from 'theme'
 import validateUserSlippageTolerance, { SlippageValidationResult } from 'utils/validateUserSlippageTolerance'

 const Icon = styled(Settings)`
-  height: 20px;
-  width: 20px;
+  height: 24px;
+  width: 24px;
  > * {
-    stroke: ${({ theme }) => theme.textSecondary};
+    fill: ${({ theme }) => theme.textSecondary};
  }
 `

--- a/src/components/swap/snapshots/SwapSkeleton.test.tsx.snap
+++ b/src/components/swap/snapshots/SwapSkeleton.test.tsx.snap
@ -15,7 +15,7 @@ exports[`SwapSkeleton.tsx renders a skeleton 1`] = `
  margin-bottom: -18px;
  margin-left: auto;
  margin-right: auto;
-  background-color: #E8ECFB;
+  background-color: #F5F6FC;
  border: 4px solid;
  border-color: #FFFFFF;
  z-index: 2;
--- a/src/components/swap/styleds.tsx
+++ b/src/components/swap/styleds.tsx
@ -26,7 +26,7 @@ export const PageWrapper = styled.div`
 export const SwapWrapper = styled.main<{ chainId?: number }>`
  position: relative;
  background: ${({ theme }) => theme.backgroundSurface};
-  border-radius: 16px;
+  border-radius: 24px;
  border: 1px solid ${({ theme }) => theme.backgroundOutline};
  padding: 8px;
  padding-top: 12px;
@ -151,7 +151,7 @@ export const ArrowWrapper = styled.div<{ clickable: boolean }>`
  margin-bottom: -18px;
  margin-left: auto;
  margin-right: auto;
-  background-color: ${({ theme }) => theme.backgroundInteractive};
+  background-color: ${({ theme }) => theme.backgroundModule};
  border: 4px solid;
  border-color: ${({ theme }) => theme.backgroundSurface};

--- a/src/pages/Landing/snapshots/index.test.tsx.snap
+++ b/src/pages/Landing/snapshots/index.test.tsx.snap
--- a/src/pages/Swap/index.tsx
+++ b/src/pages/Swap/index.tsx
@ -74,14 +74,15 @@ export const ArrowContainer = styled.div`
 `

 const SwapSection = styled.div`
-  position: relative;
  background-color: ${({ theme }) => theme.backgroundModule};
-  border-radius: 12px;
-  padding: 16px;
+  border-radius: 16px;
  color: ${({ theme }) => theme.textSecondary};
  font-size: 14px;
-  line-height: 20px;
  font-weight: 500;
+  height: 120px;
+  line-height: 20px;
+  padding: 16px;
+  position: relative;

  &:before {
    box-sizing: border-box;
@ -585,9 +586,7 @@ export function Swap({
        <SwapSection>
          <Trace section={InterfaceSectionName.CURRENCY_INPUT_PANEL}>
            <SwapCurrencyInputPanel
-              label={
-                independentField === Field.OUTPUT && !showWrap ? <Trans>From (at most)</Trans> : <Trans>From</Trans>
-              }
+              label={<Trans>You pay</Trans>}
              disabled={disableTokenInputs}
              value={formattedAmounts[Field.INPUT]}
              showMaxButton={showMaxButton}
@ -616,10 +615,7 @@ export function Swap({
              }}
              color={theme.textPrimary}
            >
-              <ArrowDown
-                size="16"
-                color={currencies[Field.INPUT] && currencies[Field.OUTPUT] ? theme.textPrimary : theme.textTertiary}
-              />
+              <ArrowDown size="16" color={theme.textPrimary} />
            </ArrowContainer>
          </TraceEvent>
        </ArrowWrapper>
@ -632,7 +628,7 @@ export function Swap({
                value={formattedAmounts[Field.OUTPUT]}
                disabled={disableTokenInputs}
                onUserInput={handleTypeOutput}
-                label={independentField === Field.INPUT && !showWrap ? <Trans>To (at least)</Trans> : <Trans>To</Trans>}
+                label={<Trans>You receive</Trans>}
                showMaxButton={false}
                hideBalance={false}
                fiatValue={showFiatValueOutput ? fiatValueOutput : undefined}
@ -671,13 +667,13 @@ export function Swap({
        {showPriceImpactWarning && <PriceImpactWarning priceImpact={largerPriceImpact} />}
        <div>
          {swapIsUnsupported ? (
-            <ButtonPrimary disabled={true}>
+            <ButtonPrimary $borderRadius="16px" disabled={true}>
              <ThemedText.DeprecatedMain mb="4px">
                <Trans>Unsupported Asset</Trans>
              </ThemedText.DeprecatedMain>
            </ButtonPrimary>
          ) : switchingChain ? (
-            <ButtonPrimary disabled={true}>
+            <ButtonPrimary $borderRadius="16px" disabled={true}>
              <Trans>Connecting to {getChainInfo(switchingChain)?.label}</Trans>
            </ButtonPrimary>
          ) : !account ? (
@ -687,12 +683,13 @@ export function Swap({
              properties={{ received_swap_quote: getIsValidSwapQuote(trade, tradeState, swapInputError) }}
              element={InterfaceElementName.CONNECT_WALLET_BUTTON}
            >
-              <ButtonLight onClick={toggleWalletDrawer} fontWeight={600}>
+              <ButtonLight onClick={toggleWalletDrawer} fontWeight={600} $borderRadius="16px">
                <Trans>Connect Wallet</Trans>
              </ButtonLight>
            </TraceEvent>
          ) : chainId && chainId !== connectedChainId ? (
            <ButtonPrimary
+              $borderRadius="16px"
              onClick={async () => {
                try {
                  await switchChain(connector, chainId)
@ -710,6 +707,7 @@ export function Swap({
            </ButtonPrimary>
          ) : showWrap ? (
            <ButtonPrimary
+              $borderRadius="16px"
              disabled={Boolean(wrapInputError)}
              onClick={handleOnWrap}
              fontWeight={600}