more changes

.postcssrc.json

@@ -0,0 +1 @@
+{ "plugins": { "@tailwindcss/postcss": {} } }

src/app/app.html

@@ -1 +1,3 @@
-<router-outlet></router-outlet>
+<div class="w-full h-full">
+  <router-outlet></router-outlet>
+</div>

src/app/app.routes.ts

@@ -1,15 +1,9 @@
 import { Routes } from '@angular/router';
-import { TodoTable } from './todo-table/todo-table';
 import { Home } from './home/home';
-import { EditTodo } from './edit-todo/edit-todo';
 
 export const routes: Routes = [
   {
     path: '',
     component: Home,
   },
-  {
-    path: 'edit/:id',
-    component: EditTodo,
-  },
 ];

src/app/app.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { TodoTable } from './todo-table/todo-table';
 import { CreateTodo } from './create-todo/create-todo';

src/app/create-todo/create-todo.html

@@ -1,8 +1,14 @@
-<form [formGroup]="form" (submit)="submit()">
+<form class="gap-x-3 flex" [formGroup]="form" (submit)="submit()">
-  <input type="text" formControlName="title" />
+  <input class="input" type="text" formControlName="title" />
-  <input type="date" formControlName="dueDate" />
+  <input class="input" type="date" formControlName="dueDate" />
-  <button type="submit">{{ isEditing() ? "Update" : "Create" }}</button>
+
+  <button class="btn-primary" type="submit">
+    {{ isEditing() ? "Update" : "Create" }}
+  </button>
+
   @if (isEditing()) {
-  <button type="button" (click)="stopEdit()">Stop Editing</button>
+  <button class="btn-secondary" type="button" (click)="stopEdit()">
+    Stop Editing
+  </button>
   }
 </form>

src/app/edit-todo/edit-todo.html

@@ -1 +0,0 @@
-<p>edit-todo works!</p>

src/app/edit-todo/edit-todo.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { EditTodo } from './edit-todo';
-
-describe('EditTodo', () => {
-  let component: EditTodo;
-  let fixture: ComponentFixture<EditTodo>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [EditTodo]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(EditTodo);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/edit-todo/edit-todo.ts

@@ -1,18 +0,0 @@
-import { Component, inject } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-
-@Component({
-  selector: 'app-edit-todo',
-  imports: [],
-  templateUrl: './edit-todo.html',
-  styleUrl: './edit-todo.css',
-})
-export class EditTodo {
-  private router = inject(ActivatedRoute);
-  private task!: Task;
-
-  ngOnInit() {
-    const id = this.router.snapshot.paramMap.get('id');
-    fetch('http://localhost/api/tasks/');
-  }
-}

src/app/home/home.html

@@ -1,2 +1,9 @@
-<app-create-todo #form [tasks]="table.tasks"></app-create-todo>
+<div class="w-full h-full flex">
-<app-todo-table #table (editTaskEvent)="form.editTask($event)"></app-todo-table>
+  <div class="m-auto flex flex-col w-fit h-fit p-8 bg-bg rounded-xl">
+    <app-create-todo #form [tasks]="table.tasks"></app-create-todo>
+    <app-todo-table
+      #table
+      (editTaskEvent)="form.editTask($event)"
+    ></app-todo-table>
+  </div>
+</div>

src/app/home/home.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 import { TodoTable } from '../todo-table/todo-table';
 import { CreateTodo } from '../create-todo/create-todo';
 

src/app/todo-table/todo-table.html

@@ -1,10 +1,10 @@
-<table>
+<table class="w-full mt-3">
   <thead>
     <tr>
       <td>Done</td>
       <td>Name</td>
       <td>Due</td>
-      <td>Actions</td>
+      <td class="flex"><div class="ml-auto">Actions</div></td>
     </tr>
   </thead>
   <tbody>
@@ -19,10 +19,18 @@
         />
       </td>
       <td>{{task.title}}</td>
-      <td>{{task.dueDate}}</td>
+      <td>{{task.dueDate|date}}</td>
-      <td>
+      <td class="flex">
-        <button (click)="editTask(task)">Edit</button
+        <div class="ml-auto mb-3">
-        ><button (click)="deleteTask(task)">Delete</button>
+          <button class="btn-secondary mr-3" (click)="editTask(task)">
+            Edit</button
+          ><button
+            class="btn-secondary hover:!bg-danger"
+            (click)="deleteTask(task)"
+          >
+            Delete
+          </button>
+        </div>
       </td>
     </tr>
     }

src/app/todo-table/todo-table.ts

@@ -1,7 +1,9 @@
+import { DatePipe } from '@angular/common';
 import { Component, EventEmitter, Output, resource } from '@angular/core';
 
 @Component({
   selector: 'app-todo-table',
+  imports: [DatePipe],
   templateUrl: './todo-table.html',
   styleUrl: './todo-table.css',
 })

src/index.html

@@ -1,13 +1,13 @@
 <!doctype html>
 <html lang="en">
-<head>
+  <head>
-  <meta charset="utf-8">
+    <meta charset="utf-8" />
     <title>Todo</title>
-  <base href="/">
+    <base href="/" />
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
-</head>
+  </head>
-<body>
+  <body class="bg-bg-dark text-text min-h-screen flex w-full">
-  <app-root></app-root>
+    <app-root class="w-full"></app-root>
-</body>
+  </body>
 </html>

src/styles.css

@@ -1 +1,30 @@
-/* You can add global styles to this file, and also import other style files */
+@import "tailwindcss";
+
+@theme {
+  --color-bg-dark: oklch(0.1 0.1 245);
+  --color-bg: oklch(0.15 0.1 245);
+  --color-bg-light: oklch(0.2 0.1 245);
+  --color-text: oklch(0.96 0.1 245);
+  --color-text-muted: oklch(0.76 0.1 245);
+  --color-highlight: oklch(0.5 0.2 245);
+  --color-border: oklch(0.4 0.2 245);
+  --color-border-muted: oklch(0.3 0.2 245);
+  --color-primary: oklch(0.76 0.2 245);
+  --color-secondary: oklch(0.76 0.2 65);
+  --color-danger: oklch(0.7 0.2 30);
+  --color-warning: oklch(0.7 0.2 100);
+  --color-success: oklch(0.7 0.2 160);
+  --color-info: oklch(0.7 0.2 260);
+}
+
+.input {
+  @apply transition-all px-2 py-0.5 rounded bg-bg-light active:border-border border border-border-muted;
+}
+
+.btn-primary {
+  @apply text-black transition-all hover:bg-secondary px-3 py-1 rounded cursor-pointer bg-primary;
+}
+
+.btn-secondary {
+  @apply text-black transition-all hover:bg-text px-3 py-1 rounded cursor-pointer bg-text-muted;
+}