fix(style): improve the bridge assets style (#3036)

* Re-style bridge cards

* Tweaks

- Header button height and color treatment refinement
- Small sizing issues

* Address comments

* remove network alert state

* code style nits

* remove unused parameter, rename

* copy edit
Co-authored-by: Moody Salem <moody.salem@gmail.com>

src/components/Button/index.tsx

@@ -23,7 +23,7 @@ export const BaseButton = styled(RebassButton)<
   border-radius: ${({ $borderRadius }) => $borderRadius ?? '20px'};
   outline: none;
   border: 1px solid transparent;
-  color: white;
+  color: ${({ theme }) => theme.text1};
   text-decoration: none;
   display: flex;
   justify-content: center;

src/components/Header/NetworkSelector.tsx

@@ -108,7 +108,7 @@ const SelectorControls = styled.div<{ interactive: boolean }>`
   align-items: center;
   background-color: ${({ theme }) => theme.bg0};
   border: 2px solid ${({ theme }) => theme.bg0};
-  border-radius: 12px;
+  border-radius: 16px;
   color: ${({ theme }) => theme.text1};
   cursor: ${({ interactive }) => (interactive ? 'pointer' : 'auto')};
   display: flex;
@@ -128,7 +128,7 @@ const SelectorWrapper = styled.div`
   }
 `
 const StyledChevronDown = styled(ChevronDown)`
-  width: 12px;
+  width: 16px;
 `
 const BridgeLabel = ({ chainId }: { chainId: SupportedChainId }) => {
   switch (chainId) {
@@ -247,7 +247,7 @@ export default function NetworkSelector() {
         <StyledChevronDown />
       </SelectorControls>
       {open && (
-        <FlyoutMenu>
+        <FlyoutMenu onMouseLeave={toggle}>
           <FlyoutHeader>
             <Trans>Select a network</Trans>
           </FlyoutHeader>

src/components/Header/index.tsx

@@ -89,7 +89,7 @@ const HeaderLinks = styled(Row)`
   justify-self: center;
   background-color: ${({ theme }) => theme.bg0};
   width: fit-content;
-  padding: 4px;
+  padding: 2px;
   border-radius: 16px;
   display: grid;
   grid-auto-flow: column;
@@ -121,10 +121,11 @@ const AccountElement = styled.div<{ active: boolean }>`
   display: flex;
   flex-direction: row;
   align-items: center;
-  background-color: ${({ theme, active }) => (!active ? theme.bg1 : theme.bg1)};
-  border-radius: 12px;
+  background-color: ${({ theme, active }) => (!active ? theme.bg0 : theme.bg0)};
+  border-radius: 16px;
   white-space: nowrap;
   width: 100%;
+  height: 40px;
 
   :focus {
     border: 1px solid blue;
@@ -202,11 +203,11 @@ const StyledNavLink = styled(NavLink).attrs({
   overflow: hidden;
   white-space: nowrap;
   &.${activeClassName} {
-    border-radius: 12px;
+    border-radius: 14px;
     font-weight: 600;
     justify-content: center;
     color: ${({ theme }) => theme.text1};
-    background-color: ${({ theme }) => theme.bg2};
+    background-color: ${({ theme }) => theme.bg1};
   }
 
   :hover,
@@ -231,7 +232,7 @@ const StyledExternalLink = styled(ExternalLink).attrs({
   font-weight: 500;
 
   &.${activeClassName} {
-    border-radius: 12px;
+    border-radius: 14px;
     font-weight: 600;
     color: ${({ theme }) => theme.text1};
   }

src/components/Menu/index.tsx

@@ -49,12 +49,11 @@ const StyledMenuButton = styled.button`
   background-color: transparent;
   margin: 0;
   padding: 0;
-  height: 38px;
+  height: 40px;
   background-color: ${({ theme }) => theme.bg0};
   border: 1px solid ${({ theme }) => theme.bg0};
-
   padding: 0.15rem 0.5rem;
