From a9943cde28282c57b5362f431ef51d59b1742266 Mon Sep 17 00:00:00 2001
From: topeth <supernathanliu@gmail.com>
Date: Mon, 22 Apr 2024 19:03:56 -0700
Subject: [PATCH] update styles for account list

---
 src/components/Header/index.module.scss |  7 +++--
 src/components/Header/index.tsx         | 34 ++++++++++++++++++++-----
 2 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/src/components/Header/index.module.scss b/src/components/Header/index.module.scss
index 2e43aa2b..620a6f8c 100644
--- a/src/components/Header/index.module.scss
+++ b/src/components/Header/index.module.scss
@@ -21,8 +21,10 @@
 }
 
 .listWrapper {
-  border-radius: 100px;
-  width: 240px;
+  display: flex;
+  flex-direction: column;
+  width: 15rem;
+  gap: 0;
 }
 
 .accountsWrapper {
@@ -36,6 +38,7 @@
 .accountsList {
   max-height: 300px;
   overflow-y: auto;
+  padding-bottom: 0;
 }
 
 .accountsList::-webkit-scrollbar {
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index f0dc27e2..4ea3b70e 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -37,20 +37,32 @@ export const Header = () => {
           borderBottom: `1px solid ${theme.palette.divider}`,
         }}
       >
-        <div className={styles.menu}>
+        <Box className={styles.menu}>
           {activeAccount ? (
             <List component='div' className={styles.listWrapper}>
               {!accountsOpen && (
                 <ListItemButton
                   onClick={() => openAccounts(true)}
-                  sx={{ justifyContent: 'space-between' }}
+                  sx={{
+                    justifyContent: 'space-between',
+                    background: theme.palette.background.default,
+                    borderRadius: 4,
+                  }}
                 >
                   {activeAccount.name}
                   <ExpandMore />
                 </ListItemButton>
               )}
 
-              <Collapse in={accountsOpen} className={styles.accountsWrapper}>
+              <Collapse
+                in={accountsOpen}
+                sx={{
+                  position: 'absolute',
+                  borderRadius: '0.5rem',
+                  top: 0,
+                  width: '100%',
+                }}
+              >
                 <List component='div' className={styles.accountsList}>
                   {accounts?.map(
                     (account, index) =>
@@ -61,14 +73,24 @@ export const Header = () => {
                             setActiveAccount && setActiveAccount(account);
                             openAccounts(false);
                           }}
+                          sx={{
+                            borderRadius: '0.5rem',
+                            background: theme.palette.grey['100'],
+                          }}
                         >
                           {account.name}
                         </ListItemButton>
                       )
                   )}
                 </List>
-                <Divider />
-                <ListItemButton onClick={onDisconnect}>
+                <Divider sx={{ borderColor: theme.palette.common.white }} />
+                <ListItemButton
+                  onClick={onDisconnect}
+                  sx={{
+                    borderRadius: '0.5rem',
+                    background: theme.palette.grey['100'],
+                  }}
+                >
                   Disconnect
                 </ListItemButton>
               </Collapse>
@@ -82,7 +104,7 @@ export const Header = () => {
               Connect Wallet
             </Button>
           )}
-        </div>
+        </Box>
       </Box>
       <WalletModal
         open={walletModalOpen}