StabilityNexus / StabilityNexus/Windmill-EVM-WebUI
[BUG]: Navbar top-right controls (network selector + connected-address chip) need a standard button treatment
@singhtrivendra is already working on this.
Since Sep 12, 2026.
- Dominant language
- TypeScript
- Stars
- 6
- Forks
- 14
- Avg merge
- 12h 32m
- Merged PRs (30d)
- 22
Description
Bug Description
Issue Description
In components/layout/Navbar.tsx, the top-right controls next to the theme toggle — the network selector ({network} ▾ with the green status dot, lines ~66–94) and the connected wallet address chip (<NavbarButton>{address}</NavbarButton>, lines ~96–102) — don't read as proper buttons. They're small, inconsistently sized/padded compared to Connect Wallet, have no visible hover/focus state, and the network dropdown trigger looks like plain text with a caret rather than a control.
Steps to Reproduce
- Open any page, connect a wallet (or just view the disconnected
Connect Walletstate for comparison). - Look at the top-right of the navbar: theme toggle, network pill, address pill.
- Compare their height/padding/radius against
Connect Walletand against each other.
Expected
All top-right controls (theme toggle, network selector, address chip, Connect Wallet) share one consistent button language: same height, consistent horizontal padding, matching corner radius, visible hover state, and a keyboard focus-visible ring — so the cluster reads as one coherent group instead of mismatched pieces.
Scope
- Restyle the network-selector trigger and the connected-address
NavbarButton(and its mobile counterparts around lines ~171–195) to a consistent pill/button style: fixed height matchingConnect Wallet, consistentpx/py, matchingrounded-full, clear:hoverand:focus-visiblestates. - Keep the network dropdown menu contents, the list of networks, and the disconnect behavior unchanged — restyle triggers only.
- Keep the live-status dot on the network pill, just align it with the new sizing.
- Light + dark mode.
- Do not change
useWallet()logic,switchNetwork, ordisconnectWalletbehavior.
Acceptance Criteria
- Network selector, address chip, and Connect Wallet share consistent height/padding/radius.
- Both pills have visible
:hoverand:focus-visiblestates. - Network dropdown still opens/closes and switches networks correctly.
- Wallet disconnect still works from both desktop and mobile menus.
- Light + dark mode verified.
-
npm run lintpasses. -
npx tsc --noEmitpasses. -
npm run buildpasses. - Before/after screenshots (connected + disconnected, light + dark).
- No change to wallet/network logic — visual only.
AI-assisted contributions are allowed; disclose AI usage in the PR and do not AI-generate the entire component.
Steps to Reproduce
No response
Logs and Screenshots
No response
Environment Details
No response
Impact
Critical - Application is unusable
Code of Conduct
- I have joined the Discord server and will post updates there
- I have searched existing issues to avoid duplicates
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.