fix: ui fixes on the add liquidity flow (#7352)

src/components/CurrencyInputPanel/index.tsx

@@ -161,6 +161,10 @@ const StyledNumericalInput = styled(NumericalInput)<{ $loading: boolean }>`
   text-align: left;
 `
 
+const StyledPrefetchBalancesWrapper = styled(PrefetchBalancesWrapper)<{ $fullWidth: boolean }>`
+  width: ${({ $fullWidth }) => ($fullWidth ? '100%' : 'auto')};
+`
+
 interface CurrencyInputPanelProps {
   value: string
   onUserInput: (value: string) => void
@@ -231,7 +235,7 @@ export default function CurrencyInputPanel({
                 />
               )}
 
-              <PrefetchBalancesWrapper shouldFetchOnAccountUpdate={modalOpen}>
+              <StyledPrefetchBalancesWrapper shouldFetchOnAccountUpdate={modalOpen} $fullWidth={hideInput}>
                 <CurrencySelect
                   disabled={!chainAllowed}
                   visible={currency !== undefined}
@@ -274,7 +278,7 @@ export default function CurrencyInputPanel({
                     {onCurrencySelect && <StyledDropDown selected={!!currency} />}
                   </Aligner>
                 </CurrencySelect>
-              </PrefetchBalancesWrapper>
+              </StyledPrefetchBalancesWrapper>
             </InputRow>
             {Boolean(!hideInput && !hideBalance && currency) && (
               <FiatRow>

src/components/NavigationTabs/index.tsx

@@ -21,6 +21,8 @@ const Tabs = styled.div`
 
 const StyledLink = styled(Link)<{ flex?: string }>`
   flex: ${({ flex }) => flex ?? 'none'};
+  display: flex;
+  align-items: center;
 
   ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
     flex: none;
@@ -82,7 +84,7 @@ export function AddRemoveTabs({
 
   return (
     <Tabs>
-      <RowBetween style={{ padding: '1rem 1rem 0 1rem' }}>
+      <RowBetween style={{ padding: '1rem 1rem 0 1rem' }} align="center">
         <StyledLink
           to={poolLink}
           onClick={() => {

src/components/PrefetchBalancesWrapper/PrefetchBalancesWrapper.tsx

@@ -30,7 +30,8 @@ const hasUnfetchedBalancesAtom = atom<boolean>(true)
 export default function PrefetchBalancesWrapper({
   children,
   shouldFetchOnAccountUpdate,
-}: PropsWithChildren<{ shouldFetchOnAccountUpdate: boolean }>) {
+  className,
+}: PropsWithChildren<{ shouldFetchOnAccountUpdate: boolean; className?: string }>) {
   const { account } = useWeb3React()
   const [prefetchPortfolioBalances] = usePortfolioBalancesLazyQuery()
 
@@ -64,5 +65,9 @@ export default function PrefetchBalancesWrapper({
     if (hasUnfetchedBalances) fetchBalances()
   }, [fetchBalances, hasUnfetchedBalances])
 
-  return <div onMouseEnter={onHover}>{children}</div>
+  return (
+    <div onMouseEnter={onHover} className={className}>
+      {children}
+    </div>
+  )
 }

src/pages/AddLiquidity/index.tsx

@@ -65,15 +65,7 @@ import { currencyId } from '../../utils/currencyId'
 import { maxAmountSpend } from '../../utils/maxAmountSpend'
 import { Dots } from '../Pool/styled'
 import { Review } from './Review'
-import {
-  CurrencyDropdown,
-  DynamicSection,
-  MediumOnly,
-  ResponsiveTwoColumns,
-  ScrollablePage,
-  StyledInput,
-  Wrapper,
-} from './styled'
+import { DynamicSection, MediumOnly, ResponsiveTwoColumns, ScrollablePage, StyledInput, Wrapper } from './styled'
 
 const DEFAULT_ADD_IN_RANGE_SLIPPAGE_TOLERANCE = new Percent(50, 10_000)
 
@@ -631,11 +623,11 @@ function AddLiquidity() {
                           <Trans>Select Pair</Trans>
                         </ThemedText.DeprecatedLabel>
                       </RowBetween>
-                      <RowBetween>
-                        <CurrencyDropdown
+                      <RowBetween gap="md">
+                        <CurrencyInputPanel
                           value={formattedAmounts[Field.CURRENCY_A]}
                           onUserInput={onFieldAInput}
-                          hideInput={true}
+                          hideInput
                           onMax={() => {
                             onFieldAInput(maxAmounts[Field.CURRENCY_A]?.toExact() ?? '')
                           }}
@@ -646,11 +638,9 @@ function AddLiquidity() {
                           showCommonBases
                         />
 
-                        <div style={{ width: '12px' }} />
-
-                        <CurrencyDropdown
+                        <CurrencyInputPanel
                           value={formattedAmounts[Field.CURRENCY_B]}
-                          hideInput={true}
+                          hideInput
                           onUserInput={onFieldBInput}
                           onCurrencySelect={handleCurrencyBSelect}
                           onMax={() => {

src/pages/AddLiquidity/styled.tsx

 import { AutoColumn } from 'components/Column'
-import CurrencyInputPanel from 'components/CurrencyInputPanel'
 import { Input } from 'components/NumericalInput'
 import styled from 'styled-components'
 
@@ -32,10 +31,6 @@ export const DynamicSection = styled(AutoColumn)<{ disabled?: boolean }>`
   pointer-events: ${({ disabled }) => (disabled ? 'none' : 'initial')};
 `
 
-export const CurrencyDropdown = styled(CurrencyInputPanel)`
-  width: 48.5%;
-`
-
 export const StyledInput = styled(Input)`
   background-color: ${({ theme }) => theme.surface1};
   text-align: left;