feat(KB-232): swap pace indicator colors and icons in UsageIndicator

- Swap CSS color assignments for slow/fast pace indicators in styles.css
- Swap CheckCircle2 and AlertCircle icons in UsageIndicator component
- Add changeset for the pace indicator color/icon swap
- Remove 2 lines from dashboard README
This commit is contained in:
gsxdsm
2026-03-30 18:51:14 -07:00
parent d4c4b5dadc
commit 97aa415378
3 changed files with 16 additions and 7 deletions

View File

@@ -1,5 +1,5 @@
import { useState, useEffect, useCallback, useRef } from "react";
import { X, RefreshCw, Activity, TrendingUp, CheckCircle, Info } from "lucide-react";
import { X, RefreshCw, Activity, TrendingUp, CheckCircle, AlertTriangle } from "lucide-react";
import type { ProviderUsage, UsageWindow } from "../api";
import { useUsageData } from "../hooks/useUsageData";
import { ProviderIcon } from "./ProviderIcon";
@@ -90,13 +90,13 @@ function UsageWindowRow({ window, viewMode }: UsageWindowRowProps) {
<div className="usage-pace-row" data-testid="pace-row">
{isAhead && (
<>
<TrendingUp size={14} className="pace-icon pace-ahead" />
<AlertTriangle size={14} className="pace-icon pace-ahead" />
<span className="pace-text pace-ahead">{pace.message}</span>
</>
)}
{isBehind && (
<>
<Info size={14} className="pace-icon pace-behind" />
<TrendingUp size={14} className="pace-icon pace-behind" />
<span className="pace-text pace-behind">{pace.message}</span>
</>
)}

View File

@@ -7643,9 +7643,9 @@ html .column.drag-over * {
font-weight: 500;
}
/* ahead = consuming faster than expected (now shown in info color) */
/* ahead = over pace, consuming faster than expected (warning - red) */
.pace-ahead {
color: #3b82f6; /* blue - was var(--color-error) */
color: var(--color-error);
}
/* on-track = good/expected usage (unchanged) */
@@ -7653,9 +7653,9 @@ html .column.drag-over * {
color: var(--color-success);
}
/* behind = consuming slower than expected (now shown in warning color) */
/* behind = under pace, consuming slower than expected (positive - green) */
.pace-behind {
color: var(--color-error); /* red - was #3b82f6 */
color: var(--color-success);
}
/* Empty state */