chore: remove remaining redesign flag usage (#4958)

* chore: remove redesign flag in base shared components * remove more flags * rm pending view * chore: remove liquidity redesign flags * rm searchmodal * rm searchmodal * rm searchmodal * numericalinput * rm remaining * rm flag * fix * fixes * !isactive fix * fix appbody * hoverdefault fix
2022-10-25 09:08:14 -04:00 · 2022-10-25 09:08:14 -04:00 · 2f7c5b1df4
commit 2f7c5b1df4
parent 8fca286099
18 changed files with 125 additions and 384 deletions
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@ -50,12 +50,12 @@ export const BaseButton = styled(RebassButton)<
  }
 `

-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')};
+export const ButtonPrimary = styled(BaseButton)`
+  background-color: ${({ theme }) => theme.accentAction};
+  font-size: 20px;
+  font-weight: 600;
+  padding: 16px;
+  color: ${({ theme }) => theme.accentTextLightPrimary};
  &:focus {
    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, theme.deprecated_primary1)};
    background-color: ${({ theme }) => darken(0.05, theme.deprecated_primary1)};
@ -79,35 +79,28 @@ export const ButtonPrimary = styled(BaseButton)<{ redesignFlag?: boolean }>`
  }
 `

-export const ButtonLight = styled(BaseButton)<{ redesignFlag?: boolean }>`
-  background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.accentActionSoft : theme.deprecated_primary5)};
-  color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.accentAction : theme.deprecated_primaryText1)};
-  font-size: ${({ redesignFlag }) => (redesignFlag ? '20px' : '16px')};
-  font-weight: ${({ redesignFlag }) => (redesignFlag ? '600' : '500')};
+export const ButtonLight = styled(BaseButton)`
+  background-color: ${({ theme }) => theme.accentActionSoft};
+  color: ${({ theme }) => theme.accentAction};
+  font-size: 20px;
+  font-weight: 600;

  &:focus {
-    box-shadow: 0 0 0 1pt
-      ${({ theme, disabled, redesignFlag }) =>
-        !disabled && (redesignFlag ? theme.accentActionSoft : darken(0.03, theme.deprecated_primary5))};
-    background-color: ${({ theme, disabled, redesignFlag }) =>
-      !disabled && (redesignFlag ? theme.accentActionSoft : darken(0.03, theme.deprecated_primary5))};
+    box-shadow: 0 0 0 1pt ${({ theme, disabled }) => !disabled && theme.accentActionSoft};
+    background-color: ${({ theme, disabled }) => !disabled && theme.accentActionSoft};
  }
  &:hover {
-    background-color: ${({ theme, disabled, redesignFlag }) =>
-      !disabled && (redesignFlag ? theme.accentActionSoft : darken(0.03, theme.deprecated_primary5))};
+    background-color: ${({ theme, disabled }) => !disabled && theme.accentActionSoft};
  }
  &:active {
-    box-shadow: 0 0 0 1pt
-      ${({ theme, disabled, redesignFlag }) =>
-        !disabled && (redesignFlag ? theme.accentActionSoft : darken(0.05, theme.deprecated_primary5))};
-    background-color: ${({ theme, disabled, redesignFlag }) =>
-      !disabled && (redesignFlag ? theme.accentActionSoft : darken(0.05, theme.deprecated_primary5))};
+    box-shadow: 0 0 0 1pt ${({ theme, disabled }) => !disabled && theme.accentActionSoft};
+    background-color: ${({ theme, disabled }) => !disabled && theme.accentActionSoft};
  }
  :disabled {
    opacity: 0.4;
    :hover {
      cursor: auto;
-      background-color: ${({ theme, redesignFlag }) => (redesignFlag ? 'transparent' : theme.deprecated_primary5)};
+      background-color: transparent;
      box-shadow: none;
      border: 1px solid transparent;
      outline: none;
@ -176,28 +169,22 @@ export const ButtonOutlined = styled(BaseButton)`
  }
 `

-export const ButtonYellow = styled(BaseButton)<{ redesignFlag?: boolean }>`
-  background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.accentWarningSoft : theme.deprecated_yellow3)};
-  color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.accentWarning : 'white')};
+export const ButtonYellow = styled(BaseButton)`
+  background-color: ${({ theme }) => theme.accentWarningSoft};
+  color: ${({ theme }) => theme.accentWarning};
  &:focus {
-    box-shadow: ${({ theme, redesignFlag }) => !redesignFlag && `0 0 0 1pt ${theme.deprecated_yellow3}`};
-    background-color: ${({ theme, redesignFlag }) =>
-      redesignFlag ? theme.accentWarningSoft : darken(0.05, theme.deprecated_yellow3)};
+    background-color: ${({ theme }) => theme.accentWarningSoft};
  }
  &:hover {
-    background: ${({ theme, redesignFlag }) => redesignFlag && theme.stateOverlayHover};
-    mix-blend-mode: ${({ redesignFlag }) => redesignFlag && 'normal'};
-    background-color: ${({ theme, redesignFlag }) => !redesignFlag && darken(0.05, theme.deprecated_yellow3)};
+    background: ${({ theme }) => theme.stateOverlayHover};
+    mix-blend-mode: normal;
  }
  &:active {
-    box-shadow: ${({ theme, redesignFlag }) => !redesignFlag && `0 0 0 1pt ${darken(0.1, theme.deprecated_yellow3)}`};
-    background-color: ${({ theme, redesignFlag }) =>
-      redesignFlag ? theme.accentWarningSoft : darken(0.1, theme.deprecated_yellow3)};
+    background-color: ${({ theme }) => theme.accentWarningSoft};
  }
  &:disabled {
-    background-color: ${({ theme, redesignFlag }) =>
-      redesignFlag ? theme.accentWarningSoft : theme.deprecated_yellow3};
-    opacity: ${({ redesignFlag }) => (redesignFlag ? '60%' : '50%')};
+    background-color: ${({ theme }) => theme.accentWarningSoft};
+    opacity: 60%;
    cursor: auto;
  }
 `
--- a/src/components/Loader/index.tsx
+++ b/src/components/Loader/index.tsx
@ -9,13 +9,12 @@ const rotate = keyframes`
  }
 `

-const StyledSVG = styled.svg<{ size: string; stroke?: string; redesignFlag?: boolean }>`
+const StyledSVG = styled.svg<{ size: string; stroke?: string }>`
  animation: 2s ${rotate} linear infinite;
  height: ${({ size }) => size};
  width: ${({ size }) => size};
  path {
-    stroke: ${({ stroke, redesignFlag, theme }) =>
-      redesignFlag ? theme.accentActive : stroke ?? theme.deprecated_primary1};
+    stroke: ${({ stroke, theme }) => theme.accentActive};
  }
 `

@ -27,25 +26,15 @@ 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}
-      redesignFlag={redesignFlag}
-      {...rest}
-    >
+    <StyledSVG viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" size={size} stroke={stroke} {...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={strokeWidth ?? '2.5'}
--- a/src/components/Modal/index.tsx
+++ b/src/components/Modal/index.tsx
@ -1,5 +1,4 @@
 import { DialogContent, DialogOverlay } from '@reach/dialog'
