+stylax

src/components/CreateServer/CreateServer.jsx

@@ -55,11 +55,12 @@ const CreateServer = ({ user, onCreateServer }) => {
       {subdomain === '' ? (
         <div className={styles.container}>
           <div className={styles.mainCardSubdomain}>
-            <div className={styles.Title}>Ecrivez votre sous domaine</div>
-            <div className={styles.SubTitlesdomain}>
+            <div className={styles.title}>Ecrivez votre sous domaine</div>
+            <div className={styles.subtitle}>
               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)}
@@ -72,15 +73,16 @@ const CreateServer = ({ user, onCreateServer }) => {
       ) : (
         <div className={styles.container}>
           <div className={styles.mainCard}>
-            <div className={styles.SubTitle}>Création du serveur</div>
+            <div className={styles.title}>Création du serveur</div>
             <input
-              className={styles.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}

src/components/CreateServer/CreateServer.module.scss

@@ -11,35 +11,50 @@
     align-items: start;
     flex-direction: column;
     width: 75rem;
-    padding: 4rem 5rem 3rem 5rem;
     background-color: #1D1836;
     border-radius: 1.5rem;
 }
 
-.Title{
-    font-size: 3.5rem;
+.title {
+    font-size: 2.5rem;
     color: #F2F2F2;
-    font-weight: 900;
-}
-
-.SubTitle{
-    font-size: 1.8rem;
+    font-weight: 700;
+    margin-bottom: 1.5rem;
+  }
+  
+  .subtitle {
+    font-size: 1.2rem;
     color: #AAA6C3;
     font-weight: 300;
-}
-
-.btnServCreate{
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    text-align: center;
+    margin-bottom: 2rem;
+  }
+  
+  .input, .select {
+    width: 100%;
+    padding: 1rem;
+    margin-top: 1rem;
     background-color: #090325;
-    width: 40rem;
-    height: 5rem;
+    border: none;
+    border-radius: 0.5rem;
     color: white;
-    margin-top: 5rem;
-    border: solid 0.1rem #090325;
+    font-size: 1rem;
+  }
+  
+  .btnSubCreate, .btnServCreate {
+    margin-top: 2rem;
+    padding: 1rem 2rem;
+    background-color: #090325;
+    color: white;
+    border: none;
+    border-radius: 0.5rem;
     cursor: pointer;
-    font-size: 2rem;
-    font-weight: 900;
-    border-radius: 1rem;
-}
+    font-size: 1rem;
+    transition: background-color 0.3s, transform 0.3s;
+  }
+  
+  .btnSubCreate:hover, .btnServCreate:hover {
+    background-color: #120a8f;
+    transform: scale(1.05);
+  }
+