includio-cms 0.1.3 → 0.5.0

package/dist/admin/client/users/users-page.svelte

@@ -6,14 +6,26 @@
 	import Loader2 from '@tabler/icons-svelte/icons/loader-2';
 	import DeviceDesktop from '@tabler/icons-svelte/icons/device-desktop';
 	import Mail from '@tabler/icons-svelte/icons/mail';
+	import Users from '@tabler/icons-svelte/icons/users';
+	import Filter from '@tabler/icons-svelte/icons/filter';
+	import ArrowsSort from '@tabler/icons-svelte/icons/arrows-sort';
+	import SortAscending from '@tabler/icons-svelte/icons/sort-ascending';
+	import SortDescending from '@tabler/icons-svelte/icons/sort-descending';
+	import ChevronLeft from '@tabler/icons-svelte/icons/chevron-left';
+	import ChevronRight from '@tabler/icons-svelte/icons/chevron-right';
+	import X from '@tabler/icons-svelte/icons/x';
 	import Input from '../../../components/ui/input/input.svelte';
 	import Button from '../../../components/ui/button/button.svelte';
-	import { Badge } from '../../../components/ui/badge/index.js';
+	import { Checkbox } from '../../../components/ui/checkbox/index.js';
+	import * as Popover from '../../../components/ui/popover/index.js';
 	import * as Table from '../../../components/ui/table/index.js';
 	import { authClient } from '../../auth-client.js';
 	import { usersLang } from './lang.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import { toLocaleCode } from '../../utils/formatDate.js';
+	import { getRoleLabel } from '../../utils/roleLabel.js';
+	import { toast } from 'svelte-sonner';
+	import { fly } from 'svelte/transition';
 	import CreateUserDialog from './create-user-dialog.svelte';
 	import EditUserDialog from './edit-user-dialog.svelte';
 	import DeleteUserDialog from './delete-user-dialog.svelte';
@@ -44,13 +56,24 @@
 	let loading = $state(true);
 	let searchQuery = $state('');
 
+	// Sorting
+	let sortColumn = $state<'name' | 'role' | 'createdAt'>('createdAt');
+	let sortDirection = $state<'desc' | 'asc'>('desc');
+
+	// Filtering
+	let roleFilter = $state<string>('all');
+	let filterOpen = $state(false);
+
+	// Selection
+	let selectedIds = $state<Set<string>>(new Set());
+
 	// Dialogs
 	let createOpen = $state(false);
 	let editOpen = $state(false);
 	let deleteOpen = $state(false);
 	let inviteOpen = $state(false);
 	let editingUser = $state<User | null>(null);
-	let deletingUserId = $state<string | null>(null);
+	let deletingUser = $state<{ id: string; name: string } | null>(null);
 
 	// Sessions sheet
 	let sessionsOpen = $state(false);
@@ -64,7 +87,8 @@
 	let pageIndex = $state(0);
 	const pageSize = 20;
 
