feat: wallet connect redesign (#4381)

* init

* pending and failed states

* simplify

* fixes in respond to fred nits

* update overlay

src/components/Button/index.tsx

@@ -50,9 +50,12 @@ export const BaseButton = styled(RebassButton)<
   }
 `
 
-export const ButtonPrimary = styled(BaseButton)`
-  background-color: ${({ theme }) => theme.deprecated_primary1};
-  color: white;
+export const ButtonPrimary = styled(BaseButton)<{ redesignFlag?: boolean }>`
+  background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.accentAction : theme.deprecated_primary1)};
+  font-size: ${({ redesignFlag }) => redesignFlag && '20px'};
+  font-weight: ${({ redesignFlag }) => redesignFlag && '600'};
+  padding: ${({ redesignFlag }) => redesignFlag && '16px'};
+  color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.accentTextLightPrimary : 'white')};
   &:focus {
     box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, theme.deprecated_primary1)};
     background-color: ${({ theme }) => darken(0.05, theme.deprecated_primary1)};

src/components/Loader/index.tsx

@@ -9,12 +9,13 @@ const rotate = keyframes`
   }
 `
 
-const StyledSVG = styled.svg<{ size: string; stroke?: string }>`
+const StyledSVG = styled.svg<{ size: string; stroke?: string; redesignFlag?: boolean }>`
   animation: 2s ${rotate} linear infinite;
   height: ${({ size }) => size};
   width: ${({ size }) => size};
   path {
-    stroke: ${({ stroke, theme }) => stroke ?? theme.deprecated_primary1};
+    stroke: ${({ stroke, redesignFlag, theme }) =>
+      redesignFlag ? theme.accentActive : stroke ?? theme.deprecated_primary1};
   }
 `
 
@@ -25,17 +26,29 @@ const StyledSVG = styled.svg<{ size: string; stroke?: string }>`
 export default function Loader({
   size = '16px',
   stroke,
+  strokeWidth,
+  redesignFlag,
   ...rest
 }: {
   size?: string
   stroke?: string
+  strokeWidth?: number
+  redesignFlag?: boolean
   [k: string]: any
 }) {
   return (
-    <StyledSVG viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" size={size} stroke={stroke} {...rest}>
+    <StyledSVG
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      size={size}
+      stroke={stroke}
+      redesignFlag={redesignFlag}
+      {...rest}
+    >
       <path
         d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 9.27455 20.9097 6.80375 19.1414 5"
-        strokeWidth="2.5"
+        strokeWidth={strokeWidth ?? '2.5'}
         strokeLinecap="round"
         strokeLinejoin="round"
       />

src/components/Modal/index.tsx

@@ -9,7 +9,7 @@ import { isMobile } from '../../utils/userAgent'
 
 const AnimatedDialogOverlay = animated(DialogOverlay)
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const StyledDialogOverlay = styled(AnimatedDialogOverlay)`
+const StyledDialogOverlay = styled(AnimatedDialogOverlay)<{ redesignFlag?: boolean }>`
   &[data-reach-dialog-overlay] {
     z-index: 2;
     background-color: transparent;
@@ -19,7 +19,7 @@ const StyledDialogOverlay = styled(AnimatedDialogOverlay)`
     align-items: center;
     justify-content: center;
 
