feat: now respect codestyle

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

@@ -1,29 +1,43 @@
 <script setup lang="ts">
-import {color} from "@/services/popupDisplayer.ts";
-import type {PropType} from "vue";
+import { color } from "@/services/popupDisplayer.ts";
+import type { PropType } from "vue";
 
 defineProps({
-  errorMessage: {
-    type: Object as PropType<string>,
-    required: true
-  },
-  errorColor: {
-    type: Object as PropType<color>,
-    default: color.Red
-  }
+    errorMessage: {
+        type: Object as PropType<string>,
+        required: true,
+    },
+    errorColor: {
+        type: Object as PropType<color>,
+        default: color.Red,
+    },
 });
 </script>
 
 <template>
-  <div :class='["red", "yellow", "blue", "green"][errorColor]' class="error-modal">
-    <p>{{["Erreur :(", "Warning :|", "Info :)", "Succes ;)"][errorColor]}}</p>
-    <p>{{errorMessage}}</p>
-    <div class="loading" :class='["red-loader", "yellow-loader", "blue-loader", "green-loader"][errorColor]'></div>
-  </div>
+    <div
+        :class="['red', 'yellow', 'blue', 'green'][errorColor]"
+        class="error-modal"
+    >
+        <p>
+            {{
+                ["Erreur :(", "Warning :|", "Info :)", "Succes ;)"][errorColor]
+            }}
+        </p>
+        <p>{{ errorMessage }}</p>
+        <div
+            class="loading"
+            :class="
+                ['red-loader', 'yellow-loader', 'blue-loader', 'green-loader'][
+                    errorColor
+                ]
+            "
+        ></div>
+    </div>
 </template>
 
 <style scoped>
-  .error-modal{
+.error-modal {
     margin-bottom: 1em;
     padding: 1em;
     border-radius: 1em;
@@ -31,41 +45,45 @@ defineProps({
     overflow: hidden;
     position: relative;
     animation: disappear 5s linear forwards;
-  }
+}
 
-  .red{
+.red {
     background-color: #ee6055;
     color: white;
-  }
-  .red-loader {
+}
+
+.red-loader {
     background-color: #fa8383;
-  }
+}
 
-  .yellow{
-    background-color: #FF9D23;
-     color: white;
-   }
-  .yellow-loader{
+.yellow {
+    background-color: #ff9d23;
+    color: white;
+}
+
+.yellow-loader {
     background-color: #ffbf81;
-  }
+}
 
-  .blue {
+.blue {
     background-color: #809bce;
     color: white;
-  }
-  .blue-loader{
-    background-color: #95b8d1;
-  }
+}
 
-  .green {
+.blue-loader {
+    background-color: #95b8d1;
+}
+
+.green {
     background-color: green;
     color: white;
-  }
-  .green-loader {
-    background-color: darkgreen;
-  }
+}
 
-  .loading {
+.green-loader {
+    background-color: darkgreen;
+}
+
+.loading {
     box-sizing: border-box;
     position: absolute;
     padding: 0;
@@ -74,33 +92,33 @@ defineProps({
     height: 1em;
     width: 0;
     animation: loading 4s linear forwards;
-  }
+}
 
-  /* Animation for the loading bar */
-  @keyframes loading {
+/* Animation for the loading bar */
+@keyframes loading {
     0% {
-      width: 100%;
+        width: 100%;
     }
     100% {
-      width: 0;
+        width: 0;
     }
-  }
+}
 
-  @keyframes disappear {
+@keyframes disappear {
     0% {
-      height: 100px;
-      padding: 1em;
-      margin: 1em;
+        height: 100px;
+        padding: 1em;
+        margin: 1em;
     }
     80% {
-      height: 100px;
-      padding: 1em;
-      margin: 1em;
+        height: 100px;
+        padding: 1em;
+        margin: 1em;
     }
     100% {
-      height: 0;
-      margin: 0;
-      padding: 0;
+        height: 0;
+        margin: 0;
+        padding: 0;
     }
-  }
-</style>
+}
+</style>