added dark mode
This commit is contained in:
@@ -475,10 +475,10 @@ export default function RoutinesPage() {
|
||||
return (
|
||||
// h-screen + overflow-hidden eliminates the outer page scrollbar;
|
||||
// only the inner timeline div scrolls.
|
||||
<div className="flex flex-col h-screen overflow-hidden bg-gray-50">
|
||||
<div className="flex flex-col h-screen overflow-hidden bg-gray-50 dark:bg-gray-950">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-4 pt-4 pb-2 bg-white border-b border-gray-100 flex-shrink-0">
|
||||
<h1 className="text-2xl font-bold text-gray-900">Routines</h1>
|
||||
<div className="flex items-center justify-between px-4 pt-4 pb-2 bg-white dark:bg-gray-900 border-b border-gray-100 dark:border-gray-800 flex-shrink-0">
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Routines</h1>
|
||||
<Link
|
||||
href="/dashboard/routines/new"
|
||||
className="bg-indigo-600 text-white p-2 rounded-full"
|
||||
@@ -516,7 +516,7 @@ export default function RoutinesPage() {
|
||||
)}
|
||||
|
||||
{/* Week Strip */}
|
||||
<div className="flex bg-white px-2 pb-3 pt-2 gap-1 border-b border-gray-100 flex-shrink-0">
|
||||
<div className="flex bg-white dark:bg-gray-900 px-2 pb-3 pt-2 gap-1 border-b border-gray-100 dark:border-gray-800 flex-shrink-0">
|
||||
{weekDays.map((day, i) => {
|
||||
const selected = isSameDay(day, selectedDate);
|
||||
const isTodayDay = isSameDay(day, today);
|
||||
@@ -526,7 +526,7 @@ export default function RoutinesPage() {
|
||||
onClick={() => setSelectedDate(day)}
|
||||
className="flex-1 flex flex-col items-center py-1 rounded-xl"
|
||||
>
|
||||
<span className="text-xs text-gray-500 mb-1">
|
||||
<span className="text-xs text-gray-500 dark:text-gray-400 mb-1">
|
||||
{DAY_LABELS[i]}
|
||||
</span>
|
||||
<span
|
||||
@@ -536,8 +536,8 @@ export default function RoutinesPage() {
|
||||
: isTodayDay
|
||||
? 'text-indigo-600 font-bold'
|
||||
: selected
|
||||
? 'bg-gray-200 text-gray-900'
|
||||
: 'text-gray-700'
|
||||
? 'bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-100'
|
||||
: 'text-gray-700 dark:text-gray-300'
|
||||
}`}
|
||||
>
|
||||
{day.getDate()}
|
||||
@@ -556,10 +556,10 @@ export default function RoutinesPage() {
|
||||
|
||||
{allRoutines.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 px-4">
|
||||
<div className="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
|
||||
<div className="w-16 h-16 bg-indigo-100 dark:bg-indigo-900/50 rounded-full flex items-center justify-center mb-4">
|
||||
<ClockIcon size={32} className="text-indigo-400" />
|
||||
</div>
|
||||
<p className="text-gray-500 text-center mb-4">No routines yet</p>
|
||||
<p className="text-gray-500 dark:text-gray-400 text-center mb-4">No routines yet</p>
|
||||
<Link
|
||||
href="/dashboard/routines/new"
|
||||
className="bg-indigo-600 text-white px-6 py-3 rounded-xl font-medium"
|
||||
@@ -593,10 +593,10 @@ export default function RoutinesPage() {
|
||||
height: `${HOUR_HEIGHT}px`,
|
||||
}}
|
||||
>
|
||||
<span className="w-14 text-xs text-gray-400 pr-2 text-right flex-shrink-0 -mt-2">
|
||||
<span className="w-14 text-xs text-gray-400 dark:text-gray-500 pr-2 text-right flex-shrink-0 -mt-2">
|
||||
{label}
|
||||
</span>
|
||||
<div className="flex-1 border-t border-gray-200 h-full" />
|
||||
<div className="flex-1 border-t border-gray-200 dark:border-gray-700 h-full" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -642,8 +642,8 @@ export default function RoutinesPage() {
|
||||
}}
|
||||
className={`absolute rounded-xl px-3 py-2 text-left shadow-sm border transition-all overflow-hidden ${
|
||||
isPast
|
||||
? 'bg-green-50 border-green-200 opacity-75'
|
||||
: 'bg-indigo-50 border-indigo-200'
|
||||
? 'bg-green-50 dark:bg-green-900/30 border-green-200 dark:border-green-800 opacity-75'
|
||||
: 'bg-indigo-50 dark:bg-indigo-900/30 border-indigo-200 dark:border-indigo-800'
|
||||
} ${isCurrent ? 'ring-2 ring-indigo-500 opacity-100' : ''}`}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
@@ -651,10 +651,10 @@ export default function RoutinesPage() {
|
||||
{entry.routine_icon || '✨'}
|
||||
</span>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="font-semibold text-gray-900 text-sm truncate">
|
||||
<p className="font-semibold text-gray-900 dark:text-gray-100 text-sm truncate">
|
||||
{entry.routine_name}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 truncate">
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 truncate">
|
||||
{formatTime(entry.time)}
|
||||
{entry.total_duration_minutes > 0 && (
|
||||
<>
|
||||
@@ -687,13 +687,13 @@ export default function RoutinesPage() {
|
||||
totalLanes: 1,
|
||||
};
|
||||
|
||||
let statusColor = 'bg-blue-50 border-blue-200';
|
||||
let statusColor = 'bg-blue-50 dark:bg-blue-900/30 border-blue-200 dark:border-blue-800';
|
||||
if (group.allTaken)
|
||||
statusColor = 'bg-green-50 border-green-200';
|
||||
statusColor = 'bg-green-50 dark:bg-green-900/30 border-green-200 dark:border-green-800';
|
||||
else if (group.allSkipped)
|
||||
statusColor = 'bg-gray-50 border-gray-200 opacity-60';
|
||||
statusColor = 'bg-gray-50 dark:bg-gray-800/50 border-gray-200 dark:border-gray-700 opacity-60';
|
||||
else if (group.anyOverdue)
|
||||
statusColor = 'bg-amber-50 border-amber-300';
|
||||
statusColor = 'bg-amber-50 dark:bg-amber-900/30 border-amber-300 dark:border-amber-700';
|
||||
|
||||
return (
|
||||
<div
|
||||
@@ -711,10 +711,10 @@ export default function RoutinesPage() {
|
||||
💊
|
||||
</span>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="font-semibold text-gray-900 text-sm truncate">
|
||||
<p className="font-semibold text-gray-900 dark:text-gray-100 text-sm truncate">
|
||||
{formatMedsList(group.medications)}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 truncate">
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 truncate">
|
||||
{formatTime(group.time)}
|
||||
</p>
|
||||
</div>
|
||||
@@ -768,7 +768,7 @@ export default function RoutinesPage() {
|
||||
}
|
||||
});
|
||||
}}
|
||||
className="text-gray-500 px-1 py-1 text-xs"
|
||||
className="text-gray-500 dark:text-gray-400 px-1 py-1 text-xs"
|
||||
>
|
||||
Skip
|
||||
</button>
|
||||
@@ -793,23 +793,23 @@ export default function RoutinesPage() {
|
||||
|
||||
{/* Unscheduled routines — inside the scroll area, below the timeline */}
|
||||
{unscheduledRoutines.length > 0 && (
|
||||
<div className="border-t border-gray-200 bg-white px-4 pt-3 pb-4">
|
||||
<h2 className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">
|
||||
<div className="border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 px-4 pt-3 pb-4">
|
||||
<h2 className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2">
|
||||
Unscheduled
|
||||
</h2>
|
||||
<div className="space-y-2">
|
||||
{unscheduledRoutines.map((r) => (
|
||||
<div
|
||||
key={r.id}
|
||||
className="flex items-center gap-3 bg-gray-50 rounded-xl p-3"
|
||||
className="flex items-center gap-3 bg-gray-50 dark:bg-gray-800 rounded-xl p-3"
|
||||
>
|
||||
<span className="text-xl flex-shrink-0">{r.icon || '✨'}</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-medium text-gray-900 text-sm truncate">
|
||||
<p className="font-medium text-gray-900 dark:text-gray-100 text-sm truncate">
|
||||
{r.name}
|
||||
</p>
|
||||
{r.description && (
|
||||
<p className="text-xs text-gray-500 truncate">
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 truncate">
|
||||
{r.description}
|
||||
</p>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user