Ui update dark mode to light mode

2026-07-30 19:15:42 +02:00
parent 2091fc6379
commit c037717e53
13 changed files with 168 additions and 171 deletions
--- a/app/page.module.css
+++ b/app/page.module.css
@@ -1,4 +1,4 @@
-/* Light Canvas Page Layout */
+/* Clean Light Page Layout */
 .mainContainer {
  max-width: 56rem;
  margin: 0 auto;
@@ -11,7 +11,7 @@
  color: #0f172a;
 }

-/* Header & Royal Blue Titles */
+/* Header Section */
 .header {
  display: flex;
  flex-direction: column;
@@ -23,7 +23,7 @@
  line-height: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.025em;
-  color: #1d4ed8;
+  color: #0f172a;
 }

 .subtitle {
@@ -42,7 +42,7 @@
 .sectionTitle {
  font-size: 1.25rem;
  font-weight: 700;
-  color: #1e40af;
+  color: #1e3a8a;
 }

 /* Empty State Card */
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -43,7 +43,7 @@ export default async function HomePage({ searchParams }: PageProps) {
        {/* Empty state if no tasks exist */}
        {tasks.length === 0 ? (
          <div className={styles.emptyState}>
-            <p className={styles.emptyText}>No active tasks found. Create one above!</p>
+            <p className={styles.emptyText}>No active tasks found. Create one above.</p>
          </div>
        ) : (
          /* Render grid of task cards */
--- a/src/lib/actions.ts
+++ b/src/lib/actions.ts
@@ -1,52 +1,52 @@
-'use server';
-import { createTask, updateTask, archiveTask, unarchiveTask } from './tasks';
-import { TaskStatus } from './types';
-import { revalidatePath } from 'next/cache';
-
-// creating tasks
-export async function createTaskAction(formData: FormData) {
-    // get form data
-    const title = formData.get('title') as string;
-    const description = formData.get('description') as string;
-    const due_date = formData.get('due_date') as string;
-
-    const status = (formData.get('status') as TaskStatus) || 'Todo';
-
-    const topic = formData.get('topic') as string;
-    if (!title || !description || !topic || !due_date) {
-        throw new Error('All fields are required');
-    }
-    createTask({ title, description, due_date, topic, status });
-    revalidatePath('/tasks');
-    revalidatePath('/');
-    return { success: true };
-}
-export async function updateTaskAction(id: number, formData: FormData) {
-    const title = formData.get('title') as string;
-    const description = formData.get('description') as string;
-    const due_date = formData.get('due_date') as string;
-    const status = (formData.get('status') as TaskStatus) || 'Todo';
-    const topic = formData.get('topic') as string;
-    if (!title || !description || !topic || !due_date) {
-        throw new Error('All fields are required');
-    }
-    updateTask(id, { title, description, due_date, topic, status });
-    revalidatePath('/tasks');
-    revalidatePath('/');
-    return { success: true };
-}
-export async function archiveTaskAction(id: number) {
-    archiveTask(id);
-    revalidatePath('/tasks');
-    revalidatePath('/');
-    revalidatePath('/archived');
-    return { success: true };
-}
-
-export async function unarchiveTaskAction(id: number) {
-    unarchiveTask(id);
-    revalidatePath('/tasks');
-    revalidatePath('/');
-    revalidatePath('/archived');
-    return { success: true };
-}
+'use server';
+import { createTask, updateTask, archiveTask, unarchiveTask } from './tasks';
+import { TaskStatus } from './types';
+import { revalidatePath } from 'next/cache';
+
+// Creating tasks
+export async function createTaskAction(formData: FormData) {
+    const title = formData.get('title') as string;
+    const description = formData.get('description') as string;
+    const due_date = formData.get('due_date') as string;
+    const status = (formData.get('status') as TaskStatus) || 'Todo';
+    const topic = formData.get('topic') as string;
+
+    if (!title || !description || !topic || !due_date) {
+        throw new Error('All fields are required');
+    }
+
+    createTask({ title, description, due_date, topic, status });
+    revalidatePath('/');
+    return { success: true };
+}
+
+// Updating tasks
+export async function updateTaskAction(id: number, formData: FormData) {
+    const title = formData.get('title') as string;
+    const description = formData.get('description') as string;
+    const due_date = formData.get('due_date') as string;
+    const status = (formData.get('status') as TaskStatus) || 'Todo';
+    const topic = formData.get('topic') as string;
+
+    if (!title || !description || !topic || !due_date) {
+        throw new Error('All fields are required');
+    }
+
+    updateTask(id, { title, description, due_date, topic, status });
+    revalidatePath('/');
+    return { success: true };
+}
+
+// Archiving tasks
+export async function archiveTaskAction(id: number) {
+    archiveTask(id);
+    revalidatePath('/');
+    return { success: true };
+}
+
+// Unarchiving tasks
+export async function unarchiveTaskAction(id: number) {
+    unarchiveTask(id);
+    revalidatePath('/');
+    return { success: true };
+}
--- a/src/lib/components/ArchivedSection.module.css
+++ b/src/lib/components/ArchivedSection.module.css
@@ -5,18 +5,19 @@

 .btnArchived {
  padding: 0.5rem 1rem;
-  background-color: #1e293b;
-  color: #94a3b8;
-  border: 1px solid #334155;
+  background-color: #ffffff;
+  color: #2563eb;
+  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
 }

 .btnArchived:hover {
-  color: #f8fafc;
+  background-color: #2563eb;
+  color: #ffffff;
  border-color: #2563eb;
-  background-color: #0f172a;
 }
--- a/src/lib/components/ArchivedSection.tsx
+++ b/src/lib/components/ArchivedSection.tsx
@@ -15,7 +15,7 @@ export default function ArchivedSection({ archivedTasks }: ArchivedSectionProps)
  return (
    <div className={styles.container}>
      <button onClick={() => setIsOpen(true)} className={styles.btnArchived}>
-        📦 View Archived Tasks ({archivedTasks.length})
+        View Archived Tasks ({archivedTasks.length})
      </button>

      {isOpen && (
--- a/src/lib/components/ArchivedTasksModal.module.css
+++ b/src/lib/components/ArchivedTasksModal.module.css
@@ -5,19 +5,19 @@
  display: flex;
  align-items: center;
  justify-content: center;
-  background-color: rgba(15, 23, 42, 0.75);
+  background-color: rgba(15, 23, 42, 0.6);
  padding: 1rem;
-  backdrop-filter: blur(6px);
+  backdrop-filter: blur(4px);
 }

 .dialog {
  width: 100%;
  max-width: 32rem;
  border-radius: 0.875rem;
-  background-color: #1e293b;
-  border: 1px solid #334155;
+  background-color: #ffffff;
+  border: 1px solid #e2e8f0;
  padding: 1.5rem;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  gap: 1rem;
@@ -28,14 +28,14 @@
  display: flex;
  justify-content: space-between;
  align-items: center;
-  border-bottom: 1px solid #334155;
+  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 0.75rem;
 }

 .title {
  font-size: 1.25rem;
  font-weight: 700;
-  color: #f8fafc;
+  color: #0f172a;
  margin: 0;
 }

@@ -43,13 +43,13 @@
  background: none;
  border: none;
  font-size: 1.25rem;
-  color: #94a3b8;
+  color: #64748b;
  cursor: pointer;
  transition: color 0.2s;
 }

 .btnClose:hover {
-  color: #f8fafc;
+  color: #0f172a;
 }

 .content {
@@ -59,7 +59,7 @@
 }

 .emptyText {
-  color: #94a3b8;
+  color: #64748b;
  text-align: center;
  padding: 2rem 0;
  font-size: 0.875rem;
@@ -75,8 +75,8 @@
  display: flex;
  align-items: center;
  justify-content: space-between;
-  background-color: #0f172a;
-  border: 1px solid #334155;
+  background-color: #f8fafc;
+  border: 1px solid #e2e8f0;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
 }
@@ -89,13 +89,13 @@

 .taskTitle {
  font-weight: 600;
-  color: #f8fafc;
+  color: #0f172a;
  font-size: 0.9375rem;
 }

 .taskTopic {
  font-size: 0.75rem;
-  color: #93c5fd;
+  color: #2563eb;
 }

 .btnUnarchive {
@@ -117,22 +117,22 @@
 .footer {
  display: flex;
  justify-content: flex-end;
-  border-top: 1px solid #334155;
+  border-top: 1px solid #e2e8f0;
  padding-top: 0.75rem;
 }

 .btnCloseBtn {
  padding: 0.5rem 1rem;
-  background-color: #334155;
-  color: #f8fafc;
+  background-color: #f1f5f9;
+  color: #334155;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
-  border: none;
+  border: 1px solid #cbd5e1;
  cursor: pointer;
  transition: background-color 0.2s;
 }

 .btnCloseBtn:hover {
-  background-color: #475569;
+  background-color: #e2e8f0;
 }
--- a/src/lib/components/ArchivedTasksModal.tsx
+++ b/src/lib/components/ArchivedTasksModal.tsx
@@ -28,8 +28,8 @@ export default function ArchivedTasksModal({ archivedTasks, onClose }: ArchivedT
    <div className={styles.overlay}>
      <div className={styles.dialog}>
        <div className={styles.header}>
-          <h2 className={styles.title}>📦 Archived Tasks ({archivedTasks.length})</h2>
-          <button onClick={onClose} className={styles.btnClose}>✕</button>
+          <h2 className={styles.title}>Archived Tasks ({archivedTasks.length})</h2>
+          <button onClick={onClose} className={styles.btnClose}>X</button>
        </div>

        <div className={styles.content}>
@@ -41,14 +41,14 @@ export default function ArchivedTasksModal({ archivedTasks, onClose }: ArchivedT
                <div key={task.id} className={styles.taskItem}>
                  <div className={styles.taskInfo}>
                    <span className={styles.taskTitle}>{task.title}</span>
-                    <span className={styles.taskTopic}>#{task.topic} • Due: {task.due_date}</span>
+                    <span className={styles.taskTopic}>#{task.topic} - Due: {task.due_date}</span>
                  </div>
                  <button
                    onClick={() => handleUnarchive(task.id)}
                    disabled={restoringId === task.id}
                    className={styles.btnUnarchive}
                  >
-                    {restoringId === task.id ? 'Restoring...' : '↩ Unarchive'}
+                    {restoringId === task.id ? 'Restoring...' : 'Unarchive'}
                  </button>
                </div>
              ))}
--- a/src/lib/components/TaskCard.module.css
+++ b/src/lib/components/TaskCard.module.css
@@ -1,19 +1,19 @@
-/* Task Card Container - Matching Form UI */
+/* Light White Component Task Card */
 .cardContainer {
  padding: 1.25rem;
  border-radius: 0.875rem;
-  border: 1px solid #334155;
-  background-color: #1e293b;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  border: 1px solid #e2e8f0;
+  background-color: #ffffff;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
-  transition: transform 0.2s ease, border-color 0.2s ease;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
 }

 .cardContainer:hover {
  transform: translateY(-2px);
-  border-color: #475569;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
 }

 .archiving {
@@ -31,15 +31,15 @@
 .title {
  font-weight: 700;
  font-size: 1.125rem;
-  color: #f8fafc;
+  color: #0f172a;
  margin: 0;
  line-height: 1.4;
 }

-/* Unified Status Badges with Subtle Tints */
+/* Status Badge Colors (Green, Orange, Blue) */
 .badge {
  font-size: 0.75rem;
-  font-weight: 600;
+  font-weight: 700;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  text-transform: uppercase;
@@ -47,28 +47,31 @@
  white-space: nowrap;
 }

+/* Green Status: Complete */
 .statusComplete {
-  background-color: rgba(16, 185, 129, 0.12);
-  color: #34d399;
-  border: 1px solid rgba(52, 211, 153, 0.25);
+  background-color: #dcfce7;
+  color: #15803d;
+  border: 1px solid #86efac;
 }

+/* Orange Status: In-Progress */
 .statusInProgress {
-  background-color: rgba(245, 158, 11, 0.12);
-  color: #fbbf24;
-  border: 1px solid rgba(251, 191, 36, 0.25);
+  background-color: #ffedd5;
+  color: #c2410c;
+  border: 1px solid #fdba74;
 }

+/* Blue Status: Todo */
 .statusTodo {
-  background-color: rgba(59, 130, 246, 0.12);
-  color: #60a5fa;
-  border: 1px solid rgba(96, 165, 250, 0.25);
+  background-color: #dbeafe;
+  color: #1d4ed8;
+  border: 1px solid #93c5fd;
 }

 /* Description Text */
 .description {
  font-size: 0.875rem;
-  color: #94a3b8;
+  color: #475569;
  margin: 0;
  line-height: 1.5;
 }
@@ -78,9 +81,9 @@
  display: flex;
  align-items: center;
  justify-content: space-between;
-  border-top: 1px solid #334155;
+  border-top: 1px solid #f1f5f9;
  padding-top: 0.75rem;
-  color: #94a3b8;
+  color: #64748b;
  font-size: 0.8125rem;
 }

@@ -91,28 +94,23 @@
 }

 .topicTag {
-  background-color: #0f172a;
-  color: #93c5fd;
+  background-color: #f1f5f9;
+  color: #2563eb;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 0.375rem;
-  border: 1px solid #334155;
+  border: 1px solid #cbd5e1;
 }

+/* Red Status: Overdue */
 .overdueBadge {
-  background-color: rgba(239, 68, 68, 0.15);
-  color: #f87171;
-  border: 1px solid rgba(248, 113, 113, 0.3);
+  background-color: #fee2e2;
+  color: #b91c1c;
+  border: 1px solid #fca5a5;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
-  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-}
-
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.5; }
 }

 /* Action Buttons */
@@ -126,11 +124,11 @@
 .btnEdit {
  padding: 0.375rem 0.875rem;
  border-radius: 0.5rem;
-  background-color: #334155;
-  color: #f8fafc;
+  background-color: #f8fafc;
+  color: #0f172a;
  font-size: 0.8125rem;
  font-weight: 600;
-  border: 1px solid #475569;
+  border: 1px solid #cbd5e1;
  cursor: pointer;
  transition: all 0.2s ease;
 }
@@ -144,18 +142,18 @@
 .btnArchive {
  padding: 0.375rem 0.875rem;
  border-radius: 0.5rem;
-  background-color: #334155;
-  color: #f87171;
+  background-color: #f8fafc;
+  color: #dc2626;
  font-size: 0.8125rem;
  font-weight: 600;
-  border: 1px solid #475569;
+  border: 1px solid #cbd5e1;
  cursor: pointer;
  transition: all 0.2s ease;
 }

 .btnArchive:hover {
-  background-color: #ef4444;
-  border-color: #ef4444;
+  background-color: #dc2626;
+  border-color: #dc2626;
  color: #ffffff;
 }

--- a/src/lib/components/TaskEditModal.module.css
+++ b/src/lib/components/TaskEditModal.module.css
@@ -6,9 +6,9 @@
  display: flex;
  align-items: center;
  justify-content: center;
-  background-color: rgba(15, 23, 42, 0.7);
+  background-color: rgba(15, 23, 42, 0.6);
  padding: 1rem;
-  backdrop-filter: blur(6px);
+  backdrop-filter: blur(4px);
 }

 /* Modal Dialog Box */
@@ -16,10 +16,10 @@
  width: 100%;
  max-width: 32rem;
  border-radius: 0.875rem;
-  background-color: #1e293b;
-  border: 1px solid #334155;
+  background-color: #ffffff;
+  border: 1px solid #e2e8f0;
  padding: 1.5rem;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
 }

 /* Modal Header */
