[P1][UI/UX] Make Utility Icons Actionable or Explicitly Disabled

[Mkalbani]

Problem

Some top-nav utility icons appear interactive but have no clear behavior.

Why This Is Necessary

Non-functional controls reduce user trust and create UX ambiguity.

Scope

• Define behavior for each utility icon OR mark as disabled
• Add visual states (default/hover/focus/disabled)
• Add accessible labels/tooltips for icon-only actions

Acceptance Criteria

• Every utility icon has a real action or a disabled state
• Disabled controls are visibly disabled and non-clickable
• Icon-only actions include clear labels for usability/accessibility

[Hillzo]

@Hillzo has applied to work on this issue as part of the Stellar Wave Program's 4th wave.

I’d love to work on this issue. I’m a frontend developer skilled in React, Next.js, TypeScript, Tailwind CSS, and Rust, with experience in backend development and smart contracts (Solidity/Web3), building responsive interfaces and scalable, secure applications

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Hillzo to this issue.

[drips-wave]

Congratulations, @Hillzo! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on April 29, 2026.

🧑‍💻 @Hillzo: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