fix css et factorisation html

src/components/CreateServer/CreateServer.jsx

@@ -3,7 +3,7 @@ import styles from './CreateServer.module.scss';
 import { getUserSubdomain } from "../../service/firebase";
 import serviiApi from "../../service/api.tsx";
 
-const CreateServer = ({ user, onCreateServer, onSubdomainUpdate, onCancel }) => {
+const CreateServer = ({ user, onCreateServer, onSubdomainUpdate, onCancel, noServers }) => {
   const [subdomain, setSubdomain] = useState(null);
   const [subdomainInput, setSubdomainInput] = useState('');
   const [serverName, setServerName] = useState('');
@@ -45,70 +45,71 @@ const CreateServer = ({ user, onCreateServer, onSubdomainUpdate, onCancel }) =>
     }
   };
 
-  if (subdomain === null) {
-    return (
-      <div className={styles.container}>
-        <div>Loading...</div>
-      </div>
-    );
-  }
-
   return (
-    <>
+    <div className={styles.container}>
-      {subdomain === '' ? (
+      {noServers ? (
-        <div className={styles.container}>
+        <div className={styles.mainCardNoserveur}>
-          <div className={styles.mainCardSubdomain}>
+          <div className={styles.nsSubTitle}>Erreur</div>
-            <div className={styles.title}>Ecrivez votre sous domaine</div>
+          <div className={styles.nsTitle}>Aucun serveur</div>
-            <div className={styles.subtitle}>
+          <button className={styles.btnnoServCreate} onClick={onCreateServer}>Créer un nouveau serveur</button>
-              Le sous-domaine est le nom sous lequel vos amis et vous rejoignez le serveur, un peu comme une adresse. Choisissez-le bien, car il n'est pas facilement modifiable !
-            </div>
-            <input
-              className={styles.input}
-              type="text"
-              value={subdomainInput}
-              onChange={(e) => setSubdomainInput(e.target.value)}
-            />
-            <button className={styles.btnSubCreate} onClick={handleSaveSubdomain}>
-              Envoyer
-            </button>
-            <button className={styles.btnCancel} onClick={onCancel}>
-              Annuler
-            </button>
-          </div>
         </div>
       ) : (
-        <div className={styles.container}>
+        subdomain === null ? (
-          <div className={styles.mainCard}>
+          <div>Loading...</div>
-            <div className={styles.title}>Création du serveur</div>
+        ) : (
-            <input
+          subdomain === '' ? (
-              className={styles.input}
+            <div className={styles.mainCardSubdomain}>
-              type="text"
+              <div className={styles.title}>Ecrivez votre sous domaine</div>
-              placeholder="Nom du serveur"
+              <div className={styles.subtitle}>
-              value={serverName}
+                Le sous-domaine est le nom sous lequel vos amis et vous rejoignez le serveur, un peu comme une adresse. Choisissez-le bien, car il n'est pas facilement modifiable !
-              onChange={(e) => setServerName(e.target.value)}
+              </div>
-            />
+              <input
-            <select
+                className={styles.inputsubdomain}
-              className={styles.select}
+                type="text"
-              name="version"
+                value={subdomainInput}
-              id="version-select"
+                onChange={(e) => setSubdomainInput(e.target.value)}
-              value={serverVersion}
+                placeholder='Nom du sous domaine'
-              onChange={(e) => setServerVersion(e.target.value)}
+              />
-            >
+              <button className={styles.btnSubCreate} onClick={handleSaveSubdomain}>
-              <option>Version</option>
+                Envoyer
-              <option value="1.21">1.21</option>
-            </select>
-            <div>
-              <button className={styles.btnServCreate} onClick={handleCreateServer}>
-                Créer
               </button>
-              <button className={styles.btnServCreate} onClick={onCancel}>
+              <button className={styles.btnSubCreate} onClick={onCancel}>
                 Annuler
               </button>
             </div>
-          </div>
+          ) : (
-        </div>
+            <div className={styles.mainCardCreateServ}>
+              <div className={styles.title}>Création du serveur</div>
+              <input
+                className={styles.input}
+                type="text"
+                placeholder="Nom du serveur"
+                value={serverName}
+                onChange={(e) => setServerName(e.target.value)}
+              />
+              <select
+                className={styles.select}
+                name="version"
+                id="version-select"
+                value={serverVersion}
+                onChange={(e) => setServerVersion(e.target.value)}
+              >
+                <option>Version</option>
+                <option value="1.21">1.21</option>
+              </select>
+              <div>
+                <button className={styles.btnServCreate} onClick={handleCreateServer}>
+                  Créer
+                </button>
+                <button className={styles.btnServCreate} onClick={onCancel}>
+                  Annuler
+                </button>
+              </div>
+            </div>
+          )
+        )
       )}
-    </>
+    </div>
   );
 };
 

src/components/CreateServer/CreateServer.module.scss

@@ -1,20 +1,10 @@
-.container {
+.mainCardCommon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-}
-
-.mainCard, .mainCardSubdomain {
   display: flex;
   justify-content: start;
   align-items: start;
   flex-direction: column;
-  width: 75rem;
   background-color: #1D1836;
   border-radius: 1.5rem;
-  padding: 4rem;
-  margin-top: 5rem;
 }
 
 .title {
@@ -33,7 +23,7 @@
 }
 
 .input, .select {
-  width: 100%;
+  width: 60rem;
   padding: 1rem;
   margin-top: 1rem;
   background-color: #090325;
@@ -56,7 +46,90 @@
   margin-right: 1rem;
 }
 
-.btnSubCreate:hover, .btnServCreate:hover {
+
-  background-color: #120a8f;
+.containerNoserveur {
-  transform: scale(1.05);
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
+
+.mainCardNoserveur {
+  background-color: #1D1836;
+  padding: 3rem;
+  margin-top: 5rem;
+  border-radius: 1rem;
+}
+
+.nsTitle {
+  font-size: 3rem;
+  color: #F2F2F2;
+  font-weight: 900;
+}
+
+.nsSubTitle {
+  font-size: 1.8rem;
+  color: #AAA6C3;
+  font-weight: 300;
+}
+
+.btnnoServCreate {
+  width: 40rem;
+  height: 5rem;
+  margin-top: 5rem;
+  font-size: 2rem;
+  font-weight: 900;
+  background-color: #090325;
+  border-radius: 1rem;
+  color: white;
+  border: none;
+  cursor: pointer;
+}
+
+.btnServCreate{
+  width: 15rem;
+  height: 3.5rem;
+  margin-top: 2.5rem;
+  font-size: 1.5rem;
+  font-weight: 900;
+  border-radius: 1rem;
+  background-color: #090325;
+
+}
+
+.mainCardCreateServ{
+  margin-top: 5rem;
+  display: flex;
+  justify-content: center;
+  align-items: start;
+  flex-direction: column;
+  background-color: #1D1836;
+  border-radius: 1rem;
+  padding: 2rem;
+}
+
+.mainCardSubdomain{
+  background-color: #1D1836;
+  padding: 3rem;
+  margin-top: 5rem;
+  border-radius: 1rem;
+  width: 55rem;
+}
+
+.subtitle{
+  font-size: 1.2rem;
+  color: #AAA6C3;
+  font-weight: 600;
+  text-align: start;
+  margin-bottom: 2rem;
+}
+
+.inputsubdomain{
+  width: 50rem;
+  padding: 1rem;
+  margin-top: 1rem;
+  background-color: #090325;
+  border: none;
+  border-radius: 0.5rem;
+  color: white;
+  font-size: 1rem;
+}

src/pages/DashboardPage/DashboardPage.jsx

@@ -2,11 +2,10 @@ import React, { useEffect, useState } from 'react';
 import ServerCard from '../../components/serverCard/serverCard';
 import Navbar from '../../components/navbar/Navbar';
 import styles from './DashboardPage.module.scss';
-import NoServer from '../NoServer/NoServer';
-import { getUserSubdomain } from "../../service/firebase";
-import serviiApi from "../../service/api.tsx";
 import Loading from '../Loading/loading';
 import CreateServer from '../../components/CreateServer/CreateServer';
+import { getUserSubdomain } from "../../service/firebase";
+import serviiApi from "../../service/api.tsx";
 
 const DashboardPage = ({ user }) => {
   const [servers, setServers] = useState([]);
@@ -89,6 +88,7 @@ const DashboardPage = ({ user }) => {
     const address = `${subdomain}.servii.fr`;
     navigator.clipboard.writeText(address)
       .then(() => {
+        console.log('Address copied to clipboard');
       })
   };
 
@@ -114,7 +114,11 @@ const DashboardPage = ({ user }) => {
       ) : (
         <div className={styles.cardsContainer}>
           {servers.length === 0 ? (
-            <NoServer user={user} onCreateServer={handleCreateServer} />
+            <CreateServer
+              user={user}
+              onCreateServer={handleCreateServerPage}
+              noServers
+            />
           ) : (
             <div>
               <div className={styles.iptitle}>

src/pages/NoServer/NoServer.jsx

@@ -1,27 +0,0 @@
-import React, { useState } from 'react';
-import styles from './NoServer.module.scss';
-import CreateServer from '../../components/CreateServer/CreateServer';
-
-const NoServer = ({ user, onCreateServer }) => {
-  const [isCreating, setIsCreating] = useState(false);
-
-  return (
-    <div className={styles.container}>
-      <div className={styles.mainCard}>
-        {isCreating === false ? (
-          <>
-            <div className={styles.nsSubTitle}>Erreur</div>
-            <div className={styles.nsTitle}>Aucun serveur possédé</div>
-            <button className={styles.btnServCreate} onClick={() => setIsCreating(true)}>Créer un nouveau serveur</button>
-          </>
-        ) : (
-          <>
-            <CreateServer user={user} onCreateServer={onCreateServer} />
-          </>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default NoServer;

src/pages/NoServer/NoServer.module.scss

@@ -1,44 +0,0 @@
-.container{
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-}
-
-.mainCard{
-    display: flex;
-    justify-content: start;
-    align-items: start;
-    flex-direction: column;
-    width: 75rem;
-    background-color: #1D1836;
-    border-radius: 1.5rem;
-}
-
-.nsTitle{
-    font-size: 3.5rem;
-    color: #F2F2F2;
-    font-weight: 900;
-}
-
-.nsSubTitle{
-    font-size: 1.8rem;
-    color: #AAA6C3;
-    font-weight: 300;
-}
-
-.btnServCreate{
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: #090325;
-    width: 40rem;
-    height: 5rem;
-    color: white;
-    margin-top: 5rem;
-    border: solid 0.1rem #090325;
-    cursor: pointer;
-    font-size: 2rem;
-    font-weight: 900;
-    border-radius: 1rem;
-}