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

Ajout mode sombre sur page parametre seulement

Browse Source
master
Clément VERDOIRE 3 years ago
parent 18253165c5
commit aafbe769a2
5 changed files with 386 additions and 59 deletions
Show Stats Download Patch File Download Diff File

15
package-lock.json generated
Unescape View File

@ -23,6 +23,7 @@
"chart": "^0.1.2",
"chart.js": "^3.9.1",
"crypto-js": "^4.1.1",
"darkreader": "^4.9.58",
"date-fns": "^2.29.3",
"fullcalendar": "^5.11.3",
"pg": "^8.8.0",
@ -6899,6 +6900,15 @@
"resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
"integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA=="
},
"node_modules/darkreader": {
"version": "4.9.58",
"resolved": "https://registry.npmjs.org/darkreader/-/darkreader-4.9.58.tgz",
"integrity": "sha512-D/JGoJqW3m2AWBLhO+Pev+eThfs+CwRT4bcLb/1zKjql2yVwG0lx8C2XRDdSVGHw4y11n26W7syWoBpUfuhMqQ==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/darkreader/donate"
}
},
"node_modules/data-urls": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz",
@ -22717,6 +22727,11 @@
"resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
"integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA=="
},
"darkreader": {
"version": "4.9.58",
"resolved": "https://registry.npmjs.org/darkreader/-/darkreader-4.9.58.tgz",
"integrity": "sha512-D/JGoJqW3m2AWBLhO+Pev+eThfs+CwRT4bcLb/1zKjql2yVwG0lx8C2XRDdSVGHw4y11n26W7syWoBpUfuhMqQ=="
},
"data-urls": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz",

1
package.json
Unescape View File

@ -18,6 +18,7 @@
"chart": "^0.1.2",
"chart.js": "^3.9.1",
"crypto-js": "^4.1.1",
"darkreader": "^4.9.58",
"date-fns": "^2.29.3",
"fullcalendar": "^5.11.3",
"pg": "^8.8.0",

1
src/pages/Dashboard.js
Unescape View File

@ -1,7 +1,6 @@
import React from 'react';
import NavigationDashboard from '../components/NavigationDashboard';
const Dashboard = () => {
return (
<body>

17
src/pages/Parametres.js
Unescape View File

@ -1,17 +1,25 @@
import React from 'react';
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 toggleTheme = () => {
setTheme((curr) => (curr === "light" ? "dark" : "light"));
}
return (
<body>
<ThemeContext.Provider value={{ theme, setTheme}}>
<body className={theme}>
<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">Paramètre</h2>
<h2 className="titre">Paramètres</h2>
<div className="rechLogo">
<div className="input_box">
<input type="search" placeholder="Rechercher..."/>
@ -49,7 +57,7 @@ const Parametre = () => {
<div className="two_bas">
<p className="text_two_bas">Mode sombre</p>
<div className="center">
<input type="checkbox" name=""/>
<input type="checkbox" onChange={toggleTheme} checked={theme === "dark"}/>
</div>
</div>
</div>
@ -60,6 +68,7 @@ const Parametre = () => {
</div>
</div>
</body>
</ThemeContext.Provider>
);
};

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

@ -1,5 +1,308 @@
body {
.light {
background-color: $alice-blue;
color: black;
.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);
.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);
}
}
}
}
}
.dark {
background-color: $xiketic;
color: white;
.page_parametre {
display: flex;

Write Preview
Loading…
Cancel
Save