refactor: добавлены переменные цветов css и стилизована иконка ссылка для создания новой задачи

src/app/app.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { RouterLink, RouterOutlet } from '@angular/router';
+import { RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'ksk-crm-root',
@@ -16,11 +16,11 @@ import { RouterLink, RouterOutlet } from '@angular/router';
       align-items: center;
       padding: 8px;
       min-height: 100dvh;
-      background: var(--bg-base);
+      background: var(--bg-base-color);
 
       main {
         width: 100%;
-        background: var(--surface);
+        background: var(--surface-color);
         padding: 1ch;
         border-radius: 5px;
       }

src/app/features/tasks/task-list.ts

@@ -1,4 +1,4 @@
-import { Component, computed, inject, linkedSignal, resource, signal } from '@angular/core';
+import { Component, computed, inject, resource, signal } from '@angular/core';
 import { TaskItem } from './task-item';
 import { Task } from './task';
 import { TaskService } from './task-service';
@@ -12,9 +12,11 @@ import { lucideSquarePlus } from '@ng-icons/lucide';
   imports: [TaskItem, RouterLink, FormsModule, NgIcon],
   providers: [provideIcons({ lucideSquarePlus })],
   template: `
-    <section>
+    <section class="topBar">
-      <input [(ngModel)]="searchInput" type="text" />
+      <input [(ngModel)]="filterInput" type="text" />
-      <a routerLink="/new"><ng-icon name="lucideSquarePlus" size="20" /> </a>
+      <a routerLink="/new">
+        <ng-icon name="lucideSquarePlus" size="36" />
+      </a>
     </section>
     <section class="result">
       @for (task of filteredTasks(); track $index) {
@@ -23,14 +25,28 @@ import { lucideSquarePlus } from '@ng-icons/lucide';
     </section>
   `,
   styles: `
+    .topBar {
+      display: flex;
+
+      a {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        margin-left: 1ch;
+      }
+    }
+
     input {
       outline: none;
-      padding: 5px;
+      padding: 1ch;
+      flex-grow: 1;
     }
+
     button {
       cursor: pointer;
       padding: 5px;
     }
+
     .result {
       margin-top: 20px;
     }
@@ -44,10 +60,10 @@ export class TaskList {
     loader: () => this.taskService.getAllTasks(),
   });
 
-  searchInput = signal('');
+  filterInput = signal('');
 
   filteredTasks = computed<Task[]>(() => {
-    const s = this.searchInput();
+    const s = this.filterInput();
     const tasks = this.tasks.value();
 
     if (!tasks) return [];

src/styles.css

@@ -4,13 +4,17 @@
 @import '@fontsource/inter/700.css';
 
 :root {
-  --gray: oklch(28% 0 0);
+  --gray-base: oklch(28% 0 0);
-  --white: white;
+  --white-base: oklch(100% 0 0);
+  --blue-base: oklch(62.3% 0.214 259.815);
+  --green-base: oklch(70.4% 0.14 182.503);
 
   --font-family-base: 'Inter';
 
-  --bg-base: var(--gray);
+  --bg-base-color: var(--gray-base);
-  --surface: var(--white);
+  --surface-color: var(--white-base);
+  --primary-color: var(--blue-base);
+  --success-color: var(--green-base);
 }
 
 * {
@@ -22,3 +26,8 @@
 body {
   font-family: var(--font-family-base), system-ui, -apple-system, sans-serif;
 }
+
+a {
+  text-decoration: none;
+  color: var(--primary-color);
+}