-import { transparentize } from 'polished'
 import React from 'react'
 import { animated, useSpring, useTransition } from 'react-spring'
 import { useGesture } from 'react-use-gesture'
@ -10,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)<{ redesignFlag?: boolean; scrollOverlay?: boolean }>`
+const StyledDialogOverlay = styled(AnimatedDialogOverlay)<{ scrollOverlay?: boolean }>`
  &[data-reach-dialog-overlay] {
    z-index: ${Z_INDEX.modalBackdrop};
    background-color: transparent;
@ -21,14 +20,14 @@ const StyledDialogOverlay = styled(AnimatedDialogOverlay)<{ redesignFlag?: boole
    overflow-y: ${({ scrollOverlay }) => scrollOverlay && 'scroll'};
    justify-content: center;

-    background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundScrim : theme.deprecated_modalBG)};
+    background-color: ${({ theme }) => theme.backgroundScrim};
  }
 `

 const AnimatedDialogContent = animated(DialogContent)
 // destructure to not pass custom props to Dialog DOM element
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const StyledDialogContent = styled(({ minHeight, maxHeight, mobile, isOpen, redesignFlag, scrollOverlay, ...rest }) => (
+const StyledDialogContent = styled(({ minHeight, maxHeight, mobile, isOpen, scrollOverlay, ...rest }) => (
  <AnimatedDialogContent {...rest} />
 )).attrs({
  'aria-label': 'dialog',
@ -36,11 +35,10 @@ const StyledDialogContent = styled(({ minHeight, maxHeight, mobile, isOpen, rede
  overflow-y: auto;

  &[data-reach-dialog-content] {
-    margin: ${({ redesignFlag }) => (redesignFlag ? 'auto' : '0 0 2rem 0')};
+    margin: auto;
    background-color: ${({ theme }) => theme.deprecated_bg0};
    border: 1px solid ${({ theme }) => theme.deprecated_bg1};
-    box-shadow: ${({ theme, redesignFlag }) =>
-      redesignFlag ? theme.deepShadow : `0 4px 8px 0 ${transparentize(0.95, theme.shadow1)}`};
+    box-shadow: ${({ theme }) => theme.deepShadow};
    padding: 0px;
    width: 50vw;
    overflow-y: auto;
@ -61,9 +59,9 @@ const StyledDialogContent = styled(({ minHeight, maxHeight, mobile, isOpen, rede
      `}
    display: ${({ scrollOverlay }) => (scrollOverlay ? 'inline-table' : 'flex')};
    border-radius: 20px;
