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:
@@ -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>
|
||||
</>
|
||||
)}
|
||||
|
||||
@@ -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 */
|
||||
|
||||
Reference in New Issue
Block a user