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

src/components/NavigationDashboard.js

@@ -1,52 +1,91 @@
-import React from 'react';
+import React, { Component, useRef } from 'react';
+import { render } from 'react-dom';
 import { NavLink } from 'react-router-dom';
 
+//Pour image compte
+import img1 from '../img/logo_person.svg'
+import img11 from '../img/logo_person_vide.svg'
+
+//Pour image dashboard
+import img2 from '../img/logo_speed.svg'
+import img21 from '../img/logo_speed_vide.svg'
+
+//Pour image analyse
+import img3 from '../img/logo_graph.svg'
+import img31 from '../img/logo_graph_vide.svg'
+
+//Pour image calendrier
+import img4 from '../img/logo_calendrier.svg'
+import img41 from '../img/logo_calendrier_vide.svg'
+
+//Pour image repertoire
+import img5 from '../img/logo_group.svg'
+import img51 from '../img/logo_group_vide.svg'
+
+//Pour image parametre
+import img6 from '../img/logo_parametre.svg'
+import img61 from '../img/logo_parametre_vide.svg'
 
 const NavigationDashboard = () => {
+
+    const ImageToggleOnMouseOver = ({ primaryImg, secondaryImg }) => {
+        const imageRef = useRef(null);
+
+        return (
+            <img
+                onMouseOver={() => { imageRef.current.src = secondaryImg; }}
+                onMouseOut={() => { imageRef.current.src = primaryImg; }}
+                src={primaryImg}
+                alt=""
+                ref={imageRef}
+            />
+        )
+    }
+
     return (
         <div className="nav_bar_verticale">
-            <NavLink className="mon_compte" to="/Account">
-                <div className="parti_one">
+            <div className="parti_one">
+                <NavLink className="mon_compte" to="/Account">
                     <button className="button" type="submit">
-                        <img className="logo_nav_bar" srcSet="./logo_person.svg"/>                       
+                        <ImageToggleOnMouseOver primaryImg={img1} secondaryImg={img11} alt="" />
                     </button>
-                </div>
-            </NavLink>
-            <NavLink className="dashboard" to="/Dashboard">
-                <div className="parti_two">
+                </NavLink>
+            </div>
+            <div className="parti_two">
+                <NavLink className="dashboard" to="/Dashboard">
                     <button className="button" type="submit">
-                        <img className="logo_nav_bar" srcSet="./logo_speed.svg"/> 
+                        <ImageToggleOnMouseOver primaryImg={img2} secondaryImg={img21} alt="" />
                     </button>
-                    <NavLink className="analyse" to="/Analyse">
-                        <div className="parti_two">
-                            <button className="button" type="submit">
-                                <img className="logo_nav_bar" srcSet="./logo_graph.svg"/>
-                            </button>
-                        </div>
-                    </NavLink>
-                    <NavLink className="calendrier" to="/Calendrier">
-                        <div className="parti_two">
-                            <button className="button" type="submit">
-                                <img className="logo_nav_bar" srcSet="./logo_calendrier.svg"/>
-                            </button>
-                        </div>
-                    </NavLink>
-                </div>
-            </NavLink>
-            <NavLink className="repertoire" to="/Repertoire">
-                <div className="parti_three">
+                </NavLink>
+                <NavLink className="analyse" to="/Analyse">
+                    <div className="parti_two">
+                        <button className="button" type="submit">
+                            <ImageToggleOnMouseOver primaryImg={img3} secondaryImg={img31} alt="" />
+                        </button>
+                    </div>
+                </NavLink>
+                <NavLink className="calendrier" to="/Calendrier">
+                    <div className="parti_two">
+                        <button className="button" type="submit">
+                            <ImageToggleOnMouseOver primaryImg={img4} secondaryImg={img41} alt="" />
+                        </button>
+                    </div>
+                </NavLink>
+            </div>
+            <div className="parti_three">
+                <NavLink className="repertoire" to="/Repertoire">
                     <button className="button" type="submit">
-                        <img className="logo_nav_bar" srcSet="./logo_group.svg"/>
+                        <ImageToggleOnMouseOver primaryImg={img5} secondaryImg={img51} alt="" />
                     </button>
-                </div>
-            </NavLink>
-            <NavLink className="parametres" to="/Parametres">
-                <div className="parti_four">
+                </NavLink>
+            </div>
+            <div className="parti_four">
+                <NavLink className="parametres" to="/Parametres">
                     <button className="button" type="submit">
-                        <img className="logo_nav_bar" srcSet="./logo_parametre.svg"/>
+                        <ImageToggleOnMouseOver primaryImg={img6} secondaryImg={img61} alt="" />
                     </button>
-                </div>
-            </NavLink>
+                </NavLink>
+            </div>
         </div>
     );
 };

src/styles/components/_analyse.scss

