Skip to content

Commit 667f1a0

Browse files
surajmaurya-gitsurajmaurya-git
committed
refactor: update dashboard builder components to use semantic theme colors and variables
1 parent ff7c43c commit 667f1a0

8 files changed

Lines changed: 41 additions & 41 deletions

File tree

‎src/components/dashboard-builder/BuilderLayout.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -63,10 +63,10 @@ export default function BuilderLayout({ onSave }: { onSave: (templateData: any)
6363
};
6464

6565
return (
66-
<div className="flex flex-col h-[calc(100vh-100px)] w-full border rounded-xl overflow-hidden shadow-sm bg-white">
66+
<div className="flex flex-col h-[calc(100vh-100px)] w-full border rounded-xl overflow-hidden shadow-sm bg-background">
6767
{/* Header bar */}
68-
<div className="flex items-center justify-between px-4 py-2 bg-gray-50 border-b">
69-
<h2 className="text-sm font-semibold text-gray-700">Dashboard Layout Builder</h2>
68+
<div className="flex items-center justify-between px-4 py-2 bg-muted/30 border-b">
69+
<h2 className="text-sm font-semibold text-foreground">Dashboard Layout Builder</h2>
7070
<div className="flex items-center gap-2">
7171
<input
7272
type="file"

‎src/components/dashboard-builder/CanvasGrid.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -90,28 +90,28 @@ function SectionGrid({ section, isOnly }: { section: Section; isOnly: boolean })
9090

9191
return (
9292
<div
93-
className="bg-white rounded-lg border border-gray-200 shadow-sm mb-8"
93+
className="bg-card rounded-lg border border-border shadow-sm mb-8"
9494
onClick={(e) => {
9595
e.stopPropagation();
9696
setSelectedSection(section.id);
9797
}}
9898
>
9999
{/* ── Section Header ── */}
100-
<div className="flex items-center justify-between px-4 py-3 border-b border-gray-100 bg-gray-50/50 rounded-t-lg">
100+
<div className="flex items-center justify-between px-4 py-3 border-b border-border bg-muted/30 rounded-t-lg">
101101
<div className="flex items-center gap-3 flex-1 min-w-0">
102-
<Activity className="w-5 h-5 text-[#0066cc] shrink-0" />
102+
<Activity className="w-5 h-5 text-primary shrink-0" />
103103
{isEditingTitle ? (
104104
<input
105105
autoFocus
106-
className="text-[20px] font-semibold text-[#002b49] bg-transparent border-b-2 border-primary outline-none flex-1 min-w-0"
106+
className="text-[20px] font-semibold text-foreground bg-transparent border-b-2 border-primary outline-none flex-1 min-w-0"
107107
value={titleDraft}
108108
onChange={(e) => setTitleDraft(e.target.value)}
109109
onBlur={handleTitleSave}
110110
onKeyDown={(e) => { if (e.key === 'Enter') handleTitleSave(); }}
111111
/>
112112
) : (
113113
<h3
114-
className="text-[20px] font-semibold text-[#002b49] truncate cursor-pointer hover:text-primary transition-colors"
114+
className="text-[20px] font-semibold text-foreground truncate cursor-pointer hover:text-primary transition-colors"
115115
onDoubleClick={() => {
116116
setTitleDraft(section.title);
117117
setIsEditingTitle(true);
@@ -236,7 +236,7 @@ function SectionGrid({ section, isOnly }: { section: Section; isOnly: boolean })
236236
</ReactGridLayout>
237237

238238
{sectionLayout.length === 0 && (
239-
<div className="absolute inset-0 flex items-center justify-center pointer-events-none text-gray-300 text-sm">
239+
<div className="absolute inset-0 flex items-center justify-center pointer-events-none text-muted-foreground text-sm">
240240
Drag widgets here
241241
</div>
242242
)}
@@ -293,7 +293,7 @@ export default function CanvasGrid({ onSave }: { onSave?: () => void }) {
293293

294294
return (
295295
<div
296-
className="flex-1 bg-gray-100 overflow-y-auto h-full p-4"
296+
className="flex-1 bg-background overflow-y-auto h-full p-4"
297297
onClick={() => { setSelectedWidget(null); }}
298298
>
299299
<div className="w-full max-w-7xl mx-auto space-y-6">
@@ -313,7 +313,7 @@ export default function CanvasGrid({ onSave }: { onSave?: () => void }) {
313313
e.stopPropagation();
314314
addSection();
315315
}}
316-
className="w-full py-4 border-2 border-dashed border-gray-300 rounded-lg text-gray-400 hover:border-primary hover:text-primary transition-colors flex items-center justify-center gap-2 text-sm font-medium"
316+
className="w-full py-4 border-2 border-dashed border-border rounded-lg text-muted-foreground hover:border-primary hover:text-primary transition-colors flex items-center justify-center gap-2 text-sm font-medium"
317317
>
318318
<Plus size={16} />
319319
Add Section

‎src/components/dashboard-builder/ComponentSidebar.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,8 @@ export default function ComponentSidebar() {
2828
};
2929

3030
return (
31-
<div className="w-64 border-r bg-gray-50 flex flex-col h-full">
32-
<div className="p-4 border-b font-medium bg-white">
31+
<div className="w-64 border-r bg-card flex flex-col h-full">
32+
<div className="p-4 border-b font-medium bg-background">
3333
Component Library
3434
</div>
3535
<div className="p-4 flex-1 overflow-y-auto space-y-3">
@@ -48,9 +48,9 @@ export default function ComponentSidebar() {
4848
onDragEnd={onDragEnd}
4949
className="cursor-move"
5050
>
51-
<Card className="hover:border-primary hover:shadow-sm transition-all bg-white border-dashed">
51+
<Card className="hover:border-primary hover:shadow-sm transition-all bg-card border-dashed">
5252
<CardContent className="p-3 flex items-center gap-3">
53-
<div className="p-2 bg-gray-100 rounded text-gray-500">
53+
<div className="p-2 bg-muted rounded text-muted-foreground">
5454
{widget.icon}
5555
</div>
5656
<span className="text-sm font-medium">{widget.name}</span>

‎src/components/dashboard-builder/DynamicDashboard.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -64,12 +64,12 @@ function SectionView({
6464
});
6565

6666
return (
67-
<div className="bg-white rounded-lg border border-gray-200 shadow-sm mb-8">
67+
<div className="bg-card rounded-lg border border-border shadow-sm mb-8">
6868
{/* Section Header */}
69-
<div className="flex items-center justify-between px-4 py-3 border-b border-gray-100 bg-gray-50/50 rounded-t-lg">
69+
<div className="flex items-center justify-between px-4 py-3 border-b border-border bg-muted/30 rounded-t-lg">
7070
<div className="flex items-center gap-3 flex-1 min-w-0">
71-
<Activity className="w-5 h-5 text-[#0066cc] shrink-0" />
72-
<h3 className="text-[20px] font-semibold text-[#002b49] truncate">{section.title}</h3>
71+
<Activity className="w-5 h-5 text-primary shrink-0" />
72+
<h3 className="text-[20px] font-semibold text-foreground truncate">{section.title}</h3>
7373
</div>
7474
</div>
7575

@@ -90,7 +90,7 @@ function SectionView({
9090
const widgetConfig = widgets[item.i];
9191
if (!widgetConfig) {
9292
return (
93-
<div key={item.i} className="bg-white border rounded p-4 text-sm text-red-400 border-red-200">
93+
<div key={item.i} className="bg-card border border-red-200 rounded p-4 text-sm text-red-400">
9494
Widget {item.i} not found
9595
</div>
9696
);
@@ -123,7 +123,7 @@ interface DynamicDashboardProps {
123123
export function DynamicDashboard({ schema, nodeId, pollIntervalMs = 0 }: DynamicDashboardProps) {
124124
if (!schema || !schema.layout || !schema.widgets || !Array.isArray(schema.layout)) {
125125
return (
126-
<div className="flex items-center justify-center h-64 bg-slate-50 border rounded-lg text-slate-400">
126+
<div className="flex items-center justify-center h-64 bg-muted/30 border border-border rounded-lg text-muted-foreground">
127127
No valid dashboard configuration found.
128128
</div>
129129
);

‎src/components/dashboard-builder/PropertiesPanel.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export default function PropertiesPanel() {
2525

2626
if (!selectedWidgetId || !widget) {
2727
return (
28-
<div className="w-72 border-l bg-gray-50 p-4 text-center text-sm text-gray-500 h-full flex items-center justify-center">
28+
<div className="w-72 border-l bg-card p-4 text-center text-sm text-muted-foreground h-full flex items-center justify-center">
2929
Select a component to edit its properties
3030
</div>
3131
);
@@ -43,14 +43,14 @@ export default function PropertiesPanel() {
4343
};
4444

4545
return (
46-
<div className="w-72 border-l bg-white flex flex-col h-full">
47-
<div className="p-4 border-b font-medium bg-gray-50">
46+
<div className="w-72 border-l bg-card flex flex-col h-full">
47+
<div className="p-4 border-b font-medium bg-background">
4848
Properties
4949
</div>
5050
<div className="p-4 flex-1 overflow-y-auto space-y-6">
5151
<div className="space-y-2">
5252
<Label>Widget Type</Label>
53-
<div className="text-sm px-3 py-2 bg-gray-100 rounded text-gray-600 font-mono">
53+
<div className="text-sm px-3 py-2 bg-muted rounded text-muted-foreground font-mono">
5454
{widget.type}
5555
</div>
5656
</div>
@@ -130,7 +130,7 @@ export default function PropertiesPanel() {
130130
<input
131131
type="checkbox"
132132
id="showLatest"
133-
className="w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary cursor-pointer"
133+
className="w-4 h-4 rounded border-input text-primary focus:ring-primary cursor-pointer"
134134
checked={draftConfig.showLatest !== false}
135135
onChange={(e) => handleConfigChange({ showLatest: e.target.checked })}
136136
/>
@@ -140,7 +140,7 @@ export default function PropertiesPanel() {
140140
<input
141141
type="checkbox"
142142
id="showMin"
143-
className="w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary cursor-pointer"
143+
className="w-4 h-4 rounded border-input text-primary focus:ring-primary cursor-pointer"
144144
checked={draftConfig.showMin !== false}
145145
onChange={(e) => handleConfigChange({ showMin: e.target.checked })}
146146
/>
@@ -150,7 +150,7 @@ export default function PropertiesPanel() {
150150
<input
151151
type="checkbox"
152152
id="showAvg"
153-
className="w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary cursor-pointer"
153+
className="w-4 h-4 rounded border-input text-primary focus:ring-primary cursor-pointer"
154154
checked={draftConfig.showAvg !== false}
155155
onChange={(e) => handleConfigChange({ showAvg: e.target.checked })}
156156
/>
@@ -160,7 +160,7 @@ export default function PropertiesPanel() {
160160
<input
161161
type="checkbox"
162162
id="showMax"
163-
className="w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary cursor-pointer"
163+
className="w-4 h-4 rounded border-input text-primary focus:ring-primary cursor-pointer"
164164
checked={draftConfig.showMax !== false}
165165
onChange={(e) => handleConfigChange({ showMax: e.target.checked })}
166166
/>
@@ -232,7 +232,7 @@ export default function PropertiesPanel() {
232232
</p>
233233

234234
{(draftConfig.valueMappings as ValueMapping[] || []).map((mapping: ValueMapping, idx: number) => (
235-
<div key={mapping.id} className="border rounded-lg p-3 space-y-2 bg-gray-50 relative">
235+
<div key={mapping.id} className="border rounded-lg p-3 space-y-2 bg-muted/30 relative">
236236
<Button
237237
type="button"
238238
variant="ghost"
@@ -412,7 +412,7 @@ export default function PropertiesPanel() {
412412
{series.map((s, idx) => (
413413
<div
414414
key={s.id}
415-
className="border rounded-lg p-3 space-y-2.5 bg-gray-50 relative"
415+
className="border rounded-lg p-3 space-y-2.5 bg-muted/30 relative"
416416
style={{ borderLeft: `3px solid ${s.color}` }}
417417
>
418418
{/* Series header row */}

‎src/components/dashboard-builder/widgets/GaugeWidget.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export default function GaugeWidget({ value, timestamp, title, config }: GaugeWi
1818
const displayTitle = title || config.title || 'Gauge';
1919

2020
return (
21-
<div className="w-full h-full flex flex-col p-4 bg-white">
21+
<div className="w-full h-full flex flex-col p-4 bg-card text-card-foreground rounded-lg">
2222
<div className="font-medium text-sm mb-2">{displayTitle}</div>
2323
<div className="flex-1 w-full h-full min-h-0 relative flex items-center justify-center">
2424
<div className="w-full h-full absolute inset-0 flex items-center justify-center">

‎src/components/dashboard-builder/widgets/HistoricalTrendWidget.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -207,7 +207,7 @@ export function HistoricalTrendWidget({
207207

208208
return (
209209
<Card className="w-full h-full flex flex-col hover:border-primary transition-colors cursor-default overflow-hidden">
210-
<CardHeader className="pb-3 pt-3 px-4 border-b flex-none bg-white z-10 relative">
210+
<CardHeader className="pb-3 pt-3 px-4 border-b flex-none bg-card z-10 relative">
211211
<div className="flex flex-wrap items-center justify-between gap-4">
212212
<div className="flex items-center gap-2 min-w-[50px] shrink-0">
213213
<Activity className="h-4 w-4 text-primary shrink-0" />
@@ -241,7 +241,7 @@ export function HistoricalTrendWidget({
241241
</CardHeader>
242242
<CardContent className="p-0 flex-1 relative min-h-[150px]">
243243
{isEditMode ? (
244-
<div className="absolute inset-4 flex items-center justify-center bg-gray-50 text-gray-400 text-sm rounded outline-dashed outline-2 outline-gray-200">
244+
<div className="absolute inset-4 flex items-center justify-center bg-muted/30 text-muted-foreground text-sm rounded outline-dashed outline-2 outline-border">
245245
Historical Trend Preview
246246
</div>
247247
) : isLoading && data.length === 0 ? (
@@ -258,7 +258,7 @@ export function HistoricalTrendWidget({
258258
<div className="absolute top-2 right-4 z-10 flex flex-col items-end text-right p-1.5 rounded pointer-events-none">
259259
{/* <span className="text-[10px] uppercase font-semibold text-muted-foreground tracking-wider leading-none">Latest Value</span> */}
260260
<div className="flex items-baseline gap-1 mt-0.5">
261-
<span className="text-xl font-bold text-slate-800 leading-none">{stats.last}</span>
261+
<span className="text-xl font-bold text-foreground leading-none">{stats.last}</span>
262262
{unit && <span className="text-xs font-semibold text-muted-foreground">{unit}</span>}
263263
</div>
264264
<span className="text-[9px] text-muted-foreground mt-0.5 leading-none">{stats.lastTime}</span>
@@ -323,25 +323,25 @@ export function HistoricalTrendWidget({
323323
)}
324324
</CardContent>
325325
{stats && showFooter && (
326-
<div className="mt-auto pt-2 pb-2 px-4 border-t border-slate-100 flex justify-between items-center text-xs shrink-0 z-10 bg-white gap-4 w-full">
326+
<div className="mt-auto pt-2 pb-2 px-4 border-t border-border flex justify-between items-center text-xs shrink-0 z-10 bg-card gap-4 w-full">
327327
{showMin && (
328328
<div className={`flex flex-col truncate flex-1 ${(!showAvg && !showMax) ? 'items-center text-center' : 'items-start text-left'}`}>
329329
<span className="text-[10px] font-semibold uppercase text-muted-foreground tracking-wider">Min</span>
330-
<span className="font-medium text-slate-700 truncate w-full">{stats.min}{unit ? ` ${unit}` : ''} | {stats.minTime}</span>
330+
<span className="font-medium text-foreground truncate w-full">{stats.min}{unit ? ` ${unit}` : ''} | {stats.minTime}</span>
331331
</div>
332332
)}
333333

334334
{showAvg && (
335335
<div className="flex flex-col items-center text-center truncate flex-1">
336336
<span className="text-[10px] font-semibold uppercase text-muted-foreground tracking-wider">Avg</span>
337-
<span className="font-medium text-slate-700 truncate w-full">{stats.avg}{unit ? ` ${unit}` : ''}</span>
337+
<span className="font-medium text-foreground truncate w-full">{stats.avg}{unit ? ` ${unit}` : ''}</span>
338338
</div>
339339
)}
340340

341341
{showMax && (
342342
<div className={`flex flex-col truncate flex-1 ${(!showAvg && !showMin) ? 'items-center text-center' : 'items-end text-right'}`}>
343343
<span className="text-[10px] font-semibold uppercase text-muted-foreground tracking-wider">Max</span>
344-
<span className="font-medium text-slate-700 truncate w-full">{stats.max}{unit ? ` ${unit}` : ''} | {stats.maxTime}</span>
344+
<span className="font-medium text-foreground truncate w-full">{stats.max}{unit ? ` ${unit}` : ''} | {stats.maxTime}</span>
345345
</div>
346346
)}
347347
</div>

‎src/components/dashboard-builder/widgets/WidgetRenderer.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export default function WidgetRenderer(props: WidgetRendererProps) {
4747
const { config, nodeId, pollIntervalMs, isEditMode } = props;
4848

4949
if (!config) {
50-
return <div className="p-4 opacity-50 bg-gray-100 rounded">Invalid Widget</div>;
50+
return <div className="p-4 opacity-50 bg-muted rounded text-muted-foreground">Invalid Widget</div>;
5151
}
5252

5353
switch (config.type) {
@@ -107,7 +107,7 @@ export default function WidgetRenderer(props: WidgetRendererProps) {
107107
);
108108
default:
109109
return (
110-
<Card className="w-full h-full flex items-center justify-center bg-gray-50 text-gray-400">
110+
<Card className="w-full h-full flex items-center justify-center bg-muted/30 text-muted-foreground">
111111
Unknown Widget: {config.type}
112112
</Card>
113113
);

0 commit comments

Comments
 (0)