From 8c29a1ecee5acdbda1ca8ed3ed73fb684afa3434 Mon Sep 17 00:00:00 2001 From: Tristan Barlet Date: Tue, 22 Nov 2022 12:53:51 +0100 Subject: [PATCH] =?UTF-8?q?Mise=20en=20place=20du=20mode=20sombre=20et=20d?= =?UTF-8?q?e=20la=20persistance=20pour=20toutes=20les=20pages=20utilisateu?= =?UTF-8?q?rs=20connect=C3=A9=20normales?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Analyse.js | 9 +- src/pages/Calendrier.js | 6 +- src/pages/Compte.js | 6 +- src/pages/Connexion.js | 4 + src/pages/Dashboard.js | 9 +- src/pages/Parametres.js | 15 +- src/pages/Repertoire.js | 6 +- src/styles/components/_analyse.scss | 5 + src/styles/components/_calendrier.scss | 5 + src/styles/components/_compte.scss | 5 + src/styles/components/_connexion.scss | 5 + src/styles/components/_dashboard.scss | 4 + src/styles/components/_parametre.scss | 346 +------------------------ src/styles/components/_repertoire.scss | 5 + 14 files changed, 77 insertions(+), 353 deletions(-) diff --git a/src/pages/Analyse.js b/src/pages/Analyse.js index 64e4d05..cbc7bed 100644 --- a/src/pages/Analyse.js +++ b/src/pages/Analyse.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {useState} from 'react'; import axios from 'axios' import Chart from 'chart.js/auto' import NavigationDashboard from '../components/NavigationDashboard'; @@ -10,8 +10,13 @@ const api = axios.create({ const Analyse = () => { + const [theme, setTheme] = useState("light"); + if (localStorage.getItem('theme') && localStorage.getItem("theme") !== '' && localStorage.getItem("theme") !== theme) { + setTheme(localStorage.getItem("theme")) + } + return ( - + diff --git a/src/pages/Calendrier.js b/src/pages/Calendrier.js index 2d56e9b..2773a76 100644 --- a/src/pages/Calendrier.js +++ b/src/pages/Calendrier.js @@ -30,6 +30,10 @@ const locales = { const Calendrier = () => { + const [theme, setTheme] = useState("light"); + if (localStorage.getItem('theme') && localStorage.getItem("theme") !== '' && localStorage.getItem("theme") !== theme) { + setTheme(localStorage.getItem("theme")) + } const [newEvent, setNewEvent] = useState({title: "", start: "", end:""}); const [allEvents, setAllEvents] = useState(events); @@ -38,7 +42,7 @@ const Calendrier = () => { } return ( - + diff --git a/src/pages/Compte.js b/src/pages/Compte.js index d112422..d69edc4 100644 --- a/src/pages/Compte.js +++ b/src/pages/Compte.js @@ -7,6 +7,10 @@ import img1 from '../img/logo_personEntouré.svg'; function Compte() { + const [theme, setTheme] = useState("light"); + if (localStorage.getItem('theme') && localStorage.getItem("theme") !== '' && localStorage.getItem("theme") !== theme) { + setTheme(localStorage.getItem("theme")) + } const [file, setFile] = useState(); function handleChange(e) { @@ -16,7 +20,7 @@ function Compte() { return ( - + diff --git a/src/pages/Connexion.js b/src/pages/Connexion.js index 4877f2b..343fdcd 100644 --- a/src/pages/Connexion.js +++ b/src/pages/Connexion.js @@ -10,6 +10,10 @@ const api = axios.create({ }) function Connexion() { + const [theme, setTheme] = useState("light"); + if (localStorage.getItem('theme') && localStorage.getItem("theme") !== '' && localStorage.getItem("theme") !== theme) { + setTheme(localStorage.getItem("theme")) + } const [auth, setAuth] = useState(""); const [login, setLogin] = useState(""); diff --git a/src/pages/Dashboard.js b/src/pages/Dashboard.js index 5492eb8..7bb689d 100644 --- a/src/pages/Dashboard.js +++ b/src/pages/Dashboard.js @@ -1,9 +1,14 @@ -import React from 'react'; +import React, {useState} from 'react'; import NavigationDashboard from '../components/NavigationDashboard'; const Dashboard = () => { + const [theme, setTheme] = useState("light"); + if (localStorage.getItem('theme') && localStorage.getItem("theme") !== '' && localStorage.getItem("theme") !== theme) { + setTheme(localStorage.getItem("theme")) + } + return ( - + diff --git a/src/pages/Parametres.js b/src/pages/Parametres.js index 1ae4e33..56bf68c 100644 --- a/src/pages/Parametres.js +++ b/src/pages/Parametres.js @@ -1,17 +1,20 @@ import React, { useState } from 'react'; import NavigationDashboard from '../components/NavigationDashboard'; -import { createContext } from 'react'; - -export const ThemeContext = createContext(null); const Parametre = () => { - const [theme, setTheme] = useState("light"); + const [theme, setTheme] = useState("light"); + if (localStorage.getItem('theme') && localStorage.getItem("theme") !== '' && localStorage.getItem("theme") !== theme) { + setTheme(localStorage.getItem("theme")) + } + + const toggleTheme = () => { setTheme((curr) => (curr === "light" ? "dark" : "light")); + localStorage.setItem("theme", (theme === "light" ? "dark" : "light")) } + return ( - @@ -67,7 +70,7 @@ const Parametre = () => { - + // ); }; diff --git a/src/pages/Repertoire.js b/src/pages/Repertoire.js index 5b98456..bd28525 100644 --- a/src/pages/Repertoire.js +++ b/src/pages/Repertoire.js @@ -21,6 +21,10 @@ const api = axios.create({ }) function Repertoire() { + const [theme, setTheme] = useState("light"); + if (localStorage.getItem('theme') && localStorage.getItem("theme") !== '' && localStorage.getItem("theme") !== theme) { + setTheme(localStorage.getItem("theme")) + } const [contacts, setContacts] = useState([]); const [SearchTerm, setSearchTerm] = useState(""); @@ -35,7 +39,7 @@ function Repertoire() { return ( - + diff --git a/src/styles/components/_analyse.scss b/src/styles/components/_analyse.scss index 407d4a7..54cc0d0 100644 --- a/src/styles/components/_analyse.scss +++ b/src/styles/components/_analyse.scss @@ -1,3 +1,8 @@ +.dark{ + background-color: $xiketic; + color: white; +} + body { .page_analyse { diff --git a/src/styles/components/_calendrier.scss b/src/styles/components/_calendrier.scss index 673bfab..b836b73 100644 --- a/src/styles/components/_calendrier.scss +++ b/src/styles/components/_calendrier.scss @@ -1,3 +1,8 @@ +.dark{ + background-color: $xiketic; + color: white; +} + body { .page_calendrier { diff --git a/src/styles/components/_compte.scss b/src/styles/components/_compte.scss index f775da6..20dbbd2 100644 --- a/src/styles/components/_compte.scss +++ b/src/styles/components/_compte.scss @@ -1,3 +1,8 @@ +.dark{ + background-color: $xiketic; + color: white; +} + body { .page_compte { diff --git a/src/styles/components/_connexion.scss b/src/styles/components/_connexion.scss index a3c1944..bc1ff41 100644 --- a/src/styles/components/_connexion.scss +++ b/src/styles/components/_connexion.scss @@ -1,3 +1,8 @@ +.dark{ + background-color: $xiketic; + color: white; +} + body { .page_connexion { display: flex; diff --git a/src/styles/components/_dashboard.scss b/src/styles/components/_dashboard.scss index b42db78..870974b 100644 --- a/src/styles/components/_dashboard.scss +++ b/src/styles/components/_dashboard.scss @@ -1,3 +1,7 @@ +.dark{ + background-color: $xiketic; + color: white; +} body { .page_dashboard { diff --git a/src/styles/components/_parametre.scss b/src/styles/components/_parametre.scss index baefd1b..bc57fd5 100644 --- a/src/styles/components/_parametre.scss +++ b/src/styles/components/_parametre.scss @@ -1,4 +1,9 @@ -.light { +.dark{ + background-color: $xiketic; + color: white; +} + +body { background-color: $alice-blue; color: black; @@ -343,342 +348,3 @@ } } } - -.dark { - background-color: $xiketic; - color: white; - - .page_parametre { - 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.25); - 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.25); - - 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.25); - 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: 18%; - } - - .parti_two { - display: flex; - flex-direction: column; - justify-content: space-around; - align-items: center; - width: 100%; - height: 35%; - } - - .parti_three { - display: flex; - flex-direction: row; - justify-content: space-around; - align-items: center; - margin-top: 15px; - width: 100%; - height: 18%; - } - - .parti_four { - display: flex; - flex-direction: row; - justify-content: space-around; - align-items: center; - width: 100%; - height: 18%; - } - - .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-between; - width: 94.3%; - height: auto; - margin: 5px 10px 10px 5px; - - .one { - display: flex; - flex-direction: column; - justify-content: space-evenly; - width: auto; - height: 28.5%; - padding: 10px; - - background: rgba(255, 255, 255, 0.3); - border-radius: 15px; - box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25); - backdrop-filter: blur(3px); - -webkit-backdrop-filter: blur(15px); - - .one_haut { - display: flex; - flex-direction: row; - justify-content: space-between; - height: 50%; - border-bottom: 1px solid black; - } - - .one_milieu { - display: flex; - flex-direction: row; - justify-content: space-between; - padding: 9px; - height: 25%; - border-bottom: 1px solid black; - - .bouton_submit { - display: flex; - margin-left: 30px; - align-items: center; - cursor: pointer; - - .bouton_signalerPB { - width: 75px; - height: 20px; - background-color: rgb(190, 189, 189); - border-radius: 5px; - border-radius: 5px; - box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25); - cursor: pointer; - - &:hover{ - background-color: lightgrey; - } - } - } - } - - .one_bas { - display: flex; - flex-direction: row; - justify-content: space-between; - padding: 9px; - height: 25%; - - .bouton_submit { - display: flex; - margin-left: 30px; - align-items: center; - cursor: pointer; - - .bouton_modifierMDP { - width: 75px; - height: 20px; - background-color: rgb(190, 189, 189); - border-radius: 5px; - border-radius: 5px; - box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25); - cursor: pointer; - - &:hover{ - background-color: lightgrey; - } - } - } - } - } - - .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; - box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25); - 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(51, 75, 172); - } - - 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 { - display: flex; - width: auto; - height: 40%; - - background: rgba(255, 255, 255, 0.3); - border-radius: 15px; - box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25); - backdrop-filter: blur(3px); - -webkit-backdrop-filter: blur(15px); - } - } - } - } -} \ No newline at end of file diff --git a/src/styles/components/_repertoire.scss b/src/styles/components/_repertoire.scss index 98ddedc..b7b355f 100644 --- a/src/styles/components/_repertoire.scss +++ b/src/styles/components/_repertoire.scss @@ -1,3 +1,8 @@ +.dark{ + background-color: $xiketic; + color: white; +} + body { .page_Repertoire {