-    ${({ theme, redesignFlag }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
+    ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
      width: 65vw;
-      margin: ${redesignFlag ? 'auto' : '0'};
+      margin: auto;
    `}
    ${({ theme, mobile }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
      width:  85vw;
@ -87,7 +85,6 @@ interface ModalProps {
  maxHeight?: number
  initialFocusRef?: React.RefObject<any>
  children?: React.ReactNode
-  redesignFlag?: boolean
  scrollOverlay?: boolean
 }

@ -98,7 +95,6 @@ export default function Modal({
  maxHeight = 90,
  initialFocusRef,
  children,
-  redesignFlag,
  scrollOverlay,
 }: ModalProps) {
  const fadeTransition = useTransition(isOpen, {
@ -131,7 +127,6 @@ export default function Modal({
              onDismiss={onDismiss}
              initialFocusRef={initialFocusRef}
              unstable_lockFocusAcrossFrames={false}
-              redesignFlag={redesignFlag}
              scrollOverlay={scrollOverlay}
            >
              <StyledDialogContent
@ -145,7 +140,6 @@ export default function Modal({
                minHeight={minHeight}
                maxHeight={maxHeight}
                mobile={isMobile}
-                redesignFlag={redesignFlag}
                scrollOverlay={scrollOverlay}
              >
                {/* prevents the automatic focusing of inputs on mobile by the reach dialog */}
--- a/src/components/NumericalInput/index.tsx
+++ b/src/components/NumericalInput/index.tsx
@ -1,18 +1,17 @@
-import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import React from 'react'
 import styled from 'styled-components/macro'

 import { escapeRegExp } from '../../utils'

-const StyledInput = styled.input<{ error?: boolean; fontSize?: string; align?: string; redesignFlag: boolean }>`
+const StyledInput = styled.input<{ error?: boolean; fontSize?: string; align?: string }>`
  color: ${({ error, theme }) => (error ? theme.deprecated_red1 : theme.deprecated_text1)};
  width: 0;
  position: relative;
-  font-weight: ${({ redesignFlag }) => (redesignFlag ? 400 : 500)};
+  font-weight: 400;
  outline: none;
  border: none;
  flex: 1 1 auto;
-  background-color: ${({ theme, redesignFlag }) => (redesignFlag ? 'transparent' : theme.deprecated_bg1)};
+  background-color: transparent;
  font-size: ${({ fontSize }) => fontSize ?? '28px'};
  text-align: ${({ align }) => align && align};
  white-space: nowrap;
@ -36,7 +35,7 @@ const StyledInput = styled.input<{ error?: boolean; fontSize?: string; align?: s
  }

  ::placeholder {
-    color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.textTertiary : theme.deprecated_text4)};
+    color: ${({ theme }) => theme.textTertiary};
  }
 `

@ -56,8 +55,6 @@ export const Input = React.memo(function InnerInput({
  align?: 'right' | 'left'
  prependSymbol?: string | undefined
 } & Omit<React.HTMLProps<HTMLInputElement>, 'ref' | 'onChange' | 'as'>) {
-  const redesignFlag = useRedesignFlag()
-  const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
  const enforcer = (nextUserInput: string) => {
    if (nextUserInput === '' || inputRegex.test(escapeRegExp(nextUserInput))) {
      onUserInput(nextUserInput)
@ -68,7 +65,6 @@ export const Input = React.memo(function InnerInput({
    <StyledInput
      {...rest}
      value={prependSymbol && value ? prependSymbol + value : value}
-      redesignFlag={redesignFlagEnabled}
      onChange={(event) => {
        if (prependSymbol) {
          const value = event.target.value
@ -91,7 +87,7 @@ export const Input = React.memo(function InnerInput({
      // text-specific options
      type="text"
      pattern="^[0-9]*[.,]?[0-9]*$"
-      placeholder={placeholder || (redesignFlagEnabled ? '0' : '0.0')}
+      placeholder={placeholder || '0'}
      minLength={1}
      maxLength={79}
      spellCheck="false"
--- a/src/components/Polling/ChainConnectivityWarning.tsx
+++ b/src/components/Polling/ChainConnectivityWarning.tsx
@ -2,22 +2,17 @@ import { Trans } from '@lingui/macro'
 import { useWeb3React } from '@web3-react/core'
 import { getChainInfoOrDefault, L2ChainInfo } from 'constants/chainInfo'
 import { SupportedChainId } from 'constants/chains'
-import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
-import { AlertOctagon, AlertTriangle } from 'react-feather'
+import { AlertTriangle } from 'react-feather'
 import styled from 'styled-components/macro'
 import { ExternalLink, MEDIA_WIDTHS } from 'theme'

-const BodyRow = styled.div<{ $redesignFlag?: boolean }>`
-  color: ${({ theme, $redesignFlag }) => ($redesignFlag ? theme.textPrimary : theme.black)};
+const BodyRow = styled.div`
+  color: ${({ theme }) => theme.textPrimary};
  font-size: 12px;
-  font-weight: ${({ $redesignFlag }) => $redesignFlag && '400'};
-  font-size: ${({ $redesignFlag }) => ($redesignFlag ? '14px' : '12px')};
-  line-height: ${({ $redesignFlag }) => $redesignFlag && '20px'};
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
 `
-const CautionOctagon = styled(AlertOctagon)`
-  color: ${({ theme }) => theme.deprecated_black};
-`
-
 const CautionTriangle = styled(AlertTriangle)`
  color: ${({ theme }) => theme.accentWarning};
 `
@ -31,15 +26,15 @@ const TitleRow = styled.div`
  justify-content: flex-start;
  margin-bottom: 8px;
 `
-const TitleText = styled.div<{ redesignFlag?: boolean }>`
-  color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.textPrimary : theme.black)};
-  font-weight: ${({ redesignFlag }) => (redesignFlag ? '500' : '600')};
+const TitleText = styled.div`
+  color: ${({ theme }) => theme.textPrimary};
+  font-weight: 500;
  font-size: 16px;
-  line-height: ${({ redesignFlag }) => (redesignFlag ? '24px' : '20px')};
+  line-height: 24px;
  margin: 0px 12px;
 `
-const Wrapper = styled.div<{ redesignFlag?: boolean }>`
-  background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundSurface : theme.deprecated_yellow3)};
+const Wrapper = styled.div`
+  background-color: ${({ theme }) => theme.backgroundSurface};
  border-radius: 12px;
  border: 1px solid ${({ theme }) => theme.backgroundOutline};
  bottom: 60px;
@ -57,17 +52,16 @@ export function ChainConnectivityWarning() {
  const { chainId } = useWeb3React()
  const info = getChainInfoOrDefault(chainId)
  const label = info?.label
-  const redesignFlag = useRedesignFlag() === RedesignVariant.Enabled

  return (
-    <Wrapper redesignFlag={redesignFlag}>
+    <Wrapper>
      <TitleRow>
-        {redesignFlag ? <CautionTriangle /> : <CautionOctagon />}
-        <TitleText redesignFlag={redesignFlag}>
+        <CautionTriangle />
+        <TitleText>
          <Trans>Network Warning</Trans>
        </TitleText>
      </TitleRow>
-      <BodyRow $redesignFlag={redesignFlag}>
+      <BodyRow>
        {chainId === SupportedChainId.MAINNET ? (
          <Trans>You may have lost your network connection.</Trans>
        ) : (
--- a/src/components/SearchModal/CommonBases.tsx
+++ b/src/components/SearchModal/CommonBases.tsx
@ -6,7 +6,6 @@ import { AutoColumn } from 'components/Column'
 import CurrencyLogo from 'components/CurrencyLogo'
 import { AutoRow } from 'components/Row'
 import { COMMON_BASES } from 'constants/routing'
-import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import { useTokenInfoFromActiveList } from 'hooks/useTokenInfoFromActiveList'
 import { Text } from 'rebass'
 import styled from 'styled-components/macro'
@ -18,17 +17,9 @@ const MobileWrapper = styled(AutoColumn)`
  `};
 `

-const BaseWrapper = styled.div<{ disable?: boolean; redesignFlag?: boolean }>`
-  border: 1px solid
-    ${({ theme, disable, redesignFlag }) =>
-      disable
-        ? redesignFlag
-          ? theme.accentAction
-          : 'transparent'
-        : redesignFlag
-        ? theme.backgroundOutline
-        : theme.deprecated_bg3};
-  border-radius: ${({ redesignFlag }) => (redesignFlag ? '16px' : '10px')};
+const BaseWrapper = styled.div<{ disable?: boolean }>`
+  border: 1px solid ${({ theme, disable }) => (disable ? theme.accentAction : theme.backgroundOutline)};
+  border-radius: 16px;
  display: flex;
  padding: 6px;
  padding-right: 12px;
@ -36,15 +27,11 @@ const BaseWrapper = styled.div<{ disable?: boolean; redesignFlag?: boolean }>`
  align-items: center;
  :hover {
    cursor: ${({ disable }) => !disable && 'pointer'};
-    background-color: ${({ theme, disable, redesignFlag }) =>
-      (redesignFlag && theme.hoverDefault) || (!disable && theme.deprecated_bg2)};
+    background-color: ${({ theme }) => theme.hoverDefault};
  }

-  color: ${({ theme, disable, redesignFlag }) =>
-    disable && (redesignFlag ? theme.accentAction : theme.deprecated_text3)};
-  background-color: ${({ theme, disable, redesignFlag }) =>
-    disable && (redesignFlag ? theme.accentActionSoft : theme.deprecated_bg3)};
-  filter: ${({ disable, redesignFlag }) => disable && !redesignFlag && 'grayscale(1)'};
+  color: ${({ theme, disable }) => disable && theme.accentAction};
+  background-color: ${({ theme, disable }) => disable && theme.accentActionSoft};
 `

 const formatAnalyticsEventProperties = (currency: Currency, searchQuery: string, isAddressSearch: string | false) => ({
@ -73,8 +60,6 @@ export default function CommonBases({
  isAddressSearch: string | false
 }) {
  const bases = typeof chainId !== 'undefined' ? COMMON_BASES[chainId] ?? [] : []
-  const redesignFlag = useRedesignFlag()
-  const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled

  return bases.length > 0 ? (
    <MobileWrapper gap="md">
@ -95,7 +80,6 @@ export default function CommonBases({
                onKeyPress={(e) => !isSelected && e.key === 'Enter' && onSelect(currency)}
                onClick={() => !isSelected && onSelect(currency)}
                disable={isSelected}
-                redesignFlag={redesignFlagEnabled}
                key={currencyId(currency)}
              >
                <CurrencyLogoFromList currency={currency} />
--- a/src/components/SearchModal/CurrencyList/index.tsx
+++ b/src/components/SearchModal/CurrencyList/index.tsx
@ -4,7 +4,6 @@ import { ElementName, Event, EventName } from 'analytics/constants'
 import { TraceEvent } from 'analytics/TraceEvent'
 import TokenSafetyIcon from 'components/TokenSafety/TokenSafetyIcon'
 import { checkWarning } from 'constants/tokenSafety'
-import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import { CSSProperties, MutableRefObject, useCallback, useMemo } from 'react'
 import { XOctagon } from 'react-feather'
 import { Check } from 'react-feather'
@ -128,7 +127,6 @@ export function CurrencyRow({
  const customAdded = useIsUserAddedToken(currency)
  const balance = useCurrencyBalance(account ?? undefined, currency)
  const warning = currency.isNative ? null : checkWarning(currency.address)
-  const redesignFlagEnabled = useRedesignFlag() === RedesignVariant.Enabled
  const isBlockedToken = !!warning && !warning.canProceed
  const blockedTokenOpacity = '0.6'

@ -142,7 +140,6 @@ export function CurrencyRow({
    >
      <MenuItem
        tabIndex={0}
-        redesignFlag={redesignFlagEnabled}
        style={style}
        className={`token-item-${key}`}
        onKeyPress={(e) => (!isSelected && e.key === 'Enter' ? onSelect(!!warning) : null)}
@ -176,10 +173,9 @@ export function CurrencyRow({
        {showCurrencyAmount ? (
          <RowFixed style={{ justifySelf: 'flex-end' }}>
            {balance ? <Balance balance={balance} /> : account ? <Loader /> : null}
-            {redesignFlagEnabled && isSelected && <CheckIcon />}
+            {isSelected && <CheckIcon />}
          </RowFixed>
        ) : (
-          redesignFlagEnabled &&
          isSelected && (
            <RowFixed style={{ justifySelf: 'flex-end' }}>
              <CheckIcon />
--- a/src/components/SearchModal/CurrencySearch.tsx
+++ b/src/components/SearchModal/CurrencySearch.tsx
@ -5,7 +5,6 @@ import { useWeb3React } from '@web3-react/core'
 import { EventName, ModalName } from 'analytics/constants'
 import { Trace } from 'analytics/Trace'
 import { sendEvent } from 'components/analytics'
-import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import useDebounce from 'hooks/useDebounce'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import useToggle from 'hooks/useToggle'
@ -29,8 +28,8 @@ import { CurrencyRow, formatAnalyticsEventProperties } from './CurrencyList'
 import CurrencyList from './CurrencyList'
 import { PaddedColumn, SearchInput, Separator } from './styleds'

-const ContentWrapper = styled(Column)<{ redesignFlag?: boolean }>`
-  background-color: ${({ theme, redesignFlag }) => redesignFlag && theme.backgroundSurface};
+const ContentWrapper = styled(Column)`
+  background-color: ${({ theme }) => theme.backgroundSurface};
  width: 100%;
  flex: 1 1;
  position: relative;
@ -57,9 +56,6 @@ export function CurrencySearch({
  onDismiss,
  isOpen,
 }: CurrencySearchProps) {
-  const redesignFlag = useRedesignFlag()
-  const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
-
  const { chainId } = useWeb3React()
  const theme = useTheme()

@ -177,7 +173,7 @@ export function CurrencySearch({
  }, [])

  return (
-    <ContentWrapper redesignFlag={redesignFlagEnabled}>
+    <ContentWrapper>
      <Trace name={EventName.TOKEN_SELECTOR_OPENED} modal={ModalName.TOKEN_SELECTOR} shouldLogImpression>
        <PaddedColumn gap="16px">
          <RowBetween>
@ -192,7 +188,6 @@ export function CurrencySearch({
              id="token-search-input"
              placeholder={t`Search name or paste address`}
              autoComplete="off"
-              redesignFlag={redesignFlagEnabled}
              value={searchQuery}
              ref={inputRef as RefObject<HTMLInputElement>}
              onChange={handleInput}
@ -209,7 +204,7 @@ export function CurrencySearch({
            />
          )}
        </PaddedColumn>
-        <Separator redesignFlag={redesignFlagEnabled} />
+        <Separator />
        {searchToken && !searchTokenIsAdded ? (
          <Column style={{ padding: '20px 0', height: '100%' }}>
            <CurrencyRow
--- a/src/components/SearchModal/styleds.tsx
+++ b/src/components/SearchModal/styleds.tsx
@ -22,7 +22,7 @@ export const PaddedColumn = styled(AutoColumn)`
  padding: 20px;
 `

-export const MenuItem = styled(RowBetween)<{ redesignFlag?: boolean; dim?: boolean }>`
+export const MenuItem = styled(RowBetween)<{ dim?: boolean }>`
  padding: 4px 20px;
  height: 56px;
  display: grid;
@ -31,13 +31,12 @@ export const MenuItem = styled(RowBetween)<{ redesignFlag?: boolean; dim?: boole
  cursor: ${({ disabled }) => !disabled && 'pointer'};
  pointer-events: ${({ disabled }) => disabled && 'none'};
  :hover {
-    background-color: ${({ theme, disabled, redesignFlag }) =>
-      (redesignFlag && theme.hoverDefault) || (!disabled && theme.deprecated_bg2)};
+    background-color: ${({ theme }) => theme.hoverDefault};
  }
  opacity: ${({ disabled, selected, dim }) => (dim || disabled || selected ? 0.4 : 1)};
 `

-export const SearchInput = styled.input<{ redesignFlag?: boolean }>`
+export const SearchInput = styled.input`
  background: no-repeat scroll 7px 7px;
  background-image: url(${searchIcon});
  background-size: 20px 20px;
@ -46,37 +45,36 @@ export const SearchInput = styled.input<{ redesignFlag?: boolean }>`
  display: flex;
  padding: 16px;
  padding-left: 40px;
-  height: ${({ redesignFlag }) => redesignFlag && '40px'};
+  height: 40px;
  align-items: center;
  width: 100%;
  white-space: nowrap;
-  background-color: ${({ theme, redesignFlag }) => redesignFlag && theme.backgroundModule};
+  background-color: ${({ theme }) => theme.backgroundModule};
  border: none;
  outline: none;
-  border-radius: ${({ redesignFlag }) => (redesignFlag ? '12px' : '20px')};
+  border-radius: 12px;
  color: ${({ theme }) => theme.deprecated_text1};
  border-style: solid;
-  border: 1px solid ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundOutline : theme.deprecated_bg3)};
+  border: 1px solid ${({ theme }) => theme.backgroundOutline};
  -webkit-appearance: none;

-  font-size: ${({ redesignFlag }) => (redesignFlag ? '16px' : '18px')};
+  font-size: 16px;

  ::placeholder {
-    color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.textTertiary : theme.deprecated_text3)};
-    font-size: ${({ redesignFlag }) => redesignFlag && '16px'};
+    color: ${({ theme }) => theme.textTertiary};
+    font-size: 16px;
  }
  transition: border 100ms;
  :focus {
-    border: 1px solid
-      ${({ theme, redesignFlag }) => (redesignFlag ? theme.accentActiveSoft : theme.deprecated_primary1)};
-    background-color: ${({ theme, redesignFlag }) => redesignFlag && theme.backgroundSurface};
+    border: 1px solid ${({ theme }) => theme.accentActiveSoft};
+    background-color: ${({ theme }) => theme.backgroundSurface};
    outline: none;
  }
 `
-export const Separator = styled.div<{ redesignFlag?: boolean }>`
+export const Separator = styled.div`
  width: 100%;
  height: 1px;
-  background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundOutline : theme.deprecated_bg2)};
+  background-color: ${({ theme }) => theme.backgroundOutline};
 `

 export const SeparatorDark = styled.div`
--- a/src/components/Settings/index.tsx
+++ b/src/components/Settings/index.tsx
@ -3,7 +3,6 @@ import { t, Trans } from '@lingui/macro'
 import { Percent } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
 import { sendEvent } from 'components/analytics'
-import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import { isSupportedChainId } from 'lib/hooks/routing/clientSideSmartOrderRouter'
 import { useRef, useState } from 'react'
 import { Settings, X } from 'react-feather'
@ -23,16 +22,16 @@ import { RowBetween, RowFixed } from '../Row'
 import Toggle from '../Toggle'
 import TransactionSettings from '../TransactionSettings'

-const StyledMenuIcon = styled(Settings)<{ redesignFlag: boolean }>`
+const StyledMenuIcon = styled(Settings)`
  height: 20px;
  width: 20px;

  > * {
-    stroke: ${({ theme, redesignFlag }) => (redesignFlag ? theme.textSecondary : theme.deprecated_text1)};
+    stroke: ${({ theme }) => theme.textSecondary};
  }
 `

-const StyledCloseIcon = styled(X)<{ redesignFlag: boolean }>`
+const StyledCloseIcon = styled(X)`
  height: 20px;
  width: 20px;
  :hover {
@ -40,7 +39,7 @@ const StyledCloseIcon = styled(X)<{ redesignFlag: boolean }>`
  }

  > * {
-    stroke: ${({ theme, redesignFlag }) => (redesignFlag ? theme.textSecondary : theme.deprecated_text1)};
+    stroke: ${({ theme }) => theme.textSecondary};
  }
 `

@ -83,10 +82,10 @@ const StyledMenu = styled.div`
  text-align: left;
 `

-const MenuFlyout = styled.span<{ redesignFlag: boolean }>`
+const MenuFlyout = styled.span`
  min-width: 20.125rem;
-  background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundSurface : theme.deprecated_bg2)};
-  border: 1px solid ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundOutline : theme.deprecated_bg3)};
+  background-color: ${({ theme }) => theme.backgroundSurface};
+  border: 1px solid ${({ theme }) => theme.backgroundOutline};
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
    0px 24px 32px rgba(0, 0, 0, 0.01);
  border-radius: 12px;
@ -97,7 +96,7 @@ const MenuFlyout = styled.span<{ redesignFlag: boolean }>`
  top: 2rem;
  right: 0rem;
  z-index: 100;
-  color: ${({ theme, redesignFlag }) => redesignFlag && theme.textPrimary};
+  color: ${({ theme }) => theme.textPrimary};

  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
    min-width: 18.125rem;
@ -123,8 +122,6 @@ const ModalContentWrapper = styled.div`

 export default function SettingsTab({ placeholderSlippage }: { placeholderSlippage: Percent }) {
  const { chainId } = useWeb3React()
-  const redesignFlag = useRedesignFlag()
-  const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled

  const node = useRef<HTMLDivElement>()
  const open = useModalIsOpen(ApplicationModal.SETTINGS)
@ -152,7 +149,7 @@ export default function SettingsTab({ placeholderSlippage }: { placeholderSlippa
              <Text fontWeight={500} fontSize={20}>
                <Trans>Are you sure?</Trans>
              </Text>
-              <StyledCloseIcon onClick={() => setShowConfirmation(false)} redesignFlag={redesignFlagEnabled} />
+              <StyledCloseIcon onClick={() => setShowConfirmation(false)} />
            </RowBetween>
            <Break />
            <AutoColumn gap="lg" style={{ padding: '0 2rem' }}>
@ -190,7 +187,7 @@ export default function SettingsTab({ placeholderSlippage }: { placeholderSlippa
        id="open-settings-dialog-button"
        aria-label={t`Transaction Settings`}
      >
-        <StyledMenuIcon redesignFlag={redesignFlagEnabled} />
+        <StyledMenuIcon />
        {expertMode ? (
          <EmojiWrapper>
            <span role="img" aria-label="wizard-icon">
@ -200,10 +197,10 @@ export default function SettingsTab({ placeholderSlippage }: { placeholderSlippa
        ) : null}
      </StyledMenuButton>
      {open && (
-        <MenuFlyout redesignFlag={redesignFlagEnabled}>
+        <MenuFlyout>
          <AutoColumn gap="md" style={{ padding: '1rem' }}>
            <Text fontWeight={600} fontSize={14}>
-              <Trans>{redesignFlagEnabled ? 'Settings' : 'Transaction Settings'}</Trans>
+              <Trans>Settings</Trans>
            </Text>
            <TransactionSettings placeholderSlippage={placeholderSlippage} />
            <Text fontWeight={600} fontSize={14}>
--- a/src/components/Toggle/index.tsx
+++ b/src/components/Toggle/index.tsx
@ -1,23 +1,16 @@
-import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import { darken } from 'polished'
 import { useState } from 'react'
 import styled, { keyframes } from 'styled-components/macro'

-const Wrapper = styled.button<{ isActive?: boolean; activeElement?: boolean; redesignFlag: boolean }>`
+const Wrapper = styled.button<{ isActive?: boolean; activeElement?: boolean }>`
  align-items: center;
-  background: ${({ isActive, theme, redesignFlag }) =>
-    redesignFlag && isActive
-      ? theme.accentActionSoft
-      : redesignFlag && !isActive
-      ? 'transparent'
-      : theme.deprecated_bg1};
-  border: ${({ redesignFlag, theme, isActive }) =>
-    redesignFlag && !isActive ? `1px solid ${theme.backgroundOutline}` : 'none'};
+  background: ${({ isActive, theme }) => (isActive ? theme.accentActionSoft : 'transparent')};
+  border: ${({ theme, isActive }) => (isActive ? 'none' : `1px solid ${theme.backgroundOutline}`)};
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  outline: none;
-  padding: ${({ redesignFlag }) => (redesignFlag ? '4px' : '0.4rem 0.4rem')};
+  padding: 4px;
  width: fit-content;
 `

@ -64,8 +57,8 @@ const ToggleElement = styled.span<{ isActive?: boolean; bgColor?: string; isInit
  :hover {
    ${({ bgColor, theme, isActive }) => ToggleElementHoverStyle(!!bgColor, theme, isActive)}
  }
-  margin-left: ${({ isActive }) => (isActive ? '2.2em' : '0em')};
-  margin-right: ${({ isActive }) => (!isActive ? '2.2em' : '0em')};
+  margin-left: ${({ isActive }) => isActive && '2.2em'};
+  margin-right: ${({ isActive }) => !isActive && '2.2em'};
  width: 24px;
 `

@ -78,8 +71,6 @@ interface ToggleProps {

 export default function Toggle({ id, bgColor, isActive, toggle }: ToggleProps) {
  const [isInitialToggleLoad, setIsInitialToggleLoad] = useState(true)
-  const redesignFlag = useRedesignFlag()
-  const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled

  const switchToggle = () => {
    toggle()
@ -87,7 +78,7 @@ export default function Toggle({ id, bgColor, isActive, toggle }: ToggleProps) {
  }

  return (
-    <Wrapper id={id} isActive={isActive} onClick={switchToggle} redesignFlag={redesignFlagEnabled}>
+    <Wrapper id={id} isActive={isActive} onClick={switchToggle}>
      <ToggleElement isActive={isActive} bgColor={bgColor} isInitialToggleLoad={isInitialToggleLoad} />
    </Wrapper>
  )
--- a/src/components/TransactionConfirmationModal/index.tsx
+++ b/src/components/TransactionConfirmationModal/index.tsx
@ -4,7 +4,6 @@ import { useWeb3React } from '@web3-react/core'
 import Badge from 'components/Badge'
 import { getChainInfo } from 'constants/chainInfo'
 import { SupportedL2ChainId } from 'constants/chains'
-import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import useCurrencyLogoURIs from 'lib/hooks/useCurrencyLogoURIs'
 import { ReactNode, useCallback, useState } from 'react'
 import { AlertCircle, AlertTriangle, ArrowUpCircle, CheckCircle } from 'react-feather'
@ -24,9 +23,9 @@ import Modal from '../Modal'
 import { RowBetween, RowFixed } from '../Row'
 import AnimatedConfirmation from './AnimatedConfirmation'

-const Wrapper = styled.div<{ redesignFlag?: boolean }>`
-  background-color: ${({ redesignFlag, theme }) => redesignFlag && theme.backgroundSurface};
-  outline: ${({ redesignFlag, theme }) => redesignFlag && `1px solid ${theme.backgroundOutline}`};
+const Wrapper = styled.div`
+  background-color: ${({ theme }) => theme.backgroundSurface};
+  outline: ${({ theme }) => `1px solid ${theme.backgroundOutline}`};
  width: 100%;
  padding: 1rem;
 `
@ -59,11 +58,9 @@ function ConfirmationPendingContent({
  pendingText: ReactNode
  inline?: boolean // not in modal
 }) {
-  const redesignFlag = useRedesignFlag()
-  const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
  const theme = useTheme()

-  return redesignFlagEnabled ? (
+  return (
    <Wrapper>
      <AutoColumn gap="md">
        {!inline && (
@ -88,31 +85,6 @@ function ConfirmationPendingContent({
        </AutoColumn>
      </AutoColumn>
    </Wrapper>
-  ) : (
-    <Wrapper>
-      <AutoColumn gap="md">
-        {!inline && (
-          <RowBetween>
-            <div />
-            <CloseIcon onClick={onDismiss} />
-          </RowBetween>
-        )}
-        <ConfirmedIcon inline={inline}>
-          <CustomLightSpinner src={Circle} alt="loader" size={inline ? '40px' : '90px'} />
-        </ConfirmedIcon>
-        <AutoColumn gap="12px" justify={'center'}>
-          <Text fontWeight={500} fontSize={20} textAlign="center">
-            <Trans>Waiting For Confirmation</Trans>
-          </Text>
-          <Text fontWeight={400} fontSize={16} textAlign="center">
-            {pendingText}
-          </Text>
-          <Text fontWeight={500} fontSize={14} color="#565A69" textAlign="center" marginBottom="12px">
-            <Trans>Confirm this transaction in your wallet</Trans>
-          </Text>
-        </AutoColumn>
-      </AutoColumn>
-    </Wrapper>
  )
 }
 function TransactionSubmittedContent({
@ -135,9 +107,6 @@ function TransactionSubmittedContent({
  const token = currencyToAdd?.wrapped
  const logoURL = useCurrencyLogoURIs(token)[0]

-  const redesignFlag = useRedesignFlag()
-  const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
-
  const [success, setSuccess] = useState<boolean | undefined>()

  const addToken = useCallback(() => {
@ -153,7 +122,7 @@ function TransactionSubmittedContent({
      .catch(() => setSuccess(false))
  }, [connector, logoURL, token])

-  return redesignFlagEnabled ? (
+  return (
    <Wrapper>
      <Section inline={inline}>
        {!inline && (
@ -198,51 +167,6 @@ function TransactionSubmittedContent({
        </AutoColumn>
      </Section>
    </Wrapper>
-  ) : (
-    <Wrapper>
-      <Section inline={inline}>
-        {!inline && (
-          <RowBetween>
-            <div />
-            <CloseIcon onClick={onDismiss} />
-          </RowBetween>
-        )}
-        <ConfirmedIcon inline={inline}>
-          <ArrowUpCircle strokeWidth={0.5} size={inline ? '40px' : '90px'} color={theme.deprecated_primary1} />
-        </ConfirmedIcon>
-        <AutoColumn gap="12px" justify={'center'}>
-          <Text fontWeight={500} fontSize={20} textAlign="center">
-            <Trans>Transaction Submitted</Trans>
-          </Text>
-          {chainId && hash && (
-            <ExternalLink href={getExplorerLink(chainId, hash, ExplorerDataType.TRANSACTION)}>
-              <Text fontWeight={500} fontSize={14} color={theme.deprecated_primary1}>
-                <Trans>View on Explorer</Trans>
-              </Text>
-            </ExternalLink>
-          )}
-          {currencyToAdd && connector.watchAsset && (
-            <ButtonLight mt="12px" padding="6px 12px" width="fit-content" onClick={addToken}>
-              {!success ? (
-                <RowFixed>
-                  <Trans>Add {currencyToAdd.symbol}</Trans>
-                </RowFixed>
-              ) : (
-                <RowFixed>
-                  <Trans>Added {currencyToAdd.symbol} </Trans>
-                  <CheckCircle size={'16px'} stroke={theme.deprecated_green1} style={{ marginLeft: '6px' }} />
-                </RowFixed>
-              )}
-            </ButtonLight>
-          )}
-          <ButtonPrimary onClick={onDismiss} style={{ margin: '20px 0 0 0' }}>
-            <Text fontWeight={500} fontSize={20}>
-              {inline ? <Trans>Return</Trans> : <Trans>Close</Trans>}
-            </Text>
-          </ButtonPrimary>
-        </AutoColumn>
-      </Section>
-    </Wrapper>
  )
 }

@ -274,50 +198,21 @@ export function ConfirmationModalContent({
 }

 export function TransactionErrorContent({ message, onDismiss }: { message: ReactNode; onDismiss: () => void }) {
-  const redesignFlag = useRedesignFlag()
-  const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
  const theme = useTheme()
-  return redesignFlagEnabled ? (
-    <Wrapper redesignFlag={true}>
+  return (
+    <Wrapper>
      <Section>
        <RowBetween>
          <Text fontWeight={600} fontSize={16}>
            <Trans>Error</Trans>
          </Text>
-          <CloseIcon onClick={onDismiss} redesignFlag={true} />
+          <CloseIcon onClick={onDismiss} />
        </RowBetween>
        <AutoColumn style={{ marginTop: 20, padding: '2rem 0' }} gap="24px" justify="center">
          <AlertTriangle color={theme.accentCritical} style={{ strokeWidth: 1 }} size={90} />
          <ThemedText.MediumHeader textAlign="center">{message}</ThemedText.MediumHeader>
        </AutoColumn>
      </Section>
-      <BottomSection gap="12px">
-        <ButtonPrimary onClick={onDismiss} redesignFlag={true}>
-          <Trans>Dismiss</Trans>
-        </ButtonPrimary>
-      </BottomSection>
-    </Wrapper>
-  ) : (
-    <Wrapper>
-      <Section>
-        <RowBetween>
-          <Text fontWeight={500} fontSize={20}>
-            <Trans>Error</Trans>
-          </Text>
-          <CloseIcon onClick={onDismiss} />
-        </RowBetween>
-        <AutoColumn style={{ marginTop: 20, padding: '2rem 0' }} gap="24px" justify="center">
-          <AlertTriangle color={theme.deprecated_red1} style={{ strokeWidth: 1.5 }} size={64} />
-          <Text
-            fontWeight={500}
-            fontSize={16}
-            color={theme.deprecated_red1}
-            style={{ textAlign: 'center', width: '85%', wordBreak: 'break-word' }}
-          >
-            {message}
-          </Text>
-        </AutoColumn>
-      </Section>
      <BottomSection gap="12px">
        <ButtonPrimary onClick={onDismiss}>
          <Trans>Dismiss</Trans>
@ -447,14 +342,12 @@ export default function TransactionConfirmationModal({
  currencyToAdd,
 }: ConfirmationModalProps) {
  const { chainId } = useWeb3React()
-  const redesignFlag = useRedesignFlag()
-  const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled

  if (!chainId) return null

  // confirmation screen
  return (
-    <Modal isOpen={isOpen} scrollOverlay={true} onDismiss={onDismiss} maxHeight={90} redesignFlag={redesignFlagEnabled}>
+    <Modal isOpen={isOpen} scrollOverlay={true} onDismiss={onDismiss} maxHeight={90}>
      {isL2ChainId(chainId) && (hash || attemptingTxn) ? (
        <L2Content chainId={chainId} hash={hash} onDismiss={onDismiss} pendingText={pendingText} />
      ) : attemptingTxn ? (
--- a/src/components/WalletModal/PendingView.tsx
+++ b/src/components/WalletModal/PendingView.tsx
@ -1,7 +1,6 @@
 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'
@ -74,10 +73,7 @@ export default function PendingView({
  tryActivation: (connector: Connector) => void
  openOptions: () => void
 }) {
-  const redesignFlag = useRedesignFlag()
-  const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
-
-  return redesignFlagEnabled ? (
+  return (
    <PendingSection>
      <LoadingMessage>
        <LoadingWrapper>
@ -94,7 +90,6 @@ export default function PendingView({
              </ThemedText.BodyPrimary>
              <ButtonPrimary
                $borderRadius="12px"
-                redesignFlag={true}
                onClick={() => {
                  tryActivation(connector)
                }}
@ -111,7 +106,7 @@ export default function PendingView({
            <>
              <WaitingToConnectSection>
                <LoaderContainer style={{ padding: '16px 0px' }}>
-                  <Loader redesignFlag={true} strokeWidth={0.8} size="100px" />
+                  <Loader strokeWidth={0.8} size="100px" />
                </LoaderContainer>
                <ThemedText.MediumHeader>
                  <Trans>Waiting to connect</Trans>
@ -125,47 +120,5 @@ export default function PendingView({
        </LoadingWrapper>
      </LoadingMessage>
    </PendingSection>
-  ) : (
-    <PendingSection>
-      <LoadingMessage>
-        <LoadingWrapper>
-          {error ? (
-            <ErrorGroup>
-              <ThemedText.DeprecatedMediumHeader marginBottom={12}>
-                <Trans>Error connecting</Trans>
-              </ThemedText.DeprecatedMediumHeader>
-              <ThemedText.DeprecatedBody fontSize={14} marginBottom={36} textAlign="center">
-                <Trans>
-                  The connection attempt failed. Please click try again and follow the steps to connect in your wallet.
-                </Trans>
-              </ThemedText.DeprecatedBody>
-              <ButtonPrimary
-                $borderRadius="12px"
-                padding="12px"
-                onClick={() => {
-                  tryActivation(connector)
-                }}
-              >
-                <Trans>Try Again</Trans>
-              </ButtonPrimary>
-              <ButtonEmpty width="fit-content" padding="0" marginTop={20}>
-                <ThemedText.DeprecatedLink fontSize={12} onClick={openOptions}>
-                  <Trans>Back to wallet selection</Trans>
-                </ThemedText.DeprecatedLink>
-              </ButtonEmpty>
-            </ErrorGroup>
-          ) : (
-            <>
-              <ThemedText.DeprecatedBlack fontSize={20} marginY={16}>
-                <LoaderContainer>
-                  <Loader stroke="currentColor" size="32px" />
-                </LoaderContainer>
-                <Trans>Connecting...</Trans>
-              </ThemedText.DeprecatedBlack>
-            </>
-          )}
-        </LoadingWrapper>
-      </LoadingMessage>
-    </PendingSection>
  )
 }
--- a/src/featureFlags/flags/redesign.ts
+++ b/src/featureFlags/flags/redesign.ts
@ -1,7 +0,0 @@
-import { BaseVariant } from '../index'
-
-export function useRedesignFlag(): BaseVariant {
-  return BaseVariant.Enabled
-}
-
-export { BaseVariant as RedesignVariant }
--- a/src/pages/AddLiquidity/index.tsx
+++ b/src/pages/AddLiquidity/index.tsx
@ -8,7 +8,6 @@ import { ElementName, Event, EventName } from 'analytics/constants'
 import { TraceEvent } from 'analytics/TraceEvent'
 import { sendEvent } from 'components/analytics'
 import UnsupportedCurrencyFooter from 'components/swap/UnsupportedCurrencyFooter'
-import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import useParsedQueryString from 'hooks/useParsedQueryString'
 import { useCallback, useEffect, useState } from 'react'
 import { AlertTriangle } from 'react-feather'
@ -88,8 +87,6 @@ export default function AddLiquidity() {
  } = useParams<{ currencyIdA?: string; currencyIdB?: string; feeAmount?: string; tokenId?: string }>()
  const { account, chainId, provider } = useWeb3React()
  const theme = useTheme()
-  const redesignFlag = useRedesignFlag()
-  const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled

  const toggleWalletModal = useToggleWalletModal() // toggle wallet when disconnected
  const expertMode = useIsExpertMode()
@ -881,7 +878,6 @@ export default function AddLiquidity() {
                                    marginRight="8px"
                                    $borderRadius="8px"
                                    width="auto"
-                                    redesignFlag={redesignFlagEnabled}
                                    onClick={() => {
                                      setShowCapitalEfficiencyWarning(false)
                                      getSetFullRange()
--- a/src/pages/App.tsx
+++ b/src/pages/App.tsx
@ -5,7 +5,6 @@ import Loader from 'components/Loader'
 import TopLevelModals from 'components/TopLevelModals'
 import { useFeatureFlagsIsLoaded } from 'featureFlags'
 import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
-import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import ApeModeQueryParamReader from 'hooks/useApeModeQueryParamReader'
 import { lazy, Suspense, useEffect } from 'react'
 import { Navigate, Route, Routes, useLocation } from 'react-router-dom'
@ -48,12 +47,10 @@ const Collection = lazy(() => import('nft/pages/collection'))
 const Profile = lazy(() => import('nft/pages/profile/profile'))
 const Asset = lazy(() => import('nft/pages/asset/Asset'))

-const AppWrapper = styled.div<{ redesignFlagEnabled: boolean }>`
+const AppWrapper = styled.div`
  display: flex;
  flex-flow: column;
  align-items: flex-start;
-  font-feature-settings: ${({ redesignFlagEnabled }) =>
-    redesignFlagEnabled ? undefined : "'ss01' on, 'ss02' on, 'cv01' on, 'cv03' on"};
 `

 const BodyWrapper = styled.div`
@ -113,7 +110,6 @@ const LazyLoadSpinner = () => (
 export default function App() {
  const isLoaded = useFeatureFlagsIsLoaded()
  const nftFlag = useNftFlag()
-  const redesignFlagEnabled = useRedesignFlag() === RedesignVariant.Enabled

  const { pathname } = useLocation()
  const currentPage = getCurrentPageFromLocation(pathname)
@ -151,7 +147,7 @@ export default function App() {
    <ErrorBoundary>
      <DarkModeQueryParamReader />
      <ApeModeQueryParamReader />
-      <AppWrapper redesignFlagEnabled={redesignFlagEnabled}>
+      <AppWrapper>
        <Trace page={currentPage}>
          <HeaderWrapper>
            <NavBar />
--- a/src/pages/AppBody.tsx
+++ b/src/pages/AppBody.tsx
@ -1,36 +1,25 @@
-import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import React from 'react'
 import styled from 'styled-components/macro'
 import { Z_INDEX } from 'theme/zIndex'

-export const BodyWrapper = styled.main<{ margin?: string; maxWidth?: string; redesignFlag?: boolean }>`
+export const BodyWrapper = styled.main<{ margin?: string; maxWidth?: string }>`
  position: relative;
  margin-top: ${({ margin }) => margin ?? '0px'};
-  max-width: ${({ maxWidth, redesignFlag }) => maxWidth ?? (redesignFlag ? '420px' : '480px')};
+  max-width: ${({ maxWidth }) => maxWidth ?? '420px'};
  width: 100%;
-  background: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundSurface : theme.deprecated_bg0)};
-  border-radius: ${({ redesignFlag }) => (redesignFlag ? '16px' : '24px')};
-  border: 1px solid ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundOutline : 'transparent')};
+  background: ${({ theme }) => theme.backgroundSurface};
+  border-radius: 16px;
+  border: 1px solid ${({ theme }) => theme.backgroundOutline};
  margin-top: 1rem;
  margin-left: auto;
  margin-right: auto;
  z-index: ${Z_INDEX.deprecated_content};
-  font-feature-settings: ${({ redesignFlag }) =>
-    redesignFlag ? "'ss01' on, 'ss02' on, 'cv01' on, 'cv03' on" : "'ss01' on, 'ss02' on, 'cv01' on, 'cv03' on"};
-  box-shadow: ${({ redesignFlag }) =>
-    !redesignFlag &&
-    '0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 24px 32px rgba(0, 0, 0, 0.01)'};
+  font-feature-settings: 'ss01' on, 'ss02' on, 'cv01' on, 'cv03' on;
 `

 /**
 * The styled container element that wraps the content of most pages and the tabs.
 */
 export default function AppBody({ children, ...rest }: { children: React.ReactNode }) {
-  const redesignFlag = useRedesignFlag()
-  const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
-  return (
-    <BodyWrapper {...rest} redesignFlag={redesignFlagEnabled}>
-      {children}
-    </BodyWrapper>
-  )
+  return <BodyWrapper {...rest}>{children}</BodyWrapper>
 }
--- a/src/theme/components.tsx
+++ b/src/theme/components.tsx
@ -22,8 +22,8 @@ import { Color } from './styled'

 // TODO: Break this file into a components folder

-export const CloseIcon = styled(X)<{ onClick: () => void; redesignFlag?: boolean }>`
-  color: ${({ redesignFlag, theme }) => redesignFlag && theme.textSecondary};
+export const CloseIcon = styled(X)<{ onClick: () => void }>`
+  color: ${({ theme }) => theme.textSecondary};
  cursor: pointer;
 `

@ -461,8 +461,8 @@ export const SmallOnly = styled.span`
  `};
 `

-export const Separator = styled.div<{ redesignFlag?: boolean }>`
+export const Separator = styled.div`
  width: 100%;
  height: 1px;
-  background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundOutline : theme.deprecated_bg2)};
+  background-color: ${({ theme }) => theme.backgroundOutline};
 `