Lot of visual improvements.

src/app/active-list-tasks/task-display/task-display.component.html

@@ -5,8 +5,9 @@
         <div class="input-container">
             <input type="text" [formControl]="titleControl" />
         </div>
-        <button mat-button type="button" class="expand" (click)="expand()">
+        <button type="button" class="expand icon" (click)="expand()" matRipple>
-            <mat-icon>expand_more</mat-icon>
+            <mat-icon *ngIf="!isExpanded">expand_more</mat-icon>
+            <mat-icon *ngIf="isExpanded">expand_less</mat-icon>
         </button>
     </div>
     <div [ngClass]="getExpendedClass()">
@@ -18,10 +19,10 @@
                 <textarea id="description"></textarea>
             </div>
             <div class="actions">
-                <button matTooltip="Définir une alerte dans X minutes">
+                <button class="icon raised" matRipple matTooltip="Définir une alerte dans X minutes">
                     <mat-icon>update</mat-icon>
                 </button>
-                <button>
+                <button class="icon raised alert" matRipple>
                     <mat-icon>delete</mat-icon>
                 </button>
             </div>

src/app/active-list-tasks/task-display/task-display.component.scss

@@ -83,6 +83,7 @@
                 textarea {
                     flex-grow: 1;
                     border: 1px solid #444;
+                    border-radius: .2rem;
                     background-color: #4a4a4a;
                     resize: none;
                 }
@@ -91,7 +92,6 @@
             .actions {
                 display: flex;
                 flex-grow: 1;
-                background-color: gray;
                 height: 100%;
                 flex-wrap: wrap;
                 max-width: 20%;

src/app/app.module.ts

@@ -23,6 +23,7 @@ import {MatCheckboxModule} from '@angular/material/checkbox';
 import { TaskListService } from './core/service/task-list.service';
 import { StorePersistenceService } from './core/service/store-persistence.service';
 import {MatTooltipModule} from '@angular/material/tooltip'; 
+import {MatRippleModule} from '@angular/material/core'; 
 
 @NgModule({
   declarations: [
@@ -47,7 +48,8 @@ import {MatTooltipModule} from '@angular/material/tooltip';
     ReactiveFormsModule,
     MatSnackBarModule,
     MatCheckboxModule,
-    MatTooltipModule
+    MatTooltipModule,
+    MatRippleModule
   ],
   providers: [
     CookieService,

src/app/core/components/header/header.component.html

@@ -1,21 +1,24 @@
 <nav *ngIf="!selectionMode">
-  <span class="title" routerLink="/">
+  <span class="title">
     <img src="../../assets/images/to-do.png" />
     To Do
   </span>
   <button *ngIf="!activeTaskList"
-      (click)="openNewListForm()">
+      (click)="openNewListForm()"
+      class="raised"
+      matRipple>
     Nouvelle liste
   </button>
   <button *ngIf="activeTaskList"
       (click)="goTaskListsPane()"
-      class="icon"
+      class="icon raised"
+      matRipple
       matTooltip="Retourner aux task-lists">
     <mat-icon>chevron_left</mat-icon>
   </button>
-  <div *ngIf="activeTaskList">
+  <!-- <div *ngIf="activeTaskList">
     Liste active : {{activeTaskList.name}}
-  </div>
+  </div> -->
 </nav>
 <nav *ngIf="selectionMode" class="selectionMode">
   <div></div>

src/app/task-lists/task-lists.component.html

@@ -1,12 +1,18 @@
 <div class="task-lists">
   <div *ngFor="let taskList of taskLists" class="task-list-container">
-    <div class="task-list shadowed" (click)="selectActiveTaskList(taskList)" (contextmenu)="$event.preventDefault(); onRightClick(taskList)">
+    <div class="task-list shadowed"
+        (click)="selectActiveTaskList(taskList)"
+        (contextmenu)="$event.preventDefault(); onRightClick(taskList)"
+        matRipple>
       <ng-container [ngPlural]="taskList.tasks?.length ?? 0">
-        <ng-template ngPluralCase=">1">
+        <ng-template ngPluralCase="0">
-          {{taskList.tasks?.length}} tâches
+          Aucune tâche
+        </ng-template>
+        <ng-template ngPluralCase="1">
+          {{taskList.tasks?.length}} tâche
         </ng-template>
         <ng-template ngPluralCase="other">
-          {{taskList.tasks?.length}} tâche
+          {{taskList.tasks?.length}} tâches
         </ng-template>
       </ng-container>
     </div>

src/styles.scss

@@ -45,11 +45,21 @@ button {
       border-color: rgb(53, 53, 53);
   }
 
-  .icon {
+  &.icon {
       width: 2rem;
       height: 2rem;
-    min-width: 2rem;
+      min-width: 1rem;
-    min-height: 2rem;
+      min-height: 1rem;
       padding: 0;
+      background-color: inherit;
+  }
+
+  &.raised {
+    background-color: #4a4a4a;
+  }
+
+  &.alert {
+    background: #F93154;
+    color: #fff;
   }
 }