style(ui): P3 AdminAuditLogsView semantic tokens + elevated card

- Replace all text-kodo-content-dim with text-muted-foreground (audit P3)
- Card glass → elevated for consistency with admin dashboard

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
senke 2026-02-07 19:35:33 +01:00
parent fb1c18dd69
commit ea1841a526

View file

@ -34,7 +34,7 @@ export const AdminAuditLogsView: React.FC = () => {
<div className="flex justify-between items-center">
<div>
<h2 className="text-2xl font-display font-bold text-white mb-1">AUDIT PROTOCOL</h2>
<p className="text-kodo-content-dim font-mono text-xs uppercase tracking-widest">Global Immutable Ledger</p>
<p className="text-muted-foreground font-mono text-xs uppercase tracking-widest">Global Immutable Ledger</p>
</div>
<div className="flex gap-2">
<Button variant="ghost" size="sm" onClick={() => fetchLogs()} disabled={loading}>
@ -45,7 +45,7 @@ export const AdminAuditLogsView: React.FC = () => {
<div className="flex flex-col md:flex-row gap-4">
<div className="relative flex-1">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-kodo-content-dim" />
<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">
@ -53,11 +53,11 @@ export const AdminAuditLogsView: React.FC = () => {
</Button>
</div>
<Card variant="glass" className="flex-1 overflow-hidden border-white/5 bg-black/40 flex flex-col p-0">
<Card variant="elevated" className="flex-1 overflow-hidden flex flex-col p-0">
<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-[10px] font-mono text-kodo-content-dim uppercase tracking-wider">
<tr className="border-b border-white/5 bg-white/5 text-[10px] 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>
@ -75,14 +75,14 @@ export const AdminAuditLogsView: React.FC = () => {
</tr>
) : logs.length === 0 ? (
<tr>
<td colSpan={6} className="p-12 text-center text-kodo-content-dim font-mono uppercase text-xs">
<td colSpan={6} className="p-12 text-center text-muted-foreground font-mono uppercase text-xs">
No temporal data packets recovered.
</td>
</tr>
) : (
logs.map((log) => (
<tr key={log.id} className="hover:bg-white/5 transition-colors group border-white/5">
<td className="p-4 font-mono text-[10px] text-kodo-content-dim">
<td className="p-4 font-mono text-[10px] text-muted-foreground">
{format(new Date(log.timestamp), 'MMM dd, HH:mm:ss')}
</td>
<td className="p-4">
@ -97,9 +97,9 @@ export const AdminAuditLogsView: React.FC = () => {
</span>
</td>
<td className="p-4 font-mono text-xs text-white/80">
{log.resource} <span className="text-kodo-content-dim opacity-50">#{log.resource_id?.slice(0, 8)}</span>
{log.resource} <span className="text-muted-foreground opacity-50">#{log.resource_id?.slice(0, 8)}</span>
</td>
<td className="p-4 text-[10px] text-kodo-content-dim max-w-[200px] truncate">
<td className="p-4 text-[10px] text-muted-foreground max-w-[200px] truncate">
{JSON.stringify(log.context)}
</td>
<td className="p-4 text-right">
@ -107,7 +107,7 @@ export const AdminAuditLogsView: React.FC = () => {
<span className="font-mono text-[10px] text-white/80 flex items-center gap-1">
<Globe className="w-2 h-2" /> {log.ip_address}
</span>
<span className="text-[9px] text-kodo-content-dim truncate max-w-[120px]" title={log.user_agent}>
<span className="text-[9px] text-muted-foreground truncate max-w-[120px]" title={log.user_agent}>
{log.user_agent}
</span>
</div>
@ -121,7 +121,7 @@ export const AdminAuditLogsView: React.FC = () => {
{/* Pagination placeholder */}
<div className="p-4 border-t border-white/5 bg-white/2 flex justify-between items-center mt-auto">
<span className="text-[10px] text-kodo-content-dim font-mono uppercase">
<span className="text-[10px] text-muted-foreground font-mono uppercase">
Packet: {logs.length} / Total: {total}
</span>
<div className="flex gap-2">