[Phase 2 · Frontend · Shared primitives] Create shared RoleBadge component

[amina69]

Epic: Shared primitives
Labels: ui, phase-2, frontend
Size: XS (~2-4 hours)

Description

Pill badge displaying a user role (USER, SHELTER, ADMIN) with consistent styling.

Tasks

• ADMIN=purple, SHELTER=teal, USER=gray
• Accept role prop
• Used in timeline entries, approval widgets, dispute detail
• Snapshot test for all three roles

[Tybravo]

@Tybravo has applied to work on this issue as part of the Stellar Wave Program's 3rd wave.

Hello, I am a full-stack Software Engineer with 7+ years of experience and a Blockchain Developer. New to open-source contributions and adapting very quickly, and I do like to work on the Issue.

I have strong hands-on experience building advanced, user-friendly and visually engaging frontend interfaces using React, TypeScript, and Next.js, with a focus on reusable component architecture, modern UI patterns, responsive design, state management, and performance optimization. I work across both frontend and backend systems, including backend logic, API design, database architecture, and schema modeling.

I have experience building modern, scalable web applications using React, Typescript, Next.js, Node.js, Java, Rust, and related technologies. Some relevant projects (personal and OPEN SOURCE) I have worked on include:

--> https://www.verilens.xyz/
--> https://repeasy.wal.app/
--> https://docwalrus.vercel.app/
--> https://grainlify.0xo.in/

I am comfortable working within an existing codebase or independently , following project conventions, and delivering clean, maintainable, and well-structured solutions. My GitHub repositories can speak for themselves in demonstrating my experience and consistency across different types of projects.

I am confident I can contribute effectively and deliver high-quality results.

Thank you for your time and considering my application.

Regards,
Michael

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

[drips-wave]

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

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