Increase clickable area for header buttons

safe-global · Oct 23, 2023 · 14b2a5b · 14b2a5b
1 parent ab0aae5
commit 14b2a5b
Show file tree

Hide file tree

Showing 9 changed files with 13 additions and 14 deletions.
diff --git a/src/components/batch/BatchIndicator/index.tsx b/src/components/batch/BatchIndicator/index.tsx
@@ -13,7 +13,7 @@ const BatchIndicator = ({ onClick }: { onClick?: () => void }) => {
   return (
     <BatchTooltip>
       <Track {...BATCH_EVENTS.BATCH_SIDEBAR_OPEN} label={length}>
-        <ButtonBase title="Batch" onClick={onClick} sx={{ p: 0.5 }}>
+        <ButtonBase title="Batch" onClick={onClick} sx={{ p: 2 }}>
           <Badge
             variant="standard"
             badgeContent={length}

diff --git a/src/components/common/ConnectWallet/index.tsx b/src/components/common/ConnectWallet/index.tsx
@@ -2,11 +2,12 @@ import type { ReactElement } from 'react'
 import useWallet from '@/hooks/wallets/useWallet'
 import AccountCenter from '@/components/common/ConnectWallet/AccountCenter'
 import ConnectWalletButton from './ConnectWalletButton'
+import css from './styles.module.css'
 
 const ConnectWallet = (): ReactElement => {
   const wallet = useWallet()
 
-  return wallet ? <AccountCenter wallet={wallet} /> : <ConnectWalletButton />
+  return <div className={css.container}>{wallet ? <AccountCenter wallet={wallet} /> : <ConnectWalletButton />}</div>
 }
 
 export default ConnectWallet
diff --git a/src/components/common/ConnectWallet/styles.module.css b/src/components/common/ConnectWallet/styles.module.css
@@ -1,3 +1,7 @@
+.container {
+  padding: 0 var(--space-2);
+}
+
 .buttonContainer {
   display: flex;
   align-items: center;

diff --git a/src/components/common/Header/styles.module.css b/src/components/common/Header/styles.module.css
@@ -11,7 +11,6 @@
 }
 
 .element {
-  padding: 0 var(--space-2);
   height: 100%;
   border-right: 1px solid var(--color-border-light);
   display: flex;
@@ -42,8 +41,6 @@
 }
 
 .networkSelector {
-  padding-right: 0;
-  padding-left: 0;
   border-right: none;
 }
 
@@ -66,10 +63,6 @@
     padding-left: var(--space-2);
   }
 
-  .networkSelector {
-    padding-right: 0;
-  }
-
   .hideMobile {
     display: none;
   }

diff --git a/src/components/common/SafeTokenWidget/index.tsx b/src/components/common/SafeTokenWidget/index.tsx
@@ -59,7 +59,7 @@ const SafeTokenWidget = () => {
   const flooredSafeBalance = formatVisualAmount(allocation || BigNumber.from(0), TOKEN_DECIMALS, 2)
 
   return (
-    <Box className={css.buttonContainer}>
+    <Box className={css.container}>
       <Tooltip
         title={
           url

diff --git a/src/components/common/SafeTokenWidget/styles.module.css b/src/components/common/SafeTokenWidget/styles.module.css
@@ -1,10 +1,11 @@
-.buttonContainer {
+.container {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--space-1);
   height: 100%;
   justify-content: center;
+  margin: 0 var(--space-2);
 }
 
 .tokenButton {

diff --git a/src/components/notification-center/NotificationCenter/index.tsx b/src/components/notification-center/NotificationCenter/index.tsx
@@ -90,7 +90,7 @@ const NotificationCenter = (): ReactElement => {
 
   return (
     <>
-      <ButtonBase disableRipple className={css.bell} onClick={handleClick}>
+      <ButtonBase className={css.bell} onClick={handleClick}>
         <UnreadBadge
           invisible={!hasUnread}
           anchorOrigin={{

diff --git a/src/components/notification-center/NotificationCenter/styles.module.css b/src/components/notification-center/NotificationCenter/styles.module.css
@@ -1,7 +1,7 @@
 .bell {
   display: flex;
   justify-content: center;
-  padding: 4px;
+  padding: var(--space-2) var(--space-2);
 }
 
 .bell svg path {

diff --git a/src/components/walletconnect/WcHeaderWidget/WcIcon.tsx b/src/components/walletconnect/WcHeaderWidget/WcIcon.tsx
@@ -16,7 +16,7 @@ const WcIcon = ({ sessionCount, sessionIcon, isError, onClick }: WcIconProps): R
   const showIcon = sessionCount === 1 && !!sessionIcon
 
   return (
-    <ButtonBase disableRipple onClick={onClick} title="WalletConnect">
+    <ButtonBase onClick={onClick} title="WalletConnect" sx={{ p: 2 }}>
       <Badge
         variant={isError ? 'dot' : 'standard'}
         badgeContent={