-    background-color: ${({ theme }) => theme.deprecated_modalBG};
+    background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundScrim : theme.deprecated_modalBG)};
   }
 `
 
@@ -84,6 +84,7 @@ interface ModalProps {
   maxHeight?: number
   initialFocusRef?: React.RefObject<any>
   children?: React.ReactNode
+  redesignFlag?: boolean
 }
 
 export default function Modal({
@@ -93,6 +94,7 @@ export default function Modal({
   maxHeight = 90,
   initialFocusRef,
   children,
+  redesignFlag,
 }: ModalProps) {
   const fadeTransition = useTransition(isOpen, null, {
     config: { duration: 200 },
@@ -124,6 +126,7 @@ export default function Modal({
               onDismiss={onDismiss}
               initialFocusRef={initialFocusRef}
               unstable_lockFocusAcrossFrames={false}
+              redesignFlag={redesignFlag}
             >
               <StyledDialogContent
                 {...(isMobile

src/components/WalletModal/Option.tsx

 import { ElementName, Event, EventName } from 'components/AmplitudeAnalytics/constants'
 import { TraceEvent } from 'components/AmplitudeAnalytics/TraceEvent'
+import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import React from 'react'
+import { Check } from 'react-feather'
 import styled from 'styled-components/macro'
 
 import { ExternalLink } from '../../theme'
 
-const InfoCard = styled.button<{ isActive?: boolean }>`
-  background-color: ${({ theme, isActive }) => (isActive ? theme.deprecated_bg3 : theme.deprecated_bg2)};
+const InfoCard = styled.button<{ isActive?: boolean; redesignFlag?: boolean }>`
+  background-color: ${({ theme, isActive, redesignFlag }) =>
+    redesignFlag ? theme.backgroundInteractive : isActive ? theme.deprecated_bg3 : theme.deprecated_bg2};
   padding: 1rem;
   outline: none;
   border: 1px solid;
   border-radius: 12px;
   width: 100% !important;
   &:focus {
-    box-shadow: 0 0 0 1px ${({ theme }) => theme.deprecated_primary1};
+    box-shadow: ${({ theme, redesignFlag }) => !redesignFlag && `0 0 0 1px ${theme.deprecated_primary1}`};
+    background-color: ${({ theme, redesignFlag }) => redesignFlag && theme.hoverState};
   }
-  border-color: ${({ theme, isActive }) => (isActive ? 'transparent' : theme.deprecated_bg3)};
+  border-color: ${({ theme, isActive, redesignFlag }) =>
+    redesignFlag ? (isActive ? theme.accentActive : 'transparent') : isActive ? 'transparent' : theme.deprecated_bg3};
+`
+
+const CheckIcon = styled(Check)`
+  ${({ theme }) => theme.flexColumnNoWrap};
+  height: 20px;
+  width: 20px;
+  align-items: center;
+  justify-content: center;
+  color: ${({ theme }) => theme.accentAction};
+  ${({ theme }) => theme.mediaWidth.upToMedium`
+    align-items: flex-end;
+  `};
 `
 
 const OptionCard = styled(InfoCard as any)`
@@ -33,11 +50,18 @@ const OptionCardLeft = styled.div`
   height: 100%;
 `
 
-const OptionCardClickable = styled(OptionCard as any)<{ clickable?: boolean }>`
+const OptionCardClickable = styled(OptionCard as any)<{
+  active?: boolean
+  clickable?: boolean
+  redesignFlag?: boolean
+}>`
   margin-top: 0;
+  border: ${({ active, theme }) => active && `1px solid ${theme.accentActive}`};
   &:hover {
-    cursor: ${({ clickable }) => (clickable ? 'pointer' : '')};
-    border: ${({ clickable, theme }) => (clickable ? `1px solid ${theme.deprecated_primary1}` : ``)};
+    cursor: ${({ clickable }) => clickable && 'pointer'};
+    background-color: ${({ theme, redesignFlag }) => redesignFlag && theme.hoverState};
+    border: ${({ clickable, redesignFlag, theme }) =>
+      clickable && !redesignFlag && `1px solid ${theme.deprecated_primary1}`};
   }
   opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};
 `
@@ -63,12 +87,14 @@ const CircleWrapper = styled.div`
   align-items: center;
 `
 
-const HeaderText = styled.div`
+const HeaderText = styled.div<{ redesignFlag?: boolean }>`
   ${({ theme }) => theme.flexRowNoWrap};
+  align-items: center;
+  justify-content: center;
   color: ${(props) =>
     props.color === 'blue' ? ({ theme }) => theme.deprecated_primary1 : ({ theme }) => theme.deprecated_text1};
-  font-size: 1rem;
-  font-weight: 500;
+  font-size: ${({ redesignFlag }) => (redesignFlag ? '16px' : '1rem')};
+  font-weight: ${({ redesignFlag }) => (redesignFlag ? '600' : '500')};
 `
 
 const SubHeader = styled.div`
@@ -77,7 +103,7 @@ const SubHeader = styled.div`
   font-size: 12px;
 `
 
