Skip to content

Redesign nav bar — wallet pill + matched mobile boxes#688

Merged
realproject7 merged 1 commit intomainfrom
task/679-nav-redesign
Mar 31, 2026
Merged

Redesign nav bar — wallet pill + matched mobile boxes#688
realproject7 merged 1 commit intomainfrom
task/679-nav-redesign

Conversation

@realproject7
Copy link
Copy Markdown
Owner

Summary

  • Desktop: Replaced bordered box with pill-shaped wallet display (rounded-full) using same text-xs font-medium as nav links. Shows [PFP] @username or [PFP] 0x4d...B6C8. Entire pill is a clickable link to profile page.
  • Mobile: PFP box and hamburger box now use identical border styling (border-border rounded border px-2 py-1) ensuring matched heights. PFP box links to profile, hamburger toggles menu.
  • Disconnected state: Connect button uses matching styling for both desktop (pill) and mobile (bordered box matching hamburger height).

Fixes #681

Test plan

  • Desktop: wallet pill shows [PFP] 0x4d...B6C8 or [PFP] @username — clean, same font as nav links
  • Desktop: clicking pill navigates to profile
  • Desktop: no disconnect button in nav
  • Mobile: PFP box and hamburger box have exactly the same height
  • Mobile: both boxes have consistent border styling
  • Mobile: PFP box links to profile, hamburger opens menu
  • Mobile not connected: "Connect" button same height as hamburger
  • npm run build passes ✅

🤖 Generated with Claude Code

Desktop: Replace bordered box with pill-shaped link (rounded-full) using
same text-xs font-medium as nav links. Shows PFP + @username or truncated
address (0x4d...B6C8). Entire pill links to profile.

Mobile: Both PFP box and hamburger box now have matching border styling
(border-border rounded border px-2 py-1) for equal height alignment.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@vercel
Copy link
Copy Markdown

vercel Bot commented Mar 31, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment
Project Deployment Actions Updated (UTC)
plotlink Ignored Ignored Mar 31, 2026 8:08pm

Request Review

Copy link
Copy Markdown
Collaborator

@project7-interns project7-interns left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Verdict: APPROVE

Summary

This is a focused nav-only update that matches issue #681. The desktop wallet UI is now a pill with nav-link typography, and the mobile wallet/connect box uses the same border and padding treatment as the hamburger control.

Findings

  • None.

Decision

Approving because the change stays within ConnectWallet.tsx and NavBar.tsx, preserves the requested profile-link behavior, and implements the specified desktop/mobile styling changes without scope creep.

Copy link
Copy Markdown
Collaborator

@project7-interns project7-interns left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. Desktop: bordered box replaced with clean pill-shaped Link (rounded-full, text-xs font-medium). Mobile: PFP box and hamburger now share identical border styling for matched heights. Good use of existing truncateAddress() utility. Net -7 lines. All acceptance criteria from #681 met.

@realproject7 realproject7 merged commit 3c95629 into main Mar 31, 2026
5 checks passed
@realproject7 realproject7 deleted the task/679-nav-redesign branch March 31, 2026 20:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Redesign nav bar — clean wallet pill on desktop, matched-height boxes on mobile

2 participants