end of project

src/components/Modal.vue

@@ -35,7 +35,7 @@
 </script>
 
 <style lang="scss" scoped>
-@import '@/style/shared.scss';
+@import '../style/colors.scss';
 /*Modale annimation*/
 
 .modal-animation-enter-from,
@@ -110,11 +110,11 @@ h1{
   border-radius: 0.75em;
   padding: 0.25em;
   background-color: #e5e5e5;
-  color: $red;
+  color: darken($action-normal, 30%);
   font-size: 1.7em;
   transition: color 0.25s ease;
   &:hover{
-    color: lighten($red, 15%);
+    color: darken($action-normal, 45%);;
     cursor:pointer;
   }
 }
@@ -128,23 +128,44 @@ h1{
   -ms-overflow-style: none;
 }
 .button{
-  border-radius: 0.5em;
-  margin:0.5em auto;
-  display: block;
-  padding: 0.5em 1em;
-  border:none;
-  color:$red;
-  font-family: Arial, Helvetica, sans-serif;
-  font-size: 1.2rem;
-  font-weight: 600;
-  background-color: $green;
-  outline: $red;
-  outline-style: solid;
-  outline-offset: -5px;
-  transition: 0.25s ease;
-  &:hover{
-    background-color: darken($green, 10%);
-    cursor:pointer;
-  }
+     
+    display: block;
+    margin: 0.5em auto;
+    border: none;
+    border-radius: 7px;
+    font-size:1.3rem;
+    background-color: $action-normal;
+    outline : 3px;
+    outline-style: solid;
+    outline-offset: -5px;
+    outline-color: black;
+    color:black;
+    padding: 0.3em 0.9em;
+    transition:0.3s;
+    
+    &:hover{
+      cursor: pointer; 
+      background-color: darken($action-normal, 15%)
+    }
 }
+// .button{
+//   border-radius: 0.5em;
+//   margin:0.5em auto;
+//   display: block;
+//   padding: 0.5em 1em;
+//   border:none;
+//   color:$renforced-normal;
+//   font-family: Arial, Helvetica, sans-serif;
+//   font-size: 1.2rem;
+//   font-weight: 600;
+//   background-color: $action-normal;
+//   outline: $renforced-normal;
+//   outline-style: solid;
+//   outline-offset: -5px;
+//   transition: 0.25s ease;
+//   &:hover{
+//     background-color: darken($action-normal, 10%);
+//     cursor:pointer;
+//   }
+// }
 </style>