Changement Page Admin

src/App.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import Compte from './pages/Compte';
+//import Compte from './pages/Compte';
 //import Connexion from './pages/Connexion';
-// import Admin from './pages/Admin.js';
+import Admin from './pages/Admin.js';
 
 const App = () => {
   return (
@@ -12,7 +12,7 @@ const App = () => {
     //  </Routes>
     //</BrowserRouter>
 
-    <Compte />
+    <Admin/>
   );
 }
 

src/pages/Admin.js

@@ -17,7 +17,7 @@ const Admin = () => {
                     <button id="user" className="bouton" type="button" value="Supprimer un utilisateur" onClick={Delete_user}>Supprimer un utilisateur</button>
                 </div>
             </div>
-            <p className="Titre">Admin</p>
+            <p className="Titre">Admin
             <div className="Formulaire">
                 <form className="form">
                     <table className="Formulaire_de_connexion">
@@ -42,12 +42,15 @@ const Admin = () => {
                             <input id="password" className="texte_zone" type="text"/>
                         </tr>
                         <tr>
-                            <button className="bouton_val_ann" type="submit">Valider</button>
-                            <button className="bouton_val_ann" type="submit">Annuler</button>
+                            <div className='bouton_submit'>
+                                <button className="bouton_val_ann" type="submit">Valider</button>
+                                <button className="bouton_val_ann" type="submit">Annuler</button>
+                            </div>
                         </tr>
                     </table>
                 </form>
             </div>
+            </p>
         </div>
     );
 };

src/styles/components/_admin.scss

@@ -100,67 +100,79 @@
     }*/
 
 
-    .Formulaire{
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        width: 100%;
-    }
+    
 
     .formulaire{
         display: flex;
         flex-direction: column;
+        border-radius: 30px;
         margin: 100px;
         padding: 30px;
         align-items: center;
     }
 
-
     .Titre{
         display: flex;
-        flex-direction: row;
+        flex-direction: column;
+        flex-basis: 100%;
+        border: 5px white inset;
         font-weight: bold;
         font-size: 80px;
-        margin: 20px;
-    }
 
-    .texte{
-        align-self: center;
-        font-weight: bold;
-        padding: 10px;
-    }
+        .Formulaire{
+            display: flex;
+            flex-direction: column;
+            border: 5px white inset;
+            align-items: center;
+            font-size: 30px;
+            width: 100%;
+        }
 
-    .texte_zone{
-        width: 600px;
-        height: 50px;
-        font-size: 30px;
-    }
+        .texte{
+            display: flex;
+            flex-direction: row;
+            align-self: center;
+            font-weight: bold;
+            padding: 10px;
+        }
     
-    .bouton_val_ann{
-        width: 150px;
-        height: 40px;
-        border-radius: 10px;
-        border: 0.5px solid;
-        color: $white;
-        border: 0;
-        background-color: black;
-        border: 1px solid rgba(255,255,255,0.1);
-        backdrop-filter: blur(30px);
-        color: rgb(255, 255, 255);
-        cursor: pointer;
-        font-size: 15px;
-        &:hover{
-            background-color: rgba(114, 114, 114, 0.371);   
+        .texte_zone{
+            width: 600px;
+            height: 50px;
+            font-size: 30px;
         }
-        &:active{
-            background-color:rgba(68, 68, 68, 0.972);   
+        
+        .bouton_val_ann{
+            width: 150px;
+            height: 40px;
+            border-radius: 10px;
+            border: 0.5px solid;
+            color: $white;
+            border: 0;
+            background-color: black;
+            border: 1px solid rgba(255,255,255,0.1);
+            backdrop-filter: blur(30px);
+            color: rgb(255, 255, 255);
+            cursor: pointer;
+            font-size: 15px;
+            &:hover{
+                background-color: rgba(114, 114, 114, 0.371);   
+            }
+            &:active{
+                background-color:rgba(68, 68, 68, 0.972);   
+            }
+        }
+    
+        .texte_barre{
+            display: flex;
+            width: 400px;
         }
-    }
 
-    .texte_barre{
-        display: flex;
-        width: 400px;
-    }
+        .bouton_submit{
+            display: flex;
+            flex-direction: row;
+        }
+    }  
 }
 
     

src/styles/components/_compte.scss

@@ -91,7 +91,7 @@ body {
             flex-direction: row;
             justify-content: space-between;
             width: auto;
-            height: 86%;
+            height: 82%;
     
             .nav_bar_verticale {
                 display: flex;
@@ -109,7 +109,7 @@ body {
             .Compte {
                 display: flex;
                 flex-direction: column;
-                width: 94.3%;
+                width: 94%;
                 height: auto;
 
                 background: rgba(255, 255, 255, 0.3);