feature/03-design-polish #1
@@ -2767,3 +2767,148 @@
|
||||
color: var(--accent-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
DASHBOARD ENHANCEMENTS — 03-02 Polish
|
||||
============================================================ */
|
||||
|
||||
/* ── Header logo (smaller than auth page, no glow) ────────── */
|
||||
.brand-title .logo-mark {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
color: var(--accent);
|
||||
filter: none;
|
||||
}
|
||||
|
||||
.brand-name {
|
||||
font-size: var(--font-xl);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.4px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* ── Nav active: subtle accent pill ──────────────────────── */
|
||||
.nav-btn.active {
|
||||
background: var(--accent-subtle);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* ── Stat cards: gradient depth + per-card colour accent ── */
|
||||
.stat-card {
|
||||
background: linear-gradient(160deg, var(--bg-card) 0%, var(--bg-tertiary) 100%);
|
||||
border-top: 2px solid var(--border);
|
||||
}
|
||||
|
||||
.quick-stats .stat-card:nth-child(1) {
|
||||
border-top-color: rgba(255, 107, 74, 0.5); /* accent/orange */
|
||||
}
|
||||
|
||||
.quick-stats .stat-card:nth-child(2) {
|
||||
border-top-color: rgba(34, 197, 94, 0.5); /* success/green */
|
||||
}
|
||||
|
||||
.quick-stats .stat-card:nth-child(3) {
|
||||
border-top-color: rgba(245, 158, 11, 0.5); /* warning/amber */
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-md);
|
||||
border-color: var(--border-hover);
|
||||
}
|
||||
|
||||
/* ── Stat value: slightly larger for premium feel ──────── */
|
||||
.stat-value {
|
||||
font-size: var(--font-3xl);
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
/* ── Calendar: pulsing glow on today cell ───────────────── */
|
||||
@keyframes todayGlow {
|
||||
0%, 100% { box-shadow: 0 4px 12px rgba(255, 107, 74, 0.30); }
|
||||
50% { box-shadow: 0 4px 22px rgba(255, 107, 74, 0.55),
|
||||
0 0 0 3px rgba(255, 107, 74, 0.12); }
|
||||
}
|
||||
|
||||
.calendar-day.today {
|
||||
animation: todayGlow 2.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* ── Workout days (non-today): subtle brand tint ─────────── */
|
||||
.calendar-day.has-workout:not(.today) {
|
||||
background: rgba(255, 107, 74, 0.06);
|
||||
border: 1px solid rgba(255, 107, 74, 0.18);
|
||||
}
|
||||
|
||||
.calendar-day.has-workout:not(.today):hover {
|
||||
background: rgba(255, 107, 74, 0.12);
|
||||
border-color: rgba(255, 107, 74, 0.35);
|
||||
}
|
||||
|
||||
/* ── Day-dot: more visible ──────────────────────────────── */
|
||||
.day-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: var(--accent);
|
||||
box-shadow: 0 0 6px rgba(255, 107, 74, 0.6);
|
||||
}
|
||||
|
||||
.calendar-day.today .day-dot {
|
||||
background: white;
|
||||
box-shadow: 0 0 6px rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
/* ── Calendar day cells: tighter spacing, better font ────── */
|
||||
.calendar-day {
|
||||
border-radius: var(--radius-lg);
|
||||
gap: var(--space-1);
|
||||
min-height: 64px;
|
||||
}
|
||||
|
||||
.day-name {
|
||||
letter-spacing: 0.6px;
|
||||
}
|
||||
|
||||
/* ── Coach greeting: stronger shimmer on card ───────────── */
|
||||
.coach-greeting {
|
||||
box-shadow: 0 8px 28px rgba(99, 102, 241, 0.28),
|
||||
0 2px 8px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
/* ── Today workout card: arrow bounce on hover ──────────── */
|
||||
@keyframes arrowNudge {
|
||||
0%, 100% { transform: translateX(0); }
|
||||
50% { transform: translateX(4px); }
|
||||
}
|
||||
|
||||
.today-workout-card:hover .workout-action {
|
||||
animation: arrowNudge 0.6s ease infinite;
|
||||
}
|
||||
|
||||
/* ── Workout card: stronger accent glow on hover ─────────── */
|
||||
.today-workout-card:hover {
|
||||
box-shadow: 0 14px 36px rgba(99, 102, 241, 0.35),
|
||||
0 4px 12px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
/* ── Dashboard main: slightly more generous spacing ──────── */
|
||||
.dashboard-main {
|
||||
gap: var(--space-6);
|
||||
}
|
||||
|
||||
/* ── Add-workout button: accent border on hover ──────────── */
|
||||
.add-workout-btn:hover {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
background: var(--accent-subtle);
|
||||
}
|
||||
|
||||
/* ── Section fade-in stagger on load ─────────────────────── */
|
||||
@keyframes sectionIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.week-calendar { animation: sectionIn 300ms ease both; }
|
||||
.coach-section { animation: sectionIn 300ms ease 80ms both; }
|
||||
.quick-stats { animation: sectionIn 300ms ease 160ms both; }
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useAuth } from '../context/AuthContext'
|
||||
import { Icon, getActivityIconName } from '../components/Icons'
|
||||
import Logo from '../components/Logo'
|
||||
|
||||
const API_URL = '/api'
|
||||
|
||||
@@ -90,7 +91,10 @@ function Dashboard({ onStartWorkout, onNavigate }) {
|
||||
<div className="dashboard">
|
||||
<header className="dashboard-header">
|
||||
<div className="header-top">
|
||||
<h1 className="brand-title"><Icon name="gravl" size={22} /> Gravl</h1>
|
||||
<h1 className="brand-title">
|
||||
<Logo />
|
||||
<span className="brand-name">Gravl</span>
|
||||
</h1>
|
||||
<nav className="nav-menu">
|
||||
<button className="nav-btn active"><Icon name="home" size={18} /></button>
|
||||
<button className="nav-btn" onClick={() => onNavigate('progress')}><Icon name="chart" size={18} /></button>
|
||||
|
||||
Reference in New Issue
Block a user