Skip to content

Commit 69e716b

Browse files
Patel230Patel230
committed
Enhance zoom controls with colorful design and improved radar visibility
- Add meaningful color scheme to zoom controls across all charts - Zoom In: ForestGreen (#228B22) with hover to LimeGreen (#32CD32) - Zoom Out: Crimson (#DC143C) with hover to Tomato (#FF6347) - Reset: SteelBlue (#4682B4) with hover to lighter SteelBlue (#5A9BD4) - Apply consistent colors to pie chart and all radar chart components - Fix pie chart zoom control order to match radar charts (ZoomIn, ZoomOut, Reset) - Add legend card hover effects with subtle tilt and lift animations - Increase radar circular grid opacity from 0.2 to 0.35 for better visibility - Add professional shadows and smooth hover transitions to all controls - Create intuitive color psychology (Green=positive, Red=negative, Blue=neutral)
1 parent 283b8f1 commit 69e716b

5 files changed

Lines changed: 55 additions & 19 deletions

File tree

‎packages/web/src/components/ListView.tsx‎

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1161,24 +1161,33 @@ export function ListView() {
11611161
<div className="relative">
11621162
{/* Zoom Controls */}
11631163
<div className="absolute top-4 right-4 flex flex-col gap-2 z-10">
1164-
<button
1165-
onClick={handleZoomOut}
1166-
className="p-2 bg-gray-600 hover:bg-gray-500 text-white rounded"
1167-
title="Zoom Out"
1168-
>
1169-
<ZoomOut className="h-4 w-4" />
1170-
</button>
11711164
<button
11721165
onClick={handleZoomIn}
1173-
className="p-2 bg-gray-600 hover:bg-gray-500 text-white rounded"
1166+
className="p-2 text-white rounded shadow-lg transition-all duration-200"
1167+
style={{ backgroundColor: '#228B22', boxShadow: '0 4px 6px rgba(34, 139, 34, 0.25)' }}
11741168
title="Zoom In"
1169+
onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#32CD32'}
1170+
onMouseLeave={(e) => e.currentTarget.style.backgroundColor = '#228B22'}
11751171
>
11761172
<ZoomIn className="h-4 w-4" />
11771173
</button>
1174+
<button
1175+
onClick={handleZoomOut}
1176+
className="p-2 text-white rounded shadow-lg transition-all duration-200"
1177+
style={{ backgroundColor: '#DC143C', boxShadow: '0 4px 6px rgba(220, 20, 60, 0.25)' }}
1178+
title="Zoom Out"
1179+
onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#FF6347'}
1180+
onMouseLeave={(e) => e.currentTarget.style.backgroundColor = '#DC143C'}
1181+
>
1182+
<ZoomOut className="h-4 w-4" />
1183+
</button>
11781184
<button
11791185
onClick={handleResetLayout}
1180-
className="p-2 bg-gray-600 hover:bg-gray-500 text-white rounded"
1186+
className="p-2 text-white rounded shadow-lg transition-all duration-200"
1187+
style={{ backgroundColor: '#4682B4', boxShadow: '0 4px 6px rgba(70, 130, 180, 0.25)' }}
11811188
title="Reset Zoom"
1189+
onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#5A9BD4'}
1190+
onMouseLeave={(e) => e.currentTarget.style.backgroundColor = '#4682B4'}
11821191
>
11831192
<RotateCcw className="h-4 w-4" />
11841193
</button>

‎packages/web/src/components/NodeDistributionRadar.tsx‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -128,22 +128,31 @@ export function NodeDistributionRadar({ className = '', showLegend = true }: Nod
128128
<div className="absolute top-4 right-4 flex flex-col gap-2 z-10">
129129
<button
130130
onClick={handleZoomIn}
131-
className="p-2 bg-gray-600 hover:bg-gray-500 text-white rounded"
131+
className="p-2 text-white rounded shadow-lg transition-all duration-200"
132+
style={{ backgroundColor: '#228B22', boxShadow: '0 4px 6px rgba(34, 139, 34, 0.25)' }}
132133
title="Zoom In"
134+
onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#32CD32'}
135+
onMouseLeave={(e) => e.currentTarget.style.backgroundColor = '#228B22'}
133136
>
134137
<ZoomIn className="h-4 w-4" />
135138
</button>
136139
<button
137140
onClick={handleZoomOut}
138-
className="p-2 bg-gray-600 hover:bg-gray-500 text-white rounded"
141+
className="p-2 text-white rounded shadow-lg transition-all duration-200"
142+
style={{ backgroundColor: '#DC143C', boxShadow: '0 4px 6px rgba(220, 20, 60, 0.25)' }}
139143
title="Zoom Out"
144+
onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#FF6347'}
145+
onMouseLeave={(e) => e.currentTarget.style.backgroundColor = '#DC143C'}
140146
>
141147
<ZoomOut className="h-4 w-4" />
142148
</button>
143149
<button
144150
onClick={handleReset}
145-
className="p-2 bg-gray-600 hover:bg-gray-500 text-white rounded"
151+
className="p-2 text-white rounded shadow-lg transition-all duration-200"
152+
style={{ backgroundColor: '#4682B4', boxShadow: '0 4px 6px rgba(70, 130, 180, 0.25)' }}
146153
title="Reset Zoom"
154+
onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#5A9BD4'}
155+
onMouseLeave={(e) => e.currentTarget.style.backgroundColor = '#4682B4'}
147156
>
148157
<RotateCcw className="h-4 w-4" />
149158
</button>

‎packages/web/src/components/PriorityDistributionRadar.tsx‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -130,22 +130,31 @@ export function PriorityDistributionRadar({ className = '', showLegend = true }:
130130
<div className="absolute top-4 right-4 flex flex-col gap-2 z-10">
131131
<button
132132
onClick={handleZoomIn}
133-
className="p-2 bg-gray-600 hover:bg-gray-500 text-white rounded"
133+
className="p-2 text-white rounded shadow-lg transition-all duration-200"
134+
style={{ backgroundColor: '#228B22', boxShadow: '0 4px 6px rgba(34, 139, 34, 0.25)' }}
134135
title="Zoom In"
136+
onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#32CD32'}
137+
onMouseLeave={(e) => e.currentTarget.style.backgroundColor = '#228B22'}
135138
>
136139
<ZoomIn className="h-4 w-4" />
137140
</button>
138141
<button
139142
onClick={handleZoomOut}
140-
className="p-2 bg-gray-600 hover:bg-gray-500 text-white rounded"
143+
className="p-2 text-white rounded shadow-lg transition-all duration-200"
144+
style={{ backgroundColor: '#DC143C', boxShadow: '0 4px 6px rgba(220, 20, 60, 0.25)' }}
141145
title="Zoom Out"
146+
onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#FF6347'}
147+
onMouseLeave={(e) => e.currentTarget.style.backgroundColor = '#DC143C'}
142148
>
143149
<ZoomOut className="h-4 w-4" />
144150
</button>
145151
<button
146152
onClick={handleReset}
147-
className="p-2 bg-gray-600 hover:bg-gray-500 text-white rounded"
153+
className="p-2 text-white rounded shadow-lg transition-all duration-200"
154+
style={{ backgroundColor: '#4682B4', boxShadow: '0 4px 6px rgba(70, 130, 180, 0.25)' }}
148155
title="Reset Zoom"
156+
onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#5A9BD4'}
157+
onMouseLeave={(e) => e.currentTarget.style.backgroundColor = '#4682B4'}
149158
>
150159
<RotateCcw className="h-4 w-4" />
151160
</button>

‎packages/web/src/components/RadarChart.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export function RadarChart({
5555
.attr('fill', 'none')
5656
.attr('stroke', 'white')
5757
.attr('stroke-width', 1)
58-
.attr('opacity', 0.2);
58+
.attr('opacity', 0.35);
5959
}
6060

6161
// Create the axis lines

‎packages/web/src/components/TaskDistributionRadar.tsx‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -128,22 +128,31 @@ export function TaskDistributionRadar({ className = '', showLegend = true }: Tas
128128
<div className="absolute top-4 right-4 flex flex-col gap-2 z-10">
129129
<button
130130
onClick={handleZoomIn}
131-
className="p-2 bg-gray-600 hover:bg-gray-500 text-white rounded"
131+
className="p-2 text-white rounded shadow-lg transition-all duration-200"
132+
style={{ backgroundColor: '#228B22', boxShadow: '0 4px 6px rgba(34, 139, 34, 0.25)' }}
132133
title="Zoom In"
134+
onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#32CD32'}
135+
onMouseLeave={(e) => e.currentTarget.style.backgroundColor = '#228B22'}
133136
>
134137
<ZoomIn className="h-4 w-4" />
135138
</button>
136139
<button
137140
onClick={handleZoomOut}
138-
className="p-2 bg-gray-600 hover:bg-gray-500 text-white rounded"
141+
className="p-2 text-white rounded shadow-lg transition-all duration-200"
142+
style={{ backgroundColor: '#DC143C', boxShadow: '0 4px 6px rgba(220, 20, 60, 0.25)' }}
139143
title="Zoom Out"
144+
onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#FF6347'}
145+
onMouseLeave={(e) => e.currentTarget.style.backgroundColor = '#DC143C'}
140146
>
141147
<ZoomOut className="h-4 w-4" />
142148
</button>
143149
<button
144150
onClick={handleReset}
145-
className="p-2 bg-gray-600 hover:bg-gray-500 text-white rounded"
151+
className="p-2 text-white rounded shadow-lg transition-all duration-200"
152+
style={{ backgroundColor: '#4682B4', boxShadow: '0 4px 6px rgba(70, 130, 180, 0.25)' }}
146153
title="Reset Zoom"
154+
onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#5A9BD4'}
155+
onMouseLeave={(e) => e.currentTarget.style.backgroundColor = '#4682B4'}
147156
>
148157
<RotateCcw className="h-4 w-4" />
149158
</button>

0 commit comments

Comments
 (0)