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 { .mainContainer {
max-width: 56rem; max-width: 56rem;
margin: 0 auto; margin: 0 auto;
@@ -11,7 +11,7 @@
color: #0f172a; color: #0f172a;
} }
/* Header & Royal Blue Titles */ /* Header Section */
.header { .header {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -23,7 +23,7 @@
line-height: 2.5rem; line-height: 2.5rem;
font-weight: 800; font-weight: 800;
letter-spacing: -0.025em; letter-spacing: -0.025em;
color: #1d4ed8; color: #0f172a;
} }
.subtitle { .subtitle {
@@ -42,7 +42,7 @@
.sectionTitle { .sectionTitle {
font-size: 1.25rem; font-size: 1.25rem;
font-weight: 700; font-weight: 700;
color: #1e40af; color: #1e3a8a;
} }
/* Empty State Card */ /* 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 */} {/* Empty state if no tasks exist */}
{tasks.length === 0 ? ( {tasks.length === 0 ? (
<div className={styles.emptyState}> <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> </div>
) : ( ) : (
/* Render grid of task cards */ /* 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 { TaskStatus } from './types';
import { revalidatePath } from 'next/cache'; import { revalidatePath } from 'next/cache';
// creating tasks // Creating tasks
export async function createTaskAction(formData: FormData) { export async function createTaskAction(formData: FormData) {
// get form data
const title = formData.get('title') as string; const title = formData.get('title') as string;
const description = formData.get('description') as string; const description = formData.get('description') as string;
const due_date = formData.get('due_date') as string; const due_date = formData.get('due_date') as string;
const status = (formData.get('status') as TaskStatus) || 'Todo'; const status = (formData.get('status') as TaskStatus) || 'Todo';
const topic = formData.get('topic') as string; const topic = formData.get('topic') as string;
if (!title || !description || !topic || !due_date) { if (!title || !description || !topic || !due_date) {
throw new Error('All fields are required'); throw new Error('All fields are required');
} }
createTask({ title, description, due_date, topic, status }); createTask({ title, description, due_date, topic, status });
revalidatePath('/tasks');
revalidatePath('/'); revalidatePath('/');
return { success: true }; return { success: true };
} }
// Updating tasks
export async function updateTaskAction(id: number, formData: FormData) { export async function updateTaskAction(id: number, formData: FormData) {
const title = formData.get('title') as string; const title = formData.get('title') as string;
const description = formData.get('description') as string; const description = formData.get('description') as string;
const due_date = formData.get('due_date') as string; const due_date = formData.get('due_date') as string;
const status = (formData.get('status') as TaskStatus) || 'Todo'; const status = (formData.get('status') as TaskStatus) || 'Todo';
const topic = formData.get('topic') as string; const topic = formData.get('topic') as string;
if (!title || !description || !topic || !due_date) { if (!title || !description || !topic || !due_date) {
throw new Error('All fields are required'); throw new Error('All fields are required');
} }
updateTask(id, { title, description, due_date, topic, status }); updateTask(id, { title, description, due_date, topic, status });
revalidatePath('/tasks');
revalidatePath('/'); revalidatePath('/');
return { success: true }; 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) { // Archiving tasks
unarchiveTask(id); export async function archiveTaskAction(id: number) {
revalidatePath('/tasks'); archiveTask(id);
revalidatePath('/');
return { success: true };
}
// Unarchiving tasks
export async function unarchiveTaskAction(id: number) {
unarchiveTask(id);
revalidatePath('/'); revalidatePath('/');
revalidatePath('/archived');
return { success: true }; return { success: true };
} }

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

@@ -5,18 +5,19 @@
.btnArchived { .btnArchived {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
background-color: #1e293b; background-color: #ffffff;
color: #94a3b8; color: #2563eb;
border: 1px solid #334155; border: 1px solid #cbd5e1;
border-radius: 0.5rem; border-radius: 0.5rem;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.btnArchived:hover { .btnArchived:hover {
color: #f8fafc; background-color: #2563eb;
color: #ffffff;
border-color: #2563eb; 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 ( return (
<div className={styles.container}> <div className={styles.container}>
<button onClick={() => setIsOpen(true)} className={styles.btnArchived}> <button onClick={() => setIsOpen(true)} className={styles.btnArchived}>
📦 View Archived Tasks ({archivedTasks.length}) View Archived Tasks ({archivedTasks.length})
</button> </button>
{isOpen && ( {isOpen && (

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

@@ -5,19 +5,19 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: rgba(15, 23, 42, 0.75); background-color: rgba(15, 23, 42, 0.6);
padding: 1rem; padding: 1rem;
backdrop-filter: blur(6px); backdrop-filter: blur(4px);
} }
.dialog { .dialog {
width: 100%; width: 100%;
max-width: 32rem; max-width: 32rem;
border-radius: 0.875rem; border-radius: 0.875rem;
background-color: #1e293b; background-color: #ffffff;
border: 1px solid #334155; border: 1px solid #e2e8f0;
padding: 1.5rem; 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; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: 1rem;
@@ -28,14 +28,14 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
border-bottom: 1px solid #334155; border-bottom: 1px solid #e2e8f0;
padding-bottom: 0.75rem; padding-bottom: 0.75rem;
} }
.title { .title {
font-size: 1.25rem; font-size: 1.25rem;
font-weight: 700; font-weight: 700;
color: #f8fafc; color: #0f172a;
margin: 0; margin: 0;
} }
@@ -43,13 +43,13 @@
background: none; background: none;
border: none; border: none;
font-size: 1.25rem; font-size: 1.25rem;
color: #94a3b8; color: #64748b;
cursor: pointer; cursor: pointer;
transition: color 0.2s; transition: color 0.2s;
} }
.btnClose:hover { .btnClose:hover {
color: #f8fafc; color: #0f172a;
} }
.content { .content {
@@ -59,7 +59,7 @@
} }
.emptyText { .emptyText {
color: #94a3b8; color: #64748b;
text-align: center; text-align: center;
padding: 2rem 0; padding: 2rem 0;
font-size: 0.875rem; font-size: 0.875rem;
@@ -75,8 +75,8 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
background-color: #0f172a; background-color: #f8fafc;
border: 1px solid #334155; border: 1px solid #e2e8f0;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
border-radius: 0.5rem; border-radius: 0.5rem;
} }
@@ -89,13 +89,13 @@
.taskTitle { .taskTitle {
font-weight: 600; font-weight: 600;
color: #f8fafc; color: #0f172a;
font-size: 0.9375rem; font-size: 0.9375rem;
} }
.taskTopic { .taskTopic {
font-size: 0.75rem; font-size: 0.75rem;
color: #93c5fd; color: #2563eb;
} }
.btnUnarchive { .btnUnarchive {
@@ -117,22 +117,22 @@
.footer { .footer {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
border-top: 1px solid #334155; border-top: 1px solid #e2e8f0;
padding-top: 0.75rem; padding-top: 0.75rem;
} }
.btnCloseBtn { .btnCloseBtn {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
background-color: #334155; background-color: #f1f5f9;
color: #f8fafc; color: #334155;
border-radius: 0.5rem; border-radius: 0.5rem;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 600; font-weight: 600;
border: none; border: 1px solid #cbd5e1;
cursor: pointer; cursor: pointer;
transition: background-color 0.2s; transition: background-color 0.2s;
} }
.btnCloseBtn:hover { .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.overlay}>
<div className={styles.dialog}> <div className={styles.dialog}>
<div className={styles.header}> <div className={styles.header}>
<h2 className={styles.title}>📦 Archived Tasks ({archivedTasks.length})</h2> <h2 className={styles.title}>Archived Tasks ({archivedTasks.length})</h2>
<button onClick={onClose} className={styles.btnClose}>✕</button> <button onClick={onClose} className={styles.btnClose}>X</button>
</div> </div>
<div className={styles.content}> <div className={styles.content}>
@@ -41,14 +41,14 @@ export default function ArchivedTasksModal({ archivedTasks, onClose }: ArchivedT
<div key={task.id} className={styles.taskItem}> <div key={task.id} className={styles.taskItem}>
<div className={styles.taskInfo}> <div className={styles.taskInfo}>
<span className={styles.taskTitle}>{task.title}</span> <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> </div>
<button <button
onClick={() => handleUnarchive(task.id)} onClick={() => handleUnarchive(task.id)}
disabled={restoringId === task.id} disabled={restoringId === task.id}
className={styles.btnUnarchive} className={styles.btnUnarchive}
> >
{restoringId === task.id ? 'Restoring...' : '↩ Unarchive'} {restoringId === task.id ? 'Restoring...' : 'Unarchive'}
</button> </button>
</div> </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 { .cardContainer {
padding: 1.25rem; padding: 1.25rem;
border-radius: 0.875rem; border-radius: 0.875rem;
border: 1px solid #334155; border: 1px solid #e2e8f0;
background-color: #1e293b; background-color: #ffffff;
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; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.875rem; 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 { .cardContainer:hover {
transform: translateY(-2px); transform: translateY(-2px);
border-color: #475569; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
} }
.archiving { .archiving {
@@ -31,15 +31,15 @@
.title { .title {
font-weight: 700; font-weight: 700;
font-size: 1.125rem; font-size: 1.125rem;
color: #f8fafc; color: #0f172a;
margin: 0; margin: 0;
line-height: 1.4; line-height: 1.4;
} }
/* Unified Status Badges with Subtle Tints */ /* Status Badge Colors (Green, Orange, Blue) */
.badge { .badge {
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 600; font-weight: 700;
padding: 0.25rem 0.625rem; padding: 0.25rem 0.625rem;
border-radius: 9999px; border-radius: 9999px;
text-transform: uppercase; text-transform: uppercase;
@@ -47,28 +47,31 @@
white-space: nowrap; white-space: nowrap;
} }
/* Green Status: Complete */
.statusComplete { .statusComplete {
background-color: rgba(16, 185, 129, 0.12); background-color: #dcfce7;
color: #34d399; color: #15803d;
border: 1px solid rgba(52, 211, 153, 0.25); border: 1px solid #86efac;
} }
/* Orange Status: In-Progress */
.statusInProgress { .statusInProgress {
background-color: rgba(245, 158, 11, 0.12); background-color: #ffedd5;
color: #fbbf24; color: #c2410c;
border: 1px solid rgba(251, 191, 36, 0.25); border: 1px solid #fdba74;
} }
/* Blue Status: Todo */
.statusTodo { .statusTodo {
background-color: rgba(59, 130, 246, 0.12); background-color: #dbeafe;
color: #60a5fa; color: #1d4ed8;
border: 1px solid rgba(96, 165, 250, 0.25); border: 1px solid #93c5fd;
} }
/* Description Text */ /* Description Text */
.description { .description {
font-size: 0.875rem; font-size: 0.875rem;
color: #94a3b8; color: #475569;
margin: 0; margin: 0;
line-height: 1.5; line-height: 1.5;
} }
@@ -78,9 +81,9 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
border-top: 1px solid #334155; border-top: 1px solid #f1f5f9;
padding-top: 0.75rem; padding-top: 0.75rem;
color: #94a3b8; color: #64748b;
font-size: 0.8125rem; font-size: 0.8125rem;
} }
@@ -91,28 +94,23 @@
} }
.topicTag { .topicTag {
background-color: #0f172a; background-color: #f1f5f9;
color: #93c5fd; color: #2563eb;
font-weight: 600; font-weight: 600;
padding: 0.125rem 0.5rem; padding: 0.125rem 0.5rem;
border-radius: 0.375rem; border-radius: 0.375rem;
border: 1px solid #334155; border: 1px solid #cbd5e1;
} }
/* Red Status: Overdue */
.overdueBadge { .overdueBadge {
background-color: rgba(239, 68, 68, 0.15); background-color: #fee2e2;
color: #f87171; color: #b91c1c;
border: 1px solid rgba(248, 113, 113, 0.3); border: 1px solid #fca5a5;
padding: 0.15rem 0.5rem; padding: 0.15rem 0.5rem;
border-radius: 9999px; border-radius: 9999px;
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 700; 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 */ /* Action Buttons */
@@ -126,11 +124,11 @@
.btnEdit { .btnEdit {
padding: 0.375rem 0.875rem; padding: 0.375rem 0.875rem;
border-radius: 0.5rem; border-radius: 0.5rem;
background-color: #334155; background-color: #f8fafc;
color: #f8fafc; color: #0f172a;
font-size: 0.8125rem; font-size: 0.8125rem;
font-weight: 600; font-weight: 600;
border: 1px solid #475569; border: 1px solid #cbd5e1;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
} }
@@ -144,18 +142,18 @@
.btnArchive { .btnArchive {
padding: 0.375rem 0.875rem; padding: 0.375rem 0.875rem;
border-radius: 0.5rem; border-radius: 0.5rem;
background-color: #334155; background-color: #f8fafc;
color: #f87171; color: #dc2626;
font-size: 0.8125rem; font-size: 0.8125rem;
font-weight: 600; font-weight: 600;
border: 1px solid #475569; border: 1px solid #cbd5e1;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.btnArchive:hover { .btnArchive:hover {
background-color: #ef4444; background-color: #dc2626;
border-color: #ef4444; border-color: #dc2626;
color: #ffffff; color: #ffffff;
} }

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

@@ -6,9 +6,9 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: rgba(15, 23, 42, 0.7); background-color: rgba(15, 23, 42, 0.6);
padding: 1rem; padding: 1rem;
backdrop-filter: blur(6px); backdrop-filter: blur(4px);
} }
/* Modal Dialog Box */ /* Modal Dialog Box */
@@ -16,10 +16,10 @@
width: 100%; width: 100%;
max-width: 32rem; max-width: 32rem;
border-radius: 0.875rem; border-radius: 0.875rem;
background-color: #1e293b; background-color: #ffffff;
border: 1px solid #334155; border: 1px solid #e2e8f0;
padding: 1.5rem; 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 */ /* Modal Header */
@@ -33,7 +33,7 @@
.title { .title {
font-size: 1.25rem; font-size: 1.25rem;
font-weight: 700; font-weight: 700;
color: #f8fafc; color: #0f172a;
margin: 0; margin: 0;
} }
@@ -41,13 +41,13 @@
background: none; background: none;
border: none; border: none;
font-size: 1.25rem; font-size: 1.25rem;
color: #94a3b8; color: #64748b;
cursor: pointer; cursor: pointer;
transition: color 0.2s; transition: color 0.2s;
} }
.btnClose:hover { .btnClose:hover {
color: #f8fafc; color: #0f172a;
} }
/* Form Layout */ /* Form Layout */
@@ -72,7 +72,7 @@
display: block; display: block;
font-size: 0.8125rem; font-size: 0.8125rem;
font-weight: 600; font-weight: 600;
color: #cbd5e1; color: #334155;
margin-bottom: 0.375rem; margin-bottom: 0.375rem;
} }
@@ -81,17 +81,17 @@
padding: 0.625rem 0.875rem; padding: 0.625rem 0.875rem;
font-size: 0.875rem; font-size: 0.875rem;
border-radius: 0.5rem; border-radius: 0.5rem;
border: 1px solid #334155; border: 1px solid #cbd5e1;
background-color: #0f172a; background-color: #f8fafc;
color: #f8fafc; color: #0f172a;
outline: none; outline: none;
box-sizing: border-box; box-sizing: border-box;
transition: border-color 0.2s, box-shadow 0.2s; transition: border-color 0.2s, box-shadow 0.2s;
} }
.input:focus, .select:focus, .textarea:focus { .input:focus, .select:focus, .textarea:focus {
border-color: #3b82f6; border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
} }
/* Footer Buttons */ /* Footer Buttons */
@@ -106,17 +106,16 @@
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
font-size: 0.875rem; font-size: 0.875rem;
border-radius: 0.5rem; border-radius: 0.5rem;
border: 1px solid #334155; border: 1px solid #cbd5e1;
background: #0f172a; background: #f8fafc;
color: #cbd5e1; color: #334155;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: background-color 0.2s; transition: background-color 0.2s;
} }
.btnCancel:hover { .btnCancel:hover {
background-color: #334155; background-color: #e2e8f0;
color: #f8fafc;
} }
.btnSave { .btnSave {
@@ -129,7 +128,7 @@
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: background-color 0.2s; 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 { .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.dialog}>
<div className={styles.header}> <div className={styles.header}>
<h2 className={styles.title}>Edit Task #{task.id}</h2> <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> </div>
<form onSubmit={handleSubmit} className={styles.form}> <form onSubmit={handleSubmit} className={styles.form}>

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

@@ -2,26 +2,26 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
background-color: #1e293b; background-color: #ffffff;
border: 1px solid #334155; border: 1px solid #e2e8f0;
padding: 1rem 1.25rem; padding: 1rem 1.25rem;
border-radius: 0.875rem; 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 { .label {
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 600; font-weight: 600;
color: #94a3b8; color: #334155;
} }
.select { .select {
padding: 0.5rem 0.875rem; padding: 0.5rem 0.875rem;
font-size: 0.875rem; font-size: 0.875rem;
border-radius: 0.5rem; border-radius: 0.5rem;
border: 1px solid #334155; border: 1px solid #cbd5e1;
background-color: #0f172a; background-color: #f8fafc;
color: #60a5fa; color: #2563eb;
font-weight: 600; font-weight: 600;
outline: none; outline: none;
cursor: pointer; cursor: pointer;
@@ -29,5 +29,5 @@
} }
.select:focus { .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 { .formCard {
background-color: #1e293b; background-color: #ffffff;
border: 1px solid #334155; border: 1px solid #e2e8f0;
border-radius: 0.875rem; border-radius: 0.875rem;
padding: 1.5rem; 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; display: flex;
flex-direction: column; flex-direction: column;
gap: 1.25rem; gap: 1.25rem;
@@ -13,7 +13,7 @@
.heading { .heading {
font-size: 1.25rem; font-size: 1.25rem;
font-weight: 700; font-weight: 700;
color: #f8fafc; color: #0f172a;
margin: 0; margin: 0;
} }
@@ -38,7 +38,7 @@
display: block; display: block;
font-size: 0.8125rem; font-size: 0.8125rem;
font-weight: 600; font-weight: 600;
color: #cbd5e1; color: #334155;
margin-bottom: 0.375rem; margin-bottom: 0.375rem;
} }
@@ -47,17 +47,17 @@
padding: 0.625rem 0.875rem; padding: 0.625rem 0.875rem;
font-size: 0.875rem; font-size: 0.875rem;
border-radius: 0.5rem; border-radius: 0.5rem;
border: 1px solid #334155; border: 1px solid #cbd5e1;
background-color: #0f172a; background-color: #f8fafc;
color: #f8fafc; color: #0f172a;
outline: none; outline: none;
box-sizing: border-box; box-sizing: border-box;
transition: border-color 0.2s, box-shadow 0.2s; transition: border-color 0.2s, box-shadow 0.2s;
} }
.input:focus, .select:focus, .textarea:focus { .input:focus, .select:focus, .textarea:focus {
border-color: #3b82f6; border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
} }
.actions { .actions {
@@ -74,11 +74,10 @@
font-weight: 600; font-weight: 600;
border: none; border: none;
cursor: pointer; cursor: pointer;
transition: background-color 0.2s, transform 0.1s; 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);
} }
.btnSubmit:hover { .btnSubmit:hover {
background-color: #1d4ed8; 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}> <div className={styles.actions}>
<button type="submit" disabled={isSubmitting} className={styles.btnSubmit}> <button type="submit" disabled={isSubmitting} className={styles.btnSubmit}>
{isSubmitting ? 'Adding Task...' : '+ Add Task'} {isSubmitting ? 'Adding Task...' : 'Add Task'}
</button> </button>
</div> </div>
</form> </form>