Use factorized style.

src/app/core/components/confirm-dialog/confirm-dialog.component.html

@@ -6,7 +6,7 @@
             <div class="description">{{data.description}}</div>
         </div>
     </div>
-    <div class="actions">
+    <div class="dialog-actions">
         <button class="stroked" (click)="cancel()">Annuler</button>
         <button class="stroked"
                 (click)="confirm()"

src/app/core/components/confirm-dialog/confirm-dialog.component.scss

@@ -32,14 +32,4 @@
             }
         }
     }
-    .actions {
-        margin-top: 1rem; 
-        display: flex;
-        justify-content: space-between;
-
-        > * {
-            flex: 1 1 45%;
-            max-width: 45%;
-        }
-    }
 }

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

@@ -6,7 +6,7 @@ nav {
   display: flex;
   align-items: center;
   height: 3.2rem;
-  background-color: #eee; //#666;
+  background-color: #eee;
 
   .left {
     position: absolute;
@@ -35,7 +35,7 @@ nav {
   
   &.selectionMode {
     font-weight: bold;
-    background-color: #185eb4;
+    background-color: var(--selection);
     color: white;
     display: flex;
     justify-content: center;

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

@@ -9,8 +9,8 @@
       </mat-error>
     </mat-form-field>
   </p>
-  <div class="actions">
-    <button class="raised" type="button" (click)="close()">Annuler</button>
-    <button class="raised"  type="submit">Créer une liste</button>
+  <div class="dialog-actions">
+    <button class="stroked primary" type="button" (click)="close()">Annuler</button>
+    <button class="stroked primary"  type="submit">Créer une liste</button>
   </div>
 </form>

src/app/task-lists/add-task-list/add-task-list.component.scss

@@ -4,9 +4,4 @@ form {
             width: 100%;
         }
     }
-    .actions {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-    }
 }

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

@@ -9,8 +9,8 @@
 			</mat-error>
 		</mat-form-field>
 	</p>
-	<div class="actions">
-		<button class="raised" type="button" (click)="close()">Annuler</button>
-		<button class="raised" type="submit">Renommer la liste</button>
+	<div class="dialog-actions">
+		<button class="stroked" type="button" (click)="close()">Annuler</button>
+		<button class="stroked" type="submit">Renommer la liste</button>
 	</div>
 </form>

src/app/task-lists/rename-task-list/rename-task-list.component.scss

@@ -4,9 +4,4 @@ form {
             width: 100%;
         }
     }
-    .actions {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-    }
 }

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

@@ -62,7 +62,7 @@ export class TaskListsComponent implements OnInit, OnDestroy {
     this._dialog.open(
       RenameTaskListComponent,
       {
-        width: '20rem'
+        width: '25rem'
       }
     );
   }

src/styles.scss

@@ -22,6 +22,8 @@
   --alert-text: #fff;
   --alert-hover: #c20d2b;
   --alert-border: #b91b35;
+
+  --selection: #185eb4;
 }
 
 html {
@@ -104,7 +106,7 @@ button {
         background-color: var(--primary-hover);
       }
     }
-    
+
     &.secondary {
       background-color: var(--secondary);
 
@@ -123,4 +125,15 @@ button {
       border-color: var(--alert-border);
     }
   }
+}
+
+.dialog-actions {
+  margin-top: 1rem; 
+  display: flex;
+  justify-content: space-between;
+
+  > * {
+      flex: 1 1 45%;
+      max-width: 45%;
+  }
 }