Update styles, change warning modals

src/components/Popover/index.tsx

@@ -8,11 +8,9 @@ import Portal from '@reach/portal'
 
 const PopoverContainer = styled.div<{ show: boolean }>`
   z-index: 9999;
-
   visibility: ${(props) => (props.show ? 'visible' : 'hidden')};
   opacity: ${(props) => (props.show ? 1 : 0)};
   transition: visibility 150ms linear, opacity 150ms linear;
-
   background: ${({ theme }) => theme.bg2};
   border: 1px solid ${({ theme }) => theme.bg3};
   box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.9, theme.shadow1)};

src/components/SearchModal/CurrencySearch.tsx

@@ -226,7 +226,7 @@ export function CurrencySearch({
               <IconWrapper size="16px" marginRight="6px">
                 <Edit />
               </IconWrapper>
-              <TYPE.main color={theme.blue1}>Manage</TYPE.main>
+              <TYPE.main color={theme.blue1}>Manage Token Lists</TYPE.main>
             </RowFixed>
           </ButtonText>
         </Row>

src/components/SearchModal/ImportToken.tsx

-import React, { useState } from 'react'
+import React from 'react'
 import { Token, Currency } from '@uniswap/sdk-core'
 import styled from 'styled-components'
 import { TYPE, CloseIcon } from 'theme'
 import Card from 'components/Card'
 import { AutoColumn } from 'components/Column'
-import { RowBetween, RowFixed, AutoRow } from 'components/Row'
+import { RowBetween, RowFixed } from 'components/Row'
 import CurrencyLogo from 'components/CurrencyLogo'
-import { ArrowLeft, AlertTriangle } from 'react-feather'
+import { ArrowLeft, AlertCircle } from 'react-feather'
 import { transparentize } from 'polished'
 import useTheme from 'hooks/useTheme'
 import { ButtonPrimary } from 'components/Button'
@@ -17,7 +17,7 @@ import { useActiveWeb3React } from 'hooks'
 import { ExternalLink } from '../../theme/components'
 import { useCombinedInactiveList } from 'state/lists/hooks'
 import ListLogo from 'components/ListLogo'
-import { PaddedColumn, Checkbox } from './styleds'
+import { PaddedColumn } from './styleds'
 
 const Wrapper = styled.div`
   position: relative;
