chelsea/Synculous-2
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

added dark mode

Browse Source
This commit is contained in:
chelsea
2026-02-15 23:11:33 -06:00
parent e97347ff65
commit d8fde5b516
18 changed files with 543 additions and 366 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
synculous-client/src/app/dashboard/page.tsx
View File

@@ -141,7 +141,7 @@ export default function DashboardPage() {
<div className="p-4 space-y-6">
{/* Active Session Banner */}
{activeSession && activeSession.session.status === 'active' && (
<div className="bg-gradient-to-r from-indigo-500 to-purple-600 rounded-2xl p-4 text-white ring-2 ring-indigo-400/50 ring-offset-2 ring-offset-gray-50 animate-gentle-pulse">
<div className="bg-gradient-to-r from-indigo-500 to-purple-600 rounded-2xl p-4 text-white ring-2 ring-indigo-400/50 ring-offset-2 ring-offset-gray-50 dark:ring-offset-gray-950 animate-gentle-pulse">
<div className="flex items-center justify-between">
<div>
<p className="text-white/80 text-sm">Continue where you left off</p>
@@ -162,8 +162,8 @@ export default function DashboardPage() {
{/* Header */}
<div>
<h1 className="text-2xl font-bold text-gray-900">{getGreeting()}, {user?.username}!</h1>
<p className="text-gray-500 mt-1">Let&apos;s build some great habits today.</p>
<h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">{getGreeting()}, {user?.username}!</h1>
<p className="text-gray-500 dark:text-gray-400 mt-1">Let&apos;s build some great habits today.</p>
</div>
{/* "Never miss twice" Recovery Cards */}
@@ -171,11 +171,11 @@ export default function DashboardPage() {
const routine = routines.find(r => r.id === recovery.routine_id);
if (!routine) return null;
return (
<div key={recovery.routine_id} className="bg-amber-50 border border-amber-200 rounded-2xl p-4">
<div key={recovery.routine_id} className="bg-amber-50 dark:bg-amber-900/30 border border-amber-200 dark:border-amber-800 rounded-2xl p-4">
<div className="flex items-center justify-between">
<div>
<p className="text-amber-800 text-sm font-medium mb-1">Welcome back</p>
<p className="text-amber-700 text-sm">
<p className="text-amber-800 dark:text-amber-200 text-sm font-medium mb-1">Welcome back</p>
<p className="text-amber-700 dark:text-amber-300 text-sm">
It&apos;s been a couple days since {routine.icon} {routine.name}. That&apos;s completely okay — picking it back up today is what matters most.
</p>
</div>
@@ -193,44 +193,44 @@ export default function DashboardPage() {
{/* Weekly Stats — identity-based language */}
{weeklySummary && weeklySummary.total_completed > 0 && (
<div className="grid grid-cols-3 gap-3">
<div className="bg-white rounded-xl p-4 shadow-sm">
<div className="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm">
<div className="flex items-center gap-2 text-indigo-600 mb-1">
<StarIcon size={18} />
<span className="text-xs font-medium">Done</span>
</div>
<p className="text-2xl font-bold text-gray-900">{weeklySummary.total_completed}</p>
<p className="text-xs text-gray-400 mt-0.5">this week</p>
<p className="text-2xl font-bold text-gray-900 dark:text-gray-100">{weeklySummary.total_completed}</p>
<p className="text-xs text-gray-400 dark:text-gray-500 mt-0.5">this week</p>
</div>
<div className="bg-white rounded-xl p-4 shadow-sm">
<div className="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm">
<div className="flex items-center gap-2 text-purple-600 mb-1">
<ClockIcon size={18} />
<span className="text-xs font-medium">Invested</span>
</div>
<p className="text-2xl font-bold text-gray-900">{formatTime(weeklySummary.total_time_minutes)}</p>
<p className="text-xs text-gray-400 mt-0.5">in yourself</p>
<p className="text-2xl font-bold text-gray-900 dark:text-gray-100">{formatTime(weeklySummary.total_time_minutes)}</p>
<p className="text-xs text-gray-400 dark:text-gray-500 mt-0.5">in yourself</p>
</div>
<div className="bg-white rounded-xl p-4 shadow-sm">
<div className="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm">
<div className="flex items-center gap-2 text-pink-600 mb-1">
<ActivityIcon size={18} />
<span className="text-xs font-medium">Active</span>
</div>
<p className="text-2xl font-bold text-gray-900">{weeklySummary.routines_started}</p>
<p className="text-xs text-gray-400 mt-0.5">routines</p>
<p className="text-2xl font-bold text-gray-900 dark:text-gray-100">{weeklySummary.routines_started}</p>
<p className="text-xs text-gray-400 dark:text-gray-500 mt-0.5">routines</p>
</div>
</div>
)}
{/* Quick Start Routines */}
<div>
<h2 className="text-lg font-semibold text-gray-900 mb-3">Your Routines</h2>
<h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3">Your Routines</h2>
{routines.length === 0 ? (
<div className="bg-white rounded-xl p-8 shadow-sm text-center">
<div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
<FlameIcon className="text-gray-400" size={32} />
<div className="bg-white dark:bg-gray-800 rounded-xl p-8 shadow-sm text-center">
<div className="w-16 h-16 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center mx-auto mb-4">
<FlameIcon className="text-gray-400 dark:text-gray-500" size={32} />
</div>
<h3 className="font-semibold text-gray-900 mb-1">No routines yet</h3>
<p className="text-gray-500 text-sm mb-4">Create your first routine to get started</p>
<h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-1">No routines yet</h3>
<p className="text-gray-500 dark:text-gray-400 text-sm mb-4">Create your first routine to get started</p>
<Link
href="/dashboard/routines/new"
className="inline-block bg-indigo-600 text-white px-4 py-2 rounded-lg font-medium"
@@ -245,21 +245,21 @@ export default function DashboardPage() {
return (
<div
key={routine.id}
className="bg-white rounded-xl p-4 shadow-sm flex items-center justify-between"
className="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm flex items-center justify-between"
>
<div className="flex items-center gap-3">
<div className="w-12 h-12 bg-gradient-to-br from-indigo-100 to-pink-100 rounded-xl flex items-center justify-center">
<div className="w-12 h-12 bg-gradient-to-br from-indigo-100 to-pink-100 dark:from-indigo-900/50 dark:to-pink-900/50 rounded-xl flex items-center justify-center">
<span className="text-2xl">{routine.icon || '✨'}</span>
</div>
<div>
<h3 className="font-semibold text-gray-900">{routine.name}</h3>
<h3 className="font-semibold text-gray-900 dark:text-gray-100">{routine.name}</h3>
{streak && streak.current_streak > 0 ? (
<p className="text-sm text-orange-500 flex items-center gap-1">
<FlameIcon size={14} />
{streak.current_streak} day{streak.current_streak !== 1 ? 's' : ''}
</p>
) : routine.description ? (
<p className="text-gray-500 text-sm">{routine.description}</p>
<p className="text-gray-500 dark:text-gray-400 text-sm">{routine.description}</p>
) : null}
</div>
</div>
@@ -293,7 +293,7 @@ export default function DashboardPage() {
</div>
{error && (
<div className="bg-amber-50 text-amber-700 px-4 py-3 rounded-lg text-sm">
<div className="bg-amber-50 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 px-4 py-3 rounded-lg text-sm">
{error}
</div>
)}