From 01c276fc8d430b41b5465ec15c32971e45b5dafa Mon Sep 17 00:00:00 2001 From: Kyle Pope Date: Thu, 12 Mar 2026 12:59:12 +0800 Subject: [PATCH] Make ambient background global and lighten card colors MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Moved ambient from DashboardPage to AppLayout so all pages get the drifting gradient effect, not just the dashboard - Lightened card colors: --card 5% → 8%, --card-elevated 7% → 11%, popover and FullCalendar backgrounds updated to match - Renamed DashboardAmbient → AmbientBackground in layout/ - Glassmorphism class renamed dashboard-glass → ambient-glass, applied at AppLayout content wrapper level Co-Authored-By: Claude Opus 4.6 --- .../components/dashboard/DashboardPage.tsx | 8 +++----- .../AmbientBackground.tsx} | 9 +++++---- frontend/src/components/layout/AppLayout.tsx | 8 +++++--- frontend/src/index.css | 20 +++++++++---------- 4 files changed, 23 insertions(+), 22 deletions(-) rename frontend/src/components/{dashboard/DashboardAmbient.tsx => layout/AmbientBackground.tsx} (84%) diff --git a/frontend/src/components/dashboard/DashboardPage.tsx b/frontend/src/components/dashboard/DashboardPage.tsx index 79aca90..f1b3855 100644 --- a/frontend/src/components/dashboard/DashboardPage.tsx +++ b/frontend/src/components/dashboard/DashboardPage.tsx @@ -16,7 +16,6 @@ import DayBriefing from './DayBriefing'; import CountdownWidget from './CountdownWidget'; import TrackedProjectsWidget from './TrackedProjectsWidget'; import AlertBanner from './AlertBanner'; -import DashboardAmbient from './DashboardAmbient'; import EventForm from '../calendar/EventForm'; import TodoForm from '../todos/TodoForm'; import ReminderForm from '../reminders/ReminderForm'; @@ -165,10 +164,9 @@ export default function DashboardPage() { : null; return ( -
- +
{/* Header — greeting + date + quick add */} -
+

{getGreeting(settings?.preferred_name || undefined)} @@ -239,7 +237,7 @@ export default function DashboardPage() {

-
+
{/* Week Timeline */} {upcomingData && ( diff --git a/frontend/src/components/dashboard/DashboardAmbient.tsx b/frontend/src/components/layout/AmbientBackground.tsx similarity index 84% rename from frontend/src/components/dashboard/DashboardAmbient.tsx rename to frontend/src/components/layout/AmbientBackground.tsx index 63d4bec..d2c0bed 100644 --- a/frontend/src/components/dashboard/DashboardAmbient.tsx +++ b/frontend/src/components/layout/AmbientBackground.tsx @@ -1,13 +1,14 @@ /** - * Ambient background effect for the dashboard. + * Global ambient background effect. * - * Uses CSS radial gradients on a full-size div with animated position shifting. - * The accent color is read from CSS custom properties so it works with any theme. + * Uses CSS radial gradients with animated position shifting to create + * a living, breathing atmosphere behind all page content. + * The accent color is read from CSS custom properties so it adapts to any theme. * * Also renders a noise texture for tactile depth and a radial vignette * to darken edges and draw focus to center content. */ -export default function DashboardAmbient() { +export default function AmbientBackground() { return (