@@ -51,18 +51,11 @@ export function ImportToken({ tokens, onBack, onDismiss, handleCurrencySelect }:
 
   const { chainId } = useActiveWeb3React()
 
-  const [confirmed, setConfirmed] = useState(false)
-
   const addToken = useAddUserToken()
 
   // use for showing import source on inactive tokens
   const inactiveTokenList = useCombinedInactiveList()
 
-  // higher warning severity if either is not on a list
-  const fromLists =
-    (chainId && inactiveTokenList?.[chainId]?.[tokens[0]?.address]?.list) ||
-    (chainId && inactiveTokenList?.[chainId]?.[tokens[1]?.address]?.list)
-
   return (
     <Wrapper>
       <PaddedColumn gap="14px" style={{ width: '100%', flex: '1 1' }}>
@@ -73,35 +66,51 @@ export function ImportToken({ tokens, onBack, onDismiss, handleCurrencySelect }:
         </RowBetween>
       </PaddedColumn>
       <SectionBreak />
-      <PaddedColumn gap="md">
+      <AutoColumn gap="md" style={{ marginBottom: '32px', padding: '1rem' }}>
+        <AutoColumn justify="center" style={{ textAlign: 'center', gap: '16px', padding: '1rem' }}>
+          <AlertCircle size={48} stroke={theme.text2} strokeWidth={1} />
+          <TYPE.body fontWeight={400} fontSize={16}>
+            {
+              "This token doesn't appear on the active token list(s). Make sure this is the token that you want to trade."
+            }
+          </TYPE.body>
+        </AutoColumn>
         {tokens.map((token) => {
           const list = chainId && inactiveTokenList?.[chainId]?.[token.address]?.list
           return (
-            <Card backgroundColor={theme.bg2} key={'import' + token.address} className=".token-warning-container">
-              <AutoColumn gap="10px">
-                <AutoRow align="center">
-                  <CurrencyLogo currency={token} size={'24px'} />
-                  <TYPE.body ml="8px" mr="8px" fontWeight={500}>
+            <Card
+              backgroundColor={theme.bg2}
+              key={'import' + token.address}
+              className=".token-warning-container"
+              padding="2rem"
+            >
+              <AutoColumn gap="10px" justify="center">
+                <CurrencyLogo currency={token} size={'32px'} />
+
+                <AutoColumn gap="4px" justify="center">
+                  <TYPE.body ml="8px" mr="8px" fontWeight={500} fontSize={20}>
                     {token.symbol}
                   </TYPE.body>
-                  <TYPE.darkGray fontWeight={300}>{token.name}</TYPE.darkGray>
-                </AutoRow>
+                  <TYPE.darkGray fontWeight={400} fontSize={14}>
+                    {token.name}
+                  </TYPE.darkGray>
+                </AutoColumn>
                 {chainId && (
                   <ExternalLink href={getEtherscanLink(chainId, token.address, 'address')}>
-                    <AddressText>{token.address}</AddressText>
+                    <AddressText fontSize={12}>{token.address}</AddressText>
                   </ExternalLink>
                 )}
                 {list !== undefined ? (
                   <RowFixed>
-                    {list.logoURI && <ListLogo logoURI={list.logoURI} size="12px" />}
-                    <TYPE.small ml="6px" color={theme.text3}>
-                      via {list.name}
+                    {list.logoURI && <ListLogo logoURI={list.logoURI} size="16px" />}
+                    <TYPE.small ml="6px" fontSize={14} color={theme.text3}>
+                      via {list.name} token list
                     </TYPE.small>
                   </RowFixed>
                 ) : (
                   <WarningWrapper borderRadius="4px" padding="4px" highWarning={true}>
                     <RowFixed>
-                      <AlertTriangle stroke={theme.red1} size="10px" />
+                      <AlertCircle stroke={theme.red1} size="10px" />
                       <TYPE.body color={theme.red1} ml="4px" fontSize="10px" fontWeight={500}>
                         Unknown Source
                       </TYPE.body>
@@ -113,40 +122,7 @@ export function ImportToken({ tokens, onBack, onDismiss, handleCurrencySelect }:
           )
         })}
 
-        <Card
-          style={{ backgroundColor: fromLists ? transparentize(0.8, theme.yellow2) : transparentize(0.8, theme.red1) }}
-        >
-          <AutoColumn justify="center" style={{ textAlign: 'center', gap: '16px', marginBottom: '12px' }}>
-            <AlertTriangle stroke={fromLists ? theme.yellow2 : theme.red1} size={32} />
-            <TYPE.body fontWeight={600} fontSize={20} color={fromLists ? theme.yellow2 : theme.red1}>
-              Trade at your own risk!
-            </TYPE.body>
-          </AutoColumn>
-
-          <AutoColumn style={{ textAlign: 'center', gap: '16px', marginBottom: '12px' }}>
-            <TYPE.body fontWeight={400} color={fromLists ? theme.yellow2 : theme.red1}>
-              Anyone can create a token, including creating fake versions of existing tokens that claim to represent
-              projects.
-            </TYPE.body>
-            <TYPE.body fontWeight={600} color={fromLists ? theme.yellow2 : theme.red1}>
-              If you purchase this token, you may not be able to sell it back.
-            </TYPE.body>
-          </AutoColumn>
-          <AutoRow justify="center" style={{ cursor: 'pointer' }} onClick={() => setConfirmed(!confirmed)}>
-            <Checkbox
-              className=".understand-checkbox"
-              name="confirmed"
-              type="checkbox"
-              checked={confirmed}
-              onChange={() => setConfirmed(!confirmed)}
-            />
-            <TYPE.body ml="10px" fontSize="16px" color={fromLists ? theme.yellow2 : theme.red1} fontWeight={500}>
-              I understand
-            </TYPE.body>
-          </AutoRow>
-        </Card>
         <ButtonPrimary
-          disabled={!confirmed}
           altDisabledStyle={true}
           borderRadius="20px"
           padding="10px 1rem"
@@ -158,7 +134,7 @@ export function ImportToken({ tokens, onBack, onDismiss, handleCurrencySelect }:
         >
           Import
         </ButtonPrimary>
-      </PaddedColumn>
+      </AutoColumn>
     </Wrapper>
   )
 }

src/components/WalletModal/index.tsx

 import { AbstractConnector } from '@web3-react/abstract-connector'
 import { UnsupportedChainIdError, useWeb3React } from '@web3-react/core'
 import { WalletConnectConnector } from '@web3-react/walletconnect-connector'
+import { AutoRow } from 'components/Row'
 import React, { useEffect, useState } from 'react'
 import { isMobile } from 'react-device-detect'
 import ReactGA from 'react-ga'
@@ -13,12 +14,13 @@ import { SUPPORTED_WALLETS } from '../../constants'
 import usePrevious from '../../hooks/usePrevious'
 import { ApplicationModal } from '../../state/application/actions'
 import { useModalOpen, useWalletModalToggle } from '../../state/application/hooks'
-import { ExternalLink } from '../../theme'
+import { ExternalLink, TYPE } from '../../theme'
 import AccountDetails from '../AccountDetails'
 
 import Modal from '../Modal'
 import Option from './Option'
 import PendingView from './PendingView'
+import { LightCard } from '../Card'
 
 const CloseIcon = styled.div`
   position: absolute;
@@ -54,12 +56,12 @@ const HeaderRow = styled.div`
 `
 
 const ContentWrapper = styled.div`
-  background-color: ${({ theme }) => theme.bg2};
-  padding: 2rem;
+  background-color: ${({ theme }) => theme.bg0};
+  padding: 0 1rem 1rem 1rem;
   border-bottom-left-radius: 20px;
   border-bottom-right-radius: 20px;
 
-  ${({ theme }) => theme.mediaWidth.upToMedium`padding: 1rem`};
+  ${({ theme }) => theme.mediaWidth.upToMedium`padding: 0 1rem 1rem 1rem`};
 `
 
 const UpperSection = styled.div`
@@ -82,18 +84,6 @@ const UpperSection = styled.div`
   }
 `
 
-const Blurb = styled.div`
-  ${({ theme }) => theme.flexRowNoWrap}
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-  margin-top: 2rem;
-  ${({ theme }) => theme.mediaWidth.upToMedium`
-    margin: 1rem;
-    font-size: 12px;
-  `};
-`
-
 const OptionGrid = styled.div`
   display: grid;
   grid-gap: 10px;
@@ -104,6 +94,11 @@ const OptionGrid = styled.div`
 `
 
 const HoverText = styled.div`
+  text-decoration: none;
+  color: ${({ theme }) => theme.text1};
+  display: flex;
+  align-items: center;
+
   :hover {
     cursor: pointer;
   }
@@ -338,7 +333,17 @@ export default function WalletModal({
             <HoverText>Connect to a wallet</HoverText>
           </HeaderRow>
         )}
+
         <ContentWrapper>
+          <LightCard style={{ marginBottom: '16px' }}>
+            <AutoRow style={{ flexWrap: 'nowrap' }}>
+              <TYPE.main fontSize={14}>
+                By connecting a wallet, you agree to Uniswap Labs’ <ExternalLink href="">Terms of Service</ExternalLink>{' '}
+                and acknowledge that you have read and understand the{' '}
+                <ExternalLink href="">Uniswap protocol disclaimer</ExternalLink>.
+              </TYPE.main>
+            </AutoRow>
+          </LightCard>
           {walletView === WALLET_VIEWS.PENDING ? (
             <PendingView
               connector={pendingWallet}
@@ -349,12 +354,6 @@ export default function WalletModal({
           ) : (
             <OptionGrid>{getOptions()}</OptionGrid>
           )}
-          {walletView !== WALLET_VIEWS.PENDING && (
-            <Blurb>
-              <span>New to Ethereum? &nbsp;</span>{' '}
-              <ExternalLink href="https://ethereum.org/wallets/">Learn more about wallets</ExternalLink>
-            </Blurb>
-          )}
         </ContentWrapper>
       </UpperSection>
     )

src/components/swap/AdvancedSwapDetails.tsx

@@ -29,7 +29,7 @@ export function AdvancedSwapDetails({ trade }: AdvancedSwapDetailsProps) {
             Liquidity Provider Fee
           </TYPE.black>
         </RowFixed>
-        <TYPE.black fontSize={12} color={theme.text1}>
+        <TYPE.black textAlign="right" fontSize={12} color={theme.text1}>
           {realizedLPFee ? `${realizedLPFee.toSignificant(4)} ${trade.inputAmount.currency.symbol}` : '-'}
         </TYPE.black>
       </RowBetween>
@@ -40,7 +40,7 @@ export function AdvancedSwapDetails({ trade }: AdvancedSwapDetailsProps) {
             Route
           </TYPE.black>
         </RowFixed>
-        <TYPE.black fontSize={12} color={theme.text1}>
+        <TYPE.black textAlign="right" fontSize={12} color={theme.text1}>
           <SwapRoute trade={trade} />
         </TYPE.black>
       </RowBetween>
@@ -51,7 +51,7 @@ export function AdvancedSwapDetails({ trade }: AdvancedSwapDetailsProps) {
             Execution price vs. spot price
           </TYPE.black>
         </RowFixed>
-        <TYPE.black fontSize={12} color={theme.text1}>
+        <TYPE.black textAlign="right" fontSize={12} color={theme.text1}>
           <FormattedPriceImpact priceImpact={computePriceImpactWithMaximumSlippage(trade, allowedSlippage)} />
         </TYPE.black>
       </RowBetween>

src/components/swap/BetterTradeLink.tsx

@@ -13,9 +13,9 @@ import { Zap } from 'react-feather'
 const ResponsiveButton = styled(ButtonPrimary)`
   width: fit-content;
   padding: 0.2rem 0.5rem;
-  wordbreak: keep-all;
+  word-break: keep-all;
   height: 24px;
-  marginleft: 0.25rem;
+  margin-left: 0.75rem;
   ${({ theme }) => theme.mediaWidth.upToSmall`
      padding: 4px;
     border-radius: 8px;

src/components/swap/SwapRoute.tsx

@@ -11,7 +11,7 @@ function LabeledArrow({}: { fee: FeeAmount }) {
   const theme = useContext(ThemeContext)
 
   // todo: render the fee in the label
-  return <ChevronRight size={12} color={theme.text2} />
+  return <ChevronRight size={14} color={theme.text2} />
 }
 
 export default memo(function SwapRoute({ trade }: { trade: V2Trade | V3Trade }) {
@@ -25,12 +25,12 @@ export default memo(function SwapRoute({ trade }: { trade: V2Trade | V3Trade })
         return (
           <Fragment key={i}>
             <Flex alignItems="end">
-              <TYPE.black fontSize={12} color={theme.text1} ml="0.125rem" mr="0.125rem">
+              <TYPE.black fontSize={14} color={theme.text1} ml="0.145rem" mr="0.145rem">
                 {currency.symbol}
               </TYPE.black>
             </Flex>
             {isLastItem ? null : trade instanceof V2Trade ? (
-              <ChevronRight size={12} color={theme.text2} />
+              <ChevronRight size={14} color={theme.text2} />
             ) : (
               <LabeledArrow fee={trade.route.pools[i].fee} />
             )}

src/pages/App.tsx

@@ -5,7 +5,7 @@ import GoogleAnalyticsReporter from '../components/analytics/GoogleAnalyticsRepo
 import AddressClaimModal from '../components/claim/AddressClaimModal'
 import Header from '../components/Header'
 import Polling from '../components/Header/Polling'
-import URLWarning from '../components/Header/URLWarning'
+// import URLWarning from '../components/Header/URLWarning'
 import Popups from '../components/Popups'
 import Web3ReactManager from '../components/Web3ReactManager'
 import { ApplicationModal } from '../state/application/actions'

src/pages/Swap/index.tsx

@@ -6,7 +6,7 @@ import UnsupportedCurrencyFooter from 'components/swap/UnsupportedCurrencyFooter
 import { MouseoverTooltip, MouseoverTooltipContent } from 'components/Tooltip'
 import JSBI from 'jsbi'
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react'
-import { ArrowDown, CheckCircle, HelpCircle, Info, X } from 'react-feather'
+import { ArrowDown, CheckCircle, HelpCircle, Info, ArrowLeft } from 'react-feather'
 import ReactGA from 'react-ga'
 import { Link, RouteComponentProps } from 'react-router-dom'
 import { Text } from 'rebass'
@@ -419,12 +419,12 @@ export default function Swap({ history }: RouteComponentProps) {
                           height: '24px',
                           opacity: 0.8,
                           lineHeight: '120%',
-                          marginLeft: '0.25rem',
+                          marginLeft: '0.75rem',
                         }}
                       >
-                        <X color={theme.text3} size={12} /> &nbsp;
+                        <ArrowLeft color={theme.text3} size={12} /> &nbsp;
                         <TYPE.main style={{ lineHeight: '120%' }} fontSize={12}>
-                          Routed via V2
+                          Back to V3
                         </TYPE.main>
                       </ButtonGray>
                     )

src/theme/index.tsx

@@ -79,15 +79,15 @@ export function colors(darkMode: boolean): Colors {
     red2: '#F82D3A',
     red3: '#D60000',
     green1: '#27AE60',
-    yellow1: '#FFE270',
-    yellow2: '#F3841E',
+    yellow1: '#e3a507',
+    yellow2: '#ff8f00',
     yellow3: '#F3B71E',
     blue1: '#2172E5',
     blue2: '#5199FF',
 
     error: '#FD4040',
     success: '#27AE60',
-    warning: '#F3B71E',
+    warning: '#ff8f00',
 
     // dont wanna forget these blue yet
     // blue4: darkMode ? '#153d6f70' : '#C4D9F8',
@@ -198,7 +198,7 @@ export const ThemedBackground = styled.div<{ backgroundColor?: string | undefine
   mix-blend-mode: color;
   background: ${({ backgroundColor }) =>
     `radial-gradient(50% 50% at 50% 50%, ${
-      backgroundColor ? backgroundColor : '#fc077d15'
+      backgroundColor ? backgroundColor : '#fc077d10'
     } 0%, rgba(255, 255, 255, 0) 100%)`};
   transform: translateY(-100vh);
   will-change: background;