modification page compte

3 years ago · 6ff1594a02
parent 69c66f5ece
commit 6ff1594a02
10 changed files with 60 additions and 11 deletions
--- a/public/logo_calendrier.jpg
+++ b/public/logo_calendrier.jpg
--- a/public/logo_calendrier.png
+++ b/public/logo_calendrier.png
--- a/public/logo_graphique.jpg
+++ b/public/logo_graphique.jpg
--- a/public/logo_graphique.png
+++ b/public/logo_graphique.png
--- a/public/logo_groupe.png
+++ b/public/logo_groupe.png
--- a/public/logo_parametre.png
+++ b/public/logo_parametre.png
--- a/public/logo_person.png
+++ b/public/logo_person.png
--- a/public/logo_stats.png
+++ b/public/logo_stats.png
--- a/src/pages/Compte.js
+++ b/src/pages/Compte.js
@ -4,18 +4,31 @@ import React from 'react';
 const Compte = () => {
    return (
        <body>
+
+            <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"></link>
+            
            <div className="page_compte">
                {/* Create an account page */}
                <div className="haut_de_page">
                    <h2 className="titre">Mon Compte</h2>
                    <div className="rechLogo">
-                        <input type="search" className="search" value=""/>
-                        <img className="logo" srcSet="./LogoApp.svg"></img>
+                        <div className="input_box">
+                            <input type="text" placeholder="Rechercher..."/>
+                            <span className="search">
+                                <i class="uil uil-search search-icon"></i>
+                            </span>
+                        </div>
+                        <img className="logo" srcSet="./LogoApp.svg"/>
                    </div>
                </div>
                <div className="bas_de_page">
                    <div className="nav_bar_verticale">
-                        <p>nav-bar</p>
+                        <img className="logo" srcSet="./logo_person.png"/>
+                        <img className="logo" srcSet="./logo_stats.png"/>                        
+                        <img className="logo" srcSet="./logo_graphique.png"/>                                            
+                        <img className="logo" srcSet="./logo_calendrier.png"/>
+                        <img className="logo" srcSet="./logo_groupe.png"/>
+                        <img className="logo" srcSet="./logo_parametre.png"/>
                    </div>
                    <div className="Compte">
                        <p>Compte</p>
--- a/src/styles/components/_compte.scss
+++ b/src/styles/components/_compte.scss
@ -26,8 +26,8 @@ body {
            -webkit-backdrop-filter: blur(15px);

            .titre {
-                                font-size: 40px;
-                                font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+                font-size: 40px;
+                font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            }
            
            .rechLogo {
@ -35,9 +35,47 @@ body {
                flex-direction: row;
                justify-content: space-between;

-                .search {
+                .input_box {
                    display: flex;
-                    background-color: lightgrey;
+                    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;
+                        }
+                    }
                }

                .logo {
@ -58,8 +96,7 @@ body {
            .nav_bar_verticale {
                display: flex;
                flex-direction: column;
-                background-color: blueviolet;
-                width: 7%;
+                width: 5%;
                height: auto;

                background: rgba(255, 255, 255, 0.3);
@ -72,8 +109,7 @@ body {
            .Compte {
                display: flex;
                flex-direction: column;
-                background-color: lightblue;
-                width: 92%;
+                width: 94.3%;
                height: auto;

                background: rgba(255, 255, 255, 0.3);