dvirlabs/invy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: tinted background per stat box (blue/green/orange)

Browse Source
This commit is contained in:
dvirlabs 2026-03-02 03:23:37 +02:00
parent 586bd7c030
commit 655784c6d9
2 changed files with 16 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/components/EventList.css
View File

@ -159,6 +159,16 @@
color: var(--color-text); color: var(--color-text);
} }
/* per-stat accent colors — !important guards against global .stat-value overrides */
.stat .stat-value--total { color: var(--color-primary) !important; }
.stat .stat-value--confirmed { color: var(--color-success) !important; }
.stat .stat-value--rate { color: var(--color-warning) !important; }
/* per-stat tinted backgrounds */
.stat--total { background: rgba(82, 148, 255, 0.12); border-color: rgba(82, 148, 255, 0.30); }
.stat--confirmed { background: rgba(46, 199, 107, 0.12); border-color: rgba(46, 199, 107, 0.30); }
.stat--rate { background: rgba(245, 166, 35, 0.12); border-color: rgba(245, 166, 35, 0.30); }
.event-card-actions { .event-card-actions {
display: flex; display: flex;
gap: 0.5rem; gap: 0.5rem;

12
frontend/src/components/EventList.jsx
View File

@ -139,18 +139,18 @@ function EventList({ onEventSelect, onCreateEvent, onManageTemplates }) {
<p className="event-date">📅 {formatDate(event.date)}</p> <p className="event-date">📅 {formatDate(event.date)}</p>
<div className="event-stats"> <div className="event-stats">
<div className="stat"> <div className="stat stat--total">
<span className="stat-label">{he.guests}</span> <span className="stat-label">{he.guests}</span>
<span className="stat-value">{guestStats.total}</span> <span className="stat-value stat-value--total">{guestStats.total}</span>
</div> </div>
<div className="stat"> <div className="stat stat--confirmed">
<span className="stat-label">{he.confirmed}</span> <span className="stat-label">{he.confirmed}</span>
<span className="stat-value">{guestStats.confirmed}</span> <span className="stat-value stat-value--confirmed">{guestStats.confirmed}</span>
</div> </div>
{guestStats.total > 0 && ( {guestStats.total > 0 && (
<div className="stat"> <div className="stat stat--rate">
<span className="stat-label">{he.rate}</span> <span className="stat-label">{he.rate}</span>
<span className="stat-value"> <span className="stat-value stat-value--rate">
{Math.round((guestStats.confirmed / guestStats.total) * 100)}% {Math.round((guestStats.confirmed / guestStats.total) * 100)}%
</span> </span>
</div> </div>