senke/veza
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui): semantic tokens in admin views (audit logs, users, dashboard)

Browse source 
- AdminAuditLogsView: border/divide/bg white/5 → border-border, bg-muted/*
- AdminSettingsView: toggle indicators bg-white → bg-background
- AdminUsersView: glass cards, table, pagination → border-border, bg-muted/*
- UserTableRow: text-white → text-foreground, hover states → muted/50
- AdminDashboardHeader: text-white, divider, button → foreground/border/muted
- AdminDashboardTabs: tabs list, cards, table → semantic tokens
- AdminDashboardTabs: remove unused React import

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
senke 2026-02-10 09:37:16 +01:00
parent 3abac7b6a1
commit 928585eacb
6 changed files with 33 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
apps/web/src/components/admin/AdminAuditLogsView.tsx
View file

@ -48,7 +48,7 @@ export const AdminAuditLogsView: React.FC = () => {
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
<Input placeholder="Search action, user, or IP..." className="pl-10 h-10" />
</div>
<Button variant="outline" className="h-10 border-white/10 hover:border-primary/50">
<Button variant="outline" className="h-10 border-border hover:border-primary/50">
<Filter className="w-4 h-4 mr-2" /> All Resources
</Button>
</div>
@ -57,7 +57,7 @@ export const AdminAuditLogsView: React.FC = () => {
<div className="overflow-x-auto">
<table className="w-full text-left border-collapse">
<thead>
<tr className="border-b border-white/5 bg-white/5 text-xs font-mono text-muted-foreground uppercase tracking-wider">
<tr className="border-b border-border bg-muted/30 text-xs font-mono text-muted-foreground uppercase tracking-wider">
<th className="p-4">Timestamp</th>
<th className="p-4">User</th>
<th className="p-4">Action</th>
@ -66,7 +66,7 @@ export const AdminAuditLogsView: React.FC = () => {
<th className="p-4 text-right">Origin</th>
</tr>
</thead>
<tbody className="divide-y divide-white/5 text-sm">
<tbody className="divide-y divide-border text-sm">
{loading ? (
<tr>
<td colSpan={6} className="p-12 text-center">
@ -120,7 +120,7 @@ export const AdminAuditLogsView: React.FC = () => {
</div>
{/* Pagination placeholder */}
<div className="p-4 border-t border-white/5 bg-white/2 flex justify-between items-center mt-auto">
<div className="p-4 border-t border-border bg-muted/20 flex justify-between items-center mt-auto">
<span className="text-xs text-muted-foreground font-mono uppercase">
Packet: {logs.length} / Total: {total}
</span>

4
apps/web/src/components/admin/AdminSettingsView.tsx
View file

