[UI/UX Design] Design a compact "your role in this offering" chip surfaced on every offering page

[thlpkee20-wq]

Description

Design a chip that surfaces the viewer's role on the current offering (Issuer / Admin / Investor / Read-only), letting people instantly understand what actions they can take.

Requirements and context

• Must be accessible (WCAG 2.1 AA), responsive, and documented in the design system
• Should be consistent with existing patterns and easy to review
• Relevant code: src/pages/OfferingDetail.tsx, src/components/RoleChip.tsx

Suggested execution

• Fork the repo and create a branch
• git checkout -b uiux/your-role-chip
• Implement changes
  • Chip variants per role, color-coded from the palette
  • Tooltip explaining role and typical actions
  • Placement rules relative to page header
• Validate accessibility and responsive assumptions

Test and commit

• Run checks
  • npm run lint and component/visual tests
• Cover edge cases
  • viewer with multiple roles, viewer with no role, admin-impersonation state
• Include screenshots/before-after and accessibility (axe) notes

Example commit message

design: role chip on offering page

Guidelines

• Minimum 95 percent test coverage
• Clear documentation
• Timeframe: 96 hours

[Amksongs]

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

Please kindly assign to me I can work on this

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

[dahmeezy]

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

I would love to work on this issue, please assign it to me

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

[edochieblessing09-max]

@edochieblessing09-max has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

would love to work on this will produce an excellent result

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

[greatest0fallt1me]

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

Hello Maintainers 👋,
I’m interested in picking up this issue and contributing to the project.
I have solid experience working across both frontend and blockchain layers, including building user interfaces with Next.js and developing Stellar smart contracts using Rust (Soroban). I’m familiar with translating Figma designs into pixel-accurate UIs, handling wallet integrations, and writing efficient, well-tested contract logic.
I focus on writing clean, maintainable code, following repository standards, and keeping communication transparent throughout the development process. I can start immediately and complete the work within the expected timeframe.
Excited to collaborate and add value to the project 🚀
Thank you!

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

[drips-wave]

Congratulations, @greatest0fallt1me! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on July 30, 2026.

🧑‍💻 @greatest0fallt1me: 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 🌊

[drips-wave]

This issue has been completed by @greatest0fallt1me as part of the Stellar Wave Program's 7th Wave 🥳

😎 @greatest0fallt1me: You earned 200 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here. You can also Leave a review to share your experience working on this issue.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.