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

.drone.yml

@@ -10,4 +10,4 @@ steps:
   image: node
   commands:
   - npm install
-  - find -name "*.js" | xargs node -c
+  - find -name "*.js"| grep -v "node_modules" | xargs node -c

server-api/package.json

@@ -9,11 +9,15 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "@mui/material": "^5.10.13",
     "body": "^5.1.0",
     "body-parser": "^1.20.1",
     "corps": "^0.1.0",
     "cors": "^2.8.5",
     "express": "^4.18.2",
+    "fullcalendar": "^5.11.3",
     "mysql": "^2.18.1",
     "parser": "^0.1.4"
   },

src/components/NavigationDashboard.js

@@ -8,7 +8,7 @@ const NavigationDashboard = () => {
             <NavLink className="mon_compte" to="/Account">
                 <div className="parti_one">
                     <button className="button" type="submit">
-                        <img id='bigImage' className="logo_nav_bar" srcSet="./logo_person.svg"/>                       
+                        <img className="logo_nav_bar" srcSet="./logo_person.svg"/>                       
                     </button>
                 </div>
             </NavLink>

src/pages/Compte.js

@@ -35,11 +35,11 @@ const Compte = () => {
                             </div>
                             <div className="name">
                                 <div className="presentationNom">
-                                    <p className="def">Nom Complet :</p>
-                                    <p className="nom">Mateo Centeno</p>
+                                    <p id="texte" className="def">Nom Complet :</p>
+                                    <p id="texte" className="nom">Mateo Centeno</p>
                                 </div>
                                 <div className='bouton_submit'>
-                                    <button className="bouton_modifierNom" type="submit">Modifier</button>
+                                    <button id="bouton" className="bouton_modifierNom" type="submit">Modifier</button>
                                 </div>
                             </div>
                         </div>
@@ -105,5 +105,10 @@ function preview(){
     }
 }
 
+function changeTexte(){
+    var para = document.querySelector("#texte");
+    console.log(para.innerHTML);
+}
+
 
 export default Compte;

src/pages/Connexion.js

@@ -2,7 +2,7 @@ import axios from 'axios'
 import React, { useState } from 'react';
 import CryptoJS from 'crypto-js';
 import Admin from './Admin_create.js'
-import Dashboard from './Dashboard.js';
+import Dashboard from './Dashboard.js'
 import Admin_list from './Admin_list.js';
 
 const api = axios.create({

src/pages/Parametres.js

@@ -43,7 +43,15 @@ const Parametre = () => {
                             </div>
                         </div>
                         <div className="two">
-                            coucou
+                            <div className="two_haut">
+                                coucou
+                            </div>
+                            <div className="two_bas">
+                                <p className="text_two_bas">Mode sombre</p>
+                                <div className="center">
+                                    <input type="checkbox" name=""/>
+                                </div>
+                            </div>
                         </div>
                         <div className="three">
                             coucou

src/styles/components/_parametre.scss

@@ -218,8 +218,11 @@ body {
 
                 .two {
                     display: flex;
+                    flex-direction: column;
+                    justify-content: space-between;
                     width: auto;
                     height: 28.5%;
+                    padding: 10px;
 
                     background: rgba(255, 255, 255, 0.3);
                     border-radius: 15px;
@@ -227,6 +230,61 @@ body {
                     backdrop-filter: blur(3px);
                     -webkit-backdrop-filter: blur(15px);
 
+                    .two_haut {
+                        display: flex;
+                        height: 75%;
+                        
+                        border-bottom: 1px solid black;
+                    }
+
+                    .two_bas {
+                        display: flex;
+                        flex-direction: row;
+                        padding: 9px;
+                        height: 25%;
+
+                        .center {
+                            position: absolute;
+                            top: 84%;
+                            right: 0.5%;
+                            transform: translate(-50%,-50%);
+
+                            input[type="checkbox"] {
+                                position: relative;
+                                width: 50px;
+                                height: 25px;
+                                -webkit-appearance: none;
+                                background-color: #e2e2e2;
+                                outline: none;
+                                border-radius: 20px;
+                                box-shadow: inset 0 0 5px rgba(0,0,0,.5);
+                                transition: .5s;
+                                cursor: pointer;
+                            }
+
+                            input:checked[type="checkbox"] {
+                                background-color: rgb(41, 186, 41);
+                            }
+
+                            input[type="checkbox"]:before {
+                                content: '';
+                                position: absolute;
+                                width: 18px;
+                                height: 18px;
+                                border-radius: 20px;
+                                top: 12%;
+                                left: 10%;
+                                background-color: white;
+                                transform: scale(1.1);
+                                box-shadow: 0 2px 5px rgba(0,0,0,.2);
+                                transition: .5s;
+                            }
+
+                            input:checked[type="checkbox"]:before {
+                                left: 27px;
+                            }
+                        }
+                    }
                 }
 
                 .three {

src/styles/settings.scss

@@ -6,6 +6,39 @@ $color-2: salmon;
 $color-3: #282c34;
 $white: rgb(243, 243, 243);
 
+/* SCSS HEX */
+$alice-blue: #e8eef2ff;
+$blue-munsell: #0088a3ff;
+$malachite: #32e875ff;
+$rufous: #9b2915ff;
+$xiketic: #020114ff;
+$beau-blue: #b1c5d2;
+
+/* SCSS HSL */
+$alice-blue: hsla(204, 28%, 93%, 1);
+$blue-munsell: hsla(190, 100%, 32%, 1);
+$malachite: hsla(142, 80%, 55%, 1);
+$rufous: hsla(9, 76%, 35%, 1);
+$xiketic: hsla(243, 90%, 4%, 1);
+
+/* SCSS RGB */
+$alice-blue: rgba(232, 238, 242, 1);
+$blue-munsell: rgba(0, 136, 163, 1);
+$malachite: rgba(50, 232, 117, 1);
+$rufous: rgba(155, 41, 21, 1);
+$xiketic: rgba(2, 1, 20, 1);
+
+/* SCSS Gradient */
+$gradient-top: linear-gradient(0deg, #e8eef2ff, #0088a3ff, #32e875ff, #9b2915ff, #020114ff);
+$gradient-right: linear-gradient(90deg, #e8eef2ff, #0088a3ff, #32e875ff, #9b2915ff, #020114ff);
+$gradient-bottom: linear-gradient(180deg, #e8eef2ff, #0088a3ff, #32e875ff, #9b2915ff, #020114ff);
+$gradient-left: linear-gradient(270deg, #e8eef2ff, #0088a3ff, #32e875ff, #9b2915ff, #020114ff);
+$gradient-top-right: linear-gradient(45deg, #e8eef2ff, #0088a3ff, #32e875ff, #9b2915ff, #020114ff);
+$gradient-bottom-right: linear-gradient(135deg, #e8eef2ff, #0088a3ff, #32e875ff, #9b2915ff, #020114ff);
+$gradient-top-left: linear-gradient(225deg, #e8eef2ff, #0088a3ff, #32e875ff, #9b2915ff, #020114ff);
+$gradient-bottom-left: linear-gradient(315deg, #e8eef2ff, #0088a3ff, #32e875ff, #9b2915ff, #020114ff);
+$gradient-radial: radial-gradient(#e8eef2ff, #0088a3ff, #32e875ff, #9b2915ff, #020114ff);
+
 @mixin verticalCenter {
     display: flex;
     justify-content: center;