reorganised and tidied up presentation

Author: Precipicee

client/src/components/task_form.tsx

@@ -64,25 +64,25 @@ export function TaskForm({ userId, onTaskCreated }: TaskFormProps) {
   return (
     <form
       onSubmit={handleSubmit}
-      className="space-y-4 rounded-xl border bg-zinc-700 p-4"
+      className="mx-auto h-[79vh] w-full max-w-md space-y-4 overflow-y-auto rounded-xl bg-zinc-700 p-4"
     >
       <input
         type="text"
         value={taskName}
         onChange={(e) => setTaskName(e.target.value)}
         placeholder="Task Name"
-        className="w-full rounded border bg-zinc-800 p-2 text-zinc-200"
+        className="w-full rounded border-2 bg-zinc-700 p-2 text-zinc-200"
         required
       />
       <textarea
         value={description}
         onChange={(e) => setDescription(e.target.value)}
         placeholder="Description"
-        className="w-full rounded border bg-zinc-800 p-2 text-zinc-200"
+        className="h-32 w-full resize-none rounded border-2 bg-zinc-700 p-2 text-zinc-200"
       />
       <button
         type="submit"
-        className="rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700"
+        className="rounded border-2 border-zinc-200 bg-blue-600 px-4 py-2 text-zinc-200 hover:bg-blue-700"
       >
         Add Task
       </button>

client/src/components/task_item.tsx

@@ -57,12 +57,12 @@ export function TaskItem({ item, onToggle }: ItemProps) {
         </div>
       </div>
 
-      <div className="flex space-x-1 text-sm text-zinc-300">
+      <div className="flex flex-wrap gap-1 text-sm text-zinc-300">
         {item.topics.length > 0
           ? item.topics.map((topic) => (
               <span
                 key={topic.id}
-                className="flex items-center gap-1 rounded-full border-2 border-zinc-800 px-2 py-0.5 text-zinc-100"
+                className="flex items-center gap-1 rounded-lg border-2 border-zinc-500 px-2 py-0.5 text-zinc-100"
               >
                 <span
                   className="h-2 w-2 rounded-full"

client/src/components/task_list.tsx

@@ -37,7 +37,7 @@ export function TaskList({ items, onToggleTask }: ListProps) {
     );
   }
   return (
-    <div className="mx-auto h-[85vh] w-full max-w-md overflow-y-auto p-2">
+    <div className="mx-auto h-[79vh] w-full max-w-md overflow-y-auto p-2">
       <ul className="space-y-2">
         {items.map((item) => (
           <li key={item.id}>

client/src/pages/[id]/tasks.tsx

@@ -70,7 +70,7 @@ export default function TasksPage() {
   }
 
   return (
-    <div>
+    <div className="container mx-auto flex flex-row items-center justify-center p-4">
       <div className="m-4 h-fit w-fit rounded-xl bg-zinc-700 p-4 text-center">
         <h1 className="mb-4 text-3xl font-bold text-zinc-300">Task List</h1>
         <TaskList items={items} onToggleTask={handleToggleTask} />