fix: change colour of icon + add error badge

safe-global · Oct 12, 2023 · ee0efe6 · ee0efe6
1 parent 385a0ca
commit ee0efe6
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 8 deletions.
diff --git a/src/components/walletconnect/SessionManager/Header.tsx b/src/components/walletconnect/SessionManager/Header.tsx
@@ -2,18 +2,17 @@ import { SvgIcon, Typography } from '@mui/material'
 import type { ReactElement } from 'react'
 
 import WalletConnect from '@/public/images/common/walletconnect.svg'
+import Alert from '@/public/images/notifications/alert.svg'
+
+import css from './styles.module.css'
 
 export const WalletConnectHeader = ({ error }: { error?: boolean }): ReactElement => {
   return (
     <>
-      <SvgIcon
-        component={WalletConnect}
-        inheritViewBox
-        sx={{
-          color: error ? '#FF5F72' : '#3A99FB',
-          width: '40px',
-        }}
-      />
+      <div>
+        <SvgIcon component={WalletConnect} inheritViewBox className={css.icon} />
+        {error && <SvgIcon component={Alert} inheritViewBox className={css.errorBadge} fontSize="small" />}
+      </div>
 
       <Typography variant="h5" mt={2} mb={0.5}>
         Connect dApp to {`Safe{Wallet}`}

diff --git a/src/components/walletconnect/SessionManager/styles.module.css b/src/components/walletconnect/SessionManager/styles.module.css
@@ -0,0 +1,13 @@
+.icon {
+  color: #3a99fb;
+  width: 40px;
+}
+
+.errorBadge {
+  color: var(--color-error-main);
+  margin-left: -16px;
+  margin-bottom: -6px;
+  background-color: var(--color-background-paper);
+  border-radius: 50%;
+  border: 1px solid var(--color-background-paper);
+}