diff --git a/package-lock.json b/package-lock.json index a99c342..c4893b7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,6 +24,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", @@ -6908,6 +6909,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", @@ -22739,6 +22749,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", diff --git a/package.json b/package.json index f2c4b16..1babbb6 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,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", diff --git a/src/pages/Dashboard.js b/src/pages/Dashboard.js index 1139e12..5492eb8 100644 --- a/src/pages/Dashboard.js +++ b/src/pages/Dashboard.js @@ -1,75 +1,74 @@ import React from 'react'; import NavigationDashboard from '../components/NavigationDashboard'; - const Dashboard = () => { return ( - - -
- {/* Create an account page */} -
-

Dashboard

-
-
- - - - + + +
+ {/* Create an account page */} +
+

Dashboard

+
+
+ + + + +
+
-
-
-
- -
-
-
-
- Mes infos -
-
- Alertes -
-
-
-
- Mes prochaines activités +
+ +
+
+
+
+ Mes infos +
+
+ Alertes +
-
-
-
- Chiffre_clés -
-
- Chiffre_clés -
+
+
+ Mes prochaines activités
-
-
- Chiffre_clés +
+
+
+ Chiffre_clés +
+
+ Chiffre_clés +
-
- Chiffre_clés +
+
+ Chiffre_clés +
+
+ Chiffre_clés +
-
-
-
- clients important -
-
- contacts ajouté récemment +
+
+ clients important +
+
+ contacts ajouté récemment +
-
-
+
+
-
- + ); }; diff --git a/src/pages/Parametres.js b/src/pages/Parametres.js index 5224fef..f824987 100644 --- a/src/pages/Parametres.js +++ b/src/pages/Parametres.js @@ -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 ( - + +
{/* Create an account page */}
-

Paramètre

+

Paramètres

@@ -49,7 +57,7 @@ const Parametre = () => {

Mode sombre

- +
@@ -60,6 +68,7 @@ const Parametre = () => {
+ ); }; diff --git a/src/styles/components/_parametre.scss b/src/styles/components/_parametre.scss index f6070eb..24f5344 100644 --- a/src/styles/components/_parametre.scss +++ b/src/styles/components/_parametre.scss @@ -1,5 +1,6 @@ -body { +.light { background-color: $alice-blue; + color: black; .page_parametre { display: flex; @@ -298,3 +299,305 @@ body { } } } + +.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); + + .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