ByteBinder/SDP_Lab_1_To-do-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ui update dark mode to light mode

Browse Source
This commit is contained in:
mahlatseclayton
2026-07-30 19:15:42 +02:00
parent 2091fc6379
commit c037717e53
13 changed files with 168 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/page.module.css
View File

@@ -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 */

2
app/page.tsx
View File

@@ -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 */

34
src/lib/actions.ts
View File

@@ -3,50 +3,50 @@ import { createTask, updateTask, archiveTask, unarchiveTask } from './tasks';
import { TaskStatus } from './types';
import { revalidatePath } from 'next/cache';
// creating tasks
// 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 };
}
// 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('/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');
// 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('/');
revalidatePath('/archived');
return { success: true };
}

11
src/lib/components/ArchivedSection.module.css
View File

@@ -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;
}

2
src/lib/components/ArchivedSection.tsx
View File

@@ -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 && (

38
src/lib/components/ArchivedTasksModal.module.css
View File

@@ -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;
}

8
src/lib/components/ArchivedTasksModal.tsx
View File

@@ -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>
))}

80
src/lib/components/TaskCard.module.css
View File

@@ -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;
}

39
src/lib/components/TaskEditModal.module.css
View File

@@ -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 {

2
src/lib/components/TaskEditModal.tsx
View File

@@ -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}>

16
src/lib/components/TaskFilterToolbar.module.css
View File

@@ -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;
}

27
src/lib/components/TaskForm.module.css
View File

@@ -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);
}

2
src/lib/components/TaskForm.tsx
View File

@@ -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>