fix: improve network switching error to new design (#5543)

init

src/components/Popups/FailedNetworkSwitchPopup.tsx

 import { Trans } from '@lingui/macro'
 import { getChainInfo } from 'constants/chainInfo'
 import { SupportedChainId } from 'constants/chains'
-import { AlertCircle } from 'react-feather'
+import { AlertTriangle } from 'react-feather'
 import styled, { useTheme } from 'styled-components/macro'
 
 import { ThemedText } from '../../theme'
@@ -18,16 +18,19 @@ export default function FailedNetworkSwitchPopup({ chainId }: { chainId: Support
 
   return (
     <RowNoFlex>
-      <div style={{ paddingRight: 16 }}>
-        <AlertCircle color={theme.deprecated_red1} size={24} />
-      </div>
       <AutoColumn gap="sm">
-        <ThemedText.DeprecatedBody fontWeight={500}>
-          <Trans>
-            Failed to switch networks from the Uniswap Interface. In order to use Uniswap on {chainInfo.label}, you must
-            change the network in your wallet.
-          </Trans>
-        </ThemedText.DeprecatedBody>
+        <RowNoFlex style={{ alignItems: 'center' }}>
+          <div style={{ paddingRight: 13 }}>
+            <AlertTriangle color={theme.accentWarning} size={24} display="flex" />
+          </div>
+          <ThemedText.SubHeader>
+            <Trans>Failed to switch networks</Trans>
+          </ThemedText.SubHeader>
+        </RowNoFlex>
+
+        <ThemedText.BodySmall>
+          <Trans>To use Uniswap on {chainInfo.label}, switch the network in your wallet’s settings.</Trans>
+        </ThemedText.BodySmall>
       </AutoColumn>
     </RowNoFlex>
   )

src/components/Popups/PopupItem.tsx

@@ -10,8 +10,8 @@ import FailedNetworkSwitchPopup from './FailedNetworkSwitchPopup'
 
 const StyledClose = styled(X)`
   position: absolute;
-  right: 10px;
-  top: 10px;
+  right: 20px;
+  top: 20px;
 
   :hover {
     cursor: pointer;
@@ -83,7 +83,7 @@ export default function PopupItem({
 
   return popupContent ? (
     <Popup>
-      <StyledClose color={theme.deprecated_text2} onClick={removeThisPopup} />
+      <StyledClose color={theme.textSecondary} onClick={removeThisPopup} />
       {popupContent}
       {removeAfterMs !== null ? <AnimatedFader style={faderStyle} /> : null}
     </Popup>