bullitt/trackbox

Fork 0

Stats: Fix duplicate icon — 'Events' and 'Uptime' both use the Activity icon #38

New issue

Closed

opened 2026-06-27 15:41:15 +02:00 by bullitt · 1 comment

bullitt commented

2026-06-27 15:41:15 +02:00

Owner

Problem

In the Stats stat card grid, both "Events" and "Uptime" use the Activity icon from lucide-react. Two cards in the same visual grid with identical icons makes them harder to distinguish at a glance.

Implementation

File: frontend/src/pages/Stats.tsx

Change the Uptime card icon from Activity to something more appropriate for system uptime:

Server — communicates infrastructure/system
Timer — communicates elapsed time
CheckCircle2 — communicates health/status

Recommended: use Server for Uptime.

import { Package, PackageCheck, Cpu, Activity, TrendingUp, Server, AlertTriangle } from "lucide-react"

// Change:
<StatCard icon={Activity} label="Uptime" ... />
// To:
<StatCard icon={Server} label="Uptime" ... />

Acceptance criteria

No two stat cards in the grid use the same icon
Uptime card has a visually distinct icon that communicates system/infrastructure

Brand identity alignment

Icons should be simple line icons with neutral default styling and semantic color only where meaningful. Duplicate icons in the same stat grid reduce scan clarity.

Brand-compliant implementation notes

Use Server, Timer, or CheckCircle2 for uptime; Server best matches instance/system health.
Keep icon containers neutral or lightly blue only as a consistent app accent.
Do not introduce decorative or carrier-themed icons.

Additional acceptance criteria

Each stat card has a distinct, meaningful icon.
Icons use consistent optical size and stroke style.
Color remains semantic or brand-accented, not decorative.

Migrated from GitHub issue #17: https://github.com/bullitt186/trackbox/issues/17
Original author: @bullitt186
Original created: 2026-06-27T13:24:51Z
Original labels: ux

## Problem In the Stats stat card grid, both "Events" and "Uptime" use the `Activity` icon from lucide-react. Two cards in the same visual grid with identical icons makes them harder to distinguish at a glance. ## Implementation File: `frontend/src/pages/Stats.tsx` Change the Uptime card icon from `Activity` to something more appropriate for system uptime: - `Server` — communicates infrastructure/system - `Timer` — communicates elapsed time - `CheckCircle2` — communicates health/status Recommended: use `Server` for Uptime. ```tsx import { Package, PackageCheck, Cpu, Activity, TrendingUp, Server, AlertTriangle } from "lucide-react" // Change: <StatCard icon={Activity} label="Uptime" ... /> // To: <StatCard icon={Server} label="Uptime" ... /> ``` ## Acceptance criteria - No two stat cards in the grid use the same icon - Uptime card has a visually distinct icon that communicates system/infrastructure ## Brand identity alignment Icons should be simple line icons with neutral default styling and semantic color only where meaningful. Duplicate icons in the same stat grid reduce scan clarity. ## Brand-compliant implementation notes - Use `Server`, `Timer`, or `CheckCircle2` for uptime; `Server` best matches instance/system health. - Keep icon containers neutral or lightly blue only as a consistent app accent. - Do not introduce decorative or carrier-themed icons. ## Additional acceptance criteria - Each stat card has a distinct, meaningful icon. - Icons use consistent optical size and stroke style. - Color remains semantic or brand-accented, not decorative. --- Migrated from GitHub issue #17: https://github.com/bullitt186/trackbox/issues/17 Original author: @bullitt186 Original created: 2026-06-27T13:24:51Z Original labels: ux

bullitt added the

label

2026-06-27 15:41:15 +02:00

bullitt commented

2026-06-27 16:02:58 +02:00

Author

Owner

Implemented in commit bd6b0e7. Replaced the Uptime StatCard's Activity icon with Server from lucide-react. Each card in the stats grid now uses a unique icon: Package (total), TrendingUp (active), PackageCheck (delivered), AlertTriangle (needs attention), Cpu (parsers), Server (uptime). Icons are visually and semantically distinct.

Implemented in commit bd6b0e7. Replaced the Uptime StatCard's `Activity` icon with `Server` from lucide-react. Each card in the stats grid now uses a unique icon: Package (total), TrendingUp (active), PackageCheck (delivered), AlertTriangle (needs attention), Cpu (parsers), Server (uptime). Icons are visually and semantically distinct.

bullitt closed this issue

2026-06-27 16:02:58 +02:00

No labels

arch

harness

security

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

bullitt/trackbox#38

No description provided.

Rows
Columns