StabilityNexus / StabilityNexus/Windmill-EVM-WebUI

[BUG]: Navbar top-right controls (network selector + connected-address chip) need a standard button treatment

Open
#98 2 comments 0 reactions 1 assignee View on GitHub

@singhtrivendra is already working on this.

Since Sep 12, 2026.

bug
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
  1. Open any page, connect a wallet (or just view the disconnected Connect Wallet state for comparison).
  2. Look at the top-right of the navbar: theme toggle, network pill, address pill.
  3. Compare their height/padding/radius against Connect Wallet and 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 matching Connect Wallet, consistent px/py, matching rounded-full, clear :hover and :focus-visible states.
  • 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, or disconnectWallet behavior.
Acceptance Criteria
  • Network selector, address chip, and Connect Wallet share consistent height/padding/radius.
  • Both pills have visible :hover and :focus-visible states.
  • 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 lint passes.
  • npx tsc --noEmit passes.
  • npm run build passes.
  • 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.