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"
-            autoClose={2500}
+            position="top-right"
+            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;
@@ -93,7 +92,6 @@
   font-weight: 900;
   border-radius: 1rem;
   background-color: #090325;
-
 }
 
 .mainCardCreateServ {
@@ -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,4 +1,3 @@
-/* ServerDetails.module.scss */
 .serverDetailsContainer {
   padding-top: var(--navbar-height);
   background-color: var(--main-bg-color);
@@ -6,16 +5,20 @@
   flex-direction: column;
   align-items: center;
   color: var(--text-color);
+  width: 100%; 
+  box-sizing: border-box; 
 }
 
 .details {
   margin-top: 5rem;
   padding: 3rem;
-    padding-top: 0rem;
+  padding-top: 0;
   background-color: var(--card-bg-color);
-    width: 60rem;
+  width: 100%;
+  max-width: 60rem; 
   border-radius: 1rem;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  box-sizing: border-box;
 }
 
 .formGroup {
@@ -32,7 +35,7 @@
 
 .formGroup input,
 .formGroup select {
-    width: calc(100% - 2px); 
+  width: 100%; 
   padding: 1.2rem;
   height: 3.5rem;
   background-color: var(--input-bg-color);
@@ -40,32 +43,29 @@
   border-radius: 0.5rem;
   color: var(--text-color);
   font-size: 1.2rem;
+  line-height: 1.4rem; 
   box-sizing: border-box;
 }
 
-  .saveButton {
+.saveButton,
+.quitButton {
   padding: 1.2rem 2.5rem;
-    background-color: var(--button-bg-color);
   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-top: 1rem;
+}
+
+.saveButton {
+  background-color: var(--button-bg-color);
 }
 
 .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;
+  margin-left: 1rem; 
 }
 
 .saveButton:hover {
@@ -81,3 +81,36 @@
   font-size: 2.5rem;
   margin-bottom: 3rem;
 }
+
+@media (max-width: 768px) {
+  .details {
+    width: 90%;
+    padding: 2rem;
+  }
+
+  .formGroup input,
+  .formGroup select {
+    height: 3rem;
+    font-size: 1rem;
+    padding: 1rem;
+  }
+
+  .saveButton,
+  .quitButton {
+    padding: 1rem 2rem;
+    font-size: 1rem;
+  }
+
+  .details h1 {
+    font-size: 2rem;
+    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

@@ -69,17 +69,30 @@ class serviiApi {
       }
       return { return_code: status, message: json };
     }
-    toast.info(json.message, {
-      position: "top-center",
-      autoClose: 2500,
+
+    let toastType: 'success' | 'error' | 'info';
+    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 };
   }