Change some style.

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

@@ -24,7 +24,7 @@
                 padding: 0 3rem;
                 border-radius: .1rem;
                 border-style: none;
-                background-color: #444;
+                background-color: var(--secondary);
             }
         }
     }

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

@@ -20,13 +20,13 @@
             </div>
             <div class="actions">
                 <div class="row">
-                    <button class="raised" matRipple matTooltip="Définir une alerte dans X minutes">
+                    <button class="stroked secondary" [disabled]="true" matRipple matTooltip="Définir une alerte dans X minutes">
                         <mat-icon>update</mat-icon>
                         Rappel
                     </button>
                 </div>
                 <div class="row">
-                    <button class="raised alert" [disabled]="!task" (click)="delete()">
+                    <button class="stroked alert" [disabled]="!task" (click)="delete()">
                         <mat-icon>delete</mat-icon>
                         Supprimer
                     </button>

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

@@ -5,10 +5,10 @@
     align-items: center;
     margin-bottom: .5rem;
     flex-direction: column;
-    background-color: #444;
+    background-color: var(--secondary);
+    border-radius: .2rem;
 
     .header {
-        border-radius: .1rem;
         height: 2.5rem;
         width: 100%;
         display: flex;
@@ -21,10 +21,6 @@
             }
         }
 
-        mat-checkbox {
-            // padding: 0 .5rem;
-        }
-
         .input-container {
             display: flex;
             flex-grow: 1;
@@ -34,7 +30,7 @@
                 height: 1.8rem;
                 padding: 0 .8rem;
                 margin: 0 .8rem;
-                background-color: #444;
+                background-color: inherit;
                 border-style: solid;
                 border-width: .1rem;
                 border-color: rgba(0,0,0, 0);
@@ -46,7 +42,7 @@
                         border-color .2s ease-out;
 
                 &:hover {
-                    border-color: rgb(53, 53, 53);
+                    border-color: var(--secondary-border);
                 }
             }
         }
@@ -61,6 +57,7 @@
         visibility: hidden;
         transition: height .1s ease-in-out;
         display: flex;
+        border-top: .1rem solid var(--primary-border);
 
         &.expanded {
             height: 20rem;
@@ -82,10 +79,11 @@
     
                 textarea {
                     flex-grow: 1;
-                    border: 1px solid #444;
+                    border: 1px solid var(--secondary-border);
                     border-radius: .2rem;
-                    background-color: #4a4a4a;
+                    background-color: #ddd;
                     resize: none;
+                    padding: .5rem;
                 }
             }
     
@@ -94,9 +92,7 @@
                 flex-direction: column;
                 flex-grow: 1;
                 height: 100%;
-                
                 max-width: 20%;
-                
 
                 .row {
                     display: flex;
@@ -108,14 +104,15 @@
 
                     button {
                         display: flex;
+                        justify-content: left;
                         flex-grow: 1;
+
+                        mat-icon {
+                            margin-right: .5rem;
+                        }
                     }
                 }
             }
         }
     }
-}
-
-input, textarea, mat-icon, check-box {
-    color: #fff;
 }

src/styles.scss

@@ -4,9 +4,9 @@
   --primary-text: #444444;
   --primary-border: #ccc;
   --primary-hover: #eee;
-  --secondary: #dddddd;
+  --secondary: #eee;
   --secondary-hover: #c9c9c9;
-  --secondaryBorder: #cccccc;
+  --secondary-border: #bbb;
 
   --disabled: #eee;
   --disabled-text: #aaa;