fix: make non-interactive header elements unselectable (#2288)

This commit is contained in:
Zach Pomerantz 2021-09-01 15:30:17 -07:00 committed by GitHub
parent 5831328364
commit 7b829135df
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 3 additions and 3 deletions

@ -66,6 +66,7 @@ const FallbackWrapper = styled(YellowCard)`
border-radius: 12px;
padding: 8px 12px;
width: 100%;
user-select: none;
`
const Icon = styled.img`
width: 16px;

@ -122,7 +122,6 @@ const AccountElement = styled.div<{ active: boolean }>`
border-radius: 12px;
white-space: nowrap;
width: 100%;
cursor: pointer;
:focus {
border: 1px solid blue;
@ -315,9 +314,9 @@ export default function Header() {
<CardNoise />
</UNIWrapper>
)}
<AccountElement active={!!account} style={{ pointerEvents: 'auto' }}>
<AccountElement active={!!account}>
{account && userEthBalance ? (
<BalanceText style={{ flexShrink: 0 }} pl="0.75rem" pr="0.5rem" fontWeight={500}>
<BalanceText style={{ flexShrink: 0, userSelect: 'none' }} pl="0.75rem" pr="0.5rem" fontWeight={500}>
<Trans>{userEthBalance?.toSignificant(3)} ETH</Trans>
</BalanceText>
) : null}