Merge branch 'master' of https://github.com/hubHarmony/servii-frontend

src/App.jsx

@@ -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/components/CreateServer/CreateServer.jsx

@@ -102,7 +102,7 @@ const CreateServer = ({ user, onCreateServer, onSubdomainUpdate, onCancel, noSer
                 <option>Version</option>
                 <option value="1.21">1.21</option>
               </select>
-              <div>
+              <div className={styles.buttonContainer}>
                 <button className={styles.btnServCreate} onClick={handleCreateServer}>
                   Créer
                 </button>

src/components/CreateServer/CreateServer.module.scss

@@ -46,7 +46,6 @@
   margin-right: 1rem;
 }
 
-
 .containerNoserveur {
   display: flex;
   justify-content: center;
@@ -85,7 +84,7 @@
   cursor: pointer;
 }
 
-.btnServCreate{
+.btnServCreate {
   width: 15rem;
   height: 3.5rem;
   margin-top: 2.5rem;
@@ -93,10 +92,9 @@
   font-weight: 900;
   border-radius: 1rem;
   background-color: #090325;
-
 }
 
-.mainCardCreateServ{
+.mainCardCreateServ {
   margin-top: 5rem;
   display: flex;
   justify-content: center;
@@ -107,7 +105,7 @@
   padding: 2rem;
 }
 
-.mainCardSubdomain{
+.mainCardSubdomain {
   background-color: #1D1836;
   padding: 3rem;
   margin-top: 5rem;
@@ -115,7 +113,7 @@
   width: 55rem;
 }
 
-.subtitle{
+.subtitle {
   font-size: 1.2rem;
   color: #AAA6C3;
   font-weight: 600;
@@ -123,7 +121,7 @@
   margin-bottom: 2rem;
 }
 
-.inputsubdomain{
+.inputsubdomain {
   width: 50rem;
   padding: 1rem;
   margin-top: 1rem;
@@ -133,3 +131,83 @@
   color: white;
   font-size: 1rem;
 }
+
+@media (max-width: 800px) {
+
+  .buttonContainer{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+  }
+
+  .title {
+    font-size: 1.8rem;
+    margin-bottom: 1rem;
+  }
+
+  .subtitle {
+    font-size: 1rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .input, .select {
+    width: 100%;
+    padding: 0.75rem;
+    font-size: 0.875rem;
+  }
+
+  .btnSubCreate, .btnServCreate {
+    margin-top: 2rem;
+    padding: 1rem 2.5rem;
+    font-size: 1rem;
+    margin-right: 2rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .mainCardNoserveur {
+    padding: 2rem;
+    margin-top: 3rem;
+  }
+
+  .nsTitle {
+    font-size: 2rem;
+  }
+
+  .nsSubTitle {
+    font-size: 1.2rem;
+  }
+
+  .btnnoServCreate {
+    width: 100%;
+    height: 3.5rem;
+    font-size: 1.5rem;
+    margin-top: 3rem;
+  }
+
+  .btnServCreate {
+    width: 100%;
+    height: 2.5rem;
+    font-size: 1.25rem;
+  }
+
+  .mainCardCreateServ {
+    margin-top: 3rem;
+    padding: 1.5rem;
+    width: 35rem;
+  }
+
+  .mainCardSubdomain {
+    padding: 2rem;
+    margin-top: 3rem;
+    width: 100%;
+  }
+
+  .inputsubdomain {
+    width: 100%;
+    padding: 0.75rem;
+    font-size: 0.875rem;
+  }
+}

src/components/serverCard/serverCard.module.scss

@@ -30,7 +30,7 @@
   background-color: #008d5f;
   color: white;
   border: none;
-  padding: 10px 20px;
+  padding: 1rem 1.6rem;
   border-radius: 0.6rem;
   outline: none;
   cursor: pointer;
@@ -42,7 +42,7 @@
   background-color: #8d213e;
   color: white;
   border: none;
-  padding: 10px 20px;
+  padding: 1rem 1.6rem;
   border-radius: 0.6rem;
   outline: none;
   cursor: pointer;

src/pages/ServerDetails/ServerDetails.module.scss

@@ -1,83 +1,116 @@
-/* ServerDetails.module.scss */
 .serverDetailsContainer {
-    padding-top: var(--navbar-height);
+  padding-top: var(--navbar-height);
-    background-color: var(--main-bg-color);
+  background-color: var(--main-bg-color);
-    display: flex;
+  display: flex;
-    flex-direction: column;
+  flex-direction: column;
-    align-items: center;
+  align-items: center;
-    color: var(--text-color);
+  color: var(--text-color);
-  }
+  width: 100%; 
+  box-sizing: border-box; 
+}
 
+.details {
+  margin-top: 5rem;
+  padding: 3rem;
+  padding-top: 0;
+  background-color: var(--card-bg-color);
+  width: 100%;
+  max-width: 60rem; 
+  border-radius: 1rem;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  box-sizing: border-box;
+}
+
+.formGroup {
+  margin-bottom: 2.5rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.formGroup label {
+  font-weight: bold;
+  margin-bottom: 1.2rem;
+  font-size: 1.4rem;
+}
+
+.formGroup input,
+.formGroup select {
+  width: 100%; 
+  padding: 1.2rem;
+  height: 3.5rem;
+  background-color: var(--input-bg-color);
+  border: 1px solid var(--input-border-color);
+  border-radius: 0.5rem;
+  color: var(--text-color);
+  font-size: 1.2rem;
+  line-height: 1.4rem; 
+  box-sizing: border-box;
+}
+
+.saveButton,
+.quitButton {
+  padding: 1.2rem 2.5rem;
+  color: var(--button-text-color);
+  border: none;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition: background-color 0.3s;
+  font-size: 1.2rem;
+  margin-top: 1rem;
+}
+
+.saveButton {
+  background-color: var(--button-bg-color);
+}
+
+.quitButton {
+  background-color: gray;
+  margin-left: 1rem; 
+}
+
+.saveButton:hover {
+  background-color: var(--button-bg-hover-color);
+}
+
+.error {
+  color: red;
+  font-size: 1.2rem;
+}
+
+.details h1 {
+  font-size: 2.5rem;
+  margin-bottom: 3rem;
+}
+
+@media (max-width: 768px) {
   .details {
-    margin-top: 5rem;
+    width: 90%;
-    padding: 3rem;
+    padding: 2rem;
-    padding-top: 0rem;
-    background-color: var(--card-bg-color);
-    width: 60rem;
-    border-radius: 1rem;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-  }
-  
-  .formGroup {
-    margin-bottom: 2.5rem; 
-    display: flex;
-    flex-direction: column;
-  }
-  
-  .formGroup label {
-    font-weight: bold;
-    margin-bottom: 1.2rem;
-    font-size: 1.4rem;
   }
 
   .formGroup input,
   .formGroup select {
-    width: calc(100% - 2px); 
+    height: 3rem;
-    padding: 1.2rem; 
+    font-size: 1rem;
-    height: 3.5rem; 
+    padding: 1rem;
-    background-color: var(--input-bg-color);
-    border: 1px solid var(--input-border-color);
-    border-radius: 0.5rem;
-    color: var(--text-color);
-    font-size: 1.2rem; 
-    box-sizing: border-box; 
   }
 
-  .saveButton {
+  .saveButton,
-    padding: 1.2rem 2.5rem; 
+  .quitButton {
-    background-color: var(--button-bg-color);
+    padding: 1rem 2rem;
-    color: var(--button-text-color);
+    font-size: 1rem;
-    border: none;
-    border-radius: 0.5rem;
-    cursor: pointer;
-    transition: background-color 0.3s;
-    font-size: 1.2rem; 
-    align-self: flex-start; 
-  }
-  
-  .quitButton{
-    padding: 1.2rem 2.5rem; 
-    background-color: gray;
-    color: var(--button-text-color);
-    border: none;
-    border-radius: 0.5rem;
-    cursor: pointer;
-    transition: background-color 0.3s;
-    font-size: 1.2rem; 
-    align-self: flex-start; 
-    margin-left: 3rem;
-  }
-
-  .saveButton:hover {
-    background-color: var(--button-bg-hover-color);
-  }
-  
-  .error {
-    color: red;
-    font-size: 1.2rem; 
   }
 
   .details h1 {
-    font-size: 2.5rem;
+    font-size: 2rem;
-    margin-bottom: 3rem;
+    margin-bottom: 2rem;
   }
+}
+
+.formGroup input[type="number"],
+.formGroup input[type="text"],
+.formGroup select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}

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 };
   }