Changement Page Admin

src/pages/Admin.js

@@ -8,13 +8,13 @@ const Admin = () => {
             <div className="nav_bar_verticale">
                 <img className="logo" srcSet="./LogoApp.svg"></img>
                 <div className="create_user">
-                    <button id="user" className="bouton" type="button" value="Créer un utilisateur" onClick={Create_user}>Créer un nouvel utilisateur</button>
+                    <button id="user" className="bouton" type="button" value="Créer un utilisateur" onClick={Create_user}>Créer utilisateur</button>
                 </div>
                 <div className="modify_user">
-                    <button id="user" className="bouton" type="button" value="Modifier un utilisateur" onClick={Modify_user}>Modifier un utilisateur</button>
+                    <button id="user" className="bouton" type="button" value="Modifier un utilisateur" onClick={Modify_user}>Modifier utilisateur</button>
                 </div>
                 <div className="delete_user">
-                    <button id="user" className="bouton" type="button" value="Supprimer un utilisateur" onClick={Delete_user}>Supprimer un utilisateur</button>
+                    <button id="user" className="bouton" type="button" value="Supprimer un utilisateur" onClick={Delete_user}>Supprimer utilisateur</button>
                 </div>
             </div>
             <p className="Titre">Admin

src/styles/components/_admin.scss

@@ -1,26 +1,36 @@
 .page_admin {
     display: flex;
     flex-direction: row;
+    flex-basis: 100%;
+    height: 100vh;
+    position:fixed;
 
     .nav_bar_verticale {
         display: flex;
         flex-direction: column;
         width: 200px;
-        height: 753px;
+        height: 735px;
-        border: 5px white inset;
+        background: rgba(255, 255, 255, 0.143);
+        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+        backdrop-filter: blur(3px);
+        -webkit-backdrop-filter: blur(1.5px);
+        border-radius: 15px;
+        border: 1px solid rgba(255, 255, 255, 0.18);
+        margin: 10px;
+
 
         .create_user {
-            padding: 30px;
+            padding: 5px;
             align-self: center;
         }
 
         .modify_user {
-            padding: 30px;
+            padding: 5px;
             align-self: center;
         }
 
         .delete_user {
-            padding: 30px;
+            padding: 5px;
             align-self: center;
         }
 
@@ -32,39 +42,29 @@
             position: relative;
             width: 180px;
             height: 100px;
-            border-radius: 30px;
+            border-radius: 10px;
             font-size: 13.5px;
             font-weight: bold;
             transition: 1s box-shadow;
             cursor: pointer;
             border: none;
             box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
-            background-color: white;
+            background-color: rgba(163, 163, 163, 0.371);
-        }
+            border: 1px solid rgba(255,255,255,0.1);
-
+            backdrop-filter: blur(30px);
-
+            color: rgb(255, 255, 255);
-        .bouton:hover {
+            cursor: pointer;
-            box-shadow: 0, 5px, 35px, 0 rgba(0, 0, 0, 1);
+            font-size: 17px;
-            color: white;
-            background-color: black;
-        }
 
-        .bouton:hover::before,
+            &:hover{
-        .bouton:hover::after {
+                box-shadow: 0, 5px, 35px, 0 rgba(0, 0, 0, 1);
-            content: '';
+                color: white;
-            display: block;
+                background-color: rgba(114, 114, 114, 0.371); 
-            position: absolute;
+            }
-            z-index: -1;
-            width: 100%;
-            height: 100%;
-            background: black;
-            border-radius: 30px;
-            animation: 0.5s jiggle infinite;
-        }
 
-        .bouton:hover::after {
+            &:active{
-            background: black;
+                background-color:rgba(68, 68, 68, 0.972);
-            animation: 1s jiggle infinite;
+            }
         }
     }
 
@@ -90,12 +90,6 @@
         align-items: center;
     }
 
-    .form{
-        align-self: center;
-        flex-direction: row;
-        font-weight: bold;
-        font-size: 80px;
-
     .texte {
         align-self: center;
         font-weight: bold;