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

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

@@ -95,13 +95,13 @@ export default function HistoryPage() {
return (
<div className="p-4 space-y-4">
<h1 className="text-2xl font-bold text-gray-900">History</h1>
<h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">History</h1>
{/* Filter */}
<select
value={selectedRoutine}
onChange={(e) => setSelectedRoutine(e.target.value)}
className="w-full px-4 py-3 border border-gray-300 rounded-xl bg-white"
className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-xl bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
>
<option value="all">All Routines</option>
{routines.map((routine) => (
@@ -112,39 +112,39 @@ export default function HistoryPage() {
</select>
{history.length === 0 ? (
<div className="bg-white rounded-xl p-8 shadow-sm text-center">
<CalendarIcon className="text-gray-400 mx-auto mb-4" size={40} />
<h3 className="font-semibold text-gray-900 mb-1">No history yet</h3>
<p className="text-gray-500 text-sm">Complete a routine to see it here</p>
<div className="bg-white dark:bg-gray-800 rounded-xl p-8 shadow-sm text-center">
<CalendarIcon className="text-gray-400 dark:text-gray-500 mx-auto mb-4" size={40} />
<h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-1">No history yet</h3>
<p className="text-gray-500 dark:text-gray-400 text-sm">Complete a routine to see it here</p>
</div>
) : (
<div className="space-y-3">
{history.map((session) => (
<div
key={session.id}
className="bg-white rounded-xl p-4 shadow-sm flex items-center gap-4"
className="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm flex items-center gap-4"
>
<div className={`
w-10 h-10 rounded-full flex items-center justify-center
${session.status === 'completed' ? 'bg-green-100' : 'bg-red-100'}
${session.status === 'completed' ? 'bg-green-100 dark:bg-green-900/30' : 'bg-red-100 dark:bg-red-900/30'}
`}>
{session.status === 'completed' ? (
<CheckIcon className="text-green-600" size={20} />
<CheckIcon className="text-green-600 dark:text-green-400" size={20} />
) : (
<XIcon className="text-red-600" size={20} />
<XIcon className="text-red-600 dark:text-red-400" size={20} />
)}
</div>
<div className="flex-1">
<p className="font-medium text-gray-900">
<p className="font-medium text-gray-900 dark:text-gray-100">
{(session as any).routine_name || 'Routine'}
</p>
<p className="text-sm text-gray-500">
<p className="text-sm text-gray-500 dark:text-gray-400">
{formatDate(session.created_at)}
</p>
</div>
<span className={`
text-xs font-medium px-2 py-1 rounded-full
${session.status === 'completed' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}
${session.status === 'completed' ? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400' : 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400'}
`}>
{session.status}
</span>