The RepoCard component on the Discover page currently shows the repository's programming language as plain text (e.g., "Go", "Python"). Popular platforms like GitHub display a small colored dot next to the language name for quick visual scanning.
Adding similar color-coded language indicators will improve the UI readability of the Discover page at a glance.
📍 File to Change
frontend/app/(auth)/discover/components/repocard.tsx
✅ What To Do
- Create a language-to-color lookup object inside the component:
const LANGUAGE_COLORS: Record<string, string> = {
JavaScript: '#f1e05a',
TypeScript: '#3178c6',
Python: '#3572A5',
Go: '#00ADD8',
Rust: '#dea584',
Java: '#b07219',
'C++': '#f34b7d',
Ruby: '#701516',
PHP: '#4F5D95',
Swift: '#F05138',
Kotlin: '#A97BFF',
'C#': '#178600',
};
- Find where
language is rendered in repocard.tsx and wrap it with a colored dot:
{repo.language && (
<span className="flex items-center gap-1.5 text-sm text-[#8b949e]">
<span
className="w-3 h-3 rounded-full shrink-0"
style={{ backgroundColor: LANGUAGE_COLORS[repo.language] ?? '#8b949e' }}
/>
{repo.language}
</span>
)}
🏁 Acceptance Criteria
💡 Technical Hints
- The
language field is already part of the Repository interface defined in frontend/lib/api/github-service.ts
- No new packages are needed — pure inline styling with
style={{ backgroundColor: ... }}
- Refer to the full GitHub language color list for more colors
🚀 Getting Started
- Fork the repository
- Create a branch:
git checkout -b fix/issue-1-language-color-dots
- Make your changes in
frontend/app/(auth)/discover/components/repocard.tsx
- Run the frontend locally:
cd frontend && npm run dev
- Open a Pull Request!
The
RepoCardcomponent on the Discover page currently shows the repository's programming language as plain text (e.g.,"Go","Python"). Popular platforms like GitHub display a small colored dot next to the language name for quick visual scanning.Adding similar color-coded language indicators will improve the UI readability of the Discover page at a glance.
📍 File to Change
frontend/app/(auth)/discover/components/repocard.tsx✅ What To Do
languageis rendered inrepocard.tsxand wrap it with a colored dot:🏁 Acceptance Criteria
languagevalue#8b949e)💡 Technical Hints
languagefield is already part of theRepositoryinterface defined infrontend/lib/api/github-service.tsstyle={{ backgroundColor: ... }}🚀 Getting Started
git checkout -b fix/issue-1-language-color-dotsfrontend/app/(auth)/discover/components/repocard.tsxcd frontend && npm run dev