fix: improve card styling and hover effects across components

This commit is contained in:
hamster1963
2026-06-01 11:53:11 +08:00
parent 57aaba3918
commit d69190abd5
6 changed files with 32 additions and 27 deletions
+13 -8
View File
@@ -47,9 +47,12 @@ export default function ServerOverview({
onClick={() => {
setStatus("all");
}}
className={cn("hover:border-blue-500 cursor-pointer transition-all", {
"bg-card/70": customBackgroundImage,
})}
className={cn(
"group cursor-pointer transition-all hover:ring-blue-500 dark:hover:ring-blue-600",
{
"bg-card/70": customBackgroundImage,
},
)}
>
<CardContent className="flex h-full items-center px-6 py-3">
<section className="flex flex-col gap-1">
@@ -70,12 +73,13 @@ export default function ServerOverview({
setStatus("online");
}}
className={cn(
"cursor-pointer hover:ring-green-500 ring-1 ring-transparent transition-all",
"cursor-pointer ring-1 transition-all hover:ring-green-500 dark:hover:ring-green-600",
{
"bg-card/70": customBackgroundImage,
},
{
"ring-green-500 ring-2 border-transparent": status === "online",
"border-transparent ring-2 ring-green-500 dark:ring-green-600":
status === "online",
},
)}
>
@@ -100,12 +104,13 @@ export default function ServerOverview({
setStatus("offline");
}}
className={cn(
"cursor-pointer hover:ring-red-500 ring-1 ring-transparent transition-all",
"cursor-pointer ring-1 transition-all hover:ring-red-500 dark:hover:ring-red-600",
{
"bg-card/70": customBackgroundImage,
},
{
"ring-red-500 ring-2 border-transparent": status === "offline",
"border-transparent ring-2 ring-red-500 dark:ring-red-600":
status === "offline",
},
)}
>
@@ -126,7 +131,7 @@ export default function ServerOverview({
</Card>
<Card
className={cn(
"hover:ring-purple-500 ring-1 ring-transparent transition-all",
"group ring-1 hover:ring-purple-500 dark:hover:ring-purple-600",
{
"bg-card/70": customBackgroundImage,
},