Results data grid uses pre-design-system palette (blue/slate) — doesn't match app chrome

Aperta Adatta ai principianti
  • Qualcosa non va?
#187 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
76/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Tranquilla
Stack tecnologico
react, typescript
Ambito
design, frontend

Direzione di ricerca

Leggi src/components/ui/GridView.tsx e confronta la sua palette con i token corrispondenti in src/styles/globals.css, controllando entrambi i temi isDark. Sostituisci i colori della griglia codificati direttamente con valori letterali che rispecchiano i token nominati e aggiungi commenti che colleghino ogni valore al relativo token. Il lavoro è completato quando la palette della griglia corrisponde al design system in entrambi i temi.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

bug enhancement

Summary

The query results table (Glide Data Grid in src/components/ui/GridView.tsx) renders with the old pre-design-system palette while the surrounding results toolbar/buttons use the new Radix Cyan tokens. The grid therefore looks visibly "bluer" and off-theme next to the rest of the app.

Hardcoded values that didn't match src/styles/globals.css:

  • accentColor: "#06b6d4" (old cyan) — selection ring/highlight; brand accent is --accent-9 #00a2c7.
  • Cell/header backgrounds used Tailwind slate (#0f172a, #1e293b, #334155, #2d3748) — bluer than the Radix Slate neutrals (#111113, #18191b, #212225, #272a2d).
  • Date cells #38bdf8 / #0284c7 (sky blue) and binary-cell labels #818cf8 / #4f46e5 (indigo) — off-brand.
  • New/modified row tints used emerald/amber (#10b981, #f59e0b) instead of the --success-9 / --warning-9 tokens.

Light theme had the equivalent mismatch.

Why hardcoded at all

Glide renders to a <canvas>, so the theme can't use CSS var() — it needs literal color strings. The fix mirrors the token hex values from globals.css, keyed on isDark, with comments mapping each back to its token so the two stay in sync.

Fix

Replace the grid palette with token-mirrored values: neutral scale for cell/header/border/text, --accent-9/--accent-11 for accent + date/binary text, --success-11/--danger-11 for numeric +/- coloring, --success-9/--warning-9 tints for new/modified rows.

Related to the design-system migration (#152).

Lingua principale
TypeScript
Stelle
6
Fork
1
Merge medio
17m
PR unite (30g)
2

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di openidle-dev/queryden

Tutte le issue di openidle-dev/queryden

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.