fix: update sort controls styling for improved visibility and consistency

This commit is contained in:
hamster1963
2026-06-01 15:13:21 +08:00
parent f323f4248b
commit 631390586b
+12 -10
View File
@@ -352,14 +352,13 @@ export default function Servers() {
</section> </section>
<div <div
className={cn( className={cn(
"flex h-8 items-center rounded-full border border-stone-200 bg-white text-sm text-stone-600 shadow-xs transition-all dark:border-stone-700 dark:bg-stone-800 dark:text-stone-300 dark:shadow-none shrink-0", "flex h-8 items-center rounded-full border border-stone-200 bg-white text-sm text-stone-600 shadow-xs transition-all dark:border-stone-800 dark:bg-stone-800 dark:text-stone-300 dark:shadow-none shrink-0",
{ {
"dark:border-stone-600/80 dark:bg-stone-800/80 bg-white/75": "dark:border-stone-600/80 dark:bg-stone-800/80 bg-white/75":
customBackgroundImage, customBackgroundImage,
}, },
{ {
"border-blue-400/90 text-blue-600 dark:border-blue-400/70 dark:text-blue-400": " text-blue-600 dark:text-blue-400": sortType !== "default",
sortType !== "default",
}, },
)} )}
> >
@@ -369,13 +368,16 @@ export default function Servers() {
disabled={sortType === "default"} disabled={sortType === "default"}
className="flex h-full cursor-pointer items-center gap-1.5 px-3 disabled:cursor-not-allowed disabled:opacity-40" className="flex h-full cursor-pointer items-center gap-1.5 px-3 disabled:cursor-not-allowed disabled:opacity-40"
> >
{sortOrder === "asc" && sortType !== "default" ? ( <div className="text-stone-900 dark:text-stone-100">
<ArrowUpIcon className="size-3.5 shrink-0" /> {sortOrder === "asc" && sortType !== "default" ? (
) : sortOrder === "desc" && sortType !== "default" ? ( <ArrowUpIcon className="size-3.5 shrink-0" />
<ArrowDownIcon className="size-3.5 shrink-0" /> ) : sortOrder === "desc" && sortType !== "default" ? (
) : ( <ArrowDownIcon className="size-3.5 shrink-0" />
<ArrowsUpDownIcon className="size-3.5 shrink-0" /> ) : (
)} <ArrowsUpDownIcon className="size-3.5 shrink-0" />
)}
</div>
<span className="font-medium text-stone-900 dark:text-stone-100"> <span className="font-medium text-stone-900 dark:text-stone-100">
Sort Sort
</span> </span>