style(frontend): look&feel v2 — layered shadows, sharper radii, mono data register
Colors (GSD palette) untouched. New visual vocabulary across the whole GUI: - warm-tinted layered shadow tokens (--shadow-xs/sm/md) replacing flat rings; cards/dialogs framed with hairline border + real elevation - strict radii scale: xl cards / lg inputs / md controls / 2xl dialogs; buttons move from pills to rounded-md - third type register: --font-mono + tabular-nums on SQL, timers, dates, ids; standardized .thot-label micro-label tier - prose: framed tables with uppercase headers, elevated code blocks - SqlViewer badges moved from hardcoded Tailwind greens/reds to success/ destructive token tints; ResultsPanel inline styles replaced with classes - artifact gate: first option rendered as filled primary action Verified offline via Playwright against a mock backend replaying a real psd session (no VPN needed). tsc clean, 115/115 vitest. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -43,8 +43,9 @@ export function ResultsPanel({ sessionId }: Props) {
|
||||
return (
|
||||
<div>
|
||||
{/* Limit selector */}
|
||||
<div style={{ marginBottom: 8, display: "flex", gap: 8, alignItems: "center" }}>
|
||||
<div className="mb-2 flex items-center gap-2">
|
||||
<select
|
||||
className="rounded-lg border border-input bg-card px-2 py-1 text-sm shadow-xs outline-none transition-[border-color,box-shadow] focus:border-primary/50 focus:ring-2 focus:ring-ring/20"
|
||||
value={limit}
|
||||
onChange={(e) =>
|
||||
setLimit(e.target.value === "all" ? 1_000_000 : Number(e.target.value))
|
||||
@@ -55,7 +56,12 @@ export function ResultsPanel({ sessionId }: Props) {
|
||||
<option value="all">all</option>
|
||||
</select>
|
||||
|
||||
<button onClick={handleExport}>Export CSV</button>
|
||||
<button
|
||||
className="rounded-md border border-border/70 px-3 py-1 text-sm shadow-xs transition-colors hover:bg-accent"
|
||||
onClick={handleExport}
|
||||
>
|
||||
Export CSV
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Loading / error states */}
|
||||
@@ -70,8 +76,10 @@ export function ResultsPanel({ sessionId }: Props) {
|
||||
{/* Grid for everything else */}
|
||||
{data && !isScalar && (
|
||||
<>
|
||||
<div className="ag-theme-alpine" style={{ height: 400, width: "100%" }}>
|
||||
<AgGridReact columnDefs={columnDefs} rowData={rowData} />
|
||||
<div className="overflow-hidden rounded-xl border border-border/70 shadow-xs">
|
||||
<div className="ag-theme-alpine" style={{ height: 400, width: "100%" }}>
|
||||
<AgGridReact columnDefs={columnDefs} rowData={rowData} />
|
||||
</div>
|
||||
</div>
|
||||
{data.truncated && <div>(results truncated)</div>}
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user