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 ? (
-
-
-
-
-
-
- {header}
-
- {subheader && {subheader}}
-
- {isActive && }
-
- ) : (
-
-
-
- {isActive && (
-
-
-
-
-
- )}
- {header}
-
- {subheader && {subheader}}
-
-
-
-
-
- )}
+
+
+
+
+
+
+ {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()}
)
}