From 4f9db466a37ab6804e880784ade9b9f8324f6bc7 Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Sun, 28 Dec 2025 14:40:44 +0800
Subject: [PATCH] fix: enhance styling of LanguageSwitcher and ThemeSwitcher
 components

---
 src/components/LanguageSwitcher.tsx | 17 +++++++++++++++--
 src/components/ThemeSwitcher.tsx    | 15 ++++++++++++---
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/components/LanguageSwitcher.tsx b/src/components/LanguageSwitcher.tsx
index 243587e..ebd71b6 100644
--- a/src/components/LanguageSwitcher.tsx
+++ b/src/components/LanguageSwitcher.tsx
@@ -43,8 +43,21 @@ export function LanguageSwitcher() {
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="flex flex-col gap-0.5" align="end">
-        {localeItems.map((item) => (
-          <DropdownMenuItem key={item.code} onSelect={(e) => handleSelect(e, item.code)} className={locale === item.code ? "bg-muted gap-3" : ""}>
+        {localeItems.map((item, index) => (
+          <DropdownMenuItem
+            key={item.code}
+            onSelect={(e) => handleSelect(e, item.code)}
+            className={cn(
+              {
+                "gap-3 bg-muted font-semibold": locale === item.code,
+              },
+              {
+                "rounded-t-[5px]": index === localeItems.length - 1,
+                "rounded-[5px]": index !== 0 && index !== localeItems.length - 1,
+                "rounded-b-[5px]": index === 0,
+              },
+            )}
+          >
             {item.name} {locale === item.code && <CheckCircleIcon className="size-4" />}
           </DropdownMenuItem>
         ))}
diff --git a/src/components/ThemeSwitcher.tsx b/src/components/ThemeSwitcher.tsx
index 9dcea33..4005c50 100644
--- a/src/components/ThemeSwitcher.tsx
+++ b/src/components/ThemeSwitcher.tsx
@@ -35,15 +35,24 @@ export function ModeToggle() {
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="flex flex-col gap-0.5" align="end">
-        <DropdownMenuItem className={cn({ "gap-3 bg-muted": theme === "light" })} onSelect={(e) => handleSelect(e, "light")}>
+        <DropdownMenuItem
+          className={cn("rounded-b-[5px]", { "gap-3 bg-muted font-semibold": theme === "light" })}
+          onSelect={(e) => handleSelect(e, "light")}
+        >
           {t("theme.light")}
           {theme === "light" && <CheckCircleIcon className="size-4" />}
         </DropdownMenuItem>
-        <DropdownMenuItem className={cn({ "gap-3 bg-muted": theme === "dark" })} onSelect={(e) => handleSelect(e, "dark")}>
+        <DropdownMenuItem
+          className={cn("rounded-[5px]", { "gap-3 bg-muted font-semibold": theme === "dark" })}
+          onSelect={(e) => handleSelect(e, "dark")}
+        >
           {t("theme.dark")}
           {theme === "dark" && <CheckCircleIcon className="size-4" />}
         </DropdownMenuItem>
-        <DropdownMenuItem className={cn({ "gap-3 bg-muted": theme === "system" })} onSelect={(e) => handleSelect(e, "system")}>
+        <DropdownMenuItem
+          className={cn("rounded-t-[5px]", { "gap-3 bg-muted font-semibold": theme === "system" })}
+          onSelect={(e) => handleSelect(e, "system")}
+        >
           {t("theme.system")}
           {theme === "system" && <CheckCircleIcon className="size-4" />}
         </DropdownMenuItem>