-const IconWrapper = styled.div<{ size?: number | null }>`
+const IconWrapperDeprecated = styled.div<{ size?: number | null }>`
   ${({ theme }) => theme.flexColumnNoWrap};
   align-items: center;
   justify-content: center;
@@ -91,6 +117,21 @@ const IconWrapper = styled.div<{ size?: number | null }>`
   `};
 `
 
+const IconWrapper = styled.div<{ size?: number | null }>`
+  ${({ theme }) => theme.flexColumnNoWrap};
+  align-items: center;
+  justify-content: center;
+  padding-right: 12px;
+  & > img,
+  span {
+    height: ${({ size }) => (size ? size + 'px' : '28px')};
+    width: ${({ size }) => (size ? size + 'px' : '28px')};
+  }
+  ${({ theme }) => theme.mediaWidth.upToMedium`
+    align-items: flex-end;
+  `};
+`
+
 export default function Option({
   link = null,
   clickable = true,
@@ -114,6 +155,9 @@ export default function Option({
   isActive?: boolean
   id: string
 }) {
+  const redesignFlag = useRedesignFlag()
+  const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
+
   const content = (
     <TraceEvent
       events={[Event.onClick]}
@@ -121,32 +165,53 @@ export default function Option({
       properties={{ wallet_type: header }}
       element={ElementName.WALLET_TYPE_OPTION}
     >
-      <OptionCardClickable
-        id={id}
-        onClick={onClick}
-        clickable={clickable && !isActive}
-        active={isActive}
-        data-testid="wallet-modal-option"
-      >
-        <OptionCardLeft>
-          <HeaderText color={color}>
-            {isActive ? (
-              <CircleWrapper>
-                <GreenCircle>
-                  <div />
-                </GreenCircle>
-              </CircleWrapper>
-            ) : (
-              ''
-            )}
-            {header}
-          </HeaderText>
-          {subheader && <SubHeader>{subheader}</SubHeader>}
-        </OptionCardLeft>
-        <IconWrapper size={size}>
-          <img src={icon} alt={'Icon'} />
-        </IconWrapper>
-      </OptionCardClickable>
+      {redesignFlagEnabled ? (
+        <OptionCardClickable
+          id={id}
+          onClick={onClick}
+          clickable={clickable && !isActive}
+          active={isActive}
+          redesignFlag={true}
+          data-testid="wallet-modal-option"
+        >
+          <OptionCardLeft>
+            <HeaderText color={color} redesignFlag={true}>
+              <IconWrapper size={size}>
+                <img src={icon} alt={'Icon'} />
+              </IconWrapper>
+              {header}
+            </HeaderText>
+            {subheader && <SubHeader>{subheader}</SubHeader>}
+          </OptionCardLeft>
+          {isActive && <CheckIcon />}
+        </OptionCardClickable>
+      ) : (
+        <OptionCardClickable
+          id={id}
+          onClick={onClick}
+          clickable={clickable && !isActive}
+          active={isActive}
+          redesignFlag={false}
+          data-testid="wallet-modal-option"
+        >
+          <OptionCardLeft>
+            <HeaderText color={color} redesignFlag={false}>
+              {isActive && (
+                <CircleWrapper>
+                  <GreenCircle>
+                    <div />
+                  </GreenCircle>
+                </CircleWrapper>
+              )}
+              {header}
+            </HeaderText>
+            {subheader && <SubHeader>{subheader}</SubHeader>}
+          </OptionCardLeft>
+          <IconWrapperDeprecated size={size}>
+            <img src={icon} alt={'Icon'} />
+          </IconWrapperDeprecated>
+        </OptionCardClickable>
+      )}
     </TraceEvent>
   )
   if (link) {

src/components/WalletModal/PendingView.tsx

 import { Trans } from '@lingui/macro'
 import { Connector } from '@web3-react/types'
 import { ButtonEmpty, ButtonPrimary } from 'components/Button'
+import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
+import { AlertTriangle } from 'react-feather'
 import styled from 'styled-components/macro'
 import { ThemedText } from 'theme'
 
@@ -16,6 +18,21 @@ const PendingSection = styled.div`
   }
 `
 
+const WaitingToConnectSection = styled.div`
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+`
+
+const AlertTriangleIcon = styled(AlertTriangle)`
+  width: 25%;
+  height: 25%;
+  stroke-width: 1;
+  padding-bottom: 2rem;
+  color: ${({ theme }) => theme.accentCritical};
+`
+
 const LoaderContainer = styled.div`
   margin: 16px 0;
   ${({ theme }) => theme.flexRowNoWrap};
