modif css page admin (1)

src/App.js

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

src/pages/Admin.js

@@ -23,23 +23,23 @@ const Admin = () => {
                     <table className="Formulaire_de_connexion">
                         <tr>
                             <p className="texte">Nom :</p>
-                            <input id="nom" className="texte_zone" type="text"/>
+                            <input id="nom" className="texte_zone" type="text" placeholder="Nom"/>
                         </tr>
                         <tr>
                             <p className="texte">Prénom :</p>
-                            <input id="prénom" className="texte_zone" type="text"/>
+                            <input id="prénom" className="texte_zone" type="text" placeholder="Prénom"/>
                         </tr>
                         <tr>
                             <p className="texte">Rôle dans l'entreprise :</p>
-                            <input id="rôle" className="texte_zone" type="text"/>
+                            <input id="rôle" className="texte_zone" type="text" placeholder="Rôle"/>
                         </tr>
                         <tr>
                             <p className="texte">Identifiant :</p>
-                            <input id="identifiant" className="texte_zone" type="text"/>
+                            <input id="identifiant" className="texte_zone" type="text" placeholder="Identifiant"/>
                         </tr>
                         <tr>
                             <p className="texte">Mot de passe (par défaut) :</p>
-                            <input id="password" className="texte_zone" type="text"/>
+                            <input id="password" className="texte_zone" type="password" placeholder="Mot de passe (par default)"/>
                         </tr>
                         <tr>
                             <button className="bouton_val_ann" type="submit">Valider</button>

src/pages/Connexion.js

@@ -13,7 +13,7 @@ const Connexion = () => {
                         Connexion
                     </tr>
                     <tr>
-                        <input id="pseudo" className="text_zone" type="text" placeholder="Pseudo" />
+                        <input id="pseudo" className="text_zone" type="text" placeholder="Identifiant" />
                     </tr>
                     <tr>
                         <input id="password" className="text_zone" type="password" placeholder="Mot de passe" />

src/styles/components/_admin.scss

@@ -9,23 +9,23 @@
         height: 753px;
         border: 5px white inset;
 
-        .create_user{
+        .create_user {
             padding: 30px;
             align-self: center;
         }
 
-        .modify_user{
+        .modify_user {
             padding: 30px;
             align-self: center;
         }
 
-        .delete_user{
+        .delete_user {
             padding: 30px;
             align-self: center;
         }
 
 
-        .bouton{
+        .bouton {
             display: flex;
             justify-content: center;
             align-items: center;
@@ -38,18 +38,19 @@
             transition: 1s box-shadow;
             cursor: pointer;
             border: none;
-            box-shadow: 0 0 5px rgba(0,0,0,0.5);
+            box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
             background-color: white;
         }
 
 
-        .bouton:hover{
-            box-shadow: 0, 5px, 35px, 0 rgba(0,0,0,1);
+        .bouton:hover {
+            box-shadow: 0, 5px, 35px, 0 rgba(0, 0, 0, 1);
             color: white;
             background-color: black;
         }
 
-        .bouton:hover::before, .bouton:hover::after{
+        .bouton:hover::before,
+        .bouton:hover::after {
             content: '';
             display: block;
             position: absolute;
@@ -61,71 +62,48 @@
             animation: 0.5s jiggle infinite;
         }
 
-        .bouton:hover::after{
+        .bouton:hover::after {
             background: black;
             animation: 1s jiggle infinite;
         }
-
-        @keyframes jiggle {
-            0% {
-                transform: translate(-5px, -5px);
-            }
-            14% {
-                transform: translate(0px, -5px);
-            }
-            28% {
-                transform: translate(5px, -5px);
-            }
-            42% {
-                transform: translate(5px, 0px);
-            }
-            57% {
-                transform: translate(5px, 5px);
-            }
-            71% {
-                transform: translate(0, 5px);
-            }
-            85% {
-                transform: translate(-5px, 5px);
-            }
-            100% {
-                transform: translate(-5px, 0);
-            }
-        }
     }
 
-    .Titre{
+    .Titre {
         display: flex;
         font-weight: bold;
         font-size: 80px;
         margin: 20px;
     }
 
-    .Formulaire{
+    .Formulaire {
         display: flex;
         flex-direction: column;
         width: 100%;
     }
 
-    .form{
+    .form {
         align-self: center;
         flex-direction: row;
         font-size: 30px;
     }
 
-    .texte{
+    .texte {
         align-self: center;
         font-weight: bold;
         padding: 10px;
     }
 
-    .texte_zone{
+    .texte_zone {
         width: 600px;
         height: 50px;
-        font-size: 30px;
+        background-color: transparent;
+        border-radius: 5px;
+        border: 0.5px solid;
+        padding-left: 10px;
+        padding-right: 10px;
     }
 
-    .bouton_val_ann{
+    .bouton_val_ann {
         width: 150px;
         height: 40px;
         border-radius: 10px;
@@ -133,16 +111,18 @@
         color: $white;
         border: 0;
         background-color: black;
-        border: 1px solid rgba(255,255,255,0.1);
+        border: 1px solid rgba(255, 255, 255, 0.1);
         backdrop-filter: blur(30px);
         color: rgb(255, 255, 255);
         cursor: pointer;
         font-size: 15px;
-        &:hover{
+
+        &:hover {
             background-color: rgba(114, 114, 114, 0.371);
         }
-        &:active{
-            background-color:rgba(68, 68, 68, 0.972);   
+
+        &:active {
+            background-color: rgba(68, 68, 68, 0.972);
         }
     }
 }