From d460a3a386205ac2d8388e928fb3490731cc666d Mon Sep 17 00:00:00 2001
From: Theo DUPIN <Theo.DUPIN@etu.uca.fr>
Date: Wed, 19 Oct 2022 21:04:28 +0200
Subject: [PATCH] Changement Page Admin_Supp

---
 src/pages/Admin_supp.js           |  54 +++++---
 src/styles/components/_admin.scss | 213 ++++++++++++++++++++++++++++++
 2 files changed, 247 insertions(+), 20 deletions(-)

diff --git a/src/pages/Admin_supp.js b/src/pages/Admin_supp.js
index a5802fd..cd59252 100644
--- a/src/pages/Admin_supp.js
+++ b/src/pages/Admin_supp.js
@@ -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/>
-            <p className="Titre">Admin</p>
-            <form className="formulaire">
-                <table className="Formulaire_de_recherche">
-                    <tr>
-                        <input id="personne" type="search" className="texte_barre" placeholder="🔎 Rechercher un utilisateur" /*onClick={tab}*//>
-                    </tr>
-                    <tr>
-
-                    </tr>
-                </table>
-            </form>
-        </div>
+            <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 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;
\ No newline at end of file
diff --git a/src/styles/components/_admin.scss b/src/styles/components/_admin.scss
index acb5aa9..6fc842b 100644
--- a/src/styles/components/_admin.scss
+++ b/src/styles/components/_admin.scss
@@ -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);
+                    }
+                }
+            }
+        }
+    }
 }