chore: remove redesign flag in settings (#4959)

chore: remove redesign flag in base settings

src/components/QuestionHelper/index.tsx

-import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import { ReactNode, useCallback, useState } from 'react'
 import { HelpCircle } from 'react-feather'
 import styled from 'styled-components/macro'
 
 import Tooltip from '../Tooltip'
 
-const QuestionWrapper = styled.div<{ redesignFlag: boolean }>`
+const QuestionWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -18,8 +17,7 @@ const QuestionWrapper = styled.div<{ redesignFlag: boolean }>`
   cursor: default;
   border-radius: 36px;
   font-size: 12px;
-  border-radius: ${({ redesignFlag }) => redesignFlag && '12px'};
-  color: ${({ theme, redesignFlag }) => !redesignFlag && theme.deprecated_text2};
+  border-radius: 12px;
 
   :hover,
   :focus {
@@ -27,12 +25,12 @@ const QuestionWrapper = styled.div<{ redesignFlag: boolean }>`
   }
 `
 
-const QuestionMark = styled.span<{ redesignFlag?: boolean }>`
+const QuestionMark = styled.span`
   font-size: 14px;
-  margin-left: ${({ redesignFlag }) => redesignFlag && '8px'};
-  align-items: ${({ redesignFlag }) => redesignFlag && 'center'};
-  color: ${({ theme, redesignFlag }) => redesignFlag && theme.textSecondary};
-  margin-top: ${({ redesignFlag }) => redesignFlag && '2.5px'};
+  margin-left: 8px;
+  align-items: center;
+  color: ${({ theme }) => theme.textSecondary};
+  margin-top: 2.5px;
 `
 
 export default function QuestionHelper({ text }: { text: ReactNode; size?: number }) {
@@ -40,14 +38,12 @@ export default function QuestionHelper({ text }: { text: ReactNode; size?: numbe
 
   const open = useCallback(() => setShow(true), [setShow])
   const close = useCallback(() => setShow(false), [setShow])
-  const redesignFlag = useRedesignFlag()
-  const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
   return (
     <span style={{ marginLeft: 4, display: 'flex', alignItems: 'center' }}>
       <Tooltip text={text} show={show}>
-        <QuestionWrapper onClick={open} onMouseEnter={open} onMouseLeave={close} redesignFlag={redesignFlagEnabled}>
-          <QuestionMark redesignFlag={redesignFlagEnabled}>
-            {redesignFlagEnabled ? <HelpCircle size={16}></HelpCircle> : '?'}
+        <QuestionWrapper onClick={open} onMouseEnter={open} onMouseLeave={close}>
+          <QuestionMark>
+            <HelpCircle size={16} />
           </QuestionMark>
         </QuestionWrapper>
       </Tooltip>

src/components/TransactionSettings/index.tsx

@@ -3,7 +3,6 @@ import { Percent } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
 import { L2_CHAIN_IDS } from 'constants/chains'
 import { DEFAULT_DEADLINE_FROM_NOW } from 'constants/misc'
-import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import ms from 'ms.macro'
 import { darken } from 'polished'
 import { useState } from 'react'
@@ -42,9 +41,9 @@ const FancyButton = styled.button`
   }
 `
 
-const Option = styled(FancyButton)<{ active: boolean; redesignFlag: boolean }>`
+const Option = styled(FancyButton)<{ active: boolean }>`
   margin-right: 8px;
-  border-radius: ${({ redesignFlag }) => redesignFlag && '12px'};
+  border-radius: 12px;
   :hover {
     cursor: pointer;
   }
@@ -52,10 +51,10 @@ const Option = styled(FancyButton)<{ active: boolean; redesignFlag: boolean }>`
   color: ${({ active, theme }) => (active ? theme.deprecated_white : theme.deprecated_text1)};
 `
 
-const Input = styled.input<{ redesignFlag: boolean }>`
+const Input = styled.input`
   background: ${({ theme }) => theme.deprecated_bg1};
   font-size: 16px;
-  border-radius: ${({ redesignFlag }) => redesignFlag && '12px'};
+  border-radius: 12px;
   width: auto;
   outline: none;
   &::-webkit-outer-spin-button,
@@ -66,15 +65,15 @@ const Input = styled.input<{ redesignFlag: boolean }>`
   text-align: right;
 
   ::placeholder {
-    color: ${({ theme, redesignFlag }) => redesignFlag && theme.textTertiary};
+    color: ${({ theme }) => theme.textTertiary};
   }
 `
 
-const OptionCustom = styled(FancyButton)<{ active?: boolean; warning?: boolean; redesignFlag: boolean }>`
+const OptionCustom = styled(FancyButton)<{ active?: boolean; warning?: boolean }>`
   height: 2rem;
   position: relative;
   padding: 0 0.75rem;
-  border-radius: ${({ redesignFlag }) => redesignFlag && '12px'};
+  border-radius: 12px;
   flex: 1;
   border: ${({ theme, active, warning }) =>
     active
@@ -109,8 +108,6 @@ const THREE_DAYS_IN_SECONDS = ms`3 days` / 1000
 export default function TransactionSettings({ placeholderSlippage }: TransactionSettingsProps) {
   const { chainId } = useWeb3React()
   const theme = useTheme()
-  const redesignFlag = useRedesignFlag()
-  const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
 
   const [userSlippageTolerance, setUserSlippageTolerance] = useUserSlippageTolerance()
 
@@ -185,7 +182,6 @@ export default function TransactionSettings({ placeholderSlippage }: Transaction
         </RowFixed>
         <RowBetween>
           <Option
-            redesignFlag={redesignFlagEnabled}
             onClick={() => {
               parseSlippageInput('')
             }}
@@ -193,12 +189,7 @@ export default function TransactionSettings({ placeholderSlippage }: Transaction
           >
             <Trans>Auto</Trans>
           </Option>
-          <OptionCustom
-            redesignFlag={redesignFlagEnabled}
-            active={userSlippageTolerance !== 'auto'}
-            warning={!!slippageError}
-            tabIndex={-1}
-          >
+          <OptionCustom active={userSlippageTolerance !== 'auto'} warning={!!slippageError} tabIndex={-1}>
             <RowBetween>
               {tooLow || tooHigh ? (
                 <SlippageEmojiContainer>
@@ -208,7 +199,6 @@ export default function TransactionSettings({ placeholderSlippage }: Transaction
                 </SlippageEmojiContainer>
               ) : null}
               <Input
-                redesignFlag={redesignFlagEnabled}
                 placeholder={placeholderSlippage.toFixed(2)}
                 value={
                   slippageInput.length > 0
@@ -258,14 +248,8 @@ export default function TransactionSettings({ placeholderSlippage }: Transaction
             />
           </RowFixed>
           <RowFixed>
-            <OptionCustom
-              style={{ width: '80px' }}
-              warning={!!deadlineError}
-              tabIndex={-1}
-              redesignFlag={redesignFlagEnabled}
-            >
+            <OptionCustom style={{ width: '80px' }} warning={!!deadlineError} tabIndex={-1}>
               <Input
-                redesignFlag={redesignFlagEnabled}
                 placeholder={(DEFAULT_DEADLINE_FROM_NOW / 60).toString()}
                 value={
                   deadlineInput.length > 0