From 14b2a5be4928c915d56c4706b08e14402477ad32 Mon Sep 17 00:00:00 2001
From: katspaugh <katspaugh@gmail.com>
Date: Mon, 23 Oct 2023 15:39:21 +0200
Subject: [PATCH] Increase clickable area for header buttons

---
 src/components/batch/BatchIndicator/index.tsx              | 2 +-
 src/components/common/ConnectWallet/index.tsx              | 3 ++-
 src/components/common/ConnectWallet/styles.module.css      | 4 ++++
 src/components/common/Header/styles.module.css             | 7 -------
 src/components/common/SafeTokenWidget/index.tsx            | 2 +-
 src/components/common/SafeTokenWidget/styles.module.css    | 3 ++-
 .../notification-center/NotificationCenter/index.tsx       | 2 +-
 .../NotificationCenter/styles.module.css                   | 2 +-
 src/components/walletconnect/WcHeaderWidget/WcIcon.tsx     | 2 +-
 9 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/components/batch/BatchIndicator/index.tsx b/src/components/batch/BatchIndicator/index.tsx
index f90c2925e8..7e27d95b45 100644
--- 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
index 225a875ca9..aaf6812b1a 100644
--- 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
index fe3bad0514..24057834f2 100644
--- 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
index f7a4b0a601..b1d164273d 100644
--- 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
index 3b1b189566..9f37aa3704 100644
--- 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
index b81af87f3d..651d95cbb8 100644
--- 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
index 161d0a8c42..477421bb35 100644
--- 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
index dab2d17faf..de8c4d1a8c 100644
--- 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
index c4d31a263d..e2cdb2ee8b 100644
--- 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={