fix: swap hover states (#4771)

* Swap component tweaks

* Fix spacing issues and update swap arrows icon

* px

* fix ternaries

* 20px

* create a separate OutputWrapper

* variable

* update border radius case

* fix type

* use right variable

* move the containers around

* rename to swap section

* swapdetailssection

* remove unnecessary autocolumn

* border radius

* remove unnecessary wrapping div

* wrap the output swap stuff

* inherit border-radius

* update overlay styles

* remove floating bg

* fix ungated version

* fix background colors

* trying this out

* separate blocks

* accent action on the buttons

* undo

* show unselected state properly

* show on expert mode

* 0 not none

* handle margintop

* flag font size

* undo reverse icon change

* fix build
Co-authored-by: Callil Capuozzo <callil.capuozzo@gmail.com>

src/assets/svg/swap-arrows.svg

+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.80333 4.8863C7.51044 5.17919 7.51044 5.65406 7.80333 5.94696C8.09622 6.23985 8.5711 6.23985 8.86399 5.94696L7.80333 4.8863ZM12.0837 1.66663L12.614 1.1363C12.3211 0.843403 11.8462 0.843403 11.5533 1.1363L12.0837 1.66663ZM15.3033 5.94696C15.5962 6.23985 16.0711 6.23985 16.364 5.94696C16.6569 5.65406 16.6569 5.17919 16.364 4.8863L15.3033 5.94696ZM11.3337 9.99996C11.3337 10.4142 11.6694 10.75 12.0837 10.75C12.4979 10.75 12.8337 10.4142 12.8337 9.99996H11.3337ZM12.1973 15.1136C12.4902 14.8207 12.4902 14.3459 12.1973 14.053C11.9044 13.7601 11.4296 13.7601 11.1367 14.053L12.1973 15.1136ZM7.91699 18.3333L7.38666 18.8636C7.52731 19.0043 7.71808 19.0833 7.91699 19.0833C8.1159 19.0833 8.30667 19.0043 8.44732 18.8636L7.91699 18.3333ZM4.69732 14.053C4.40443 13.7601 3.92956 13.7601 3.63666 14.053C3.34377 14.3459 3.34377 14.8207 3.63666 15.1136L4.69732 14.053ZM8.66699 10.8333C8.66699 10.4191 8.33121 10.0833 7.91699 10.0833C7.50278 10.0833 7.16699 10.4191 7.16699 10.8333H8.66699ZM8.86399 5.94696L12.614 2.19696L11.5533 1.1363L7.80333 4.8863L8.86399 5.94696ZM11.5533 2.19696L15.3033 5.94696L16.364 4.8863L12.614 1.1363L11.5533 2.19696ZM11.3337 1.66663V9.99996H12.8337V1.66663H11.3337ZM11.1367 14.053L7.38666 17.803L8.44732 18.8636L12.1973 15.1136L11.1367 14.053ZM8.44732 17.803L4.69732 14.053L3.63666 15.1136L7.38666 18.8636L8.44732 17.803ZM8.66699 18.3333L8.66699 10.8333H7.16699L7.16699 18.3333H8.66699Z" fill="currentColor"/>
+</svg>

src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx

@@ -11,7 +11,7 @@ import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import { darken } from 'polished'
 import { ReactNode, useCallback, useState } from 'react'
 import { Lock } from 'react-feather'
-import styled, { useTheme } from 'styled-components/macro'
+import styled, { css, useTheme } from 'styled-components/macro'
 import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
 
 import { ReactComponent as DropDown } from '../../assets/images/dropdown.svg'
@@ -50,7 +50,7 @@ const FixedContainer = styled.div<{ redesignFlag: boolean }>`
 `
 
 const Container = styled.div<{ hideInput: boolean; disabled: boolean; redesignFlag: boolean }>`
-  min-height: ${({ redesignFlag }) => redesignFlag && '69px'};
+  min-height: ${({ redesignFlag }) => redesignFlag && '44px'};
   border-radius: ${({ hideInput }) => (hideInput ? '16px' : '20px')};
   border: 1px solid ${({ theme, redesignFlag }) => (redesignFlag ? 'transparent' : theme.deprecated_bg0)};
   background-color: ${({ theme, redesignFlag }) => (redesignFlag ? 'transparent' : theme.deprecated_bg1)};
@@ -77,7 +77,7 @@ const CurrencySelect = styled(ButtonGray)<{
   background-color: ${({ selected, theme, redesignFlag }) =>
     redesignFlag
       ? selected
-        ? theme.stateOverlayPressed
+        ? theme.backgroundInteractive
         : theme.accentAction
       : selected
       ? theme.deprecated_bg2
@@ -100,24 +100,48 @@ const CurrencySelect = styled(ButtonGray)<{
   justify-content: space-between;
   margin-left: ${({ hideInput }) => (hideInput ? '0' : '12px')};
 
+  ${({ redesignFlag, selected }) =>
+    !redesignFlag &&
+    css`
       &:hover {
-    background-color: ${({ selected, theme, redesignFlag }) =>
-      redesignFlag
-        ? theme.stateOverlayHover
-        : selected
-        ? darken(0.05, theme.deprecated_primary1)
-        : theme.deprecated_bg3};
+        background-color: ${({ theme }) => (selected ? darken(0.05, theme.deprecated_primary1) : theme.deprecated_bg3)};
       }
 
       &:active {
-    background-color: ${({ selected, theme, redesignFlag }) =>
-      redesignFlag
-        ? theme.stateOverlayPressed
-        : selected
-        ? darken(0.05, theme.deprecated_primary1)
-        : theme.deprecated_bg3};
+        background-color: ${({ theme }) => (selected ? darken(0.05, theme.deprecated_primary1) : theme.deprecated_bg3)};
+      }
+    `}
+
+  ${({ redesignFlag, selected }) =>
+    redesignFlag &&
+    css`
+      &:hover,
+      &:active {
+        background-color: ${({ theme }) => (selected ? theme.backgroundInteractive : theme.accentAction)};
       }
 
+      &:before {
+        background-size: 100%;
+        border-radius: inherit;
+
+        position: absolute;
+        top: 0;
+        left: 0;
+
+        width: 100%;
+        height: 100%;
+        content: '';
+      }
+
+      &:hover:before {
+        background-color: ${({ theme }) => theme.stateOverlayHover};
+      }
+
+      &:active:before {
+        background-color: ${({ theme }) => theme.stateOverlayPressed};
+      }
+    `}
+
   visibility: ${({ visible }) => (visible ? 'visible' : 'hidden')};
 `
 
@@ -135,7 +159,7 @@ const LabelRow = styled.div<{ redesignFlag: boolean }>`
   color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.textSecondary : theme.deprecated_text1)};
   font-size: 0.75rem;
   line-height: 1rem;
-  padding: 0 1rem 1rem;
+  padding: ${({ redesignFlag }) => (redesignFlag ? '0px' : '0 1rem 1rem')};
 
   span:hover {
     cursor: pointer;
@@ -145,8 +169,8 @@ const LabelRow = styled.div<{ redesignFlag: boolean }>`
 
 const FiatRow = styled(LabelRow)<{ redesignFlag: boolean }>`
   justify-content: flex-end;
-  min-height: ${({ redesignFlag }) => redesignFlag && '32px'};
-  padding: ${({ redesignFlag }) => redesignFlag && '8px 0px'};
+  min-height: ${({ redesignFlag }) => redesignFlag && '20px'};
+  padding: ${({ redesignFlag }) => redesignFlag && '8px 0px 0px 0px'};
   height: ${({ redesignFlag }) => !redesignFlag && '24px'};
 `
 
@@ -170,7 +194,7 @@ const StyledDropDown = styled(DropDown)<{ selected: boolean; redesignFlag: boole
 
 const StyledTokenName = styled.span<{ active?: boolean; redesignFlag: boolean }>`
   ${({ active }) => (active ? '  margin: 0 0.25rem 0 0.25rem;' : '  margin: 0 0.25rem 0 0.25rem;')}
-  font-size:  ${({ active }) => (active ? '18px' : '18px')};
+  font-size: ${({ redesignFlag }) => (redesignFlag ? '20px' : '18px')};
   font-weight: ${({ redesignFlag }) => (redesignFlag ? '600' : '500')};
 `
 

src/components/CurrencyInputPanel/index.tsx

@@ -140,7 +140,7 @@ const StyledDropDown = styled(DropDown)<{ selected: boolean }>`
 
 const StyledTokenName = styled.span<{ active?: boolean }>`
   ${({ active }) => (active ? '  margin: 0 0.25rem 0 0.25rem;' : '  margin: 0 0.25rem 0 0.25rem;')}
-  font-size:  ${({ active }) => (active ? '18px' : '18px')};
+  font-size: 20px;
 `
 
 const StyledBalanceMax = styled.button<{ disabled?: boolean }>`

src/components/swap/SwapDetailsDropdown.tsx

@@ -23,9 +23,13 @@ import { ResponsiveTooltipContainer } from './styleds'
 import SwapRoute from './SwapRoute'
 import TradePrice from './TradePrice'
 
-const Wrapper = styled(Row)`
+const Wrapper = styled(Row)<{ redesignFlag: boolean }>`
   width: 100%;
   justify-content: center;
+  border-radius: ${({ redesignFlag }) => redesignFlag && 'inherit'};
+  padding: ${({ redesignFlag }) => redesignFlag && '8px 12px'};
+  margin-top: ${({ redesignFlag }) => (redesignFlag ? '0px' : '4px')} !important;
+  min-height: ${({ redesignFlag }) => redesignFlag && '32px'};
 `
 
 const StyledInfoIcon = styled(Info)`
@@ -41,14 +45,11 @@ const StyledCard = styled(OutlineCard)<{ redesignFlag: boolean }>`
 `
 
 const StyledHeaderRow = styled(RowBetween)<{ disabled: boolean; open: boolean; redesignFlag: boolean }>`
-  padding: ${({ redesignFlag }) => (redesignFlag ? '8px 0px 0px 0px' : '4px 8px')};
+  padding: ${({ redesignFlag }) => (redesignFlag ? '0' : '4px 8px')};
   background-color: ${({ open, theme, redesignFlag }) =>
     open && !redesignFlag ? theme.deprecated_bg1 : 'transparent'};
   align-items: center;
-  border-top: 1px solid ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundOutline : 'transparent')};
-  margin-top: ${({ redesignFlag }) => redesignFlag && '8px'};
   cursor: ${({ disabled }) => (disabled ? 'initial' : 'pointer')};
-  min-height: 40px;
   border-radius: ${({ redesignFlag }) => !redesignFlag && '12px'};
 `
 
@@ -133,7 +134,7 @@ export default function SwapDetailsDropdown({
   const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
 
   return (
-    <Wrapper style={{ marginTop: '8px' }}>
+    <Wrapper style={{ marginTop: redesignFlagEnabled ? '0' : '8px' }} redesignFlag={redesignFlagEnabled}>
       <AutoColumn gap={'8px'} style={{ width: '100%', marginBottom: '-8px' }}>
         <TraceEvent
           events={[Event.onClick]}

src/components/swap/styleds.tsx

@@ -36,15 +36,14 @@ export const SwapWrapper = styled.main<{ margin?: string; maxWidth?: string; red
 `
 
 export const ArrowWrapper = styled.div<{ clickable: boolean; redesignFlag: boolean }>`
-  padding: 4px;
   border-radius: 12px;
   height: ${({ redesignFlag }) => (redesignFlag ? '40px' : '32px')};
   width: ${({ redesignFlag }) => (redesignFlag ? '40px' : '32px')};
   position: relative;
   margin-top: ${({ redesignFlag }) => (redesignFlag ? '-18px' : '-14px')};
   margin-bottom: ${({ redesignFlag }) => (redesignFlag ? '-18px' : '-14px')};
-  left: calc(50% - 16px);
-  /* transform: rotate(90deg); */
+  margin-left: auto;
+  margin-right: auto;
   background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundInteractive : theme.deprecated_bg1)};
   border: 4px solid;
   border-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundSurface : theme.deprecated_bg0)};

src/pages/Swap/index.tsx

@@ -27,7 +27,7 @@ import useTransactionDeadline from 'hooks/useTransactionDeadline'
 import JSBI from 'jsbi'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { ReactNode } from 'react'
-import { ArrowDown, ArrowUp, CheckCircle, HelpCircle } from 'react-feather'
+import { ArrowDown, CheckCircle, HelpCircle } from 'react-feather'
 import { useNavigate } from 'react-router-dom'
 import { Text } from 'rebass'
 import { useToggleWalletModal } from 'state/application/hooks'
@@ -73,19 +73,17 @@ import { supportedChainId } from '../../utils/supportedChainId'
 
 const ArrowContainer = styled.div`
   display: inline-block;
-  margin-left: 6%;
-`
-const ArrowDownWrapper = styled.div`
-  margin-top: -80%;
-  margin-left: 24%;
-`
-const ArrowUpWrapper = styled.div`
-  margin-left: 56%;
-  margin-top: -18%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+  height: 100%;
 `
 
-const InputWrapper = styled.div<{ redesignFlag: boolean }>`
-  visibility: ${({ redesignFlag }) => !redesignFlag && 'none'};
+const SwapSection = styled.div<{ redesignFlag: boolean }>`
+  position: relative;
+
   ${({ redesignFlag }) =>
     redesignFlag &&
     css`
@@ -96,9 +94,44 @@ const InputWrapper = styled.div<{ redesignFlag: boolean }>`
       font-size: 14px;
       line-height: 20px;
       font-weight: 500;
+
+      &:before {
+        box-sizing: border-box;
+        background-size: 100%;
+        border-radius: inherit;
+
+        position: absolute;
+        top: 0;
+        left: 0;
+
+        width: 100%;
+        height: 100%;
+        content: '';
+        border: 1px solid ${({ theme }) => theme.backgroundModule};
+      }
+
+      &:hover:before {
+        border-color: ${({ theme }) => theme.stateOverlayHover};
+      }
+
+      &:focus-within:before {
+        border-color: ${({ theme }) => theme.stateOverlayPressed};
+      }
     `}
 `
 
+const OutputSwapSection = styled(SwapSection)<{ showDetailsDropdown: boolean }>`
+  border-bottom: ${({ theme, redesignFlag }) => redesignFlag && `1px solid ${theme.backgroundSurface}`};
+  border-bottom-left-radius: ${({ redesignFlag, showDetailsDropdown }) => redesignFlag && showDetailsDropdown && '0'};
+  border-bottom-right-radius: ${({ redesignFlag, showDetailsDropdown }) => redesignFlag && showDetailsDropdown && '0'};
+`
+
+const DetailsSwapSection = styled(SwapSection)`
+  padding: 0;
+  border-top-left-radius: ${({ redesignFlag }) => redesignFlag && '0'};
+  border-top-right-radius: ${({ redesignFlag }) => redesignFlag && '0'};
+`
+
 export function getIsValidSwapQuote(
   trade: InterfaceTrade<Currency, Currency, TradeType> | undefined,
   tradeState: TradeState,
@@ -500,6 +533,10 @@ export default function Swap() {
   const approveTokenButtonDisabled =
     approvalState !== ApprovalState.NOT_APPROVED || approvalSubmitted || signatureState === UseERC20PermitState.SIGNED
 
+  const showDetailsDropdown = Boolean(
+    !showWrap && userHasSpecifiedInputOutput && (trade || routeIsLoading || routeIsSyncing)
+  )
+
   return (
     <Trace page={PageName.SWAP_PAGE} shouldLogImpression>
       <>
@@ -540,9 +577,8 @@ export default function Swap() {
               fiatValueOutput={fiatValueOutput}
             />
 
-            <AutoColumn gap={'0px'}>
             <div style={{ display: 'relative' }}>
-                <InputWrapper redesignFlag={redesignFlagEnabled}>
+              <SwapSection redesignFlag={redesignFlagEnabled}>
                 <Trace section={SectionName.CURRENCY_INPUT_PANEL}>
                   <SwapCurrencyInputPanel
                     label={
@@ -565,14 +601,13 @@ export default function Swap() {
                     loading={independentField === Field.OUTPUT && routeIsSyncing}
                   />
                 </Trace>
-                </InputWrapper>
+              </SwapSection>
               <ArrowWrapper clickable={isSupportedChain(chainId)} redesignFlag={redesignFlagEnabled}>
                 <TraceEvent
                   events={[Event.onClick]}
                   name={EventName.SWAP_TOKENS_REVERSED}
                   element={ElementName.SWAP_TOKENS_REVERSE_ARROW_BUTTON}
                 >
-                    {redesignFlagEnabled ? (
                   <ArrowContainer
                     onClick={() => {
                       setApprovalSubmitted(false) // reset 2 step UI for approvals
@@ -580,43 +615,27 @@ export default function Swap() {
                     }}
                     color={theme.textPrimary}
                   >
-                        <ArrowUpWrapper>
-                          <ArrowUp size="12" stroke-width="3" />
-                        </ArrowUpWrapper>
-                        <ArrowDownWrapper>
-                          <ArrowDown size="12" stroke-width="3" />
-                        </ArrowDownWrapper>
-                      </ArrowContainer>
-                    ) : (
                     <ArrowDown
                       size="16"
-                        onClick={() => {
-                          setApprovalSubmitted(false) // reset 2 step UI for approvals
-                          onSwitchTokens()
-                        }}
                       color={
                         currencies[Field.INPUT] && currencies[Field.OUTPUT]
                           ? theme.deprecated_text1
                           : theme.deprecated_text3
                       }
                     />
-                    )}
+                  </ArrowContainer>
                 </TraceEvent>
               </ArrowWrapper>
             </div>
-              <div>
             <AutoColumn gap={redesignFlagEnabled ? '12px' : '8px'}>
-                  <InputWrapper redesignFlag={redesignFlagEnabled}>
+              <div>
+                <OutputSwapSection redesignFlag={redesignFlagEnabled} showDetailsDropdown={showDetailsDropdown}>
                   <Trace section={SectionName.CURRENCY_OUTPUT_PANEL}>
                     <SwapCurrencyInputPanel
                       value={formattedAmounts[Field.OUTPUT]}
                       onUserInput={handleTypeOutput}
                       label={
-                          independentField === Field.INPUT && !showWrap ? (
-                            <Trans>To (at least)</Trans>
-                          ) : (
-                            <Trans>To</Trans>
-                          )
+                        independentField === Field.INPUT && !showWrap ? <Trans>To (at least)</Trans> : <Trans>To</Trans>
                       }
                       showMaxButton={false}
                       hideBalance={false}
@@ -644,7 +663,9 @@ export default function Swap() {
                       <AddressInputPanel id="recipient" value={recipient} onChange={onChangeRecipient} />
                     </>
                   ) : null}
-                    {!showWrap && userHasSpecifiedInputOutput && (trade || routeIsLoading || routeIsSyncing) && (
+                </OutputSwapSection>
+                {showDetailsDropdown && (
+                  <DetailsSwapSection redesignFlag={redesignFlagEnabled}>
                     <SwapDetailsDropdown
                       trade={trade}
                       syncing={routeIsSyncing}
@@ -653,9 +674,10 @@ export default function Swap() {
                       setShowInverted={setShowInverted}
                       allowedSlippage={allowedSlippage}
                     />
+                  </DetailsSwapSection>
                 )}
+              </div>
               {showPriceImpactWarning && <PriceImpactWarning priceImpact={largerPriceImpact} />}
-                  </InputWrapper>
               <div>
                 {swapIsUnsupported ? (
                   <ButtonPrimary disabled={true}>
@@ -709,9 +731,7 @@ export default function Swap() {
                             signatureState === UseERC20PermitState.SIGNED ? (
                               <Trans>You can now trade {currencies[Field.INPUT]?.symbol}</Trans>
                             ) : (
-                                  <Trans>
-                                    Allow the Uniswap Protocol to use your {currencies[Field.INPUT]?.symbol}
-                                  </Trans>
+                              <Trans>Allow the Uniswap Protocol to use your {currencies[Field.INPUT]?.symbol}</Trans>
                             )}
                           </span>
                           {approvalPending || approvalState === ApprovalState.PENDING ? (
@@ -753,8 +773,7 @@ export default function Swap() {
                           !isValid ||
                           routeIsSyncing ||
                           routeIsLoading ||
-                              (approvalState !== ApprovalState.APPROVED &&
-                                signatureState !== UseERC20PermitState.SIGNED) ||
+                          (approvalState !== ApprovalState.APPROVED && signatureState !== UseERC20PermitState.SIGNED) ||
                           priceImpactTooHigh
                         }
                         error={isValid && priceImpactSeverity > 2}
@@ -787,9 +806,7 @@ export default function Swap() {
                       }
                     }}
                     id="swap-button"
-                        disabled={
-                          !isValid || routeIsSyncing || routeIsLoading || priceImpactTooHigh || !!swapCallbackError
-                        }
+                    disabled={!isValid || routeIsSyncing || routeIsLoading || priceImpactTooHigh || !!swapCallbackError}
                     error={isValid && priceImpactSeverity > 2 && !swapCallbackError}
                   >
                     <Text fontSize={20} fontWeight={500}>
@@ -810,8 +827,6 @@ export default function Swap() {
                 {isExpertMode && swapErrorMessage ? <SwapCallbackError error={swapErrorMessage} /> : null}
               </div>
             </AutoColumn>
-              </div>
-            </AutoColumn>
           </SwapWrapper>
           <NetworkAlert />
         </PageWrapper>

src/theme/index.tsx

@@ -77,6 +77,7 @@ function uniswapThemeColors(darkMode: boolean): ThemeColors {
     backgroundBackdrop: darkMode ? colorsDark.backgroundBackdrop : colorsLight.backgroundBackdrop,
     backgroundSurface: darkMode ? colorsDark.backgroundSurface : colorsLight.backgroundSurface,
     backgroundModule: darkMode ? colorsDark.backgroundModule : colorsLight.backgroundModule,
+    backgroundFloating: darkMode ? colorsDark.backgroundFloating : colorsLight.backgroundFloating,
     backgroundInteractive: darkMode ? colorsDark.backgroundInteractive : colorsLight.backgroundInteractive,
     backgroundOutline: darkMode ? colorsDark.backgroundOutline : colorsLight.backgroundOutline,
     backgroundScrim: darkMode ? colorsDark.backgroundScrim : colorsLight.backgroundScrim,

src/theme/styled.d.ts

@@ -9,6 +9,7 @@ export interface ThemeColors {
   backgroundBackdrop: Color
   backgroundSurface: Color
   backgroundModule: Color
+  backgroundFloating: Color
   backgroundInteractive: Color
   backgroundOutline: Color
   backgroundScrim: Color