-  border-radius: 12px;
+  border-radius: 16px;
 
   :hover,
   :focus {

src/components/PositionList/index.tsx

 import { Trans } from '@lingui/macro'
+import { ButtonText } from 'components/Button'
 import PositionListItem from 'components/PositionListItem'
 import React from 'react'
 import styled from 'styled-components/macro'
@@ -14,9 +15,7 @@ const DesktopHeader = styled.div`
   @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
     align-items: center;
     display: flex;
-
-    display: grid;
-    grid-template-columns: 1fr 1fr;
+    justify-content: space-between;
     & > div:last-child {
       text-align: right;
       margin-right: 12px;
@@ -36,9 +35,15 @@ const MobileHeader = styled.div`
 
 type PositionListProps = React.PropsWithChildren<{
   positions: PositionDetails[]
+  setUserHideClosedPositions: any
+  userHideClosedPositions: boolean
 }>
 
-export default function PositionList({ positions }: PositionListProps) {
+export default function PositionList({
+  positions,
+  setUserHideClosedPositions,
+  userHideClosedPositions,
+}: PositionListProps) {
   return (
     <>
       <DesktopHeader>
@@ -46,9 +51,9 @@ export default function PositionList({ positions }: PositionListProps) {
           <Trans>Your positions</Trans>
           {positions && ' (' + positions.length + ')'}
         </div>
-        <div>
-          <Trans>Status</Trans>
-        </div>
+        <ButtonText style={{ opacity: 0.6 }} onClick={() => setUserHideClosedPositions(!userHideClosedPositions)}>
+          <Trans>Hide closed positions</Trans>
+        </ButtonText>
       </DesktopHeader>
       <MobileHeader>
         <Trans>Your positions</Trans>

src/components/SearchModal/CommonBases.tsx

-import { Trans } from '@lingui/macro'
 import { Currency } from '@uniswap/sdk-core'
 import { AutoColumn } from 'components/Column'
 import CurrencyLogo from 'components/CurrencyLogo'
-import QuestionHelper from 'components/QuestionHelper'
 import { AutoRow } from 'components/Row'
 import { COMMON_BASES } from 'constants/routing'
 import { useTokenInfoFromActiveList } from 'hooks/useTokenInfoFromActiveList'
@@ -46,12 +44,6 @@ export default function CommonBases({
 
   return bases.length > 0 ? (
     <MobileWrapper gap="md">
-      <AutoRow>
-        <Text fontWeight={500} fontSize={14}>
-          <Trans>Common bases</Trans>
-        </Text>
-        <QuestionHelper text={<Trans>These tokens are commonly paired with other tokens.</Trans>} />
-      </AutoRow>
       <AutoRow gap="4px">
         {bases.map((currency: Currency) => {
           const isSelected = selectedCurrency?.equals(currency)

src/components/Web3Status/index.tsx

@@ -35,9 +35,12 @@ const Web3StatusGeneric = styled(ButtonSecondary)`
   width: 100%;
   align-items: center;
   padding: 0.5rem;
-  border-radius: 12px;
+  border-radius: 14px;
   cursor: pointer;
   user-select: none;
+  height: 36px;
+  margin-right: 2px;
+  margin-left: 1px;
   :focus {
     outline: none;
   }
@@ -82,7 +85,7 @@ const Web3StatusConnect = styled(Web3StatusGeneric)<{ faded?: boolean }>`
 `
 
 const Web3StatusConnected = styled(Web3StatusGeneric)<{ pending?: boolean }>`
-  background-color: ${({ pending, theme }) => (pending ? theme.primary1 : theme.bg0)};
+  background-color: ${({ pending, theme }) => (pending ? theme.primary1 : theme.bg1)};
   border: 1px solid ${({ pending, theme }) => (pending ? theme.primary1 : theme.bg1)};
   color: ${({ pending, theme }) => (pending ? theme.white : theme.text1)};
   font-weight: 500;

src/pages/AddLiquidity/index.tsx

@@ -3,7 +3,6 @@ import { TransactionResponse } from '@ethersproject/providers'
 import { Trans } from '@lingui/macro'
 import { Currency, CurrencyAmount, Percent } from '@uniswap/sdk-core'
 import { FeeAmount, NonfungiblePositionManager } from '@uniswap/v3-sdk'
-import DowntimeWarning from 'components/DowntimeWarning'
 import UnsupportedCurrencyFooter from 'components/swap/UnsupportedCurrencyFooter'
 import { useCallback, useContext, useEffect, useState } from 'react'
 import { AlertTriangle } from 'react-feather'
@@ -475,7 +474,6 @@ export default function AddLiquidity({
   return (
     <>
       <ScrollablePage>
-        <DowntimeWarning />
         <TransactionConfirmationModal
           isOpen={showConfirm}
           onDismiss={handleDismissConfirmation}

src/pages/Pool/CTACards.tsx

@@ -5,14 +5,13 @@ import { useActiveWeb3React } from 'hooks/web3'
 import styled from 'styled-components/macro'
 import { ThemedText } from 'theme'
 
-import Texture from '../../assets/images/sandtexture.webp'
 import { ExternalLink } from '../../theme'
 
 const CTASection = styled.section`
   display: grid;
-  grid-template-columns: 2fr 1fr;
+  grid-template-columns: 2fr 1.5fr;
   gap: 8px;
-  margin-top: 8px;
+  opacity: 0.8;
 
   ${({ theme }) => theme.mediaWidth.upToSmall`
     grid-template-columns: auto;
@@ -21,22 +20,15 @@ const CTASection = styled.section`
 `
 
 const CTA1 = styled(ExternalLink)`
-  background-color: ${({ theme }) => theme.bg2};
-  background: radial-gradient(
-      92.78% 103.09% at 50.06% 7.22%,
-      rgba(255, 58, 212, 0.072) 0%,
-      rgba(255, 255, 255, 0.042) 100%
-    ),
-    radial-gradient(100% 97.16% at 0% 12.22%, rgba(235, 0, 255, 0.2) 0%, rgba(243, 19, 19, 0.2) 100%);
-  padding: 2rem;
+  padding: 16px;
   border-radius: 20px;
   display: flex;
   flex-direction: column;
   position: relative;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
   overflow: hidden;
-  border: 1px solid transparent;
+  border: 1px solid ${({ theme }) => theme.bg3};
 
   * {
     color: ${({ theme }) => theme.text1};
@@ -44,36 +36,24 @@ const CTA1 = styled(ExternalLink)`
   }
 
   :hover {
-    border: 1px solid ${({ theme }) => theme.bg0};
+    border: 1px solid ${({ theme }) => theme.bg4};
+
     text-decoration: none;
     * {
       text-decoration: none !important;
     }
   }
-
-  :before {
-    content: '';
-    position: absolute;
-    width: 800%;
-    height: 480%;
-    top: -390px;
-    left: -310px;
-    z-index: -1;
-    opacity: 0.4;
-    background: url(${Texture}) 0 0 repeat;
-    transform: rotate(-4deg);
-  }
 `
 
 const CTA2 = styled(ExternalLink)`
   position: relative;
   overflow: hidden;
-  padding: 32px;
+  padding: 16px;
   border-radius: 20px;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
-  border: 1px solid transparent;
+  justify-content: center;
+  border: 1px solid ${({ theme }) => theme.bg3};
 
   * {
     color: ${({ theme }) => theme.text1};
@@ -81,42 +61,30 @@ const CTA2 = styled(ExternalLink)`
   }
 
   :hover {
-    border: 1px solid ${({ theme }) => theme.bg0};
+    border: 1px solid ${({ theme }) => theme.bg4};
     text-decoration: none !important;
     * {
       text-decoration: none !important;
     }
   }
-
-  :before {
-    content: '';
-    position: absolute;
-    width: 340%;
-    height: 280%;
-    top: -170%;
-    left: -134%;
-    opacity: 0.4;
-    z-index: -1;
-    background: url(${Texture}) 0 0 repeat;
-    transform: rotate(-4deg);
-  }
 `
 
 const HeaderText = styled(ThemedText.Label)`
   align-items: center;
   display: flex;
-  margin-bottom: 24px;
+
   font-weight: 400;
-  font-size: 20px;
+  font-size: 16px;
   ${({ theme }) => theme.mediaWidth.upToMedium`
-    font-size: 20px;
+    font-size: 16px;
   `};
 `
 
 const ResponsiveColumn = styled(AutoColumn)`
   grid-template-columns: 1fr;
   width: 100%;
-  gap: 12px;
+  gap: 8px;
+
   ${({ theme }) => theme.mediaWidth.upToMedium`
     gap: 8px;
   `};
@@ -133,7 +101,7 @@ export default function CTACards() {
           <HeaderText>
             <Trans>Learn about providing liquidity</Trans> ↗
           </HeaderText>
-          <ThemedText.Body fontWeight={300} style={{ alignItems: 'center', display: 'flex', maxWidth: '80%' }}>
+          <ThemedText.Body fontWeight={400} style={{ alignItems: 'center', display: 'flex' }}>
             <Trans>Check out our v3 LP walkthrough and migration guides.</Trans>
           </ThemedText.Body>
         </ResponsiveColumn>
@@ -143,8 +111,8 @@ export default function CTACards() {
           <HeaderText style={{ alignSelf: 'flex-start' }}>
             <Trans>Top pools</Trans> ↗
           </HeaderText>
-          <ThemedText.Body fontWeight={300} style={{ alignSelf: 'flex-start' }}>
-            <Trans>Explore popular pools on Uniswap Analytics.</Trans>
+          <ThemedText.Body fontWeight={400} style={{ alignSelf: 'flex-start' }}>
+            <Trans>Explore Uniswap Analytics.</Trans>
           </ThemedText.Body>
         </ResponsiveColumn>
       </CTA2>

src/pages/Pool/index.tsx

 import { Trans } from '@lingui/macro'
-import { ButtonGray, ButtonOutlined, ButtonPrimary } from 'components/Button'
+import { ButtonGray, ButtonPrimary, ButtonText } from 'components/Button'
 import { AutoColumn } from 'components/Column'
-import DowntimeWarning from 'components/DowntimeWarning'
 import { FlyoutAlignment, NewMenu } from 'components/Menu'
 import { SwapPoolTabs } from 'components/NavigationTabs'
-import { SingleRowNetworkAlert } from 'components/NetworkAlert/NetworkAlert'
 import PositionList from 'components/PositionList'
 import { RowBetween, RowFixed } from 'components/Row'
 import { SwitchLocaleLink } from 'components/SwitchLocaleLink'
@@ -109,25 +107,6 @@ const MainContentWrapper = styled.main`
   flex-direction: column;
 `
 
-const ShowInactiveToggle = styled.div`
-  display: flex;
-  align-items: center;
-  justify-items: end;
-  grid-column-gap: 4px;
-  padding: 0 8px;
-  ${({ theme }) => theme.mediaWidth.upToMedium`
-    margin-bottom: 12px;
-  `};
-`
-
-const ResponsiveRow = styled(RowFixed)`
-  justify-content: space-between;
-  width: 100%;
-  ${({ theme }) => theme.mediaWidth.upToMedium`
-    flex-direction: column-reverse;
-  `};
-`
-
 function PositionsLoadingPlaceholder() {
   return (
     <LoadingRows>
@@ -242,25 +221,31 @@ export default function Pool() {
               </ButtonRow>
             </TitleRow>
 
-            <HideSmall>
-              <SingleRowNetworkAlert />
-              <DowntimeWarning />
-              <CTACards />
-            </HideSmall>
-
             <MainContentWrapper>
               {positionsLoading ? (
                 <PositionsLoadingPlaceholder />
-              ) : filteredPositions && filteredPositions.length > 0 ? (
-                <PositionList positions={filteredPositions} />
+              ) : filteredPositions && closedPositions && filteredPositions.length > 0 ? (
+                <PositionList
+                  positions={filteredPositions}
+                  setUserHideClosedPositions={setUserHideClosedPositions}
+                  userHideClosedPositions={userHideClosedPositions}
+                />
               ) : (
                 <NoLiquidity>
                   <ThemedText.Body color={theme.text3} textAlign="center">
                     <Inbox size={48} strokeWidth={1} style={{ marginBottom: '.5rem' }} />
                     <div>
-                      <Trans>Your V3 liquidity positions will appear here.</Trans>
+                      <Trans>Your active V3 liquidity positions will appear here.</Trans>
                     </div>
                   </ThemedText.Body>
+                  {!showConnectAWallet && closedPositions.length > 0 && (
+                    <ButtonText
+                      style={{ marginTop: '.5rem' }}
+                      onClick={() => setUserHideClosedPositions(!userHideClosedPositions)}
+                    >
+                      <Trans>Show closed positions</Trans>
+                    </ButtonText>
+                  )}
                   {showConnectAWallet && (
                     <ButtonPrimary style={{ marginTop: '2em', padding: '8px 16px' }} onClick={toggleWalletModal}>
                       <Trans>Connect a wallet</Trans>
@@ -269,61 +254,9 @@ export default function Pool() {
                 </NoLiquidity>
               )}
             </MainContentWrapper>
-
-            <ResponsiveRow>
-              {showV2Features && (
-                <RowFixed>
-                  <ButtonOutlined
-                    as={Link}
-                    to="/pool/v2"
-                    id="import-pool-link"
-                    style={{
-                      padding: '8px 16px',
-                      margin: '0 4px',
-                      borderRadius: '12px',
-                      width: 'fit-content',
-                      fontSize: '14px',
-                    }}
-                  >
-                    <Layers size={14} style={{ marginRight: '8px' }} />
-
-                    <Trans>View V2 Liquidity</Trans>
-                  </ButtonOutlined>
-                  {positions && positions.length > 0 && (
-                    <ButtonOutlined
-                      as={Link}
-                      to="/migrate/v2"
-                      id="import-pool-link"
-                      style={{
-                        padding: '8px 16px',
-                        margin: '0 4px',
-                        borderRadius: '12px',
-                        width: 'fit-content',
-                        fontSize: '14px',
-                      }}
-                    >
-                      <ChevronsRight size={16} style={{ marginRight: '8px' }} />
-
-                      <Trans>Migrate Liquidity</Trans>
-                    </ButtonOutlined>
-                  )}
-                </RowFixed>
-              )}
-              {closedPositions.length > 0 ? (
-                <ShowInactiveToggle>
-                  <label>
-                    <ThemedText.Body onClick={() => setUserHideClosedPositions(!userHideClosedPositions)}>
-                      <Trans>Show closed positions</Trans>
-                    </ThemedText.Body>
-                  </label>
-                  <input
-                    type="checkbox"
-                    onClick={() => setUserHideClosedPositions(!userHideClosedPositions)}
-                    checked={!userHideClosedPositions}
-                  />
-                </ShowInactiveToggle>
-              ) : null}
-            </ResponsiveRow>
+            <HideSmall>
+              <CTACards />
+            </HideSmall>
           </AutoColumn>
         </AutoColumn>
       </PageWrapper>

src/pages/Swap/index.tsx

@@ -56,7 +56,8 @@ import { warningSeverity } from '../../utils/prices'
 import AppBody from '../AppBody'
 
 const AlertWrapper = styled.div`
-  max-width: 480px;
+  max-width: 460px;
+  width: 100%;
 `
 
 export default function Swap({ history }: RouteComponentProps) {
@@ -378,9 +379,6 @@ export default function Swap({ history }: RouteComponentProps) {
         onConfirm={handleConfirmTokenWarning}
         onDismiss={handleDismissTokenWarning}
       />
-      <AlertWrapper>
-        <NetworkAlert />
-      </AlertWrapper>
       <AppBody>
         <SwapHeader allowedSlippage={allowedSlippage} />
         <Wrapper id="swap-page">
@@ -618,6 +616,9 @@ export default function Swap({ history }: RouteComponentProps) {
           </AutoColumn>
         </Wrapper>
       </AppBody>
+      <AlertWrapper>
+        <NetworkAlert />
+      </AlertWrapper>
       <SwitchLocaleLink />
       {!swapIsUnsupported ? null : (
         <UnsupportedCurrencyFooter

src/state/user/actions.ts

@@ -16,7 +16,6 @@ export interface SerializedPair {
 
 export const updateMatchesDarkMode = createAction<{ matchesDarkMode: boolean }>('user/updateMatchesDarkMode')
 export const updateUserDarkMode = createAction<{ userDarkMode: boolean }>('user/updateUserDarkMode')
-export const acknowledgeNetworkAlert = createAction<{ chainId: number }>('user/acknowledgeNetworkAlert')
 export const updateUserExpertMode = createAction<{ userExpertMode: boolean }>('user/updateUserExpertMode')
 export const updateUserLocale = createAction<{ userLocale: SupportedLocale }>('user/updateUserLocale')
 export const updateUserClientSideRouter = createAction<{ userClientSideRouter: boolean }>(

src/state/user/hooks.tsx

@@ -14,7 +14,6 @@ import { useAllTokens } from '../../hooks/Tokens'
 import { useActiveWeb3React } from '../../hooks/web3'
 import { AppState } from '../index'
 import {
-  acknowledgeNetworkAlert,
   addSerializedPair,
   addSerializedToken,
   removeSerializedToken,
@@ -337,14 +336,3 @@ export function useTrackedTokenPairs(): [Token, Token][] {
     return Object.keys(keyed).map((key) => keyed[key])
   }, [combinedList])
 }
-
-export function useNetworkAlertStatus(chainId: number | undefined): [boolean, () => void] {
-  const dispatch = useAppDispatch()
-  const alertAcknowledged = useAppSelector(({ user }) => user.networkAlertsAcknowledged)
-  const acknowledgeAlert = useCallback(() => {
-    if (typeof chainId !== 'number') return
-    dispatch(acknowledgeNetworkAlert({ chainId }))
-  }, [chainId, dispatch])
-
-  return [typeof chainId === 'number' ? alertAcknowledged[chainId] ?? false : false, acknowledgeAlert]
-}

src/state/user/reducer.ts

 import { createReducer } from '@reduxjs/toolkit'
 import { SupportedLocale } from 'constants/locales'
 
-import { SupportedChainId } from '../../constants/chains'
 import { DEFAULT_DEADLINE_FROM_NOW } from '../../constants/misc'
 import { updateVersion } from '../global/actions'
 import {
-  acknowledgeNetworkAlert,
   addSerializedPair,
   addSerializedToken,
   removeSerializedPair,
@@ -25,11 +23,6 @@ import {
 const currentTimestamp = () => new Date().getTime()
 
 export interface UserState {
-  // replaces the above two fields
-  networkAlertsAcknowledged: {
-    [chainId: number]: true
-  }
-
   // the timestamp of the last updateVersion action
   lastUpdateVersionTimestamp?: number
 
@@ -75,7 +68,6 @@ function pairKey(token0Address: string, token1Address: string) {
 
 export const initialState: UserState = {
   matchesDarkMode: false,
-  networkAlertsAcknowledged: {},
   userDarkMode: null,
   userExpertMode: false,
   userLocale: null,
@@ -123,20 +115,8 @@ export default createReducer(initialState, (builder) =>
         state.userDeadline = DEFAULT_DEADLINE_FROM_NOW
       }
 
-      state.networkAlertsAcknowledged = state.networkAlertsAcknowledged ?? {}
-      if ((state as unknown as { arbitrumAlphaAcknowledged: boolean }).arbitrumAlphaAcknowledged) {
-        state.networkAlertsAcknowledged[SupportedChainId.ARBITRUM_ONE] = true
-      }
-      if ((state as unknown as { optimismAlphaAcknowledged: boolean }).optimismAlphaAcknowledged) {
-        state.networkAlertsAcknowledged[SupportedChainId.OPTIMISM] = true
-      }
-
       state.lastUpdateVersionTimestamp = currentTimestamp()
     })
-    .addCase(acknowledgeNetworkAlert, (state, action) => {
-      state.networkAlertsAcknowledged = state.networkAlertsAcknowledged ?? {}
-      state.networkAlertsAcknowledged[action.payload.chainId] = true
-    })
     .addCase(updateUserDarkMode, (state, action) => {
       state.userDarkMode = action.payload.userDarkMode
       state.timestamp = currentTimestamp()