fix: remove colors from language badges to improve dark mode readability

This commit is contained in:
ngc2207 2024-11-22 02:28:50 +08:00
parent a284915c46
commit 965c36496f

View File

@ -22,27 +22,17 @@ import { Snippet } from "@prisma/client";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { ScrollArea } from "@/components/ui/scroll-area"; import { ScrollArea } from "@/components/ui/scroll-area";
const colors = {
green: "bg-green-50",
gray: "bg-gray-50",
red: "bg-red-50",
yellow: "bg-yellow-50",
purple: "bg-purple-50",
blue: "bg-blue-50",
orange: "bg-orange-50",
} as const;
const languageIcons = { const languageIcons = {
c: { icon: COriginal, color: colors.green }, c: { icon: COriginal },
cpp: { icon: CplusplusOriginal, color: colors.gray }, cpp: { icon: CplusplusOriginal },
java: { icon: JavaOriginal, color: colors.red }, java: { icon: JavaOriginal },
python: { icon: PythonOriginal, color: colors.yellow }, python: { icon: PythonOriginal },
javascript: { icon: JavascriptOriginal, color: colors.yellow }, javascript: { icon: JavascriptOriginal },
csharp: { icon: CsharpOriginal, color: colors.purple }, csharp: { icon: CsharpOriginal },
go: { icon: GoOriginal, color: colors.blue }, go: { icon: GoOriginal },
ruby: { icon: RubyOriginal, color: colors.red }, ruby: { icon: RubyOriginal },
swift: { icon: SwiftOriginal, color: colors.orange }, swift: { icon: SwiftOriginal },
kotlin: { icon: KotlinOriginal, color: colors.blue }, kotlin: { icon: KotlinOriginal },
} as const; } as const;
type Language = keyof typeof languageIcons; type Language = keyof typeof languageIcons;
@ -63,11 +53,8 @@ export function SnippetCard({
const renderLanguageBadge = () => ( const renderLanguageBadge = () => (
<Badge <Badge
variant="outline" variant="secondary"
className={cn( className="rounded-xl flex items-center justify-between whitespace-nowrap h-6"
languageInfo?.color,
"rounded-xl flex items-center justify-between whitespace-nowrap h-6"
)}
> >
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
{languageInfo?.icon && <languageInfo.icon />} {languageInfo?.icon && <languageInfo.icon />}