maxence.lanone
/
JTT_CrM_test_ci
forked from CRM_Production/JTT_CrM
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Mise en place du mode sombre et de la persistance pour toutes les pages utilisateurs connecté normales

Browse Source
master
Tristan BARLET 3 years ago
parent 9e9ca1d46c
commit 8c29a1ecee
14 changed files with 77 additions and 353 deletions
Show Stats Download Patch File Download Diff File

9
src/pages/Analyse.js
Unescape View File

@ -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 (
<body>
<body className={theme}>
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"></link>

6
src/pages/Calendrier.js
Unescape View File

@ -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 (
<body>
<body className={theme}>
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"></link>

6
src/pages/Compte.js
Unescape View File

@ -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 (
<body>
<body className={theme}>
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"></link>

4
src/pages/Connexion.js
Unescape View File

@ -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("");

9
src/pages/Dashboard.js
Unescape View File

@ -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 (
<body>
<body className={theme}>
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"></link>

15
src/pages/Parametres.js
Unescape View File

@ -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 (
<ThemeContext.Provider value={{ theme, setTheme}}>
<body className={theme}>
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"></link>
@ -67,7 +70,7 @@ const Parametre = () => {
</div>
</div>
</body>
</ThemeContext.Provider>
// </ThemeContext.Provider>
);
};

6
src/pages/Repertoire.js
Unescape View File

@ -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 (
<body>
<body className={theme}>
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"></link>

5
src/styles/components/_analyse.scss
Unescape View File

@ -1,3 +1,8 @@
.dark{
background-color: $xiketic;
color: white;
}
body {
.page_analyse {

5
src/styles/components/_calendrier.scss
Unescape View File

@ -1,3 +1,8 @@
.dark{
background-color: $xiketic;
color: white;
}
body {
.page_calendrier {

5
src/styles/components/_compte.scss
Unescape View File

@ -1,3 +1,8 @@
.dark{
background-color: $xiketic;
color: white;
}
body {
.page_compte {

5
src/styles/components/_connexion.scss
Unescape View File

@ -1,3 +1,8 @@
.dark{
background-color: $xiketic;
color: white;
}
body {
.page_connexion {
display: flex;

4
src/styles/components/_dashboard.scss
Unescape View File

@ -1,3 +1,7 @@
.dark{
background-color: $xiketic;
color: white;
}
body {
.page_dashboard {

346
src/styles/components/_parametre.scss
Unescape View File

@ -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);
}
}
}
}
}

5
src/styles/components/_repertoire.scss
Unescape View File

@ -1,3 +1,8 @@
.dark{
background-color: $xiketic;
color: white;
}
body {
.page_Repertoire {

Write Preview
Loading…
Cancel
Save