From 43fb66552e974f4e7c9635d77f325cd61b7be112 Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Wed, 29 Jan 2025 23:58:25 +0800
Subject: [PATCH] style: enhance server card hover effects with border and
 shadow

---
 components/ServerCard.tsx       |  4 +--
 components/ServerCardInline.tsx | 49 +++++++++++++++++++--------------
 lib/env.ts                      |  2 +-
 3 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/components/ServerCard.tsx b/components/ServerCard.tsx
index b16e8ae..6c77361 100644
--- a/components/ServerCard.tsx
+++ b/components/ServerCard.tsx
@@ -30,7 +30,7 @@ export default function ServerCard({
     <Link onClick={saveSession} href={`/server/${id}`} prefetch={true}>
       <Card
         className={cn(
-          "flex flex-col items-center justify-start gap-3 p-3 md:px-5 cursor-pointer hover:bg-accent/50 transition-colors",
+          "flex flex-col items-center justify-start gap-3 p-3 md:px-5 cursor-pointer hover:border-stone-300 dark:hover:border-stone-700 hover:shadow-md",
           {
             "flex-col": fixedTopServerName,
             "lg:flex-row": !fixedTopServerName,
@@ -137,7 +137,7 @@ export default function ServerCard({
     <Link onClick={saveSession} href={`/server/${id}`} prefetch={true}>
       <Card
         className={cn(
-          "flex flex-col items-center justify-start gap-3 p-3 md:px-5 cursor-pointer hover:bg-accent/50 transition-colors",
+          "flex flex-col items-center justify-start gap-3 p-3 md:px-5 cursor-pointer hover:border-stone-300 dark:hover:border-stone-700 hover:shadow-md",
           showNetTransfer ? "lg:min-h-[91px] min-h-[123px]" : "lg:min-h-[61px] min-h-[93px]",
           {
             "flex-col": fixedTopServerName,
diff --git a/components/ServerCardInline.tsx b/components/ServerCardInline.tsx
index 1a09c9d..01930dd 100644
--- a/components/ServerCardInline.tsx
+++ b/components/ServerCardInline.tsx
@@ -29,7 +29,7 @@ export default function ServerCardInline({
     <Link onClick={saveSession} href={`/server/${id}`} prefetch={true}>
       <Card
         className={cn(
-          "flex items-center lg:flex-row justify-start gap-3 p-3 md:px-5 cursor-pointer hover:bg-accent/50 transition-colors min-w-[900px] w-full",
+          "flex items-center lg:flex-row justify-start gap-3 p-3 md:px-5 cursor-pointer hover:border-stone-300 dark:hover:border-stone-700 hover:shadow-md  min-w-[900px] w-full",
         )}
       >
         <section
@@ -124,27 +124,34 @@ export default function ServerCardInline({
       </Card>
     </Link>
   ) : (
-    <Card
-      className={cn(
-        "flex items-center justify-start gap-3 p-3 md:px-5 min-h-[61px] min-w-[900px] flex-row",
-      )}
-    >
-      <section
-        className={cn("grid items-center gap-2 lg:w-40")}
-        style={{ gridTemplateColumns: "auto auto 1fr" }}
+    <Link onClick={saveSession} href={`/server/${id}`} prefetch={true}>
+      <Card
+        className={cn(
+          "flex items-center justify-start gap-3 p-3 md:px-5 hover:border-stone-300 dark:hover:border-stone-700 hover:shadow-md min-h-[61px] min-w-[900px] flex-row",
+        )}
       >
-        <span className="h-2 w-2 shrink-0 rounded-full bg-red-500 self-center" />
-        <div
-          className={cn("flex items-center justify-center", showFlag ? "min-w-[17px]" : "min-w-0")}
+        <section
+          className={cn("grid items-center gap-2 lg:w-40")}
+          style={{ gridTemplateColumns: "auto auto 1fr" }}
         >
-          {showFlag ? <ServerFlag country_code={country_code} /> : null}
-        </div>
-        <div className="relative w-28">
-          <p className={cn("break-all font-bold tracking-tight", showFlag ? "text-xs" : "text-sm")}>
-            {name}
-          </p>
-        </div>
-      </section>
-    </Card>
+          <span className="h-2 w-2 shrink-0 rounded-full bg-red-500 self-center" />
+          <div
+            className={cn(
+              "flex items-center justify-center",
+              showFlag ? "min-w-[17px]" : "min-w-0",
+            )}
+          >
+            {showFlag ? <ServerFlag country_code={country_code} /> : null}
+          </div>
+          <div className="relative w-28">
+            <p
+              className={cn("break-all font-bold tracking-tight", showFlag ? "text-xs" : "text-sm")}
+            >
+              {name}
+            </p>
+          </div>
+        </section>
+      </Card>
+    </Link>
   )
 }
diff --git a/lib/env.ts b/lib/env.ts
index 0caa5fd..1c9143e 100644
--- a/lib/env.ts
+++ b/lib/env.ts
@@ -139,4 +139,4 @@ export function getAllEnvConfig(): { server: ServerEnvConfig; client: ClientEnvC
       ShowIpInfo: parseBoolean(getClientEnv("ShowIpInfo")),
     },
   }
-} 
+}