From efa3c09fdffc4ff6a91eb1c9e6d5fa48a35e4b13 Mon Sep 17 00:00:00 2001
From: jank <jan@kjan.email>
Date: Mon, 23 Jun 2025 13:04:32 +0200
Subject: [PATCH] more changes

---
 .postcssrc.json                      |  1 +
 src/app/app.html                     |  4 +++-
 src/app/app.routes.ts                |  6 ------
 src/app/app.ts                       |  2 +-
 src/app/create-todo/create-todo.html | 16 +++++++++-----
 src/app/edit-todo/edit-todo.css      |  0
 src/app/edit-todo/edit-todo.html     |  1 -
 src/app/edit-todo/edit-todo.spec.ts  | 23 ---------------------
 src/app/edit-todo/edit-todo.ts       | 18 ----------------
 src/app/home/home.html               | 11 ++++++++--
 src/app/home/home.ts                 |  2 +-
 src/app/todo-table/todo-table.html   | 20 ++++++++++++------
 src/app/todo-table/todo-table.ts     |  2 ++
 src/index.html                       | 20 +++++++++---------
 src/styles.css                       | 31 +++++++++++++++++++++++++++-
 15 files changed, 82 insertions(+), 75 deletions(-)
 create mode 100644 .postcssrc.json
 delete mode 100644 src/app/edit-todo/edit-todo.css
 delete mode 100644 src/app/edit-todo/edit-todo.html
 delete mode 100644 src/app/edit-todo/edit-todo.spec.ts
 delete mode 100644 src/app/edit-todo/edit-todo.ts

diff --git a/.postcssrc.json b/.postcssrc.json
new file mode 100644
index 0000000..c1df780
--- /dev/null
+++ b/.postcssrc.json
@@ -0,0 +1 @@
+{ "plugins": { "@tailwindcss/postcss": {} } }
diff --git a/src/app/app.html b/src/app/app.html
index 0680b43..0f80f06 100644
--- a/src/app/app.html
+++ b/src/app/app.html
@@ -1 +1,3 @@
-<router-outlet></router-outlet>
+<div class="w-full h-full">
+  <router-outlet></router-outlet>
+</div>
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index fa4f31f..d2626ad 100644
--- a/src/app/app.routes.ts
+++ b/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,
-  },
 ];
diff --git a/src/app/app.ts b/src/app/app.ts
index f10e723..15b8663 100644
--- a/src/app/app.ts
+++ b/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';
diff --git a/src/app/create-todo/create-todo.html b/src/app/create-todo/create-todo.html
index deabe0c..ce2f52e 100644
--- a/src/app/create-todo/create-todo.html
+++ b/src/app/create-todo/create-todo.html
@@ -1,8 +1,14 @@
-<form [formGroup]="form" (submit)="submit()">
-  <input type="text" formControlName="title" />
-  <input type="date" formControlName="dueDate" />
-  <button type="submit">{{ isEditing() ? "Update" : "Create" }}</button>
+<form class="gap-x-3 flex" [formGroup]="form" (submit)="submit()">
+  <input class="input" type="text" formControlName="title" />
+  <input class="input" type="date" formControlName="dueDate" />
+
+  <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>
diff --git a/src/app/edit-todo/edit-todo.css b/src/app/edit-todo/edit-todo.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/edit-todo/edit-todo.html b/src/app/edit-todo/edit-todo.html
deleted file mode 100644
index 6983733..0000000
--- a/src/app/edit-todo/edit-todo.html
+++ /dev/null
@@ -1 +0,0 @@
-<p>edit-todo works!</p>
diff --git a/src/app/edit-todo/edit-todo.spec.ts b/src/app/edit-todo/edit-todo.spec.ts
deleted file mode 100644
index aa3abdc..0000000
--- a/src/app/edit-todo/edit-todo.spec.ts
+++ /dev/null
@@ -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();
-  });
-});
diff --git a/src/app/edit-todo/edit-todo.ts b/src/app/edit-todo/edit-todo.ts
deleted file mode 100644
index df22ba8..0000000
--- a/src/app/edit-todo/edit-todo.ts
+++ /dev/null
@@ -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/');
-  }
-}
diff --git a/src/app/home/home.html b/src/app/home/home.html
index 8c21e55..ed9e232 100644
--- a/src/app/home/home.html
+++ b/src/app/home/home.html
@@ -1,2 +1,9 @@
-<app-create-todo #form [tasks]="table.tasks"></app-create-todo>
-<app-todo-table #table (editTaskEvent)="form.editTask($event)"></app-todo-table>
+<div class="w-full h-full flex">
+  <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>
diff --git a/src/app/home/home.ts b/src/app/home/home.ts
index 63bc5df..b4f08d1 100644
--- a/src/app/home/home.ts
+++ b/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';
 
diff --git a/src/app/todo-table/todo-table.html b/src/app/todo-table/todo-table.html
index fdfae25..960e758 100644
--- a/src/app/todo-table/todo-table.html
+++ b/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>
-        <button (click)="editTask(task)">Edit</button
-        ><button (click)="deleteTask(task)">Delete</button>
+      <td>{{task.dueDate|date}}</td>
+      <td class="flex">
+        <div class="ml-auto mb-3">
+          <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>
     }
diff --git a/src/app/todo-table/todo-table.ts b/src/app/todo-table/todo-table.ts
index de5d11d..c6d3dd0 100644
--- a/src/app/todo-table/todo-table.ts
+++ b/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',
 })
diff --git a/src/index.html b/src/index.html
index 161a0a6..81c44e5 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,13 +1,13 @@
 <!doctype html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Todo</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-</head>
-<body>
-  <app-root></app-root>
-</body>
+  <head>
+    <meta charset="utf-8" />
+    <title>Todo</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body class="bg-bg-dark text-text min-h-screen flex w-full">
+    <app-root class="w-full"></app-root>
+  </body>
 </html>
diff --git a/src/styles.css b/src/styles.css
index 90d4ee0..c983451 100644
--- a/src/styles.css
+++ b/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;
+}