style: format alert-pill component

This commit is contained in:
Alan Buscaglia
2025-10-22 10:21:33 +02:00
parent 62735ed4e9
commit d6589e807b
3 changed files with 26 additions and 14 deletions
+1 -4
View File
@@ -87,10 +87,7 @@ const CustomLineTooltip = ({
</div>
{newFindings !== undefined && (
<div className="flex items-center gap-2">
<Bell
size={14}
style={{ color: "var(--chart-fail)" }}
/>
<Bell size={14} style={{ color: "var(--chart-fail)" }} />
<span
className="text-xs"
style={{ color: "var(--chart-text-secondary)" }}
+4 -1
View File
@@ -21,7 +21,10 @@ export function AlertPill({
className="flex items-center gap-1 rounded-full px-2 py-1"
style={{ backgroundColor: "var(--chart-alert-bg)" }}
>
<AlertTriangle size={iconSize} style={{ color: "var(--chart-alert-text)" }} />
<AlertTriangle
size={iconSize}
style={{ color: "var(--chart-alert-text)" }}
/>
<span
className={cn(`text-${textSize}`, "font-semibold")}
style={{ color: "var(--chart-alert-text)" }}
+21 -9
View File
@@ -53,10 +53,7 @@ export function ChartTooltip({
</p>
</div>
<p
className="mt-1 text-xs"
style={{ color: CHART_COLORS.textPrimary }}
>
<p className="mt-1 text-xs" style={{ color: CHART_COLORS.textPrimary }}>
{typeof data.value === "number"
? data.value.toLocaleString()
: data.value}
@@ -66,7 +63,10 @@ export function ChartTooltip({
{data.newFindings !== undefined && data.newFindings > 0 && (
<div className="mt-1 flex items-center gap-2">
<Bell size={14} style={{ color: "var(--chart-fail)" }} />
<span className="text-xs" style={{ color: CHART_COLORS.textSecondary }}>
<span
className="text-xs"
style={{ color: CHART_COLORS.textSecondary }}
>
{data.newFindings} New Findings
</span>
</div>
@@ -75,7 +75,10 @@ export function ChartTooltip({
{data.new !== undefined && data.new > 0 && (
<div className="mt-1 flex items-center gap-2">
<Bell size={14} style={{ color: "var(--chart-fail)" }} />
<span className="text-xs" style={{ color: CHART_COLORS.textSecondary }}>
<span
className="text-xs"
style={{ color: CHART_COLORS.textSecondary }}
>
{data.new} New
</span>
</div>
@@ -84,14 +87,20 @@ export function ChartTooltip({
{data.muted !== undefined && data.muted > 0 && (
<div className="mt-1 flex items-center gap-2">
<VolumeX size={14} style={{ color: CHART_COLORS.textSecondary }} />
<span className="text-xs" style={{ color: CHART_COLORS.textSecondary }}>
<span
className="text-xs"
style={{ color: CHART_COLORS.textSecondary }}
>
{data.muted} Muted
</span>
</div>
)}
{data.change !== undefined && (
<p className="mt-1 text-xs" style={{ color: CHART_COLORS.textSecondary }}>
<p
className="mt-1 text-xs"
style={{ color: CHART_COLORS.textSecondary }}
>
<span className="font-bold">
{data.change > 0 ? "+" : ""}
{data.change}%
@@ -146,7 +155,10 @@ export function MultiSeriesChartTooltip({
{entry.value}
</span>
{entry.payload[`${entry.dataKey}_change`] && (
<span className="text-xs" style={{ color: CHART_COLORS.textSecondary }}>
<span
className="text-xs"
style={{ color: CHART_COLORS.textSecondary }}
>
({entry.payload[`${entry.dataKey}_change`] > 0 ? "+" : ""}
{entry.payload[`${entry.dataKey}_change`]}%)
</span>