@@ -104,6 +104,42 @@ body {
                 backdrop-filter: blur(3px);
                 -webkit-backdrop-filter: blur(15px);
 
+                .parti_one {
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: space-around;
+                    align-items: center;
+                    width: 100%;
+                    height: 20%;
+                }
+
+                .parti_two {
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: space-between;
+                    align-items: center;
+                    width: 100%;
+                    height: 30%;
+                }
+
+                .parti_three {
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: space-around;
+                    align-items: center;
+                    width: 100%;
+                    height: 20%;
+                }
+
+                .parti_four {
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: space-around;
+                    align-items: center;
+                    width: 100%;
+                    height: 20%;
+                }
+
                 .button {
                     display: flex;
                     object-fit: cover;

src/styles/components/_calendrier.scss

@@ -104,6 +104,42 @@ body {
                 backdrop-filter: blur(3px);
                 -webkit-backdrop-filter: blur(15px);
 
+                .parti_one {
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: space-around;
+                    align-items: center;
+                    width: 100%;
+                    height: 20%;
+                }
+
+                .parti_two {
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: space-between;
+                    align-items: center;
+                    width: 100%;
+                    height: 30%;
+                }
+
+                .parti_three {
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: space-around;
+                    align-items: center;
+                    width: 100%;
+                    height: 20%;
+                }
+
+                .parti_four {
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: space-around;
+                    align-items: center;
+                    width: 100%;
+                    height: 20%;
+                }
+
                 .button {
                     display: flex;
                     object-fit: cover;
@@ -128,7 +164,7 @@ body {
                 box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
                 backdrop-filter: blur(3px);
                 -webkit-backdrop-filter: blur(15px);
-                width: 100%;
+                width: 94.3%;
                 margin: 5px 10px 10px 5px;
                 text-align: center;
 

src/styles/components/_compte.scss

@@ -104,6 +104,42 @@ body {
                 backdrop-filter: blur(3px);
                 -webkit-backdrop-filter: blur(15px);
 
+                .parti_one {
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: space-around;
+                    align-items: center;
+                    width: 100%;
+                    height: 20%;
+                }
+
+                .parti_two {
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: space-between;
+                    align-items: center;
+                    width: 100%;
+                    height: 30%;
+                }
+
+                .parti_three {
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: space-around;
+                    align-items: center;
+                    width: 100%;
+                    height: 20%;
+                }
+
+                .parti_four {
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: space-around;
+                    align-items: center;
+                    width: 100%;
+                    height: 20%;
+                }
+
                 .button {
                     display: flex;
                     object-fit: cover;

src/styles/components/_dashboard.scss

@@ -104,6 +104,42 @@ body {
                 backdrop-filter: blur(3px);
                 -webkit-backdrop-filter: blur(15px);
 
+                .parti_one {
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: space-around;
+                    align-items: center;
+                    width: 100%;
+                    height: 20%;
+                }
+
+                .parti_two {
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: space-between;
+                    align-items: center;
+                    width: 100%;
+                    height: 30%;
+                }
+
+                .parti_three {
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: space-around;
+                    align-items: center;
+                    width: 100%;
+                    height: 20%;
+                }
+
+                .parti_four {
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: space-around;
+                    align-items: center;
+                    width: 100%;
+                    height: 20%;
+                }
+
                 .button {
                     display: flex;
                     object-fit: cover;
@@ -124,7 +160,7 @@ body {
                 display: flex;
                 flex-direction: row;
                 justify-content: space-between;
-                width: 93.4%;
+                width: 94.3%;
                 height: auto;
                 margin: 5px 10px 10px 5px;
 

src/styles/components/_parametre.scss

@@ -106,6 +106,42 @@
                 backdrop-filter: blur(3px);
                 -webkit-backdrop-filter: blur(15px);
 
+                .parti_one {
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: space-around;
+                    align-items: center;
+                    width: 100%;
+                    height: 20%;
+                }
+
+                .parti_two {
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: space-between;
+                    align-items: center;
+                    width: 100%;
+                    height: 30%;
+                }
+
+                .parti_three {
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: space-around;
+                    align-items: center;
+                    width: 100%;
+                    height: 20%;
+                }
+
+                .parti_four {
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: space-around;
+                    align-items: center;
+                    width: 100%;
+                    height: 20%;
+                }
+
                 .button {
                     display: flex;
                     object-fit: cover;
@@ -121,7 +157,6 @@
                     }
                 }
             }
-            
     
             .Parametre {
                 display: flex;

src/styles/components/repertoire.scss

@@ -0,0 +1,170 @@
+body {
+    
+    .page_Repertoire {
+        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);
+
+                .parti_one {
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: space-around;
+                    align-items: center;
+                    width: 100%;
+                    height: 20%;
+                }
+
+                .parti_two {
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: space-between;
+                    align-items: center;
+                    width: 100%;
+                    height: 30%;
+                }
+
+                .parti_three {
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: space-around;
+                    align-items: center;
+                    width: 100%;
+                    height: 20%;
+                }
+
+                .parti_four {
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: space-around;
+                    align-items: center;
+                    width: 100%;
+                    height: 20%;
+                }
+
+                .button {
+                    display: flex;
+                    object-fit: cover;
+                    background-color: transparent;
+                    border: none;
+                    cursor: pointer;
+
+                    .logo_nav_bar{
+                        display: flex;
+                        margin: 10px;
+                        height: 50px;
+                        width: 50px;
+                    }
+                }
+            }
+
+            .Repertoire {
+                display: flex;
+                flex-direction: row;
+                justify-content: space-between;
+                width: 94.3%;
+                height: auto;
+                margin: 5px 10px 10px 5px;
+
+            }
+        }
+    }
+}

src/styles/index.scss

@@ -5,4 +5,5 @@
 @import "./components/dashboard";
 @import "./components/analyse";
 @import "./components/calendrier";
-@import "./components/parametre"
+@import "./components/parametre";
+@import "./components/repertoire"