diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index 78435176c3..5a85f852f7 100644 --- 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; } ` diff --git a/src/components/Loader/index.tsx b/src/components/Loader/index.tsx index 4c9f443c4e..b7c07c7ffd 100644 --- 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 ( - + ` +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 }) => ( )).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 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} > {/* prevents the automatic focusing of inputs on mobile by the reach dialog */} diff --git a/src/components/NumericalInput/index.tsx b/src/components/NumericalInput/index.tsx index 50464d74eb..43996391c3 100644 --- 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, '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({ { 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" diff --git a/src/components/Polling/ChainConnectivityWarning.tsx b/src/components/Polling/ChainConnectivityWarning.tsx index 9338e0c088..0ee9b04e19 100644 --- 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 ( - + - {redesignFlag ? : } - + + Network Warning - + {chainId === SupportedChainId.MAINNET ? ( You may have lost your network connection. ) : ( diff --git a/src/components/SearchModal/CommonBases.tsx b/src/components/SearchModal/CommonBases.tsx index f2890fb035..c3822ee80f 100644 --- 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 ? ( @@ -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)} > diff --git a/src/components/SearchModal/CurrencyList/index.tsx b/src/components/SearchModal/CurrencyList/index.tsx index a9b1da1b7c..50d7da39ee 100644 --- 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({ > (!isSelected && e.key === 'Enter' ? onSelect(!!warning) : null)} @@ -176,10 +173,9 @@ export function CurrencyRow({ {showCurrencyAmount ? ( {balance ? : account ? : null} - {redesignFlagEnabled && isSelected && } + {isSelected && } ) : ( - redesignFlagEnabled && isSelected && ( diff --git a/src/components/SearchModal/CurrencySearch.tsx b/src/components/SearchModal/CurrencySearch.tsx index febd1fb383..b472ab3d46 100644 --- 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 ( - + @@ -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} onChange={handleInput} @@ -209,7 +204,7 @@ export function CurrencySearch({ /> )} - + {searchToken && !searchTokenIsAdded ? ( ` +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` diff --git a/src/components/Settings/index.tsx b/src/components/Settings/index.tsx index 0ee33f77ce..de378326ec 100644 --- 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() const open = useModalIsOpen(ApplicationModal.SETTINGS) @@ -152,7 +149,7 @@ export default function SettingsTab({ placeholderSlippage }: { placeholderSlippa Are you sure? - setShowConfirmation(false)} redesignFlag={redesignFlagEnabled} /> + setShowConfirmation(false)} /> @@ -190,7 +187,7 @@ export default function SettingsTab({ placeholderSlippage }: { placeholderSlippa id="open-settings-dialog-button" aria-label={t`Transaction Settings`} > - + {expertMode ? ( @@ -200,10 +197,10 @@ export default function SettingsTab({ placeholderSlippage }: { placeholderSlippa ) : null} {open && ( - + - {redesignFlagEnabled ? 'Settings' : 'Transaction Settings'} + Settings diff --git a/src/components/Toggle/index.tsx b/src/components/Toggle/index.tsx index 3f63fe5389..15d196cdb7 100644 --- 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 ( - + ) diff --git a/src/components/TransactionConfirmationModal/index.tsx b/src/components/TransactionConfirmationModal/index.tsx index e8c479a6cd..66e8581f12 100644 --- 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 ( {!inline && ( @@ -88,31 +85,6 @@ function ConfirmationPendingContent({ - ) : ( - - - {!inline && ( - -
- - - )} - - - - - - Waiting For Confirmation - - - {pendingText} - - - Confirm this transaction in your wallet - - - - ) } 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() const addToken = useCallback(() => { @@ -153,7 +122,7 @@ function TransactionSubmittedContent({ .catch(() => setSuccess(false)) }, [connector, logoURL, token]) - return redesignFlagEnabled ? ( + return (
{!inline && ( @@ -198,51 +167,6 @@ function TransactionSubmittedContent({
- ) : ( - -
- {!inline && ( - -
- - - )} - - - - - - Transaction Submitted - - {chainId && hash && ( - - - View on Explorer - - - )} - {currencyToAdd && connector.watchAsset && ( - - {!success ? ( - - Add {currencyToAdd.symbol} - - ) : ( - - Added {currencyToAdd.symbol} - - - )} - - )} - - - {inline ? Return : Close} - - - -
- ) } @@ -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 ? ( - + return ( +
Error - + {message}
- - - Dismiss - - - - ) : ( - -
- - - Error - - - - - - - {message} - - -
Dismiss @@ -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 ( - + {isL2ChainId(chainId) && (hash || attemptingTxn) ? ( ) : attemptingTxn ? ( diff --git a/src/components/WalletModal/PendingView.tsx b/src/components/WalletModal/PendingView.tsx index addc76bf7e..fe5b1aef86 100644 --- 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 ( @@ -94,7 +90,6 @@ export default function PendingView({ { tryActivation(connector) }} @@ -111,7 +106,7 @@ export default function PendingView({ <> - + Waiting to connect @@ -125,47 +120,5 @@ export default function PendingView({ - ) : ( - - - - {error ? ( - - - Error connecting - - - - The connection attempt failed. Please click try again and follow the steps to connect in your wallet. - - - { - tryActivation(connector) - }} - > - Try Again - - - - Back to wallet selection - - - - ) : ( - <> - - - - - Connecting... - - - )} - - - ) } diff --git a/src/featureFlags/flags/redesign.ts b/src/featureFlags/flags/redesign.ts deleted file mode 100644 index 61154f311f..0000000000 --- a/src/featureFlags/flags/redesign.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { BaseVariant } from '../index' - -export function useRedesignFlag(): BaseVariant { - return BaseVariant.Enabled -} - -export { BaseVariant as RedesignVariant } diff --git a/src/pages/AddLiquidity/index.tsx b/src/pages/AddLiquidity/index.tsx index bbf2a48882..9234803889 100644 --- 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() diff --git a/src/pages/App.tsx b/src/pages/App.tsx index a96d88a4e9..ff87848323 100644 --- 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() { - + diff --git a/src/pages/AppBody.tsx b/src/pages/AppBody.tsx index fb076ce413..d9899a597f 100644 --- 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 ( - - {children} - - ) + return {children} } diff --git a/src/theme/components.tsx b/src/theme/components.tsx index 9149f45789..8c5711c33a 100644 --- 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}; `