toast color now depend on return code

src/App.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
@@ -38,8 +38,8 @@ const App = () => {
           <Route path="*" element={<NotFoundPage />} />
         </Routes>
         <ToastContainer
-            position="top-center"
+            position="top-right"
-            autoClose={2500}
+            autoClose={3500}
             hideProgressBar={false}
             newestOnTop={false}
             closeOnClick
@@ -47,7 +47,7 @@ const App = () => {
             pauseOnFocusLoss
             draggable
             pauseOnHover
-            theme="colored"
+            theme="light"
             />
       </div>
     </Router>

src/service/api.tsx

@@ -1,5 +1,5 @@
 import { getAuth } from 'firebase/auth';
-import {Bounce, toast} from "react-toastify";
+import { Bounce, toast } from "react-toastify";
 
 const apiUrl: string = 'https://www.servii.fr/api';
 
@@ -69,17 +69,30 @@ class serviiApi {
       }
       return { return_code: status, message: json };
     }
-    toast.info(json.message, {
+
-      position: "top-center",
+    let toastType: 'success' | 'error' | 'info';
-      autoClose: 2500,
+    let toastColor: string;
+
+    if (status >= 200 && status < 300) {
+      toastType = 'success';
+    } else if (status >= 400 && status < 600) {
+      toastType = 'error';
+    } else {
+      toastType = 'info';
+    }
+
+    toast[toastType](json.message, {
+      position: "top-right",
+      autoClose: 3500,
       hideProgressBar: false,
       closeOnClick: true,
       pauseOnHover: true,
       draggable: true,
       progress: undefined,
-      theme: "colored",
+      theme: "light",
       transition: Bounce,
     });
+
     return { return_code: status, message: json.message };
   }