fix: Adjust connection center design (#2745)

* fix: Adjust connection center design * refactor: Use currentColor for the icon
safe-global · Nov 6, 2023 · 232674c · 232674c
1 parent 010faca
commit 232674c
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 11 deletions.
diff --git a/src/components/common/ConnectWallet/ConnectionCenter.tsx b/src/components/common/ConnectWallet/ConnectionCenter.tsx
@@ -1,6 +1,7 @@
 import { Popover, ButtonBase, Typography, Paper } from '@mui/material'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import ExpandLessIcon from '@mui/icons-material/ExpandLess'
+import classnames from 'classnames'
 import { useState, type MouseEvent, type ReactElement } from 'react'
 
 import KeyholeIcon from '@/components/common/icons/KeyholeIcon'
@@ -29,7 +30,6 @@ const ConnectionCenter = (): ReactElement => {
 
         <Typography variant="caption" className={css.notConnected}>
           <b>Not connected</b>
-          <br />
           <Typography variant="inherit" sx={{ color: ({ palette }) => palette.error.main }}>
             Connect wallet
           </Typography>
@@ -52,7 +52,7 @@ const ConnectionCenter = (): ReactElement => {
         }}
         sx={{ mt: 1 }}
       >
-        <Paper className={css.popoverContainer}>
+        <Paper className={classnames(css.popoverContainer, css.largeGap)}>
           <WalletDetails onConnect={handleClose} />
         </Paper>
       </Popover>

diff --git a/src/components/common/ConnectWallet/WalletDetails.tsx b/src/components/common/ConnectWallet/WalletDetails.tsx
@@ -1,4 +1,4 @@
-import { Divider, Typography } from '@mui/material'
+import { Box, Divider, SvgIcon, Typography } from '@mui/material'
 import type { ReactElement } from 'react'
 
 import LockIcon from '@/public/images/common/lock.svg'
@@ -8,7 +8,11 @@ import WalletLogin from '@/components/welcome/WelcomeLogin/WalletLogin'
 const WalletDetails = ({ onConnect }: { onConnect: () => void }): ReactElement => {
   return (
     <>
-      <LockIcon />
+      <Box my={1}>
+        <SvgIcon inheritViewBox sx={{ width: 64, height: 64, display: 'block' }}>
+          <LockIcon />
+        </SvgIcon>
+      </Box>
 
       <WalletLogin onLogin={onConnect} />
 

diff --git a/src/components/common/ConnectWallet/styles.module.css b/src/components/common/ConnectWallet/styles.module.css
@@ -21,6 +21,10 @@
   border: 1px solid var(--color-border-light);
 }
 
+.largeGap {
+  gap: var(--space-2);
+}
+
 .addressName {
   text-align: center;
   overflow: hidden;

diff --git a/src/components/common/icons/KeyholeIcon/index.tsx b/src/components/common/icons/KeyholeIcon/index.tsx
@@ -1,9 +1,30 @@
-import Keyhole from '@/components/common/icons/KeyholeIcon/keyhole.svg'
+import css from '@/components/common/icons/CircularIcon/styles.module.css'
+import LockIcon from '@/public/images/common/lock.svg'
+import { Badge, SvgIcon } from '@mui/material'
 
-import CircularIcon from '../CircularIcon'
-
-const KeyholeIcon = ({ size = 40 }: { size?: number }) => {
-  return <CircularIcon icon={Keyhole} badgeColor="error" size={size} />
+const KeyholeIcon = ({ size = 28 }: { size?: number }) => {
+  return (
+    <Badge
+      color="error"
+      overlap="circular"
+      variant="dot"
+      anchorOrigin={{
+        vertical: 'bottom',
+        horizontal: 'right',
+      }}
+      className={css.badge}
+    >
+      <SvgIcon
+        color="border"
+        component={LockIcon}
+        inheritViewBox
+        sx={{
+          height: size,
+          width: size,
+        }}
+      />
+    </Badge>
+  )
 }
 
 export default KeyholeIcon
diff --git a/src/components/new-safe/create/steps/ReviewStep/index.test.tsx b/src/components/new-safe/create/steps/ReviewStep/index.test.tsx
@@ -8,6 +8,7 @@ import { ONBOARD_MPC_MODULE_LABEL } from '@/services/mpc/SocialLoginModule'
 
 const mockChainInfo = {
   chainId: '100',
+  chainName: 'Gnosis Chain',
   l2: false,
   nativeCurrency: {
     symbol: 'ETH',

diff --git a/src/components/new-safe/create/steps/ReviewStep/index.tsx b/src/components/new-safe/create/steps/ReviewStep/index.tsx
@@ -78,7 +78,7 @@ export const NetworkFee = ({
             height={16}
             style={{ margin: '-3px 0px -3px 4px' }}
           />{' '}
-          Gnosis Chain
+          {chain?.chainName}
         </Typography>
       </>
     )

diff --git a/src/components/sidebar/SafeList/index.tsx b/src/components/sidebar/SafeList/index.tsx
@@ -148,7 +148,7 @@ const SafeList = ({ closeDrawer }: { closeDrawer?: () => void }): ReactElement =
           ) : (
             <Box display="flex" flexDirection="column" alignItems="center" gap={3} maxWidth={250}>
               <Box display="flex" alignItems="center" justifyContent="center">
-                <KeyholeIcon />
+                <KeyholeIcon size={40} />
               </Box>
 
               <Typography variant="body2" color="primary.light" textAlign="center" sx={{ textWrap: 'balance' }}>