fix(JOB-137): Modifier l'affichage du Toast succès de la modale d'int…

…érêt (#145)

* feature(JOB-137): Modifies the succes toast of interest modal

* fix(JOB-135) : Fixes linter errors

client/src/App.vue

@@ -39,6 +39,18 @@
     border-radius: 5px;
   }
 
+  .center-toastr-container {
+    font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
+  }
+
+  .center-toastr-container .toast-container.toast-top-center {
+    top: 60px;
+  }
+
+  .center-toastr-container .toast-container.toast-top-center>div {
+    width: 500px;
+  }
+
   @media only screen and (min-width: 640px) {
     .page__container {
       max-width: 544px;

client/src/components/InterestModal.vue

@@ -140,9 +140,14 @@
       },
 
       displaySuccessNotification() {
-        const mission = this.mission;
-        const message = `Ton intérêt pour la mission "${mission}" a été pris en compte.`;
-        this.$root.$refs.toastr.s(message);
+        this._closeModal();
+        const message = 'Merci de ton intérêt pour la mission. Ta demande a été transmise à l\'équipe Job Board.';
+        this.$root.$refs.centerToastr.s({
+          msg: message,
+          position: 'toast-top-center',
+          timeout: 3000,
+          closeButton: true,
+        });
       },
 
       beforeOpen() {
@@ -171,6 +176,9 @@
 </script>
 
 <style scoped>
+  .toast-container{
+    margin-top:60px;
+  }
   .interest-modal__header {
     background-color: #eef0f4;
     padding: 10px 20px;

client/src/main.js

@@ -30,9 +30,10 @@ Vue.component('icon', Icon);
 new Vue({
   el: '#app',
   router,
-  template: '<div><App/><vue-toastr ref="toastr"></vue-toastr></div>',
+  template: '<div><div class="center-toastr-container"><vue-toastr ref="centerToastr"></vue-toastr></div><App/><vue-toastr ref="toastr"></vue-toastr></div>',
   components: { App },
   mounted() {
     this.$refs.toastr.defaultPosition = 'toast-bottom-right';
+    this.$refs.toastr.defaultTimeout = 3000;
   },
 });