fix: update swap box styles (#4687)

* fix: update swap box styles

* fix balance text color/weight

* fix padding

* text color

src/components/CurrencyInputPanel/FiatValue.tsx

@@ -2,6 +2,7 @@ import { Trans } from '@lingui/macro'
 // eslint-disable-next-line no-restricted-imports
 import { t } from '@lingui/macro'
 import { Currency, CurrencyAmount, Percent } from '@uniswap/sdk-core'
+import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import { useMemo } from 'react'
 import { useTheme } from 'styled-components/macro'
 
@@ -17,6 +18,7 @@ export function FiatValue({
   priceImpact?: Percent
 }) {
   const theme = useTheme()
+  const redesignFlagEnabled = useRedesignFlag() === RedesignVariant.Enabled
   const priceImpactColor = useMemo(() => {
     if (!priceImpact) return undefined
     if (priceImpact.lessThan('0')) return theme.deprecated_green1
@@ -29,8 +31,14 @@ export function FiatValue({
   const p = Number(fiatValue?.toFixed())
   const visibleDecimalPlaces = p < 1.05 ? 4 : 2
 
+  const textColor = redesignFlagEnabled
+    ? theme.textSecondary
+    : fiatValue
+    ? theme.deprecated_text3
+    : theme.deprecated_text4
+
   return (
-    <ThemedText.DeprecatedBody fontSize={14} color={fiatValue ? theme.deprecated_text3 : theme.deprecated_text4}>
+    <ThemedText.DeprecatedBody fontSize={14} color={textColor}>
       {fiatValue && <>${fiatValue?.toFixed(visibleDecimalPlaces, { groupSeparator: ',' })}</>}
       {priceImpact ? (
         <span style={{ color: priceImpactColor }}>

src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx

@@ -11,7 +11,6 @@ import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import { darken } from 'polished'
 import { ReactNode, useCallback, useState } from 'react'
 import { Lock } from 'react-feather'
-import { useLocation } from 'react-router-dom'
 import styled, { useTheme } from 'styled-components/macro'
 import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
 
@@ -78,7 +77,7 @@ const CurrencySelect = styled(ButtonGray)<{
   background-color: ${({ selected, theme, redesignFlag }) =>
     redesignFlag
       ? selected
-        ? theme.backgroundSurface
+        ? theme.stateOverlayPressed
         : theme.accentAction
       : selected
       ? theme.deprecated_bg2
@@ -100,29 +99,26 @@ const CurrencySelect = styled(ButtonGray)<{
   gap: ${({ redesignFlag }) => (redesignFlag ? '8px' : '0px')};
   justify-content: space-between;
   margin-left: ${({ hideInput }) => (hideInput ? '0' : '12px')};
-  :focus,
-  :hover {
+
+  &:hover {
     background-color: ${({ selected, theme, redesignFlag }) =>
-      selected
-        ? redesignFlag
-          ? theme.backgroundSurface
-          : theme.deprecated_bg3
-        : darken(0.05, theme.deprecated_primary1)};
+      redesignFlag
+        ? theme.stateOverlayHover
+        : selected
+        ? darken(0.05, theme.deprecated_primary1)
+        : theme.deprecated_bg3};
   }
-  visibility: ${({ visible }) => (visible ? 'visible' : 'hidden')};
-`
-const InputCurrencySelect = styled(CurrencySelect)<{ redesignFlag: boolean }>`
-  background-color: ${({ theme, selected, redesignFlag }) =>
-    redesignFlag && (selected ? theme.backgroundModule : theme.accentAction)};
-  :focus,
-  :hover {
+
+  &:active {
     background-color: ${({ selected, theme, redesignFlag }) =>
-      selected
-        ? redesignFlag
-          ? theme.backgroundInteractive
-          : theme.deprecated_bg3
-        : darken(0.05, theme.deprecated_primary1)};
+      redesignFlag
+        ? theme.stateOverlayPressed
+        : selected
+        ? darken(0.05, theme.deprecated_primary1)
+        : theme.deprecated_bg3};
   }
+
+  visibility: ${({ visible }) => (visible ? 'visible' : 'hidden')};
 `
 
 const InputRow = styled.div<{ selected: boolean; redesignFlag: boolean }>`
@@ -133,10 +129,10 @@ const InputRow = styled.div<{ selected: boolean; redesignFlag: boolean }>`
     redesignFlag ? '0px' : selected ? ' 1rem 1rem 0.75rem 1rem' : '1rem 1rem 1rem 1rem'};
 `
 
-const LabelRow = styled.div`
+const LabelRow = styled.div<{ redesignFlag: boolean }>`
   ${({ theme }) => theme.flexRowNoWrap}
   align-items: center;
-  color: ${({ theme }) => theme.deprecated_text1};
+  color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.textSecondary : theme.deprecated_text1)};
   font-size: 0.75rem;
   line-height: 1rem;
   padding: 0 1rem 1rem;
@@ -154,18 +150,6 @@ const FiatRow = styled(LabelRow)<{ redesignFlag: boolean }>`
   height: ${({ redesignFlag }) => !redesignFlag && '24px'};
 `
 
-const NoBalanceState = styled.div`
-  color: ${({ theme }) => theme.textTertiary};
-  font-weight: 400;
-  justify-content: space-between;
-  padding: 0px 4px 1px 4px;
-`
-const NoBalanceDash = styled.span`
-  color: ${({ theme }) => theme.textTertiary};
-  font-variant: small-caps;
-  font-feature-settings: 'pnum' on, 'lnum' on;
-`
-
 const Aligner = styled.span`
   display: flex;
   align-items: center;
@@ -217,6 +201,8 @@ const StyledBalanceMax = styled.button<{ disabled?: boolean; redesignFlag: boole
 const StyledNumericalInput = styled(NumericalInput)<{ $loading: boolean; redesignFlag: boolean }>`
   ${loadingOpacityMixin};
   text-align: left;
+  font-size: ${({ redesignFlag }) => redesignFlag && '36px'};
+  line-height: ${({ redesignFlag }) => redesignFlag && '44px'};
   font-variant: ${({ redesignFlag }) => redesignFlag && 'small-caps'};
   font-feature-settings: ${({ redesignFlag }) => redesignFlag && 'pnum on, lnum on'};
 `
@@ -272,8 +258,6 @@ export default function SwapCurrencyInputPanel({
   const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
   const selectedCurrencyBalance = useCurrencyBalance(account ?? undefined, currency ?? undefined)
   const theme = useTheme()
-  const { pathname } = useLocation()
-  const isAddLiquidityPage = pathname.includes('/add') && !pathname.includes('/add/v2')
 
   const handleDismissSearch = useCallback(() => {
     setModalOpen(false)
@@ -310,7 +294,7 @@ export default function SwapCurrencyInputPanel({
             />
           )}
 
-          <InputCurrencySelect
+          <CurrencySelect
             disabled={!chainAllowed}
             visible={currency !== undefined}
             selected={!!currency}
@@ -352,18 +336,8 @@ export default function SwapCurrencyInputPanel({
               </RowFixed>
               {onCurrencySelect && <StyledDropDown selected={!!currency} redesignFlag={redesignFlagEnabled} />}
             </Aligner>
-          </InputCurrencySelect>
+          </CurrencySelect>
         </InputRow>
-        {redesignFlagEnabled && !currency && !isAddLiquidityPage && (
-          <NoBalanceState>
-            <FiatRow redesignFlag={redesignFlagEnabled}>
-              <RowBetween>
-                <NoBalanceDash>-</NoBalanceDash>
-                <NoBalanceDash>-</NoBalanceDash>
-              </RowBetween>
-            </FiatRow>
-          </NoBalanceState>
-        )}
         {!hideInput && !hideBalance && currency && (
           <FiatRow redesignFlag={redesignFlagEnabled}>
             <RowBetween>
@@ -373,8 +347,8 @@ export default function SwapCurrencyInputPanel({
               {account ? (
                 <RowFixed style={{ height: '17px' }}>
                   <ThemedText.DeprecatedBody
-                    color={theme.deprecated_text3}
-                    fontWeight={500}
+                    color={redesignFlag ? theme.textSecondary : theme.deprecated_text3}
+                    fontWeight={redesignFlag ? 400 : 500}
                     fontSize={14}
                     style={{ display: 'inline' }}
                   >

src/components/HoverInlineText/index.tsx

@@ -10,7 +10,6 @@ const TextWrapper = styled.span<{
   textColor?: string
 }>`
   margin-left: ${({ margin }) => margin && '4px'};
-  color: ${({ theme, link, textColor }) => (link ? theme.deprecated_blue1 : textColor ?? theme.deprecated_text1)};
   font-size: ${({ fontSize }) => fontSize ?? 'inherit'};
 
   @media screen and (max-width: 600px) {

src/components/swap/styleds.tsx

@@ -10,7 +10,7 @@ import { AutoColumn } from '../Column'
 
 export const PageWrapper = styled.div<{ redesignFlag: boolean; navBarFlag: boolean }>`
   padding: ${({ navBarFlag }) => (navBarFlag ? '68px 8px 0px' : '0px 8px')};
-  max-width: ${({ redesignFlag }) => (redesignFlag ? '420px' : '480px')};
+  max-width: 480px;
   width: 100%;
 
   @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) {
@@ -42,13 +42,13 @@ export const ArrowWrapper = styled.div<{ clickable: boolean; redesignFlag: boole
   height: ${({ redesignFlag }) => (redesignFlag ? '40px' : '32px')};
   width: ${({ redesignFlag }) => (redesignFlag ? '40px' : '32px')};
   position: relative;
-  margin-top: -14px;
+  margin-top: ${({ redesignFlag }) => (redesignFlag ? '-18px' : '-14px')};
   margin-bottom: ${({ redesignFlag }) => (redesignFlag ? '-18px' : '-14px')};
   left: calc(50% - 16px);
   /* transform: rotate(90deg); */
-  background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundSurface : theme.deprecated_bg1)};
+  background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundInteractive : theme.deprecated_bg1)};
   border: 4px solid;
-  border-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundModule : theme.deprecated_bg0)};
+  border-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundSurface : theme.deprecated_bg0)};
 
   z-index: 2;
   ${({ clickable }) =>

src/pages/Swap/index.tsx

@@ -83,26 +83,21 @@ const ArrowUpWrapper = styled.div`
   margin-left: 56%;
   margin-top: -18%;
 `
-const BottomWrapper = styled.div<{ redesignFlag: boolean }>`
+
+const InputWrapper = styled.div<{ redesignFlag: boolean }>`
+  visibility: ${({ redesignFlag }) => !redesignFlag && 'none'};
   ${({ redesignFlag }) =>
     redesignFlag &&
     css`
       background-color: ${({ theme }) => theme.backgroundModule};
       border-radius: 12px;
-      padding: 8px 12px 10px;
+      padding: 16px;
       color: ${({ theme }) => theme.textSecondary};
       font-size: 14px;
       line-height: 20px;
       font-weight: 500;
     `}
 `
-const TopInputWrapper = styled.div<{ redesignFlag: boolean }>`
-  padding: ${({ redesignFlag }) => redesignFlag && '0px 12px'};
-  visibility: ${({ redesignFlag }) => !redesignFlag && 'none'};
-`
-const BottomInputWrapper = styled.div<{ redesignFlag: boolean }>`
-  padding: ${({ redesignFlag }) => redesignFlag && '8px 0px'};
-`
 
 export function getIsValidSwapQuote(
   trade: InterfaceTrade<Currency, Currency, TradeType> | undefined,
@@ -541,7 +536,7 @@ export default function Swap() {
 
             <AutoColumn gap={'0px'}>
               <div style={{ display: 'relative' }}>
-                <TopInputWrapper redesignFlag={redesignFlagEnabled}>
+                <InputWrapper redesignFlag={redesignFlagEnabled}>
                   <Trace section={SectionName.CURRENCY_INPUT_PANEL}>
                     <SwapCurrencyInputPanel
                       label={
@@ -564,7 +559,7 @@ export default function Swap() {
                       loading={independentField === Field.OUTPUT && routeIsSyncing}
                     />
                   </Trace>
-                </TopInputWrapper>
+                </InputWrapper>
                 <ArrowWrapper clickable={isSupportedChain(chainId)} redesignFlag={redesignFlagEnabled}>
                   <TraceEvent
                     events={[Event.onClick]}
@@ -603,10 +598,9 @@ export default function Swap() {
                   </TraceEvent>
                 </ArrowWrapper>
               </div>
-              <BottomWrapper redesignFlag={redesignFlagEnabled}>
-                {redesignFlagEnabled && 'For'}
-                <AutoColumn gap={redesignFlagEnabled ? '0px' : '8px'}>
-                  <BottomInputWrapper redesignFlag={redesignFlagEnabled}>
+              <div>
+                <AutoColumn gap={redesignFlagEnabled ? '12px' : '8px'}>
+                  <InputWrapper redesignFlag={redesignFlagEnabled}>
                     <Trace section={SectionName.CURRENCY_OUTPUT_PANEL}>
                       <SwapCurrencyInputPanel
                         value={formattedAmounts[Field.OUTPUT]}
@@ -655,7 +649,7 @@ export default function Swap() {
                       />
                     )}
                     {showPriceImpactWarning && <PriceImpactWarning priceImpact={largerPriceImpact} />}
-                  </BottomInputWrapper>
+                  </InputWrapper>
                   <div>
                     {swapIsUnsupported ? (
                       <ButtonPrimary disabled={true}>
@@ -810,7 +804,7 @@ export default function Swap() {
                     {isExpertMode && swapErrorMessage ? <SwapCallbackError error={swapErrorMessage} /> : null}
                   </div>
                 </AutoColumn>
-              </BottomWrapper>
+              </div>
             </AutoColumn>
           </SwapWrapper>
           <NetworkAlert />