fix: Adjust connection center design

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>

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

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;

src/components/common/icons/KeyholeIcon/index.tsx

@@ -1,9 +1,32 @@
-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
+        component={LockIcon}
+        inheritViewBox
+        sx={{
+          height: size,
+          width: size,
+          '& path': {
+            fill: ({ palette }) => palette.border.main,
+          },
+        }}
+      />
+    </Badge>
+  )
 }
 
 export default KeyholeIcon

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',

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>
       </>
     )