diff --git a/src/components/WalletModal/Option.tsx b/src/components/WalletModal/Option.tsx index 6a2677e023..5321e412b6 100644 --- a/src/components/WalletModal/Option.tsx +++ b/src/components/WalletModal/Option.tsx @@ -1,26 +1,22 @@ import { ElementName, Event, EventName } from 'analytics/constants' import { TraceEvent } from 'analytics/TraceEvent' -import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign' import React from 'react' import { Check } from 'react-feather' import styled from 'styled-components/macro' import { ExternalLink } from '../../theme' -const InfoCard = styled.button<{ isActive?: boolean; redesignFlag?: boolean }>` - background-color: ${({ theme, isActive, redesignFlag }) => - redesignFlag ? theme.backgroundInteractive : isActive ? theme.deprecated_bg3 : theme.deprecated_bg2}; +const InfoCard = styled.button<{ isActive?: boolean }>` + background-color: ${({ theme }) => theme.backgroundInteractive}; padding: 1rem; outline: none; border: 1px solid; border-radius: 12px; width: 100% !important; &:focus { - box-shadow: ${({ theme, redesignFlag }) => !redesignFlag && `0 0 0 1px ${theme.deprecated_primary1}`}; - background-color: ${({ theme, redesignFlag }) => redesignFlag && theme.hoverState}; + background-color: ${({ theme }) => theme.hoverState}; } - border-color: ${({ theme, isActive, redesignFlag }) => - redesignFlag ? (isActive ? theme.accentActive : 'transparent') : isActive ? 'transparent' : theme.deprecated_bg3}; + border-color: ${({ theme, isActive }) => (isActive ? theme.accentActive : 'transparent')}; ` const CheckIcon = styled(Check)` @@ -53,48 +49,24 @@ const OptionCardLeft = styled.div` const OptionCardClickable = styled(OptionCard as any)<{ active?: boolean clickable?: boolean - redesignFlag?: boolean }>` margin-top: 0; border: ${({ active, theme }) => active && `1px solid ${theme.accentActive}`}; &:hover { cursor: ${({ clickable }) => clickable && 'pointer'}; - background-color: ${({ theme, redesignFlag }) => redesignFlag && theme.hoverState}; - border: ${({ clickable, redesignFlag, theme }) => - clickable && !redesignFlag && `1px solid ${theme.deprecated_primary1}`}; + background-color: ${({ theme }) => theme.hoverState}; } opacity: ${({ disabled }) => (disabled ? '0.5' : '1')}; ` -const GreenCircle = styled.div` - ${({ theme }) => theme.flexRowNoWrap} - justify-content: center; - align-items: center; - - &:first-child { - height: 8px; - width: 8px; - margin-right: 8px; - background-color: ${({ theme }) => theme.deprecated_green1}; - border-radius: 50%; - } -` - -const CircleWrapper = styled.div` - color: ${({ theme }) => theme.deprecated_green1}; - display: flex; - justify-content: center; - align-items: center; -` - -const HeaderText = styled.div<{ redesignFlag?: boolean }>` +const HeaderText = styled.div` ${({ theme }) => theme.flexRowNoWrap}; align-items: center; justify-content: center; color: ${(props) => props.color === 'blue' ? ({ theme }) => theme.deprecated_primary1 : ({ theme }) => theme.deprecated_text1}; - font-size: ${({ redesignFlag }) => (redesignFlag ? '16px' : '1rem')}; - font-weight: ${({ redesignFlag }) => (redesignFlag ? '600' : '500')}; + font-size: 16px; + font-weight: 600; ` const SubHeader = styled.div` @@ -103,20 +75,6 @@ const SubHeader = styled.div` font-size: 12px; ` -const IconWrapperDeprecated = styled.div<{ size?: number | null }>` - ${({ theme }) => theme.flexColumnNoWrap}; - align-items: center; - justify-content: center; - & > img, - span { - height: ${({ size }) => (size ? size + 'px' : '24px')}; - width: ${({ size }) => (size ? size + 'px' : '24px')}; - } - ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium` - align-items: flex-end; - `}; -` - const IconWrapper = styled.div<{ size?: number | null }>` ${({ theme }) => theme.flexColumnNoWrap}; align-items: center; @@ -155,9 +113,6 @@ export default function Option({ isActive?: boolean id: string }) { - const redesignFlag = useRedesignFlag() - const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled - const content = ( - {redesignFlagEnabled ? ( - - - - - {'Icon'} - - {header} - - {subheader && {subheader}} - - {isActive && } - - ) : ( - - - - {isActive && ( - - -
- - - )} - {header} - - {subheader && {subheader}} - - - {'Icon'} - - - )} + + + + + {'Icon'} + + {header} + + {subheader && {subheader}} + + {isActive && } + ) if (link) { diff --git a/src/components/WalletModal/index.tsx b/src/components/WalletModal/index.tsx index 0a23c691f3..afb7c0d4cb 100644 --- a/src/components/WalletModal/index.tsx +++ b/src/components/WalletModal/index.tsx @@ -8,7 +8,6 @@ import { AutoColumn } from 'components/Column' import { AutoRow } from 'components/Row' import { getConnection, getConnectionName, getIsCoinbaseWallet, getIsInjected, getIsMetaMask } from 'connection/utils' import { NftVariant, useNftFlag } from 'featureFlags/flags/nft' -import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign' import usePrevious from 'hooks/usePrevious' import { useCallback, useEffect, useState } from 'react' import { ArrowLeft } from 'react-feather' @@ -47,30 +46,30 @@ const CloseColor = styled(Close)` } ` -const Wrapper = styled.div<{ redesignFlag?: boolean }>` +const Wrapper = styled.div` ${({ theme }) => theme.flexColumnNoWrap} - background-color: ${({ redesignFlag, theme }) => redesignFlag && theme.backgroundSurface}; - outline: ${({ theme, redesignFlag }) => redesignFlag && `1px solid ${theme.backgroundOutline}`}; - box-shadow: ${({ redesignFlag, theme }) => redesignFlag && theme.deepShadow}; + background-color: ${({ theme }) => theme.backgroundSurface}; + outline: ${({ theme }) => `1px solid ${theme.backgroundOutline}`}; + box-shadow: ${({ theme }) => theme.deepShadow}; margin: 0; padding: 0; width: 100%; ` -const HeaderRow = styled.div<{ redesignFlag?: boolean }>` +const HeaderRow = styled.div` ${({ theme }) => theme.flexRowNoWrap}; padding: 1rem 1rem; - font-weight: ${({ redesignFlag }) => (redesignFlag ? '600' : '500')}; - size: ${({ redesignFlag }) => redesignFlag && '16px'}; + font-weight: 600; + size: 16px; color: ${(props) => (props.color === 'blue' ? ({ theme }) => theme.deprecated_primary1 : 'inherit')}; ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium` padding: 1rem; `}; ` -const ContentWrapper = styled.div<{ redesignFlag?: boolean }>` - background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundSurface : theme.deprecated_bg0)}; - border: ${({ theme, redesignFlag }) => redesignFlag && `1px solid ${theme.backgroundOutline}`}; +const ContentWrapper = styled.div` + background-color: ${({ theme }) => theme.backgroundSurface}; + border: ${({ theme }) => `1px solid ${theme.backgroundOutline}`}; padding: 0 1rem 1rem 1rem; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; @@ -155,8 +154,6 @@ export default function WalletModal({ const [connectedWallets, addWalletToConnectedWallets] = useConnectedWallets() - const redesignFlag = useRedesignFlag() - const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled const nftFlagEnabled = useNftFlag() === NftVariant.Enabled const [walletView, setWalletView] = useState(WALLET_VIEWS.ACCOUNT) const [lastActiveWalletAddress, setLastActiveWalletAddress] = useState(account) @@ -301,7 +298,7 @@ export default function WalletModal({ ) } else { headerRow = ( - + Connect a wallet @@ -367,16 +364,8 @@ export default function WalletModal({ } return ( - - - {getModalContent()} - + + {getModalContent()} ) }