fix: changed configs

front/MyINPulse-front/src/components/errorModal.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+const props = defineProps(['data']);
+</script>
+
+<template>
+  <div :class='["red", "yellow", "blue", "green"][data.type]' class="error-modal">
+    <p>{{["Erreur :(", "Warning :|", "Info :)", "Succes ;)"][data.type]}}</p>
+    <p>{{data.errorMessage}}</p>
+    <div class="loading" :class='["red-loader", "yellow-loader", "blue-loader", "green-loader"][data.type]'></div>
+  </div>
+</template>
+
+<style scoped>
+  .error-modal{
+    margin-bottom: 1em;
+    padding: 1em;
+    border-radius: 1em;
+    text-align: center;
+    overflow: hidden;
+    position: relative;
+    animation: disappear 5s linear forwards;
+  }
+
+  .red{
+    background-color: #ee6055;
+    color: white;
+  }
+  .red-loader {
+    background-color: #fa8383;
+  }
+
+  .yellow{
+    background-color: #FF9D23;
+     color: white;
+   }
+  .yellow-loader{
+    background-color: #ffbf81;
+  }
+
+  .blue {
+    background-color: #809bce;
+    color: white;
+  }
+  .blue-loader{
+    background-color: #95b8d1;
+  }
+
+  .green {
+    background-color: green;
+    color: white;
+  }
+  .green-loader {
+    background-color: darkgreen;
+  }
+
+  .loading {
+    box-sizing: border-box;
+    position: absolute;
+    padding: 0;
+    bottom: 0;
+    left: 0;
+    height: 1em;
+    width: 0;
+    animation: loading 4s linear forwards;
+  }
+
+  /* Animation for the loading bar */
+  @keyframes loading {
+    0% {
+      width: 100%;
+    }
+    100% {
+      width: 0;
+    }
+  }
+
+  @keyframes disappear {
+    0% {
+      height: 100px;
+      padding: 1em;
+      margin: 1em;
+    }
+    80% {
+      height: 100px;
+      padding: 1em;
+      margin: 1em;
+    }
+    100% {
+      height: 0;
+      margin: 0;
+      padding: 0;
+    }
+  }
+</style>