From 9b56dddab9bd86663da03e8f3c3849414c9bf591 Mon Sep 17 00:00:00 2001
From: Florian THIERRY <florian.thierry72@gmail.com>
Date: Sun, 6 Mar 2022 14:42:24 +0100
Subject: [PATCH] Use factorized style.

---
 .../confirm-dialog/confirm-dialog.component.html  |  2 +-
 .../confirm-dialog/confirm-dialog.component.scss  | 10 ----------
 .../core/components/header/header.component.scss  |  4 ++--
 .../add-task-list/add-task-list.component.html    |  6 +++---
 .../add-task-list/add-task-list.component.scss    |  5 -----
 .../rename-task-list.component.html               |  6 +++---
 .../rename-task-list.component.scss               |  5 -----
 src/app/task-lists/task-lists.component.ts        |  2 +-
 src/styles.scss                                   | 15 ++++++++++++++-
 9 files changed, 24 insertions(+), 31 deletions(-)

diff --git a/src/app/core/components/confirm-dialog/confirm-dialog.component.html b/src/app/core/components/confirm-dialog/confirm-dialog.component.html
index c0f720a..fdc3844 100644
--- a/src/app/core/components/confirm-dialog/confirm-dialog.component.html
+++ b/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()"
diff --git a/src/app/core/components/confirm-dialog/confirm-dialog.component.scss b/src/app/core/components/confirm-dialog/confirm-dialog.component.scss
index 92988d0..fb719f0 100644
--- a/src/app/core/components/confirm-dialog/confirm-dialog.component.scss
+++ b/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%;
-        }
-    }
 }
\ No newline at end of file
diff --git a/src/app/core/components/header/header.component.scss b/src/app/core/components/header/header.component.scss
index 19b0fed..8c71542 100644
--- a/src/app/core/components/header/header.component.scss
+++ b/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;
diff --git a/src/app/task-lists/add-task-list/add-task-list.component.html b/src/app/task-lists/add-task-list/add-task-list.component.html
index 910bcd8..4d2eb09 100644
--- a/src/app/task-lists/add-task-list/add-task-list.component.html
+++ b/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>
diff --git a/src/app/task-lists/add-task-list/add-task-list.component.scss b/src/app/task-lists/add-task-list/add-task-list.component.scss
index d40413b..3605e0e 100644
--- a/src/app/task-lists/add-task-list/add-task-list.component.scss
+++ b/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;
-    }
 }
\ No newline at end of file
diff --git a/src/app/task-lists/rename-task-list/rename-task-list.component.html b/src/app/task-lists/rename-task-list/rename-task-list.component.html
index 6c988de..930f176 100644
--- a/src/app/task-lists/rename-task-list/rename-task-list.component.html
+++ b/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>
\ No newline at end of file
diff --git a/src/app/task-lists/rename-task-list/rename-task-list.component.scss b/src/app/task-lists/rename-task-list/rename-task-list.component.scss
index d40413b..3605e0e 100644
--- a/src/app/task-lists/rename-task-list/rename-task-list.component.scss
+++ b/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;
-    }
 }
\ No newline at end of file
diff --git a/src/app/task-lists/task-lists.component.ts b/src/app/task-lists/task-lists.component.ts
index 1f984bb..5a0afe6 100644
--- a/src/app/task-lists/task-lists.component.ts
+++ b/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'
       }
     );
   }
diff --git a/src/styles.scss b/src/styles.scss
index e37b010..88e18d2 100644
--- a/src/styles.scss
+++ b/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%;
+  }
 }
\ No newline at end of file