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}`, }} > -
+ {activeAccount ? ( {!accountsOpen && ( openAccounts(true)} - sx={{ justifyContent: 'space-between' }} + sx={{ + justifyContent: 'space-between', + background: theme.palette.background.default, + borderRadius: 4, + }} > {activeAccount.name} )} - + {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} ) )} - - + + Disconnect @@ -82,7 +104,7 @@ export const Header = () => { Connect Wallet )} -
+