Merge branch 'master' of https://codefirst.iut.uca.fr/git/maxence.lanone/JTT_CrM

3 years ago · 6733702d46
parent ddd8a7c27e 615f819eeb
commit 6733702d46
4 changed files with 171 additions and 5 deletions
--- a/src/pages/Parametres.js
+++ b/src/pages/Parametres.js
@ -2,12 +2,35 @@ import React from 'react';
 import NavigationDashboard from '../components/NavigationDashboard';


-const Parametres = () => {
+const Parametre = () => {
    return (
        <body>
-            coucou
+
+            <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"></link>
+            
+            <div className="page_parametre">
+                {/* Create an account page */}
+                <div className="haut_de_page">
+                    <h2 className="titre">Parametre</h2>
+                    <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>
+                        <img className="logo" srcSet="./LogoApp.svg"/>
+                    </div>
+                </div>
+                <div className="bas_de_page">
+                    <NavigationDashboard />                      
+                    <div className="Parametre">
+                        coucou
+                    </div>
+                </div>
+            </div>
        </body>
    );
 };

-export default Parametres;
+export default Parametre;
--- a/src/styles/components/_calendrier.scss
+++ b/src/styles/components/_calendrier.scss
@ -132,7 +132,7 @@ body {
            backdrop-filter: blur(3px);
            -webkit-backdrop-filter: blur(15px);
            width: 100%;
-            margin: 5px 5px 10px 10px;
+            margin: 5px 10px 10px 5px;
            text-align: center;

            .mini_formulaire_evenement {
--- a/src/styles/components/_parametre.scss
+++ b/src/styles/components/_parametre.scss
@ -0,0 +1,142 @@
+body {
+    background-image: url("../../../public/fond_page_connexion.png");
+
+    .page_compte {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-evenly;
+        width: auto;
+        height: 100vh;
+    
+        .haut_de_page {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            padding: 50px;
+            width: auto;
+            height: 10%;
+            align-items: center;
+            margin: 10px 10px 5px 10px;
+            
+            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);
+
+            .titre {
+                font-size: 40px;
+            }
+            
+            .rechLogo {
+                display: flex;
+                flex-direction: row;
+                justify-content: space-between;
+
+                .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;
+                        }
+                    }
+                }
+
+                .logo {
+                    display: flex;
+                    width: 100px;
+                    height: 100px;
+                }
+            }            
+        }
+    
+        .bas_de_page {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            width: auto;
+            height: 86%;
+    
+            .nav_bar_verticale {
+                display: flex;
+                flex-direction: column;
+                justify-content: space-around;
+                align-items: center;
+                width: 5%;
+                margin: 5px 5px 10px 10px;
+
+                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);
+
+                .button {
+                    display: flex;
+                    object-fit: cover;
+                    background-color: transparent;
+                    border: none;
+                    cursor: pointer;
+
+                    .logo_nav_bar{
+                        display: flex;
+                        margin: 10px;
+                        height: 50px;
+                        width: 50px;
+                    }
+                }
+            }
+            
+    
+            .Parametre {
+                display: flex;
+                flex-direction: column;
+                justify-content: space-evenly;
+                width: 94.3%;
+                height: auto;
+                margin: 5px 10px 10px 5px;
+
+                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);
+
+            }
+        }
+    }
+}
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@ -4,4 +4,5 @@
@import "./components/compte";
@import "./components/dashboard";
@import "./components/analyse";
-@import "./components/calendrier"
+@import "./components/calendrier";
+@import "./components/parametre";