Changement Page Admin_Supp

master
Théo DUPIN 3 years ago
parent c7884b5f14
commit d460a3a386

@ -4,29 +4,43 @@ import NavigationAdmin from '../components/NavigationAdmin.js';
const Admin_supp = () => {
return (
<div className="page_admin">
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"></link>
{/* Create a page to delete an user in the admin page*/}
<NavigationAdmin/>
<NavigationAdmin />
<div className="Titre_Formulaire_Rech">
<p className="Titre">Admin</p>
<div className="rechLogo">
<div className="input_box">
<input type="search" placeholder="Rechercher..."/>
<span className="search">
<i class="uil uil-search search-icon"></i>
</span>
</div>
<form className="formulaire">
<table className="Formulaire_de_recherche">
<tr>
<input id="personne" type="search" className="texte_barre" placeholder="🔎 Rechercher un utilisateur" /*onClick={tab}*//>
<tr className="tr_bouton">
<div className="bouton_personnes">
<p className="bouton_personne1">
<strong>Dupont Jacques</strong>
</p>
<p className="bouton_personne2">
<strong>Carreau Alexis</strong>
</p>
</div>
</tr>
<tr>
<div id="style" className='bouton_submit'>
<button className="bouton_sup" type="submit" onClick="document.getElementById('style').style.backgroundColor='green'">Supprimer</button>
<button className="bouton_ann" type="submit" onClick="document.getElementById('style').style.backgroundColor='red'">Annuler</button>
</div>
</tr>
</table>
</form>
</div>
</div>
</div>
);
};
/*function tab(){
var tab = new Array();
if(Create_user()){
tab.push(nom, prenom);
}
console.log(tab);
}*/
export default Admin_supp;

@ -185,6 +185,219 @@
}
}
}
.Titre_Formulaire_Rech{
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;
.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;
}
.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;
align-items: center;
.input_box {
display: flex;
justify-content: center;
align-items: center;
position: relative;
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);
input {
position: relative;
width: 100%;
height: 100%;
padding: 0 15px 0 65px;
outline: none;
border: none;
border-radius: 25px;
font-size: 16px;
font-weight: 400;
color: #333;
}
.search {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 60px;
border-radius: 25px 0 0 25px;
.search-icon {
font-size: 30px;
color: black;
}
}
}
}
.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;
flex-direction: column;
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 {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 30px 0 0 0;
.bouton_sup{
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;
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;
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);
}
}
}
.tr_bouton {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.bouton_personne1 {
display: flex;
flex-direction: row;
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;
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_personne2 {
display: flex;
flex-direction: row;
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;
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);
}
}
}
}
}
}

Loading…
Cancel
Save