gsadmin/certctl
1
0
Fork 0
mirror of https://github.com/shankar0123/certctl.git synced 2026-06-09 03:09:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: dashboard theme overhaul — light content area with branded teal sidebar

Browse Source 
Complete frontend visual redesign using certctl logo color palette:
- Deep teal sidebar (#0c2e25) with prominent centered logo (64px in white pill)
- Light content area (#f0f4f8) with white cards and visible borders
- Brand colors from logo: teal (#2ea88f), blue (#3b7dd8), orange (#e8873a), green (#4ebe6e)
- Inter + JetBrains Mono typography, colored stat card top borders
- All 17 pages + 7 components updated (25 files, ~700 lines changed)
- 15 new dashboard screenshots replacing old dark theme screenshots
- Prometheus metrics e2e test added, integration test mock fixes
- Docs updated: architecture.md theme description, testing-guide.md DNS-PERSIST-01 coverage

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Shankar
2026-03-26 23:27:42 -04:00
parent a4ea53efe1
commit ed8fa7e11f
48 changed files with 699 additions and 519 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/DataTable.tsx
+8 -8
View File
@@ -20,7 +20,7 @@ interface DataTableProps<T> {
export default function DataTable<T>({ columns, data, onRowClick, emptyMessage, isLoading, keyField = 'id', selectable, selectedKeys, onSelectionChange }: DataTableProps<T>) {
if (isLoading) {
return (
<div className="flex items-center justify-center py-16 text-slate-400">
<div className="flex items-center justify-center py-16 text-ink-muted">
<svg className="animate-spin h-5 w-5 mr-3" viewBox="0 0 24 24">
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
@@ -32,7 +32,7 @@ export default function DataTable<T>({ columns, data, onRowClick, emptyMessage,
if (!data.length) {
return (
<div className="flex items-center justify-center py-16 text-slate-500">
<div className="flex items-center justify-center py-16 text-ink-faint">
{emptyMessage || 'No data found'}
</div>
);
@@ -62,19 +62,19 @@ export default function DataTable<T>({ columns, data, onRowClick, emptyMessage,
<div className="overflow-x-auto">
<table className="w-full text-sm">
<thead>
<tr className="border-b-2 border-slate-700">
<tr className="border-b-2 border-surface-border bg-surface-muted">
{selectable && (
<th className="px-3 py-3 w-10">
<input
type="checkbox"
checked={allSelected || false}
onChange={toggleAll}
className="rounded border-slate-600 bg-slate-900 text-blue-600 focus:ring-blue-500 focus:ring-offset-0 cursor-pointer"
className="rounded border-surface-border bg-white text-brand-500 focus:ring-brand-500 focus:ring-offset-0 cursor-pointer"
/>
</th>
)}
{columns.map(col => (
<th key={col.key} className={`px-4 py-3 text-left text-xs font-semibold text-slate-400 uppercase tracking-wider ${col.className || ''}`}>
<th key={col.key} className={`px-4 py-3 text-left text-xs font-semibold text-ink-muted uppercase tracking-wider ${col.className || ''}`}>
{col.label}
</th>
))}
@@ -88,7 +88,7 @@ export default function DataTable<T>({ columns, data, onRowClick, emptyMessage,
<tr
key={rowKey}
onClick={() => onRowClick?.(item)}
className={`border-b border-slate-700/50 transition-colors hover:bg-blue-500/5 ${onRowClick ? 'cursor-pointer' : ''} ${isSelected ? 'bg-blue-500/10' : ''}`}
className={`border-b border-surface-border/50 transition-colors hover:bg-surface-muted ${onRowClick ? 'cursor-pointer' : ''} ${isSelected ? 'bg-brand-50' : ''}`}
>
{selectable && (
<td className="px-3 py-3 w-10">
@@ -97,12 +97,12 @@ export default function DataTable<T>({ columns, data, onRowClick, emptyMessage,
checked={isSelected || false}
onChange={(e) => { e.stopPropagation(); toggleOne(rowKey); }}
onClick={(e) => e.stopPropagation()}
className="rounded border-slate-600 bg-slate-900 text-blue-600 focus:ring-blue-500 focus:ring-offset-0 cursor-pointer"
className="rounded border-surface-border bg-white text-brand-500 focus:ring-brand-500 focus:ring-offset-0 cursor-pointer"
/>
</td>
)}
{columns.map(col => (
<td key={col.key} className={`px-4 py-3 ${col.className || ''}`}>
<td key={col.key} className={`px-4 py-3 text-ink ${col.className || ''}`}>
{col.render(item)}
</td>
))}