@@ -33,7 +33,7 @@
 .title {
  font-size: 1.25rem;
  font-weight: 700;
-  color: #f8fafc;
+  color: #0f172a;
  margin: 0;
 }

@@ -41,13 +41,13 @@
  background: none;
  border: none;
  font-size: 1.25rem;
-  color: #94a3b8;
+  color: #64748b;
  cursor: pointer;
  transition: color 0.2s;
 }

 .btnClose:hover {
-  color: #f8fafc;
+  color: #0f172a;
 }

 /* Form Layout */
@@ -72,7 +72,7 @@
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
-  color: #cbd5e1;
+  color: #334155;
  margin-bottom: 0.375rem;
 }

@@ -81,17 +81,17 @@
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  border-radius: 0.5rem;
-  border: 1px solid #334155;
-  background-color: #0f172a;
-  color: #f8fafc;
+  border: 1px solid #cbd5e1;
+  background-color: #f8fafc;
+  color: #0f172a;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
 }

 .input:focus, .select:focus, .textarea:focus {
-  border-color: #3b82f6;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
+  border-color: #2563eb;
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
 }

 /* Footer Buttons */
@@ -106,17 +106,16 @@
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  border-radius: 0.5rem;
-  border: 1px solid #334155;
-  background: #0f172a;
-  color: #cbd5e1;
+  border: 1px solid #cbd5e1;
+  background: #f8fafc;
+  color: #334155;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
 }

 .btnCancel:hover {
-  background-color: #334155;
-  color: #f8fafc;
+  background-color: #e2e8f0;
 }

 .btnSave {
@@ -129,7 +128,7 @@
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
-  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3);
+  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
 }

 .btnSave:hover {
--- a/src/lib/components/TaskEditModal.tsx
+++ b/src/lib/components/TaskEditModal.tsx
@@ -33,7 +33,7 @@ export default function TaskEditModal({ task, onClose }: TaskEditModalProps) {
      <div className={styles.dialog}>
        <div className={styles.header}>
          <h2 className={styles.title}>Edit Task #{task.id}</h2>
-          <button onClick={onClose} className={styles.btnClose}>✕</button>
+          <button onClick={onClose} className={styles.btnClose}>X</button>
        </div>

        <form onSubmit={handleSubmit} className={styles.form}>
--- a/src/lib/components/TaskFilterToolbar.module.css
+++ b/src/lib/components/TaskFilterToolbar.module.css
@@ -2,26 +2,26 @@
  display: flex;
  align-items: center;
  justify-content: space-between;
-  background-color: #1e293b;
-  border: 1px solid #334155;
+  background-color: #ffffff;
+  border: 1px solid #e2e8f0;
  padding: 1rem 1.25rem;
  border-radius: 0.875rem;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
 }

 .label {
  font-size: 0.875rem;
  font-weight: 600;
-  color: #94a3b8;
+  color: #334155;
 }

 .select {
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  border-radius: 0.5rem;
-  border: 1px solid #334155;
-  background-color: #0f172a;
-  color: #60a5fa;
+  border: 1px solid #cbd5e1;
+  background-color: #f8fafc;
+  color: #2563eb;
  font-weight: 600;
  outline: none;
  cursor: pointer;
@@ -29,5 +29,5 @@
 }

 .select:focus {
-  border-color: #3b82f6;
+  border-color: #2563eb;
 }
--- a/src/lib/components/TaskForm.module.css
+++ b/src/lib/components/TaskForm.module.css
@@ -1,10 +1,10 @@
-/* Dark Sleek Form Card */
+/* Light White Component Form Card */
 .formCard {
-  background-color: #1e293b;
-  border: 1px solid #334155;
+  background-color: #ffffff;
+  border: 1px solid #e2e8f0;
  border-radius: 0.875rem;
  padding: 1.5rem;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
@@ -13,7 +13,7 @@
 .heading {
  font-size: 1.25rem;
  font-weight: 700;
-  color: #f8fafc;
+  color: #0f172a;
  margin: 0;
 }

@@ -38,7 +38,7 @@
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
-  color: #cbd5e1;
+  color: #334155;
  margin-bottom: 0.375rem;
 }

@@ -47,17 +47,17 @@
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  border-radius: 0.5rem;
-  border: 1px solid #334155;
-  background-color: #0f172a;
-  color: #f8fafc;
+  border: 1px solid #cbd5e1;
+  background-color: #f8fafc;
+  color: #0f172a;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
 }

 .input:focus, .select:focus, .textarea:focus {
-  border-color: #3b82f6;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
+  border-color: #2563eb;
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
 }

 .actions {
@@ -74,11 +74,10 @@
  font-weight: 600;
  border: none;
  cursor: pointer;
-  transition: background-color 0.2s, transform 0.1s;
-  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3);
+  transition: background-color 0.2s;
+  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
 }

 .btnSubmit:hover {
  background-color: #1d4ed8;
-  transform: translateY(-1px);
 }
--- a/src/lib/components/TaskForm.tsx
+++ b/src/lib/components/TaskForm.tsx
@@ -76,7 +76,7 @@ export default function TaskForm() {

      <div className={styles.actions}>
        <button type="submit" disabled={isSubmitting} className={styles.btnSubmit}>
-          {isSubmitting ? 'Adding Task...' : '+ Add Task'}
+          {isSubmitting ? 'Adding Task...' : 'Add Task'}
        </button>
      </div>
    </form>