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

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;
   }
 `

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'}

src/components/Modal/index.tsx

 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 */}

src/components/NumericalInput/index.tsx

-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"

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>
         ) : (

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} />

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 />

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

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`

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}>

src/components/Toggle/index.tsx

-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>
   )

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 ? (

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'
@@ -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>
   )
 }

src/featureFlags/flags/redesign.ts

-import { BaseVariant } from '../index'
-
-export function useRedesignFlag(): BaseVariant {
-  return BaseVariant.Enabled
-}
-
-export { BaseVariant as RedesignVariant }

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()

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 />

src/pages/AppBody.tsx

-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>
 }

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};
 `