@@ -57,7 +74,58 @@ export default function PendingView({
   tryActivation: (connector: Connector) => void
   openOptions: () => void
 }) {
-  return (
+  const redesignFlag = useRedesignFlag()
+  const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
+
+  return redesignFlagEnabled ? (
+    <PendingSection>
+      <LoadingMessage>
+        <LoadingWrapper>
+          {error ? (
+            <ErrorGroup>
+              <AlertTriangleIcon />
+              <ThemedText.MediumHeader marginBottom={12}>
+                <Trans>Error connecting</Trans>
+              </ThemedText.MediumHeader>
+              <ThemedText.BodyPrimary fontSize={16} marginBottom={36} textAlign="center">
+                <Trans>
+                  The connection attempt failed. Please click try again and follow the steps to connect in your wallet.
+                </Trans>
+              </ThemedText.BodyPrimary>
+              <ButtonPrimary
+                $borderRadius="12px"
+                redesignFlag={true}
+                onClick={() => {
+                  tryActivation(connector)
+                }}
+              >
+                <Trans>Try Again</Trans>
+              </ButtonPrimary>
+              <ButtonEmpty width="fit-content" padding="0" marginTop={20}>
+                <ThemedText.Link onClick={openOptions}>
+                  <Trans>Back to wallet selection</Trans>
+                </ThemedText.Link>
+              </ButtonEmpty>
+            </ErrorGroup>
+          ) : (
+            <>
+              <WaitingToConnectSection>
+                <LoaderContainer style={{ padding: '16px 0px' }}>
+                  <Loader redesignFlag={true} strokeWidth={0.8} size="100px" />
+                </LoaderContainer>
+                <ThemedText.MediumHeader>
+                  <Trans>Waiting to connect</Trans>
+                </ThemedText.MediumHeader>
+                <ThemedText.SubHeader style={{ paddingTop: '8px' }}>
+                  <Trans>Confirm this connection in your wallet</Trans>
+                </ThemedText.SubHeader>
+              </WaitingToConnectSection>
+            </>
+          )}
+        </LoadingWrapper>
+      </LoadingMessage>
+    </PendingSection>
+  ) : (
     <PendingSection>
       <LoadingMessage>
         <LoadingWrapper>

src/components/WalletModal/index.tsx

@@ -15,6 +15,7 @@ import { AutoColumn } from 'components/Column'
 import { AutoRow } from 'components/Row'
 import { ConnectionType } from 'connection'
 import { getConnection, getConnectionName, getIsCoinbaseWallet, getIsInjected, getIsMetaMask } from 'connection/utils'
+import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import { useStablecoinValue } from 'hooks/useStablecoinPrice'
 import { useCurrencyBalances } from 'lib/hooks/useCurrencyBalance'
 import useNativeCurrency from 'lib/hooks/useNativeCurrency'
@@ -59,25 +60,30 @@ const CloseColor = styled(Close)`
   }
 `
 
-const Wrapper = styled.div`
+const Wrapper = styled.div<{ redesignFlag?: boolean }>`
   ${({ theme }) => theme.flexColumnNoWrap}
+  background-color: ${({ redesignFlag, theme }) => redesignFlag && theme.backgroundSurface};
+  outline: ${({ theme, redesignFlag }) => redesignFlag && `1px solid ${theme.backgroundOutline}`};
+  box-shadow: ${({ redesignFlag, theme }) => redesignFlag && theme.deepShadow};
   margin: 0;
   padding: 0;
   width: 100%;
 `
 
-const HeaderRow = styled.div`
+const HeaderRow = styled.div<{ redesignFlag?: boolean }>`
   ${({ theme }) => theme.flexRowNoWrap};
   padding: 1rem 1rem;
-  font-weight: 500;
+  font-weight: ${({ redesignFlag }) => (redesignFlag ? '600' : '500')};
+  size: ${({ redesignFlag }) => redesignFlag && '16px'};
   color: ${(props) => (props.color === 'blue' ? ({ theme }) => theme.deprecated_primary1 : 'inherit')};
   ${({ theme }) => theme.mediaWidth.upToMedium`
     padding: 1rem;
   `};
 `
 
-const ContentWrapper = styled.div`
-  background-color: ${({ theme }) => theme.deprecated_bg0};
+const ContentWrapper = styled.div<{ redesignFlag?: boolean }>`
+  background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundSurface : theme.deprecated_bg0)};
+  border: ${({ theme, redesignFlag }) => redesignFlag && `1px solid ${theme.backgroundOutline}`};
   padding: 0 1rem 1rem 1rem;
   border-bottom-left-radius: 20px;
   border-bottom-right-radius: 20px;
@@ -183,6 +189,8 @@ export default function WalletModal({
   const { connector, account, chainId } = useWeb3React()
   const [connectedWallets, addWalletToConnectedWallets] = useConnectedWallets()
 
+  const redesignFlag = useRedesignFlag()
+  const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
   const [walletView, setWalletView] = useState(WALLET_VIEWS.ACCOUNT)
   const [lastActiveWalletAddress, setLastActiveWalletAddress] = useState<string | undefined>(account)
   const [shouldLogWalletBalances, setShouldLogWalletBalances] = useState(false)
@@ -357,9 +365,7 @@ export default function WalletModal({
     }
 
     let headerRow
-    if (walletView === WALLET_VIEWS.PENDING) {
-      headerRow = null
-    } else if (walletView === WALLET_VIEWS.ACCOUNT || !!account) {
+    if (walletView === WALLET_VIEWS.PENDING || walletView === WALLET_VIEWS.ACCOUNT || !!account) {
       headerRow = (
         <HeaderRow color="blue">
           <HoverText onClick={() => setWalletView(account ? WALLET_VIEWS.ACCOUNT : WALLET_VIEWS.OPTIONS)}>
@@ -369,7 +375,7 @@ export default function WalletModal({
       )
     } else {
       headerRow = (
-        <HeaderRow>
+        <HeaderRow redesignFlag={redesignFlagEnabled}>
           <HoverText>
             <Trans>Connect a wallet</Trans>
           </HoverText>
@@ -377,6 +383,39 @@ export default function WalletModal({
       )
     }
 
+    function getTermsOfService(redesignFlagEnabled: boolean) {
+      return redesignFlagEnabled ? (
+        <AutoRow style={{ flexWrap: 'nowrap', padding: '4px 16px' }}>
+          <ThemedText.BodySecondary fontSize={12}>
+            <Trans>
+              By connecting a wallet, you agree to Uniswap Labs’{' '}
+              <ExternalLink href="https://uniswap.org/terms-of-service/">Terms of Service</ExternalLink> and acknowledge
+              that you have read and understand the Uniswap{' '}
+              <ExternalLink href="https://uniswap.org/disclaimer/">Protocol Disclaimer</ExternalLink>.
+            </Trans>
+          </ThemedText.BodySecondary>
+        </AutoRow>
+      ) : (
+        <LightCard>
+          <AutoRow style={{ flexWrap: 'nowrap' }}>
+            <ThemedText.DeprecatedBody fontSize={12}>
+              <Trans>
+                By connecting a wallet, you agree to Uniswap Labs’{' '}
+                <ExternalLink style={{ textDecoration: 'underline' }} href="https://uniswap.org/terms-of-service/">
+                  Terms of Service
+                </ExternalLink>{' '}
+                and acknowledge that you have read and understand the Uniswap{' '}
+                <ExternalLink style={{ textDecoration: 'underline' }} href="https://uniswap.org/disclaimer/">
+                  Protocol Disclaimer
+                </ExternalLink>
+                .
+              </Trans>
+            </ThemedText.DeprecatedBody>
+          </AutoRow>
+        </LightCard>
+      )
+    }
+
     return (
       <UpperSection>
         <CloseIcon onClick={toggleWalletModal}>
@@ -394,28 +433,7 @@ export default function WalletModal({
               />
             )}
             {walletView !== WALLET_VIEWS.PENDING && <OptionGrid data-testid="option-grid">{getOptions()}</OptionGrid>}
-            {!pendingError && (
-              <LightCard>
-                <AutoRow style={{ flexWrap: 'nowrap' }}>
-                  <ThemedText.DeprecatedBody fontSize={12}>
-                    <Trans>
-                      By connecting a wallet, you agree to Uniswap Labs’{' '}
-                      <ExternalLink
-                        style={{ textDecoration: 'underline' }}
-                        href="https://uniswap.org/terms-of-service/"
-                      >
-                        Terms of Service
-                      </ExternalLink>{' '}
-                      and acknowledge that you have read and understand the Uniswap{' '}
-                      <ExternalLink style={{ textDecoration: 'underline' }} href="https://uniswap.org/disclaimer/">
-                        Protocol Disclaimer
-                      </ExternalLink>
-                      .
-                    </Trans>
-                  </ThemedText.DeprecatedBody>
-                </AutoRow>
-              </LightCard>
-            )}
+            {!pendingError && getTermsOfService(redesignFlagEnabled)}
           </AutoColumn>
         </ContentWrapper>
       </UpperSection>
@@ -423,8 +441,14 @@ export default function WalletModal({
   }
 
   return (
-    <Modal isOpen={walletModalOpen} onDismiss={toggleWalletModal} minHeight={false} maxHeight={90}>
-      <Wrapper>{getModalContent()}</Wrapper>
+    <Modal
+      isOpen={walletModalOpen}
+      onDismiss={toggleWalletModal}
+      minHeight={false}
+      maxHeight={90}
+      redesignFlag={redesignFlagEnabled}
+    >
+      <Wrapper redesignFlag={redesignFlagEnabled}>{getModalContent()}</Wrapper>
     </Modal>
   )
 }

src/theme/colors.ts

@@ -188,6 +188,7 @@ export interface Palette {
   accentSuccess: Color
   accentWarning: Color
   accentFailure: Color
+  accentCritical: Color
 
   accentActionSoft: Color
   accentActiveSoft: Color
@@ -222,6 +223,7 @@ export interface Palette {
   chain_42161_background: Color
 
   flyoutDropShadow: Color
+  deepShadow: Color
 }
 
 export const colorsLight: Palette = {
@@ -244,6 +246,7 @@ export const colorsLight: Palette = {
   accentSuccess: colors.green400,
   accentWarning: colors.gold200,
   accentFailure: colors.red400,
+  accentCritical: colors.red400,
 
   accentActionSoft: opacify(12, colors.pink400),
   accentActiveSoft: opacify(12, colors.blue400),
@@ -279,6 +282,8 @@ export const colorsLight: Palette = {
 
   flyoutDropShadow:
     '0px 24px 32px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.12);',
+  deepShadow:
+    '8px 12px 20px rgba(51, 53, 72, 0.04), 4px 6px 12px rgba(51, 53, 72, 0.02), 4px 4px 8px rgba(51, 53, 72, 0.04)',
 }
 
 export const colorsDark: Palette = {
@@ -301,6 +306,7 @@ export const colorsDark: Palette = {
   accentSuccess: colors.greenVibrant,
   accentWarning: colors.gold200,
   accentFailure: colors.red400,
+  accentCritical: colors.red300,
 
   accentActionSoft: opacify(24, colors.blue400),
   accentActiveSoft: opacify(12, colors.blue400),
@@ -336,4 +342,5 @@ export const colorsDark: Palette = {
 
   flyoutDropShadow:
     '0px 24px 32px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.12);',
+  deepShadow: '12px 16px 24px rgba(0, 0, 0, 0.24), 12px 8px 12px rgba(0, 0, 0, 0.24), 4px 4px 8px rgba(0, 0, 0, 0.32)',
 }

src/theme/index.tsx

@@ -13,7 +13,7 @@ import { darkTheme } from '../nft/themes/darkTheme'
 import { lightTheme } from '../nft/themes/lightTheme'
 import { useIsDarkMode } from '../state/user/hooks'
 import { colors as ColorsPalette, colorsDark, colorsLight } from './colors'
-import { Colors, ThemeColors } from './styled'
+import { AllColors, Colors, ThemeColors } from './styled'
 import { opacify } from './utils'
 
 export * from './components'
@@ -77,6 +77,7 @@ function uniswapThemeColors(darkMode: boolean): ThemeColors {
     accentSuccess: darkMode ? colorsDark.accentSuccess : colorsLight.accentSuccess,
     accentWarning: darkMode ? colorsDark.accentWarning : colorsLight.accentWarning,
     accentFailure: darkMode ? colorsDark.accentFailure : colorsLight.accentFailure,
+    accentCritical: darkMode ? colorsDark.accentCritical : colorsLight.accentCritical,
 
     accentActionSoft: darkMode ? colorsDark.accentActionSoft : colorsLight.accentActionSoft,
     accentActiveSoft: darkMode ? colorsDark.accentActiveSoft : colorsLight.accentActiveSoft,
@@ -111,6 +112,7 @@ function uniswapThemeColors(darkMode: boolean): ThemeColors {
     blue200: ColorsPalette.blue200,
     flyoutDropShadow:
       '0px 24px 32px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.12)',
+    deepShadow: darkMode ? colorsDark.deepShadow : colorsLight.deepShadow,
     hoverState: opacify(24, ColorsPalette.blue200),
     hoverDefault: opacify(8, ColorsPalette.gray200),
   }
@@ -280,7 +282,7 @@ export default function ThemeProvider({ children }: { children: React.ReactNode
   return <StyledComponentsThemeProvider theme={themeObject}>{children}</StyledComponentsThemeProvider>
 }
 
-const TextWrapper = styled(Text)<{ color: keyof Colors }>`
+const TextWrapper = styled(Text)<{ color: keyof AllColors }>`
   color: ${({ color, theme }) => (theme as any)[color]};
 `
 
@@ -294,6 +296,9 @@ export const ThemedText = {
   DeprecatedLink(props: TextProps) {
     return <TextWrapper fontWeight={500} color={'deprecated_primary1'} {...props} />
   },
+  Link(props: TextProps) {
+    return <TextWrapper fontWeight={600} fontSize={14} color={'accentAction'} {...props} />
+  },
   DeprecatedLabel(props: TextProps) {
     return <TextWrapper fontWeight={600} color={'deprecated_text1'} {...props} />
   },
@@ -306,15 +311,27 @@ export const ThemedText = {
   DeprecatedBody(props: TextProps) {
     return <TextWrapper fontWeight={400} fontSize={16} color={'deprecated_text1'} {...props} />
   },
+  BodySecondary(props: TextProps) {
+    return <TextWrapper fontWeight={400} fontSize={16} color={'textSecondary'} {...props} />
+  },
+  BodyPrimary(props: TextProps) {
+    return <TextWrapper fontWeight={400} fontSize={16} color={'textPrimary'} {...props} />
+  },
   DeprecatedLargeHeader(props: TextProps) {
     return <TextWrapper fontWeight={600} fontSize={24} {...props} />
   },
   DeprecatedMediumHeader(props: TextProps) {
     return <TextWrapper fontWeight={500} fontSize={20} {...props} />
   },
+  MediumHeader(props: TextProps) {
+    return <TextWrapper fontWeight={400} fontSize={20} color={'textPrimary'} {...props} />
+  },
   DeprecatedSubHeader(props: TextProps) {
     return <TextWrapper fontWeight={400} fontSize={14} {...props} />
   },
+  SubHeader(props: TextProps) {
+    return <TextWrapper fontWeight={600} fontSize={16} color={'textPrimary'} {...props} />
+  },
   DeprecatedSmall(props: TextProps) {
     return <TextWrapper fontWeight={500} fontSize={11} {...props} />
   },

src/theme/styled.d.ts

 import { FlattenSimpleInterpolation, ThemedCssFunction } from 'styled-components/macro'
 
 export type Color = string
+export type AllColors = ThemeColors | Colors
+
 export interface ThemeColors {
   userThemeColor: string
 
@@ -20,6 +22,7 @@ export interface ThemeColors {
   accentSuccess: Color
   accentWarning: Color
   accentFailure: Color
+  accentCritical: Color
 
   accentActionSoft: Color
   accentActiveSoft: Color
@@ -52,6 +55,7 @@ export interface ThemeColors {
 
   blue200: Color
   flyoutDropShadow: Color
+  deepShadow: Color
   hoverState: Color
   hoverDefault: Color
 }