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

src/components/Header/NetworkCard.tsx

@@ -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;

src/components/Header/index.tsx

@@ -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}