mirror of
https://github.com/prowler-cloud/prowler.git
synced 2026-07-24 21:11:53 +00:00
Alan Buscaglia
17a841a86d
- Add complete CSS variables for both light and dark themes in globals.css - Light theme: dark text on light backgrounds (primary: #1f2937, bg: #f9fafb) - Dark theme: white text on dark backgrounds (primary: #ffffff, bg: #1e293b) - Update all chart components to use CSS variables instead of hardcoded colors - Tooltips, legends, titles, and text automatically adapt to theme changes - Fix SankeyChart text to properly display in light mode (was hardcoded white) - Update DonutChart center label to use theme-aware text colors - All components now dynamically respond to theme toggle via next-themes
33 lines
794 B
TypeScript
33 lines
794 B
TypeScript
export interface ChartLegendItem {
|
|
label: string;
|
|
color: string;
|
|
}
|
|
|
|
interface ChartLegendProps {
|
|
items: ChartLegendItem[];
|
|
}
|
|
|
|
export function ChartLegend({ items }: ChartLegendProps) {
|
|
return (
|
|
<div
|
|
className="mt-4 inline-flex gap-[46px] rounded-full border-2 px-[19px] py-[9px]"
|
|
style={{ borderColor: "var(--chart-border)" }}
|
|
>
|
|
{items.map((item, index) => (
|
|
<div key={`legend-${index}`} className="flex items-center gap-1">
|
|
<div
|
|
className="h-3 w-3 rounded"
|
|
style={{ backgroundColor: item.color }}
|
|
/>
|
|
<span
|
|
className="text-xs"
|
|
style={{ color: "var(--chart-text-secondary)" }}
|
|
>
|
|
{item.label}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|