From e845bfb27f456559ba59d16584b34089cf67bc7e Mon Sep 17 00:00:00 2001
From: Florian THIERRY <florian.thierry72@gmail.com>
Date: Sun, 6 Mar 2022 14:57:01 +0100
Subject: [PATCH] Change some style.

---
 .../active-list-tasks.component.scss          |  2 +-
 .../task-display/task-display.component.html  |  4 +--
 .../task-display/task-display.component.scss  | 29 +++++++++----------
 src/styles.scss                               |  4 +--
 4 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/src/app/active-list-tasks/active-list-tasks.component.scss b/src/app/active-list-tasks/active-list-tasks.component.scss
index ce91fda..24863ed 100644
--- a/src/app/active-list-tasks/active-list-tasks.component.scss
+++ b/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);
             }
         }
     }
diff --git a/src/app/active-list-tasks/task-display/task-display.component.html b/src/app/active-list-tasks/task-display/task-display.component.html
index 203d1b1..e81adce 100644
--- a/src/app/active-list-tasks/task-display/task-display.component.html
+++ b/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>
diff --git a/src/app/active-list-tasks/task-display/task-display.component.scss b/src/app/active-list-tasks/task-display/task-display.component.scss
index af08748..1869f49 100644
--- a/src/app/active-list-tasks/task-display/task-display.component.scss
+++ b/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;
 }
\ No newline at end of file
diff --git a/src/styles.scss b/src/styles.scss
index 88e18d2..73a7082 100644
--- a/src/styles.scss
+++ b/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;