pingdotgg / pingdotgg/t3code

[Bug]: provider badge initials are invisible on light accent colors

Open Beginner friendly
#11,641 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug via-triage
Dominant language
TypeScript
Stars
23k
Forks
5.9k
Avg merge
11h 14m
Merged PRs (30d)
357

Description

Before submitting
  • I searched existing issues and did not find a duplicate.
  • I included enough detail to reproduce or investigate the problem.
Area

apps/web

Steps to reproduce
  1. Open Settings → Providers and edit a provider instance (for example Codex).
  2. Set a custom accent color to white #ffffff (any light color reproduces it).
  3. Look at the provider icon in the sidebar, the model picker, or Settings → Usage.
Expected behavior

The account badge keeps its initials readable for every accent color. A light accent should get dark text, a dark accent should get light text.

Actual behavior

The badge always paints its initials in white (text-white in apps/web/src/components/chat/ProviderInstanceIcon.tsx), so with a white or light accent the initials disappear. In the screenshot below Codex has a white accent and shows no "CO", while Claude's orange accent still shows "CL".

The mobile badge has the same hardcoded white text in apps/mobile/src/components/ProviderIcon.tsx.

Codex badge with white accent loses its initials while Claude's orange badge keeps them

Impact

Cosmetic issue

Version or commit

0.0.40-nightly

Environment

macOS desktop app, dark theme

Screenshots, recordings, or supporting files

See the screenshot above.

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.

Research direction

Start with apps/web/src/components/chat/ProviderInstanceIcon.tsx and apps/mobile/src/components/ProviderIcon.tsx, focusing on the hardcoded text-white styling and how each badge receives its accent color. Reproduce the issue with a white or light accent in the provider settings, sidebar, model picker, and Usage views. Done means provider initials remain readable across light and dark accent colors on web and mobile.

Written by the indexing model from the issue text.

Assessment

Tech stack
tailwindcss, typescript
Domain
frontend, mobile
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Active
Clarity
Clearly specified
Newbie friendliness
82/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.