-	const filtered = $derived(
+	// Derived chain: users → searchFiltered → roleFiltered → sorted → paged
+	const searchFiltered = $derived(
 		searchQuery
 			? users.filter(
 					(u) =>
@@ -74,9 +98,114 @@
 			: users
 	);
 
-	const totalItems = $derived(filtered.length);
+	const roleFiltered = $derived(
+		roleFilter === 'all' ? searchFiltered : searchFiltered.filter((u) => u.role === roleFilter)
+	);
+
+	const sorted = $derived(
+		[...roleFiltered].sort((a, b) => {
+			const dir = sortDirection === 'asc' ? 1 : -1;
+			if (sortColumn === 'name') return a.name.localeCompare(b.name) * dir;
+			if (sortColumn === 'role') return a.role.localeCompare(b.role) * dir;
+			return (a.createdAt.getTime() - b.createdAt.getTime()) * dir;
+		})
+	);
+
+	const totalItems = $derived(sorted.length);
 	const pageCount = $derived(Math.ceil(totalItems / pageSize));
-	const paged = $derived(filtered.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize));
+	const paged = $derived(sorted.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize));
+	const showingStart = $derived(totalItems === 0 ? 0 : pageIndex * pageSize + 1);
+	const showingEnd = $derived(Math.min((pageIndex + 1) * pageSize, totalItems));
+
+	const allOnPageSelected = $derived(
+		paged.length > 0 && paged.every((u) => selectedIds.has(u.id))
+	);
+	const someSelected = $derived(selectedIds.size > 0);
+
+	// Avatar helpers
+	const avatarGradients = [
+		'linear-gradient(135deg, #5B4A9E, #B8A9E8)',
+		'linear-gradient(135deg, #3A8A5C, #7EC4A0)',
+		'linear-gradient(135deg, #C4893A, #E8C88A)',
+		'linear-gradient(135deg, #463879, #8B7BC7)',
+		'linear-gradient(135deg, #C44B4B, #E89B9B)',
+		'linear-gradient(135deg, #2E7D9B, #7BC4D9)'
+	];
+
+	function getInitials(name: string): string {
+		return name
+			.split(/\s+/)
+			.filter(Boolean)
+			.map((w) => w[0])
+			.slice(0, 2)
+			.join('')
+			.toUpperCase();
+	}
+
+	function getAvatarGradient(name: string): string {
+		let hash = 0;
+		for (let i = 0; i < name.length; i++) {
+			hash = ((hash << 5) - hash + name.charCodeAt(i)) | 0;
+		}
+		return avatarGradients[Math.abs(hash) % avatarGradients.length];
+	}
+
+	function toggleSort(column: 'name' | 'role' | 'createdAt') {
+		if (sortColumn === column) {
+			sortDirection = sortDirection === 'asc' ? 'desc' : 'asc';
+		} else {
+			sortColumn = column;
+			sortDirection = column === 'createdAt' ? 'desc' : 'asc';
+		}
+	}
+
+	function toggleSelectAll() {
+		if (allOnPageSelected) {
+			for (const u of paged) selectedIds.delete(u.id);
+		} else {
+			for (const u of paged) selectedIds.add(u.id);
+		}
+		selectedIds = new Set(selectedIds);
+	}
+
+	function toggleSelect(id: string) {
+		if (selectedIds.has(id)) {
+			selectedIds.delete(id);
+		} else {
+			selectedIds.add(id);
+		}
+		selectedIds = new Set(selectedIds);
+	}
+
+	function clearSelection() {
+		selectedIds = new Set();
+	}
+
+	async function handleBulkDelete() {
+		const ids = [...selectedIds].filter((id) => id !== currentUserId);
+		if (ids.length === 0) return;
+
+		for (const userId of ids) {
+			await authClient.admin.removeUser({ userId });
+		}
+
+		toast.success(lang.userDeleted);
+		selectedIds = new Set();
+		await loadUsers();
+	}
+
+	async function handleBulkChangeRole(newRole: 'admin' | 'user') {
+		const ids = [...selectedIds].filter((id) => id !== currentUserId);
+		if (ids.length === 0) return;
+
+		for (const userId of ids) {
+			await authClient.admin.setRole({ userId, role: newRole });
+		}
+
+		toast.success(lang.userUpdated);
+		selectedIds = new Set();
+		await loadUsers();
+	}
 
 	$effect(() => {
 		loadUsers();
@@ -84,7 +213,7 @@
 
 	async function loadUsers() {
 		loading = true;
-		const { data, error } = await authClient.admin.listUsers({
+		const { data } = await authClient.admin.listUsers({
 			query: { limit: 500 }
 		});
 		if (data) {
@@ -112,8 +241,8 @@
 		editOpen = true;
 	}
 
-	function openDelete(userId: string) {
-		deletingUserId = userId;
+	function openDelete(user: User) {
+		deletingUser = { id: user.id, name: user.name };
 		deleteOpen = true;
 	}
 
@@ -122,74 +251,255 @@
 		sessionsUserName = user.name;
 		sessionsOpen = true;
 	}
+
+	function getSortIcon(column: string) {
+		if (sortColumn !== column) return ArrowsSort;
+		return sortDirection === 'asc' ? SortAscending : SortDescending;
+	}
+
+	function getAriaSort(column: string): 'ascending' | 'descending' | 'none' {
+		if (sortColumn !== column) return 'none';
+		return sortDirection === 'asc' ? 'ascending' : 'descending';
+	}
+
+	function generatePageNumbers(current: number, total: number): (number | '...')[] {
+		if (total <= 7) return Array.from({ length: total }, (_, i) => i);
+		const pages: (number | '...')[] = [0];
+		if (current > 2) pages.push('...');
+		for (let i = Math.max(1, current - 1); i <= Math.min(total - 2, current + 1); i++) {
+			pages.push(i);
+		}
+		if (current < total - 3) pages.push('...');
+		pages.push(total - 1);
+		return pages;
+	}
 </script>
 
-<div class="container mx-auto max-w-5xl px-4 py-8">
-	<div class="mb-6 flex items-center justify-between">
-		<h1 class="text-2xl font-bold">{lang.title}</h1>
-		<div class="flex items-center gap-2">
-			{#if emailConfigured}
-				<Button variant="outline" size="sm" onclick={() => (inviteOpen = true)}>
-					<Mail class="size-4" />
-					{lang.invite.inviteUser}
-				</Button>
+<div class="p-5 pb-24 md:p-7">
+	<!-- Header -->
+	<div class="mb-6 users-fade-up">
+		<div class="mb-1 flex items-center gap-3">
+			<h1 class="text-2xl font-bold">{lang.title}</h1>
+			{#if !loading}
+				<span
+					class="inline-flex items-center justify-center rounded-full px-2.5 py-0.5 text-xs font-bold"
+					style="background: var(--lavender-lighter); color: var(--primary);"
+				>
+					{users.length}
+				</span>
 			{/if}
-			<Button variant="gradient" size="sm" onclick={() => (createOpen = true)}>
-				<Plus class="size-4" />
-				{lang.createUser}
-			</Button>
 		</div>
+		<p class="text-sm" style="color: var(--muted-foreground);">{lang.description}</p>
 	</div>
 
-	<div class="relative mb-4">
-		<Search class="text-muted-foreground pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2" />
-		<Input
-			type="text"
-			placeholder={lang.search}
-			class="pl-9"
-			value={searchQuery}
-			oninput={(e) => {
-				searchQuery = e.currentTarget.value;
-				pageIndex = 0;
-			}}
-		/>
+	<!-- Toolbar -->
+	<div class="mb-4 flex flex-wrap items-center gap-2.5 users-fade-up">
+		<div class="relative min-w-[240px] flex-1 sm:max-w-xs">
+			<Search class="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2" style="color: var(--text-light);" />
+			<Input
+				type="text"
+				placeholder={lang.search}
+				class="pl-9"
+				value={searchQuery}
+				oninput={(e) => {
+					searchQuery = e.currentTarget.value;
+					pageIndex = 0;
+				}}
+			/>
+		</div>
+
+		<Popover.Root bind:open={filterOpen}>
+			<Popover.Trigger>
+				<Button variant="outline" size="sm" class="gap-1.5">
+					<Filter class="size-4" />
+					{lang.filterByRole}
+					{#if roleFilter !== 'all'}
+						<span
+							class="ml-1 inline-flex size-5 items-center justify-center rounded-full text-[10px] font-bold"
+							style="background: var(--primary); color: white;"
+						>1</span>
+					{/if}
+				</Button>
+			</Popover.Trigger>
+			<Popover.Content class="w-48 p-2" align="start">
+				{#each [
+					{ value: 'all', label: lang.allRoles },
+					{ value: 'admin', label: lang.roleAdmin },
+					{ value: 'user', label: lang.roleUser }
+				] as option}
+					<button
+						class="flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors hover:bg-accent"
+						class:font-semibold={roleFilter === option.value}
+						style={roleFilter === option.value ? 'color: var(--primary);' : ''}
+						onclick={() => {
+							roleFilter = option.value;
+							pageIndex = 0;
+							filterOpen = false;
+						}}
+					>
+						{option.label}
+					</button>
+				{/each}
+			</Popover.Content>
+		</Popover.Root>
+
+		<div class="flex-1"></div>
+
+		{#if emailConfigured}
+			<Button variant="secondary" size="sm" onclick={() => (inviteOpen = true)}>
+				<Mail class="size-4" />
+				{lang.invite.inviteUser}
+			</Button>
+		{/if}
+		<Button variant="default" size="sm" onclick={() => (createOpen = true)}>
+			<Plus class="size-4" />
+			{lang.createUser}
+		</Button>
 	</div>
 
+	<!-- Content -->
 	{#if loading}
-		<div class="flex items-center justify-center py-16">
-			<Loader2 class="text-muted-foreground size-6 animate-spin" />
+		<div class="flex items-center justify-center py-20">
+			<Loader2 class="size-6 animate-spin" style="color: var(--muted-foreground);" />
+		</div>
+	{:else if users.length === 0}
+		<!-- Empty state -->
+		<div class="flex flex-col items-center justify-center py-20 text-center users-fade-up">
+			<div
+				class="mb-5 flex size-[72px] items-center justify-center rounded-xl"
+				style="background: var(--muted); color: var(--text-light);"
+			>
+				<Users class="size-8" />
+			</div>
+			<h2 class="mb-1.5 text-lg font-bold">{lang.emptyTitle}</h2>
+			<p class="mb-5 max-w-sm text-sm" style="color: var(--muted-foreground);">
+				{lang.emptyDescription}
+			</p>
+			<Button onclick={() => (createOpen = true)}>
+				<Plus class="size-4" />
+				{lang.addUser}
+			</Button>
 		</div>
 	{:else if paged.length === 0}
-		<p class="text-muted-foreground py-16 text-center">{lang.noResults}</p>
+		<p class="py-16 text-center text-sm" style="color: var(--muted-foreground);">
+			{lang.noResults}
+		</p>
 	{:else}
-		<div class="overflow-hidden rounded-2xl border">
+		<!-- Table -->
+		<div class="overflow-hidden rounded-xl border bg-card shadow-sm users-fade-up">
 			<Table.Root>
 				<Table.Header>
-					<Table.Row>
-						<Table.Head>{lang.name}</Table.Head>
-						<Table.Head>{lang.email}</Table.Head>
-						<Table.Head>{lang.role}</Table.Head>
-						<Table.Head>{lang.createdAt}</Table.Head>
-						<Table.Head class="text-right">{lang.actions}</Table.Head>
+					<Table.Row class="bg-muted/50">
+						<Table.Head class="w-11 text-center">
+							<Checkbox
+								checked={allOnPageSelected}
+								onCheckedChange={toggleSelectAll}
+								aria-label={lang.selectAll}
+							/>
+						</Table.Head>
+						<Table.Head>
+							<button
+								class="inline-flex items-center gap-1 text-xs font-bold uppercase tracking-wide transition-colors hover:text-primary"
+								onclick={() => toggleSort('name')}
+								aria-sort={getAriaSort('name')}
+							>
+								{lang.name}
+								<svelte:component this={getSortIcon('name')} class="users-sort-icon size-3.5" />
+							</button>
+						</Table.Head>
+						<Table.Head>
+							<button
+								class="inline-flex items-center gap-1 text-xs font-bold uppercase tracking-wide transition-colors hover:text-primary"
+								onclick={() => toggleSort('role')}
+								aria-sort={getAriaSort('role')}
+							>
+								{lang.role}
+								<svelte:component this={getSortIcon('role')} class="users-sort-icon size-3.5" />
+							</button>
+						</Table.Head>
+						<Table.Head>
+							<button
+								class="inline-flex items-center gap-1 text-xs font-bold uppercase tracking-wide transition-colors hover:text-primary"
+								onclick={() => toggleSort('createdAt')}
+								aria-sort={getAriaSort('createdAt')}
+							>
+								{lang.createdAt}
+								<svelte:component this={getSortIcon('createdAt')} class="users-sort-icon size-3.5" />
+							</button>
+						</Table.Head>
+						<Table.Head class="w-[120px]">
+							<span class="sr-only">{lang.actions}</span>
+						</Table.Head>
 					</Table.Row>
 				</Table.Header>
 				<Table.Body>
 					{#each paged as user (user.id)}
-						<Table.Row class="hover:bg-slate-50 dark:hover:bg-slate-800/50">
-							<Table.Cell class="font-medium">{user.name}</Table.Cell>
-							<Table.Cell>{user.email}</Table.Cell>
+						<Table.Row
+							class="transition-colors"
+							style={selectedIds.has(user.id) ? 'background: rgba(184,169,232,0.15);' : ''}
+							onmouseenter={(e) => {
+								if (!selectedIds.has(user.id)) e.currentTarget.style.background = 'var(--lavender-lighter)';
+							}}
+							onmouseleave={(e) => {
+								if (!selectedIds.has(user.id)) e.currentTarget.style.background = '';
+							}}
+						>
+							<Table.Cell class="text-center">
+								<Checkbox
+									checked={selectedIds.has(user.id)}
+									onCheckedChange={() => toggleSelect(user.id)}
+									aria-label="{lang.selectUser}: {user.name}"
+								/>
+							</Table.Cell>
+							<Table.Cell>
+								<div class="flex items-center gap-3">
+									<div
+										class="users-avatar"
+										style="background: {getAvatarGradient(user.name)};"
+										aria-hidden="true"
+									>
+										{getInitials(user.name) || '?'}
+									</div>
+									<div class="min-w-0">
+										<div class="truncate text-sm font-semibold">{user.name}</div>
+										<div class="truncate text-xs" style="color: var(--text-light);">
+											{user.email}
+										</div>
+									</div>
+								</div>
+							</Table.Cell>
+							<Table.Cell>
+								<span
+									class="users-role-badge"
+									class:users-role-admin={user.role === 'admin'}
+									class:users-role-user={user.role !== 'admin'}
+								>
+									{getRoleLabel(user.role, interfaceLanguage.current)}
+								</span>
+							</Table.Cell>
 							<Table.Cell>
-								<Badge variant={user.role === 'admin' ? 'default' : 'secondary'}>
-									{user.role === 'admin' ? lang.roleAdmin : lang.roleUser}
-								</Badge>
+								<span class="text-xs" style="color: var(--muted-foreground);">
+									{formatDate(user.createdAt)}
+								</span>
 							</Table.Cell>
-							<Table.Cell>{formatDate(user.createdAt)}</Table.Cell>
-							<Table.Cell class="text-right">
-								<div class="flex items-center justify-end gap-1">
-									<Button variant="ghost" size="icon" class="h-8 w-8" onclick={() => openSessions(user)}>
+							<Table.Cell>
+								<div class="flex items-center justify-end gap-0.5">
+									<Button
+										variant="ghost"
+										size="icon"
+										class="h-8 w-8"
+										onclick={() => openSessions(user)}
+										title={lang.sessions.title}
+									>
 										<DeviceDesktop class="size-4" />
 									</Button>
-									<Button variant="ghost" size="icon" class="h-8 w-8" onclick={() => openEdit(user)}>
+									<Button
+										variant="ghost"
+										size="icon"
+										class="h-8 w-8"
+										onclick={() => openEdit(user)}
+										title={lang.editUser}
+									>
 										<Pencil class="size-4" />
 									</Button>
 									{#if user.id !== currentUserId}
@@ -197,7 +507,8 @@
 											variant="ghost"
 											size="icon"
 											class="text-destructive h-8 w-8"
-											onclick={() => openDelete(user.id)}
+											onclick={() => openDelete(user)}
+											title={lang.deleteUser}
 										>
 											<Trash class="size-4" />
 										</Button>
@@ -210,31 +521,119 @@
 			</Table.Root>
 		</div>
 
-		{#if pageCount > 1}
-			<div class="mt-4 flex items-center justify-center gap-2">
-				<Button variant="outline" size="sm" disabled={pageIndex === 0} onclick={() => (pageIndex -= 1)}>
-					&larr;
-				</Button>
-				<span class="text-muted-foreground text-sm">
-					{pageIndex + 1} / {pageCount}
-				</span>
-				<Button
-					variant="outline"
-					size="sm"
-					disabled={pageIndex >= pageCount - 1}
-					onclick={() => (pageIndex += 1)}
-				>
-					&rarr;
-				</Button>
+		<!-- Pagination -->
+		{#if pageCount > 1 || totalItems > 0}
+			<div class="mt-4 flex items-center justify-between users-fade-up">
+				<p class="text-sm" style="color: var(--muted-foreground);">
+					{lang.showing(showingStart, showingEnd, totalItems)}
+				</p>
+				{#if pageCount > 1}
+					<div class="flex items-center gap-1">
+						<Button
+							variant="outline"
+							size="icon"
+							class="h-8 w-8"
+							disabled={pageIndex === 0}
+							onclick={() => (pageIndex -= 1)}
+							aria-label="Previous page"
+						>
+							<ChevronLeft class="size-4" />
+						</Button>
+						{#each generatePageNumbers(pageIndex, pageCount) as p}
+							{#if p === '...'}
+								<span class="px-1 text-sm" style="color: var(--muted-foreground);">...</span>
+							{:else}
+								<Button
+									variant={pageIndex === p ? 'default' : 'outline'}
+									size="sm"
+									class="h-8 min-w-8 px-2"
+									onclick={() => (pageIndex = p)}
+									aria-current={pageIndex === p ? 'page' : undefined}
+								>
+									{p + 1}
+								</Button>
+							{/if}
+						{/each}
+						<Button
+							variant="outline"
+							size="icon"
+							class="h-8 w-8"
+							disabled={pageIndex >= pageCount - 1}
+							onclick={() => (pageIndex += 1)}
+							aria-label="Next page"
+						>
+							<ChevronRight class="size-4" />
+						</Button>
+					</div>
+				{/if}
 			</div>
 		{/if}
 	{/if}
 
+	<!-- Pending invitations -->
 	{#if emailConfigured}
 		<PendingInvitations refreshTrigger={inviteRefresh} />
 	{/if}
 </div>
 
+<!-- Bulk actions bar -->
+{#if someSelected}
+	<div
+		class="users-bulk-bar"
+		transition:fly={{ y: 60, duration: 250 }}
+	>
+		<div
+			class="flex items-center gap-3 rounded-xl px-5 py-2.5 shadow-xl"
+			style="background: var(--plum-darker); color: white;"
+		>
+			<span class="text-sm font-bold whitespace-nowrap">{lang.selected(selectedIds.size)}</span>
+			<div class="h-5 w-px" style="background: rgba(255,255,255,0.2);"></div>
+
+			<Popover.Root>
+				<Popover.Trigger>
+					<button
+						class="inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs font-semibold text-white transition-colors hover:bg-white/10"
+						style="border-color: rgba(255,255,255,0.2);"
+					>
+						{lang.changeRole}
+					</button>
+				</Popover.Trigger>
+				<Popover.Content class="w-40 p-1" align="center" side="top">
+					<button
+						class="flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors hover:bg-accent"
+						onclick={() => handleBulkChangeRole('admin')}
+					>
+						{lang.roleAdmin}
+					</button>
+					<button
+						class="flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors hover:bg-accent"
+						onclick={() => handleBulkChangeRole('user')}
+					>
+						{lang.roleUser}
+					</button>
+				</Popover.Content>
+			</Popover.Root>
+
+			<button
+				class="inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs font-semibold text-white transition-colors hover:bg-red-500/20"
+				style="border-color: rgba(196,75,75,0.5);"
+				onclick={handleBulkDelete}
+			>
+				<Trash class="size-3.5" />
+				{lang.deleteUser}
+			</button>
+
+			<button
+				class="ml-1 inline-flex items-center justify-center rounded-md p-1 text-white/70 transition-colors hover:bg-white/10 hover:text-white"
+				onclick={clearSelection}
+				aria-label={lang.cancel}
+			>
+				<X class="size-4" />
+			</button>
+		</div>
+	</div>
+{/if}
+
 <CreateUserDialog bind:open={createOpen} onOpenChange={(v) => (createOpen = v)} onCreated={loadUsers} />
 
 <EditUserDialog
@@ -249,7 +648,7 @@
 	bind:open={deleteOpen}
 	onOpenChange={(v) => (deleteOpen = v)}
 	onDeleted={loadUsers}
-	userId={deletingUserId}
+	user={deletingUser}
 	{currentUserId}
 />
 

package/dist/admin/components/accessibility/accessibility-overview.svelte

@@ -22,9 +22,7 @@
 	};
 </script>
 
-<Card.Root
-	class="glass-card rounded-2xl border-slate-200/50 bg-white/80 backdrop-blur-xl transition-all duration-300 hover:-translate-y-1 hover:shadow-xl dark:border-white/10 dark:bg-slate-900/60"
->
+<Card.Root>
 	<Card.Header>
 		<Card.Title>{lang[interfaceLanguage.current].title}</Card.Title>
 		<Card.Description>{lang[interfaceLanguage.current].description}</Card.Description>
@@ -39,10 +37,7 @@
 			<div class="space-y-4">
 				<p>
 					{lang[interfaceLanguage.current].altInfo}
-					<span
-						class="bg-gradient-to-r from-[#2D4A77] to-[#4975AE] bg-clip-text text-2xl font-bold text-transparent"
-						>{overview.filesWithoutAlt}</span
-					>
+					<span class="text-2xl font-bold text-primary">{overview.filesWithoutAlt}</span>
 				</p>
 			</div>
 		{/await}