From e4e164aee9f1c0bc2c1e4fbe381d6816c27dfed2 Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Tue, 31 Mar 2026 19:27:23 +0700
Subject: [PATCH] Refactor data table components for improved styling
 consistency

- Removed unnecessary background color from the data table toolbar for a cleaner look.
- Updated text color in sortable table headers to enhance readability and maintain a cohesive theme.
- Adjusted padding and border styles in user page components for better alignment and visual consistency.
---
 .../lib/components/data-table/data-table-toolbar.svelte   | 2 +-
 web/src/lib/components/data-table/sortable-th.svelte      | 5 +++--
 web/src/routes/users/+page.svelte                         | 8 +++-----
 3 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/web/src/lib/components/data-table/data-table-toolbar.svelte b/web/src/lib/components/data-table/data-table-toolbar.svelte
index dd9bf36..0fb7119 100644
--- a/web/src/lib/components/data-table/data-table-toolbar.svelte
+++ b/web/src/lib/components/data-table/data-table-toolbar.svelte
@@ -13,7 +13,7 @@
 
 <div
 	class={cn(
-		'flex flex-wrap items-center justify-between gap-2 border-b border-border bg-muted/30 px-3 py-2',
+		'flex flex-wrap items-center justify-between gap-2 border-b border-border px-3 py-2',
 		className
 	)}
 >
diff --git a/web/src/lib/components/data-table/sortable-th.svelte b/web/src/lib/components/data-table/sortable-th.svelte
index e75724b..520a837 100644
--- a/web/src/lib/components/data-table/sortable-th.svelte
+++ b/web/src/lib/components/data-table/sortable-th.svelte
@@ -26,7 +26,7 @@
 
 <Table.Head
 	class={cn(
-		'px-3 py-2 text-left align-middle text-sm font-medium text-foreground',
+		'px-3 py-2 text-left align-middle text-sm font-medium text-muted-foreground',
 		numeric && 'text-right',
 		className
 	)}
@@ -35,9 +35,10 @@
 		type="button"
 		class={cn(
 			'inline-flex max-w-full items-center gap-1.5 rounded-md',
-			'text-foreground/90 transition-colors',
+			'text-muted-foreground transition-colors',
 			'hover:bg-accent/60 hover:text-foreground',
 			'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/45',
+			active && 'text-foreground',
 			numeric && 'ms-auto'
 		)}
 		onclick={onToggle}
diff --git a/web/src/routes/users/+page.svelte b/web/src/routes/users/+page.svelte
index a641abd..ba22e7a 100644
--- a/web/src/routes/users/+page.svelte
+++ b/web/src/routes/users/+page.svelte
@@ -392,9 +392,7 @@
 	<DataTableCard>
 		{#snippet toolbar()}
 			<div class="border-b border-border">
-				<div
-					class="flex flex-wrap items-center justify-between gap-2 bg-muted/30 px-3 py-2.5"
-				>
+				<div class="flex flex-wrap items-center justify-between gap-2 px-3 py-2.5">
 					<Tabs.Root bind:value={usersViewTab} class="w-full min-w-0 sm:w-auto">
 						<Tabs.List class="h-auto min-h-8 w-full flex-wrap justify-start gap-1 p-1 sm:w-fit">
 							<Tabs.Trigger value="all" class="shrink-0 gap-1.5 px-2.5 py-1 text-xs sm:text-sm">
@@ -418,7 +416,7 @@
 					{/if}
 				</div>
 				<div
-					class="flex flex-wrap items-center justify-between gap-2 border-t border-border/60 bg-muted/30 px-3 py-2"
+					class="flex flex-wrap items-center justify-between gap-2 border-t border-border/60 px-3 py-2"
 				>
 					<div class="relative max-w-sm min-w-[200px] flex-1">
 						<SearchIcon
@@ -484,7 +482,7 @@
 						>Имя</SortableTh>
 						<Table.Head
 							class={cn(
-								'px-3 py-2 text-left align-middle text-sm font-medium text-foreground',
+								'px-3 py-2 text-left align-middle text-sm font-medium text-muted-foreground',
 								!showColLinks && 'hidden',
 								showColLinks && 'hidden sm:table-cell'
 							)}