From 2130aa56b11e839c92e3dd5482eae5cb99cf95a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?cl=C3=A9ment?= <clement.verdoire@etu.uca.fr>
Date: Fri, 9 Dec 2022 12:11:48 +0100
Subject: [PATCH] gestion bug affichage ensemble page admin

---
 src/pages/Admin_create.js         |   4 +-
 src/pages/Admin_modif.js          |  10 +-
 src/pages/Admin_supp.js           |  32 ++--
 src/styles/components/_admin.scss | 282 ++++++++++++++++++------------
 4 files changed, 192 insertions(+), 136 deletions(-)

diff --git a/src/pages/Admin_create.js b/src/pages/Admin_create.js
index 3b21dbe..e37ea9b 100644
--- a/src/pages/Admin_create.js
+++ b/src/pages/Admin_create.js
@@ -63,7 +63,7 @@ function Admin_create() {
                 <div className="Formulaire">
                     <form className="form" onSubmit={checkAdd}>
                         <table className="Formulaire_de_connexion">
-                            <tr>
+                            <tr className="one-2">
                                 <div className="texte_côté">
                                     <p>Nom :</p>
                                     <p>Prénom :</p>
@@ -74,7 +74,7 @@ function Admin_create() {
                                     <p>Mot de passe :</p>
                                 </div>
                             </tr>
-                            <tr>
+                            <tr className="two-2">
                                 <input id="nom" name='lastname' className="texte_zone" type="text" placeholder="Nom..." required/>
                                 <input id="prenom" name='firstname' className="texte_zone" type="text" placeholder="Prénom..." required/>
                                 <input id="phone" name='phone' className="texte_zone" type="tel" 
diff --git a/src/pages/Admin_modif.js b/src/pages/Admin_modif.js
index ebcb5df..451fc2e 100644
--- a/src/pages/Admin_modif.js
+++ b/src/pages/Admin_modif.js
@@ -96,9 +96,9 @@ function Admin_modif() {
                 <div className="Formulaire">
                     <form className="form" onSubmit={checkModif}>
                         <table className="Formulaire_de_connexion">
-                            <tr>
+                            <tr className="one">
                                 <div className="texte_côté">
-                                    <p>Nom :</p>
+                                    <div>Nom :</div>
                                     <p>Prénom :</p>
                                     <p>Login :</p>
                                     <p>Rôle :</p>
@@ -106,7 +106,7 @@ function Admin_modif() {
                                     <p>Mail :</p>
                                 </div>
                             </tr>
-                            <tr>
+                            <tr className="two">
                                 <input id="nom" value={lastName} onChange={handleChangeLastName} name="lastname" className="texte_zone" type="text" placeholder="Nom..." required/>
                                 <input id="prenom" value={firstName} onChange={handleChangeFirstName} name="firstname" className="texte_zone" type="text" placeholder="Prénom..." required/>
                                 <input id="identifiant" value={login} onChange={handleChangeLogin} name="login" className="texte_zone" type="text" placeholder="Identifiant..." required/>
@@ -124,8 +124,8 @@ function Admin_modif() {
                                 <input id="email" value={mail} onChange={handleChangeMail} name="mail" className="texte_zone" type="email" placeholder="Email..." required/>
                                 <input id="identifiant" value={login} onChange={handleChangeLogin} name="login" className="texte_zone" type="text" placeholder="Identifiant..." required/>
                             </tr>
-                            <tr>
-                                <NavLink className="button_submit" to="/RestartPassword" state={{ iduser:iduser }}>Réinitialiser le mot de passe</NavLink>
+                            <tr className="three">
+                                <NavLink className="button_submit" to="/RestartPassword" state={{ iduser:iduser }}>Réinitialiser mot de passe</NavLink>
                             </tr>
                         </table>
                         <div className="bouton_submit">
diff --git a/src/pages/Admin_supp.js b/src/pages/Admin_supp.js
index 0e878aa..ea6005d 100644
--- a/src/pages/Admin_supp.js
+++ b/src/pages/Admin_supp.js
@@ -2,15 +2,15 @@ import React, { useState, useEffect } from 'react';
 import axios from 'axios'
 import NavigationAdmin from '../components/NavigationAdmin.js';
 import { NavLink, useLocation } from "react-router-dom";
-import { TableContainer,Table,TableHead,TableBody,TableRow,TableCell } from '@mui/material';
+import { TableContainer, Table, TableHead, TableBody, TableRow, TableCell } from '@mui/material';
 import { Paper } from '@mui/material';
 import { useNavigate } from "react-router-dom";
 
 const api = axios.create({
     baseURL: 'http://localhost:8080'
-  })
+})
 
-function Admin_supp(){
+function Admin_supp() {
 
     const location = useLocation();
     const { iduser } = location.state;
@@ -19,7 +19,7 @@ function Admin_supp(){
 
     const navigate = useNavigate();
 
-    useEffect(() =>{
+    useEffect(() => {
         const apiString = '/User/Id/' + iduser;
         api.get(apiString).then((response) => {
             console.log(response.data[0]);
@@ -27,8 +27,8 @@ function Admin_supp(){
         });
     }, []);
 
-    function checkDelete(event){
-        
+    function checkDelete(event) {
+
         event.preventDefault();
 
         const apiString = '/User/Delete/' + iduser;
@@ -50,11 +50,11 @@ function Admin_supp(){
                         <Table aria-label="simple table" size="small" stickyHeader>
                             <TableHead >
                                 <TableRow>
-                                    <TableCell sx={{ bgcolor: 'info.main'}} align="left">Nom</TableCell>
-                                    <TableCell sx={{ bgcolor: 'info.main'}} align="center">Prénom</TableCell>
-                                    <TableCell sx={{ bgcolor: 'info.main'}} align="center">Identifiant</TableCell>
-                                    <TableCell sx={{ bgcolor: 'info.main'}} align="center">Téléphone</TableCell>
-                                    <TableCell sx={{ bgcolor: 'info.main'}} align="center">Email</TableCell>
+                                    <TableCell sx={{ bgcolor: 'info.main' }} align="left">Nom</TableCell>
+                                    <TableCell sx={{ bgcolor: 'info.main' }} align="center">Prénom</TableCell>
+                                    <TableCell sx={{ bgcolor: 'info.main' }} align="center">Identifiant</TableCell>
+                                    <TableCell sx={{ bgcolor: 'info.main' }} align="center">Téléphone</TableCell>
+                                    <TableCell sx={{ bgcolor: 'info.main' }} align="center">Email</TableCell>
                                 </TableRow>
                             </TableHead>
                             <TableBody >
@@ -68,13 +68,13 @@ function Admin_supp(){
                             </TableBody>
                         </Table>
                     </TableContainer>
-                </div>
-                <div className="bouton_submit">
-                    <button onClick={checkDelete}>Valider</button>
-                    <NavLink className="bouton_ann" to="/Admin_list">Retour</NavLink>
+                    <div className="bouton_submit">
+                        <button className="bouton_val" onClick={checkDelete}>Valider</button>
+                        <NavLink className="bouton_ann" to="/Admin_list">Retour</NavLink>
+                    </div>
                 </div>
             </div>
-         </div>
+        </div>
     );
 };
 
diff --git a/src/styles/components/_admin.scss b/src/styles/components/_admin.scss
index 1378a24..a110497 100644
--- a/src/styles/components/_admin.scss
+++ b/src/styles/components/_admin.scss
@@ -1,10 +1,10 @@
-.dark{
+.dark {
     background-color: $xiketic;
     color: white;
 }
 
 body {
-    
+
     .page_admin {
         display: flex;
         flex-direction: row;
@@ -48,21 +48,21 @@ body {
                     text-decoration: none;
                     align-self: center;
                 }
-    
+
                 .modify_user {
                     display: flex;
                     padding: 5px;
                     text-decoration: none;
                     align-self: center;
                 }
-    
+
                 .delete_user {
                     display: flex;
                     padding: 5px;
                     text-decoration: none;
                     align-self: center;
                 }
-    
+
                 .list_devis {
                     display: flex;
                     padding: 5px;
@@ -109,12 +109,12 @@ body {
             }
         }
 
-        .Titre_Formulaire{
+        .Titre_Formulaire {
             display: flex;
             flex-direction: column;
-            margin: 10px 10px 10px 0px;
+            margin: 10px;
             padding: 10px;
-            flex-basis: 100%;
+            width: 100%;
             background: rgba(255, 255, 255, 0.3);
             border-radius: 15px;
             box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
@@ -123,11 +123,6 @@ body {
 
             .Titre {
                 display: flex;
-                /*background: rgba(255, 255, 255, 0.3);
-                border-radius: 15px;
-                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-                backdrop-filter: blur(3px);
-                -webkit-backdrop-filter: blur(15px);*/
                 margin: 10px;
                 font-size: 70px;
                 font-weight: bold;
@@ -135,78 +130,131 @@ body {
 
             .Sous-titre {
                 display: flex;
-                /*background: rgba(255, 255, 255, 0.3);
-                border-radius: 15px;
-                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-                backdrop-filter: blur(3px);
-                -webkit-backdrop-filter: blur(15px);*/
                 margin: 10px;
                 font-size: 40px;
                 font-weight: bold;
             }
-            
 
-            .Formulaire{
+
+            .Formulaire {
                 display: flex;
-                flex-direction: column;
-                align-items: center;
-                /*background: rgba(255, 255, 255, 0.3);
-                border-radius: 15px;
-                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-                backdrop-filter: blur(3px);
-                -webkit-backdrop-filter: blur(15px);*/
+                flex-direction: row;
+                justify-content: center;
                 margin-left: 10px;
                 margin-right: 10px;
 
-                .form{
+                .form {
                     display: flex;
                     flex-direction: column;
-                    align-self: center;
+                    margin-top: 60px;
                     font-size: 30px;
+                    width: 80%;
 
                     .Formulaire_de_connexion {
-
                         display: flex;
                         flex-direction: row;
-                        margin-top: 5%;
-                        /*background: rgba(255, 255, 255, 0.3);
-                        border-radius: 15px;
-                        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-                        backdrop-filter: blur(3px);
-                        -webkit-backdrop-filter: blur(15px);*/
-            
-                        .texte_côté {
-                            display:flex;
+                        justify-content: space-between;
+
+
+                        .one {
+                            display: flex;
                             flex-direction: column;
-                            justify-content: space-around;
-                            height: 100%;
+                            width: 24%;
+
+                            .texte_côté {
+                                display: flex;
+                                flex-direction: column;
+                                justify-content: space-around;
+                                margin-left: 80px;
+                                height: 85%;
+                            }
+
+                        }
+
+                        .one-2 {
+                            display: flex;
+                            flex-direction: column;
+                            width: 60%;
+
+                            .texte_côté {
+                                display: flex;
+                                flex-direction: column;
+                                justify-content: space-around;
+                                margin-left: 150px;
+                                height: 100%;
+                            }
+
                         }
-            
+
+                        .two {
+                            display: flex;
+                            flex-direction: column;
+                            width: 46%;
+                        }
+
+                        .two-2 {
+                            display: flex;
+                            flex-direction: column;
+                            width: 46%;
+                        }
+
+                        .three {
+                            display: flex;
+                            flex-direction: row;
+                            justify-content: center;
+                            align-items: center;
+                            margin-top: 316px;
+                            width: 29%;
+                            font-size: 23px;
+                            bottom: auto;
+
+                            .button_submit {
+                                display: flex;
+                                background-color: grey;
+                                border: 1px solid rgba(255, 255, 255, 0.1);
+                                backdrop-filter: blur(30px);
+                                color: rgb(255, 255, 255);
+                                cursor: pointer;
+                                font-size: 25px;
+                                border-radius: 15px;
+                                width: 308px;
+                                text-decoration: none;
+
+                                &:hover {
+                                    box-shadow: 0, 5px, 35px, 0 rgba(0, 0, 0, 1);
+                                    color: white;
+                                    background-color: rgba(114, 114, 114, 0.371);
+                                }
+
+                                &:active {
+                                    background-color: rgba(68, 68, 68, 0.972);
+                                }
+                            }
+                        }
+
                         input {
                             display: flex;
                             flex-direction: column;
-                            margin: 10px;
                         }
-            
+
                         .button_submit {
                             display: flex;
-                            margin-top: 150%;
                             margin-bottom: 2%;
                             padding-left: 10px;
-                            
-                            .bouton_réini{
-                            background-color: rgb(190, 189, 189);
-                            border-radius: 5px;
-                            border: 1px solid black;
-                            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-                            cursor: pointer;
+
+                            .bouton_réini {
+                                background-color: rgb(190, 189, 189);
+                                border-radius: 5px;
+                                border: 1px solid black;
+                                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+                                cursor: pointer;
                             }
                         }
                     }
                 }
             }
 
-            
+
 
             .texte {
                 align-self: center;
@@ -215,7 +263,7 @@ body {
             }
 
             .texte_zone {
-                width: 600px;
+                width: 599px;
                 height: 50px;
                 background-color: transparent;
                 border-radius: 5px;
@@ -235,7 +283,7 @@ body {
                 height: 30px;
                 margin-top: 5%;
 
-                .bouton_val{
+                .bouton_val {
                     display: flex;
                     flex-direction: column;
                     justify-content: center;
@@ -259,7 +307,7 @@ body {
                     }
                 }
 
-                .bouton_ann{
+                .bouton_ann {
                     display: flex;
                     flex-direction: column;
                     justify-content: center;
@@ -276,7 +324,7 @@ body {
                         color: white;
                         background-color: rgba(114, 114, 114, 0.371);
                     }
-        
+
                     &:active {
                         background-color: rgba(68, 68, 68, 0.972);
                     }
@@ -284,7 +332,7 @@ body {
             }
         }
 
-        .Titre_Formulaire_Rech{
+        .Titre_Formulaire_Rech {
             display: flex;
             flex-direction: column;
             margin: 10px 10px 10px 0px;
@@ -298,11 +346,6 @@ body {
 
             .Titre {
                 display: flex;
-                /*background: rgba(255, 255, 255, 0.3);
-                border-radius: 15px;
-                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-                backdrop-filter: blur(3px);
-                -webkit-backdrop-filter: blur(15px);*/
                 margin: 10px;
                 font-size: 70px;
                 font-weight: bold;
@@ -310,11 +353,6 @@ body {
 
             .Sous-titre {
                 display: flex;
-                /*background: rgba(255, 255, 255, 0.3);
-                border-radius: 15px;
-                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-                backdrop-filter: blur(3px);
-                -webkit-backdrop-filter: blur(15px);*/
                 margin: 10px;
                 font-size: 40px;
                 font-weight: bold;
@@ -323,14 +361,7 @@ body {
             .rechLogo {
                 display: flex;
                 flex-direction: column;
-                flex-basis: 100%;
-                /*background: rgba(255, 255, 255, 0.3);
-                border-radius: 15px;
-                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-                backdrop-filter: blur(3px);
-                -webkit-backdrop-filter: blur(15px);*/
-                //margin: 10px;
-                //padding: 10px;
+                height: 50%;
                 align-items: center;
                 margin-top: 5%;
 
@@ -342,7 +373,6 @@ body {
                     height: 40px;
                     max-width: 350px;
                     width: 100%;
-                    //margin: 30px 30px;
                     border-radius: 25px;
                     box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
 
@@ -376,17 +406,69 @@ body {
                         }
                     }
                 }
+
+                .bouton_submit {
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: space-around;
+                    align-self: center;
+                    width: 600px;
+                    height: 30px;
+                    margin-top: 5%;
+
+                    .bouton_val {
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: center;
+                        align-items: center;
+                        width: 150px;
+                        height: 40px;
+                        font-size: 20px;
+                        text-decoration: none;
+                        color: white;
+                        background-color: grey;
+                        border-radius: 15px;
+                        border: 0;
+
+                        &:hover {
+                            color: white;
+                            background-color: rgba(114, 114, 114, 0.371);
+                        }
+
+                        &:active {
+                            background-color: rgba(68, 68, 68, 0.972);
+                        }
+                    }
+
+                    .bouton_ann {
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: center;
+                        align-items: center;
+                        width: 150px;
+                        height: 40px;
+                        font-size: 20px;
+                        text-decoration: none;
+                        color: white;
+                        background-color: grey;
+                        border-radius: 15px;
+
+                        &:hover {
+                            color: white;
+                            background-color: rgba(114, 114, 114, 0.371);
+                        }
+
+                        &:active {
+                            background-color: rgba(68, 68, 68, 0.972);
+                        }
+                    }
+                }
             }
 
             .formulaire {
                 display: flex;
                 flex-direction: column;
                 flex-basis: 100%;
-                /*background: rgba(255, 255, 255, 0.3);
-                border-radius: 15px;
-                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-                backdrop-filter: blur(3px);
-                -webkit-backdrop-filter: blur(15px);*/
 
                 .bouton_personnes {
                     display: flex;
@@ -394,10 +476,7 @@ body {
                     justify-content: space-between;
                     width: 350px;
                     margin: 20px 0 0 0;
-                    /*background: rgba(255, 255, 255, 0.3);
-                    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-                    backdrop-filter: blur(3px);
-                    -webkit-backdrop-filter: blur(15px);*/
+
                 }
 
                 .bouton_submit {
@@ -406,7 +485,7 @@ body {
                     justify-content: space-between;
                     padding: 30px 0 0 0;
 
-                    .bouton_sup{
+                    .bouton_sup {
                         display: flex;
                         background-color: grey;
                         border: 1px solid rgba(255, 255, 255, 0.1);
@@ -418,36 +497,13 @@ body {
                         width: 30%;
                         align-items: center;
                         justify-content: center;
-        
-                        &:hover {
-                            box-shadow: 0, 5px, 35px, 0 rgba(0, 0, 0, 1);
-                            color: white;
-                            background-color: rgba(114, 114, 114, 0.371);
-                        }
-            
-                        &:active {
-                            background-color: rgba(68, 68, 68, 0.972);
-                        }
-                    }
 
-                    .bouton_ann{
-                        display: flex;
-                        background-color: grey;
-                        border: 1px solid rgba(255, 255, 255, 0.1);
-                        backdrop-filter: blur(30px);
-                        color: rgb(255, 255, 255);
-                        cursor: pointer;
-                        font-size: 15px;
-                        border-radius: 15px;
-                        width: 30%;
-                        align-items: center;
-        
                         &:hover {
                             box-shadow: 0, 5px, 35px, 0 rgba(0, 0, 0, 1);
                             color: white;
                             background-color: rgba(114, 114, 114, 0.371);
                         }
-            
+
                         &:active {
                             background-color: rgba(68, 68, 68, 0.972);
                         }
@@ -477,7 +533,7 @@ body {
                             color: white;
                             background-color: rgba(114, 114, 114, 0.371);
                         }
-            
+
                         &:active {
                             background-color: rgba(68, 68, 68, 0.972);
                         }
@@ -500,7 +556,7 @@ body {
                             color: white;
                             background-color: rgba(114, 114, 114, 0.371);
                         }
-            
+
                         &:active {
                             background-color: rgba(68, 68, 68, 0.972);
                         }