@ -86,7 +86,7 @@ export const AdminSettingsView: React.FC = () => {
>
<span className="font-bold text-foreground">{feature}</span>
<div className="w-10 h-5 bg-success rounded-full relative cursor-pointer">
<div className="absolute top-0.5 right-0.5 w-4 h-4 bg-white rounded-full shadow-md"></div>
<div className="absolute top-0.5 right-0.5 w-4 h-4 bg-background rounded-full shadow-md"></div>
</div>
</div>
))}
@ -113,7 +113,7 @@ export const AdminSettingsView: React.FC = () => {
className={`w-12 h-6 rounded-full relative cursor-pointer transition-colors ${maintenance ? 'bg-destructive' : 'bg-muted'}`}
>
<div
className={`absolute top-1 w-4 h-4 bg-white rounded-full transition-all ${maintenance ? 'left-7' : 'left-1'}`}
className={`absolute top-1 w-4 h-4 bg-background rounded-full transition-all ${maintenance ? 'left-7' : 'left-1'}`}
></div>
</div>
</div>

22
apps/web/src/components/admin/AdminUsersView.tsx
View file

@ -63,7 +63,7 @@ export const AdminUsersView: React.FC = () => {
<p className="text-muted-foreground font-mono text-xs tracking-[0.2em]">USER DIRECTORY • ACCESS PERMISSIONS</p>
</div>
<div className="flex gap-3">
<Button variant="outline" onClick={() => addToast('Generating CSV matrix...', 'info')} className="border-white/10 hover:bg-white/5 font-mono text-xs tracking-widest uppercase">
<Button variant="outline" onClick={() => addToast('Generating CSV matrix...', 'info')} className="border-border hover:bg-muted/50 font-mono text-xs tracking-widest uppercase">
<Download className="w-4 h-4 mr-2" /> Export
</Button>
<Button variant="primary" onClick={() => addToast('Opening Registration Terminal...', 'info')} className="shadow-glow-cyan font-mono text-xs tracking-widest uppercase">
@ -72,22 +72,22 @@ export const AdminUsersView: React.FC = () => {
</div>
</div>
<Card variant="glass" className="p-0 overflow-hidden bg-black/40 border-white/5">
<div className="p-6 border-b border-white/5 bg-white/2 flex flex-col md:flex-row gap-6 justify-between items-center">
<Card variant="glass" className="p-0 overflow-hidden bg-card/80 border-border">
<div className="p-6 border-b border-border bg-muted/20 flex flex-col md:flex-row gap-6 justify-between items-center">
<div className="w-full md:w-96 relative group">
<Input
icon={<Search className="w-4 h-4" />}
placeholder="Search by ID or frequency..."
value={search}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearch(e.target.value)}
className="bg-black/40 border-white/10"
className="bg-muted/30 border-border"
/>
</div>
<div className="flex gap-3">
<Button variant="outline" size="sm" className="bg-white/2 border-white/5 hover:bg-white/10 font-mono text-xs tracking-widest uppercase h-10">
<Button variant="outline" size="sm" className="bg-muted/20 border-border hover:bg-muted/50 font-mono text-xs tracking-widest uppercase h-10">
<Shield className="w-3 h-3 mr-2 text-primary" /> Filter Role
</Button>
<Button variant="outline" size="sm" className="bg-white/2 border-white/5 hover:bg-white/10 font-mono text-xs tracking-widest uppercase h-10">
<Button variant="outline" size="sm" className="bg-muted/20 border-border hover:bg-muted/50 font-mono text-xs tracking-widest uppercase h-10">
<Activity className="w-3 h-3 mr-2 text-primary" /> Filter Status
</Button>
</div>
@ -101,7 +101,7 @@ export const AdminUsersView: React.FC = () => {
<div className="overflow-x-auto">
<table className="w-full text-left">
<thead>
<tr className="text-xs text-muted-foreground uppercase tracking-[0.2em] border-b border-white/5 bg-black/20">
<tr className="text-xs text-muted-foreground uppercase tracking-[0.2em] border-b border-border bg-muted/30">
<th className="py-4 pl-8">Identity</th>
<th className="py-4">Access Origin</th>
<th className="py-4">Assigned Roles</th>
@ -111,7 +111,7 @@ export const AdminUsersView: React.FC = () => {
<th className="py-4 text-right pr-8">Management</th>
</tr>
</thead>
<tbody className="text-sm divide-y divide-white/5 font-sans">
<tbody className="text-sm divide-y divide-border font-sans">
{filteredUsers.map((user) => (
<UserTableRow
key={user.id}
@ -133,15 +133,15 @@ export const AdminUsersView: React.FC = () => {
</div>
)}
<div className="p-6 border-t border-white/5 bg-black/20 flex justify-between items-center">
<div className="p-6 border-t border-border bg-muted/20 flex justify-between items-center">
<span className="text-xs font-mono text-muted-foreground uppercase tracking-widest">
Displaying {filteredUsers.length} / {users.length} active nodes
</span>
<div className="flex gap-3">
<Button variant="outline" size="sm" disabled className="border-white/5 opacity-50 font-mono text-xs h-9">
<Button variant="outline" size="sm" disabled className="border-border opacity-50 font-mono text-xs h-9">
PREV
</Button>
<Button variant="outline" size="sm" className="border-white/5 hover:bg-white/5 font-mono text-xs h-9">
<Button variant="outline" size="sm" className="border-border hover:bg-muted/50 font-mono text-xs h-9">
NEXT
</Button>
</div>

4
apps/web/src/components/admin/UserTableRow.tsx
View file

@ -42,7 +42,7 @@ export const UserTableRow: React.FC<UserTableRowProps> = ({
></div>
</div>
<div>
<div className="font-bold text-white text-sm">{user.username}</div>
<div className="font-bold text-foreground text-sm">{user.username}</div>
<div className="text-xs text-muted-foreground font-mono">{user.id}</div>
</div>
</div>
@ -72,7 +72,7 @@ export const UserTableRow: React.FC<UserTableRowProps> = ({
<td className="p-4 text-right">
<div className="relative">
<button
className="p-1.5 hover:bg-white/10 rounded text-muted-foreground hover:text-white"
className="p-1.5 hover:bg-muted/50 rounded text-muted-foreground hover:text-foreground"
onClick={(e) => {
e.stopPropagation();
setShowMenu(!showMenu);

6
apps/web/src/components/admin/admin-dashboard-view/AdminDashboardHeader.tsx
View file

@ -17,7 +17,7 @@ export function AdminDashboardHeader({
return (
<div className="flex flex-col md:flex-row items-start md:items-end justify-between gap-6">
<div>
<h2 className="text-4xl font-display font-bold text-white mb-2 flex items-center gap-3">
<h2 className="text-4xl font-display font-bold text-foreground mb-2 flex items-center gap-3">
<ShieldCheck className="text-primary w-10 h-10" /> COMMAND CENTER
</h2>
<div className="flex items-center gap-4">
@ -27,7 +27,7 @@ export function AdminDashboardHeader({
Nodes Online
</span>
</div>
<div className="h-3 w-px bg-white/10" />
<div className="h-3 w-px bg-border" aria-hidden />
<span className="text-muted-foreground text-xs font-mono tracking-widest uppercase">
Sector: 00-ALPHA
</span>
@ -36,7 +36,7 @@ export function AdminDashboardHeader({
<div className="flex gap-3">
<Button
variant="outline"
className="border-white/10 hover:bg-white/5 font-mono text-xs h-10 tracking-widest"
className="border-border hover:bg-muted/50 font-mono text-xs h-10 tracking-widest"
onClick={onRescan}
>
<RefreshCw

23
apps/web/src/components/admin/admin-dashboard-view/AdminDashboardTabs.tsx
View file

@ -1,4 +1,3 @@
import React from 'react';
import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
@ -21,7 +20,7 @@ export function AdminDashboardTabs({
}: AdminDashboardTabsProps) {
return (
<Tabs defaultValue="reports" className="w-full">
<TabsList className="bg-black/20 border-b border-white/5 w-full justify-start h-auto p-0 rounded-none gap-10 mb-8 backdrop-blur-md">
<TabsList className="bg-muted/30 border-b border-border w-full justify-start h-auto p-0 rounded-none gap-10 mb-8 backdrop-blur-md">
<TabsTrigger
value="reports"
className="relative group rounded-none border-b-2 border-transparent data-[state=active]:bg-transparent data-[state=active]:border-destructive data-[state=active]:text-destructive py-5 px-0 text-lg font-display bg-transparent transition-all"
@ -56,7 +55,7 @@ export function AdminDashboardTabs({
</TabsList>
<TabsContent value="reports" className="animate-fadeIn">
<Card variant="glass" className="bg-black/40 border-white/5 overflow-hidden">
<Card variant="glass" className="bg-card/80 border-border overflow-hidden">
<div className="divide-y divide-white/5">
{reports.length === 0 ? (
<div className="text-center py-20 text-muted-foreground font-mono uppercase tracking-widest opacity-40">
@ -66,14 +65,14 @@ export function AdminDashboardTabs({
reports.map((r) => (
<div
key={r.id}
className="flex items-center justify-between p-6 hover:bg-white/5 transition-colors group"
className="flex items-center justify-between p-6 hover:bg-muted/50 transition-colors group"
>
<div className="flex items-center gap-5">
<div className="p-3 bg-destructive/10 rounded-xl text-destructive group-hover:scale-110 transition-transform">
<AlertTriangle className="w-5 h-5" />
</div>
<div>
<div className="font-bold text-lg text-white group-hover:text-destructive transition-colors uppercase tracking-tight">
<div className="font-bold text-lg text-foreground group-hover:text-destructive transition-colors uppercase tracking-tight">
{r.targetName}
</div>
<div className="text-xs text-muted-foreground font-mono uppercase flex items-center gap-2">
@ -109,19 +108,19 @@ export function AdminDashboardTabs({
</TabsContent>
<TabsContent value="uploads" className="animate-fadeIn">
<Card variant="glass" className="bg-black/40 border-white/5 overflow-hidden">
<Card variant="glass" className="bg-card/80 border-border overflow-hidden">
<div className="divide-y divide-white/5">
{uploads.map((u) => (
<div
key={u.id}
className="flex items-center justify-between p-6 hover:bg-white/5 transition-colors group"
className="flex items-center justify-between p-6 hover:bg-muted/50 transition-colors group"
>
<div className="flex items-center gap-5">
<div className="p-3 bg-primary/10 rounded-xl text-primary">
<HardDrive className="w-5 h-5" />
</div>
<div>
<div className="font-bold text-lg text-white">{u.name}</div>
<div className="font-bold text-lg text-foreground">{u.name}</div>
<div className="text-xs text-muted-foreground font-mono uppercase">
User: {u.user} • Payload: {u.size} • Handshake: {u.date}
</div>
@ -143,9 +142,9 @@ export function AdminDashboardTabs({
<TabsContent value="logs" className="animate-fadeIn">
<Card
variant="glass"
className="bg-black/40 border-white/5 font-mono overflow-hidden"
className="bg-card/80 border-border font-mono overflow-hidden"
>
<div className="bg-black/40 p-4 border-b border-white/5 flex gap-4 text-xs font-bold text-muted-foreground uppercase tracking-widest">
<div className="bg-muted/30 p-4 border-b border-border flex gap-4 text-xs font-bold text-muted-foreground uppercase tracking-widest">
<span className="w-32">Timestamp</span>
<span className="w-24">Action</span>
<span className="w-24">Node</span>
@ -155,7 +154,7 @@ export function AdminDashboardTabs({
{auditLogs.map((log, i) => (
<div
key={i}
className="flex gap-4 p-4 hover:bg-white/5 transition-colors"
className="flex gap-4 p-4 hover:bg-muted/50 transition-colors"
>
<span className="w-32 text-muted-foreground">
{log.timestamp
@ -168,7 +167,7 @@ export function AdminDashboardTabs({
<span className="w-24 text-magenta-500">
USER_{log.user_id != null ? String(log.user_id).slice(0, 4) : '???'}
</span>
<span className="text-white opacity-80 truncate">
<span className="text-foreground opacity-80 truncate">
{JSON.stringify(log.details ?? log.metadata ?? {})}
</span>
</div>