From df5a45f7961fedf1628652c31a714fd707302dbe Mon Sep 17 00:00:00 2001
From: Maxence Lanone <maxence.lanone@etu.uca.fr>
Date: Sat, 17 Dec 2022 01:29:35 +0100
Subject: [PATCH] refonte deisgn white theme + correction dark theme

---
 public/LogoApp.svg                        |  2 +-
 public/LogoApp_light.svg                  | 72 ++++++++++++++++++
 src/components/NavigationDashboard.js     | 93 ++++++++++++++++++++---
 src/pages/Analyse.js                      |  2 +-
 src/pages/Calendrier.js                   |  4 +-
 src/pages/Compte.js                       |  2 +-
 src/pages/Dashboard.js                    | 22 +++---
 src/pages/MailPourAdmin.js                | 10 +--
 src/pages/Parametres.js                   |  2 +-
 src/pages/Repertoire.js                   |  6 +-
 src/styles/components/_analyse.scss       | 23 +++---
 src/styles/components/_calendrier.scss    | 41 +++++++---
 src/styles/components/_compte.scss        | 13 +++-
 src/styles/components/_dashboard.scss     | 36 ++++++---
 src/styles/components/_mailPourAdmin.scss | 90 ++++++++++++++++------
 src/styles/components/_parametre.scss     | 26 ++++---
 src/styles/components/_repertoire.scss    |  9 ++-
 src/styles/settings.scss                  | 88 +++++++++++++++++----
 18 files changed, 421 insertions(+), 120 deletions(-)
 create mode 100644 public/LogoApp_light.svg

diff --git a/public/LogoApp.svg b/public/LogoApp.svg
index efe961e..c9bd527 100644
--- a/public/LogoApp.svg
+++ b/public/LogoApp.svg
@@ -3,7 +3,7 @@
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
  width="500.000000pt" height="500.000000pt" viewBox="0 0 500.000000 500.000000"
- preserveAspectRatio="xMidYMid meet">
+ preserveAspectRatio="xMidYMid meet" fill="#ffff">
 
 <g transform="translate(0.000000,500.000000) scale(0.100000,-0.100000)"
 fill="#000000" stroke="none">
diff --git a/public/LogoApp_light.svg b/public/LogoApp_light.svg
new file mode 100644
index 0000000..d4d1a56
--- /dev/null
+++ b/public/LogoApp_light.svg
@@ -0,0 +1,72 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="500.000000pt" height="500.000000pt" viewBox="0 0 500.000000 500.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,500.000000) scale(0.100000,-0.100000)"
+fill="rgb(159, 166, 188)" stroke="none">
+<path d="M1658 3437 l-136 -274 79 -43 c44 -23 82 -40 83 -39 2 2 65 125 141
+273 132 257 137 270 119 283 -23 18 -131 73 -141 73 -5 0 -70 -123 -145 -273z
+m10 -203 c26 -18 28 -50 5 -76 -20 -22 -41 -23 -65 -1 -25 22 -23 59 4 77 12
+9 25 16 28 16 3 0 16 -7 28 -16z"/>
+<path d="M1621 3206 c-9 -10 -8 -16 4 -26 21 -17 51 6 34 26 -6 8 -15 14 -19
+14 -4 0 -13 -6 -19 -14z"/>
+<path d="M3117 3676 c-31 -18 -62 -37 -68 -43 -7 -7 30 -91 126 -283 112 -225
+139 -271 153 -265 45 17 142 77 142 88 -1 25 -268 532 -281 533 -8 1 -40 -13
+-72 -30z m271 -442 c30 -21 29 -59 -3 -80 -55 -36 -106 26 -60 72 28 28 33 29
+63 8z"/>
+<path d="M3342 3207 c-15 -17 1 -42 23 -33 18 6 17 37 -1 43 -6 2 -16 -2 -22
+-10z"/>
+<path d="M2235 3579 c-136 -35 -179 -41 -225 -28 -11 3 -46 -56 -127 -216 -62
+-121 -112 -225 -113 -231 0 -5 21 -20 46 -33 l47 -22 30 30 c40 42 96 43 136
+3 15 -15 30 -34 33 -42 4 -13 8 -12 25 3 46 40 134 8 151 -56 7 -26 13 -32 33
+-29 55 6 116 -61 106 -115 -4 -19 0 -23 22 -23 15 0 35 -6 46 -14 11 -7 28
+-15 38 -17 9 -2 43 -38 75 -79 64 -83 98 -98 139 -63 45 39 42 53 -50 180 -17
+24 -27 46 -23 50 8 8 11 5 88 -95 39 -51 53 -62 77 -62 33 0 66 25 75 56 6 21
+-1 35 -77 141 -61 84 -24 71 40 -14 69 -91 99 -107 141 -76 46 34 41 67 -26
+159 -84 114 -182 215 -281 290 -84 62 -87 64 -147 64 -54 0 -74 -6 -161 -50
+-140 -72 -207 -78 -232 -24 -10 23 -8 34 14 80 14 30 45 70 68 90 47 39 212
+145 240 152 27 7 1 32 -32 31 -14 -1 -93 -19 -176 -40z"/>
+<path d="M2451 3564 c-127 -67 -183 -104 -239 -158 -71 -67 -91 -125 -52 -146
+26 -14 116 10 169 46 52 34 143 64 194 64 34 0 58 -9 106 -40 80 -52 226 -193
+308 -297 36 -46 67 -83 70 -83 15 0 233 124 233 133 0 5 -40 86 -89 181 -49
+94 -102 199 -119 232 l-31 61 -38 -10 c-33 -9 -62 -4 -203 32 -91 22 -174 41
+-185 41 -11 0 -67 -25 -124 -56z"/>
+<path d="M1894 3043 c-50 -55 -61 -86 -39 -119 39 -61 87 -55 144 17 48 60 51
+86 15 123 -40 39 -70 34 -120 -21z"/>
+<path d="M2112 3033 c-28 -11 -132 -156 -132 -183 0 -36 38 -70 78 -70 27 0
+40 10 88 68 31 37 60 78 65 91 23 57 -42 117 -99 94z"/>
+<path d="M2243 2924 c-16 -7 -121 -146 -123 -164 -7 -53 27 -93 75 -88 41 4
+155 139 155 184 0 52 -57 88 -107 68z"/>
+<path d="M2324 2754 c-57 -63 -79 -104 -70 -137 8 -32 58 -61 90 -53 30 7 126
+133 126 163 0 31 -46 73 -78 73 -17 0 -39 -15 -68 -46z"/>
+<path d="M2490 2722 c0 -16 -13 -47 -30 -70 -16 -23 -30 -46 -30 -52 0 -6 15
+-17 33 -26 31 -15 36 -15 65 0 49 25 51 57 8 121 -20 30 -38 55 -41 55 -3 0
+-5 -13 -5 -28z"/>
+<path d="M1428 2430 c-240 -29 -435 -182 -500 -395 -17 -52 -22 -95 -22 -170
+0 -268 143 -451 398 -510 136 -32 371 -15 507 36 47 17 58 26 62 48 10 50 20
+181 14 181 -4 0 -19 -25 -33 -55 -15 -31 -49 -76 -76 -101 -68 -63 -125 -87
+-227 -92 -152 -8 -254 30 -357 132 -125 125 -185 330 -155 526 23 150 108 274
+224 330 197 95 451 35 558 -131 18 -27 36 -49 41 -49 10 0 10 36 1 120 -6 62
+-7 63 -47 81 -88 38 -276 62 -388 49z"/>
+<path d="M2040 2419 c0 -8 9 -20 19 -26 37 -23 41 -74 41 -508 0 -434 -4 -486
+-40 -505 -43 -23 -17 -30 105 -30 69 0 125 2 125 5 0 3 -12 17 -27 30 l-28 23
+-3 246 -3 246 82 0 c152 0 185 -32 288 -285 72 -175 96 -221 133 -248 42 -31
+178 -36 178 -7 0 6 -11 10 -25 10 -47 0 -83 57 -164 262 -24 59 -56 127 -71
+152 -34 53 -99 103 -146 112 -37 7 -47 24 -14 24 31 0 118 36 156 65 61 46 87
+100 92 186 4 67 1 82 -19 118 -56 100 -156 130 -466 138 -180 5 -213 4 -213
+-8z m391 -35 c114 -32 178 -116 179 -232 0 -75 -15 -116 -61 -160 -45 -43
+-112 -62 -226 -62 l-93 0 0 235 0 235 72 0 c39 0 98 -7 129 -16z"/>
+<path d="M2945 2421 c-3 -5 8 -18 25 -27 62 -37 64 -57 68 -489 4 -443 1 -484
+-33 -517 -14 -13 -25 -26 -25 -30 0 -5 43 -8 95 -8 97 0 116 9 68 32 -15 7
+-36 29 -47 48 -20 33 -21 53 -24 440 -2 222 0 401 4 397 4 -4 92 -146 194
+-315 103 -169 194 -308 202 -310 10 -2 78 103 209 325 l194 328 3 -409 c2
+-423 -1 -472 -39 -504 -10 -9 -19 -20 -19 -24 0 -5 56 -8 125 -8 69 0 125 2
+125 4 0 3 -13 17 -29 33 -26 27 -29 38 -36 124 -11 144 0 767 14 811 7 21 27
+50 46 65 18 15 31 31 29 35 -3 4 -41 8 -84 8 -75 0 -80 -1 -97 -27 -11 -16
+-100 -164 -198 -330 -99 -167 -182 -303 -185 -303 -3 1 -94 149 -204 330
+l-198 330 -88 0 c-49 0 -91 -4 -95 -9z"/>
+</g>
+</svg>
diff --git a/src/components/NavigationDashboard.js b/src/components/NavigationDashboard.js
index 3140621..bde3622 100644
--- a/src/components/NavigationDashboard.js
+++ b/src/components/NavigationDashboard.js
@@ -43,43 +43,116 @@ const NavigationDashboard = () => {
         )
     }
 
+    function HandleMouseOverCompte() {
+        const svgPath = document.querySelector('.svgPathCompte');
+        svgPath.setAttribute('d', 'M24 23.8q-3.45 0-5.625-2.175T16.2 16q0-3.45 2.175-5.625T24 8.2q3.45 0 5.625 2.175T31.8 16q0 3.45-2.175 5.625T24 23.8Zm12.9 16.65H11.1q-1.4 0-2.4-1t-1-2.4v-1.6q0-2 1-3.425 1-1.425 2.55-2.175 3.4-1.5 6.5-2.25t6.25-.75q3.15 0 6.225.775Q33.3 28.4 36.7 29.9q1.6.7 2.6 2.125t1 3.425v1.6q0 1.4-1 2.4t-2.4 1Zm-25.8-3.4h25.8V35.5q0-.8-.475-1.525-.475-.725-1.175-1.075-3.15-1.5-5.775-2.075Q26.85 30.25 24 30.25q-2.85 0-5.525.575Q15.8 31.4 12.7 32.9q-.7.35-1.15 1.075-.45.725-.45 1.525ZM24 20.4q1.9 0 3.15-1.25T28.4 16q0-1.9-1.25-3.15T24 11.6q-1.9 0-3.15 1.25T19.6 16q0 1.9 1.25 3.15T24 20.4Zm0-4.4Zm0 21.05Z');
+    }
+
+    function HandleMouseOutCompte() {
+        const svgPath = document.querySelector('.svgPathCompte');
+        svgPath.setAttribute('d', 'M24 23.8q-3.4 0-5.525-2.125-2.125-2.125-2.125-5.525 0-3.4 2.125-5.55T24 8.45q3.4 0 5.55 2.15t2.15 5.55q0 3.4-2.15 5.525Q27.4 23.8 24 23.8ZM11.2 40.15q-1.35 0-2.3-.975-.95-.975-.95-2.325v-1.6q0-1.95.975-3.35.975-1.4 2.525-2.1 3.35-1.5 6.4-2.25 3.05-.75 6.15-.75 3.1 0 6.125.775T36.5 29.8q1.6.7 2.6 2.1 1 1.4 1 3.35v1.6q0 1.35-.95 2.325-.95.975-2.35.975Z');
+
+    }
+
+    function HandleMouseOverDashboard() {
+        const svgPath = document.querySelector('.svgPathDashboard');
+        svgPath.setAttribute('d', 'M20.45 31.75q1.15 1.15 3.325 1.075 2.175-.075 3.175-1.625l9-13.95q.4-.65-.075-1.1-.475-.45-1.075-.05L21 25.2q-1.5 1-1.6 3.2-.1 2.2 1.05 3.35ZM9.7 40.3q-.95 0-1.85-.475-.9-.475-1.3-1.325-1.35-2.4-2.05-4.925-.7-2.525-.7-5.375 0-4.2 1.6-7.925 1.6-3.725 4.325-6.5t6.425-4.4Q19.85 7.75 24 7.75q2.25 0 4.7.575t4.85 1.875q1.1.6 1.225 1.475.125.875-.525 1.475-.45.35-1.025.425-.575.075-1.125-.175-2.05-1.15-4.25-1.7T24 11.15q-6.95 0-11.875 4.975T7.2 28.2q0 2.25.625 4.5t1.725 4.2H38.4q1.1-1.8 1.725-4.15.625-2.35.625-4.65 0-1.8-.45-3.85t-1.55-3.95q-.35-.55-.225-1.15.125-.6.575-1 .65-.5 1.4-.35.75.15 1.15.9 1.2 2.3 1.825 4.55t.675 4.55q.05 3-.625 5.7t-2.075 5q-.65 1.25-1.375 1.525-.725.275-1.825.275ZM24 24Z');
+    }
+
+    function HandleMouseOutDashboard() {
+        const svgPath = document.querySelector('.svgPathDashboard');
+        svgPath.setAttribute('d', 'M21.05 31q1.2 1.2 3.1 1.175 1.9-.025 2.8-1.375L36 17.3q.4-.65-.075-1.1-.475-.45-1.075-.05l-13.5 9.05q-1.35.9-1.425 2.75Q19.85 29.8 21.05 31Zm-11.3 9.3q-.95 0-1.85-.475Q7 39.35 6.6 38.5q-1.35-2.4-2.05-4.925-.7-2.525-.7-5.375 0-4.2 1.6-7.925 1.6-3.725 4.325-6.5t6.425-4.4q3.7-1.625 7.85-1.625 4.15 0 7.825 1.625t6.4 4.4Q41 16.55 42.6 20.275t1.6 7.925q0 2.85-.65 5.425Q42.9 36.2 41.5 38.5q-.65 1.25-1.375 1.525-.725.275-1.825.275Z');
+
+    }
+
+    function HandleMouseOverAnalyse() {
+        const svgPath = document.querySelector('.svgPathAnalyse');
+        svgPath.setAttribute('d', 'M15.75 34.15q.65 0 1.075-.425.425-.425.425-1.075V21.9q0-.65-.425-1.075-.425-.425-1.075-.425-.65 0-1.075.425-.425.425-.425 1.075v10.75q0 .65.45 1.075.45.425 1.05.425Zm8.25 0q.65 0 1.075-.425.425-.425.425-1.075v-17.3q0-.65-.425-1.075-.425-.425-1.075-.425-.65 0-1.075.425-.425.425-.425 1.075v17.3q0 .65.425 1.075.425.425 1.075.425Zm8.25 0q.65 0 1.075-.425.425-.425.425-1.075v-4.4q0-.65-.45-1.075-.45-.425-1.05-.425-.65 0-1.075.425-.425.425-.425 1.075v4.4q0 .65.425 1.075.425.425 1.075.425ZM9.1 42.3q-1.35 0-2.375-1.025T5.7 38.9V9.1q0-1.4 1.025-2.4t2.375-1h29.8q1.4 0 2.4 1t1 2.4v29.8q0 1.35-1 2.375T38.9 42.3Zm0-3.4h29.8V9.1H9.1v29.8Zm0 0V9.1v29.8Z');
+    }
+
+    function HandleMouseOutAnalyse() {
+        const svgPath = document.querySelector('.svgPathAnalyse');
+        svgPath.setAttribute('d', 'M15.75 34.15q.65 0 1.075-.425.425-.425.425-1.075V21.9q0-.65-.425-1.075-.425-.425-1.075-.425-.65 0-1.075.425-.425.425-.425 1.075v10.75q0 .65.45 1.075.45.425 1.05.425Zm8.25 0q.65 0 1.075-.425.425-.425.425-1.075v-17.3q0-.65-.425-1.075-.425-.425-1.075-.425-.65 0-1.075.425-.425.425-.425 1.075v17.3q0 .65.425 1.075.425.425 1.075.425Zm8.25 0q.65 0 1.075-.425.425-.425.425-1.075v-4.4q0-.65-.45-1.075-.45-.425-1.05-.425-.65 0-1.075.425-.425.425-.425 1.075v4.4q0 .65.425 1.075.425.425 1.075.425ZM9.1 42.3q-1.35 0-2.375-1.025T5.7 38.9V9.1q0-1.4 1.025-2.4t2.375-1h29.8q1.4 0 2.4 1t1 2.4v29.8q0 1.35-1 2.375T38.9 42.3Z');
+    }
+
+    function HandleMouseOverRepertoire() {
+        const svgPath = document.querySelector('.svgPathRepertoire');
+        svgPath.setAttribute('d', 'M1.55 36.15q-.7 0-1.2-.5t-.5-1.2v-1.1q0-2.05 2.1-3.275T7.5 28.85q.5 0 1.025.025.525.025.975.075-.4.9-.6 1.85-.2.95-.2 2v3.35Zm12 0q-.7 0-1.2-.5t-.5-1.2V32.8q0-3.3 3.35-5.375T24 25.35q5.45 0 8.8 2.075 3.35 2.075 3.35 5.375v1.65q0 .7-.5 1.2t-1.2.5Zm25.75 0V32.8q0-1.05-.2-2t-.6-1.85q.45-.05.975-.075.525-.025 1.025-.025 3.4 0 5.525 1.225Q48.15 31.3 48.15 33.35v1.1q0 .7-.5 1.2t-1.2.5ZM24 28.6q-3.85 0-6.25 1.15t-2.5 2.95v.2h17.5v-.25q-.1-1.75-2.5-2.9T24 28.6ZM7.5 27.4q-1.5 0-2.55-1.05Q3.9 25.3 3.9 23.8q0-1.5 1.05-2.55Q6 20.2 7.5 20.2q1.5 0 2.55 1.05 1.05 1.05 1.05 2.55 0 1.5-1.05 2.55Q9 27.4 7.5 27.4Zm33 0q-1.5 0-2.55-1.05-1.05-1.05-1.05-2.55 0-1.5 1.05-2.55Q39 20.2 40.5 20.2q1.5 0 2.55 1.05 1.05 1.05 1.05 2.55 0 1.5-1.05 2.55Q42 27.4 40.5 27.4ZM24 23.85q-2.55 0-4.35-1.775-1.8-1.775-1.8-4.375 0-2.55 1.8-4.325Q21.45 11.6 24 11.6t4.35 1.775q1.8 1.775 1.8 4.325 0 2.6-1.8 4.375T24 23.85Zm0-9.05q-1.25 0-2.075.85-.825.85-.825 2.05 0 1.25.825 2.1.825.85 2.075.85 1.25 0 2.075-.85.825-.85.825-2.1 0-1.2-.825-2.05-.825-.85-2.075-.85Zm0 18.1Zm0-15.2Z');
+    }
+
+    function HandleMouseOutRepertoire() {
+        const svgPath = document.querySelector('.svgPathRepertoire');
+        svgPath.setAttribute('d', 'M1.55 36.15q-.7 0-1.2-.5t-.5-1.2v-1.1q0-2.05 2.1-3.275T7.5 28.85q.5 0 1.025.025.525.025.975.075-.4.9-.6 1.85-.2.95-.2 2v3.35Zm12 0q-.7 0-1.2-.5t-.5-1.2V32.8q0-3.3 3.35-5.375T24 25.35q5.45 0 8.8 2.075 3.35 2.075 3.35 5.375v1.65q0 .7-.5 1.2t-1.2.5Zm25.75 0V32.8q0-1.05-.2-2t-.6-1.85q.45-.05.975-.075.525-.025 1.025-.025 3.4 0 5.525 1.225Q48.15 31.3 48.15 33.35v1.1q0 .7-.5 1.2t-1.2.5ZM7.5 27.4q-1.5 0-2.55-1.05Q3.9 25.3 3.9 23.8q0-1.5 1.05-2.55Q6 20.2 7.5 20.2q1.5 0 2.55 1.05 1.05 1.05 1.05 2.55 0 1.5-1.05 2.55Q9 27.4 7.5 27.4Zm33 0q-1.5 0-2.55-1.05-1.05-1.05-1.05-2.55 0-1.5 1.05-2.55Q39 20.2 40.5 20.2q1.5 0 2.55 1.05 1.05 1.05 1.05 2.55 0 1.5-1.05 2.55Q42 27.4 40.5 27.4ZM24 23.85q-2.55 0-4.35-1.775-1.8-1.775-1.8-4.375 0-2.55 1.8-4.325Q21.45 11.6 24 11.6t4.35 1.775q1.8 1.775 1.8 4.325 0 2.6-1.8 4.375T24 23.85Z');
+    }
+
+    function HandleMouseOverParametres() {
+        const svgPath = document.querySelector('.svgPathParametres');
+        svgPath.setAttribute('d', 'M27.35 44.3h-6.7q-.65 0-1.15-.4-.5-.4-.6-1.05l-.8-4.95q-.85-.3-1.85-.875T14.5 35.85l-4.55 2.1q-.6.3-1.25.1-.65-.2-.95-.8l-3.4-6.05q-.35-.55-.175-1.175T4.85 29l4.25-3.1q-.1-.4-.125-.95-.025-.55-.025-.95 0-.4.025-.95.025-.55.125-.95L4.85 19q-.5-.4-.675-1.025Q4 17.35 4.35 16.8l3.4-6.05q.35-.6.975-.8.625-.2 1.225.1l4.6 2.1q.7-.6 1.7-1.15 1-.55 1.85-.85l.8-5.05q.1-.6.6-1t1.15-.4h6.7q.65 0 1.15.4.5.4.6 1l.8 5q.85.35 1.875.875T33.5 12.15l4.55-2.1q.6-.3 1.25-.1.65.2.95.8l3.4 6q.35.55.2 1.2-.15.65-.7 1.05l-4.25 3q.1.45.125 1 .025.55.025 1 0 .45-.025.975-.025.525-.125.975L43.15 29q.5.4.675 1.025.175.625-.175 1.175l-3.4 6.05q-.35.6-.975.8-.625.2-1.225-.1l-4.6-2.1q-.7.6-1.675 1.2-.975.6-1.875.85l-.8 4.95q-.1.65-.6 1.05t-1.15.4ZM24 30.5q2.7 0 4.6-1.9 1.9-1.9 1.9-4.6 0-2.7-1.9-4.6-1.9-1.9-4.6-1.9-2.7 0-4.6 1.9-1.9 1.9-1.9 4.6 0 2.7 1.9 4.6 1.9 1.9 4.6 1.9Zm0-3q-1.5 0-2.5-1.025T20.5 24q0-1.45 1-2.475 1-1.025 2.5-1.025 1.45 0 2.475 1.025Q27.5 22.55 27.5 24q0 1.45-1.025 2.475Q25.45 27.5 24 27.5Zm0-3.5Zm-2.1 16.9h4.2l.7-5.6q1.65-.4 3.15-1.25t2.7-2.1l5.3 2.3 1.9-3.45-4.7-3.4q.2-.85.35-1.7.15-.85.15-1.7t-.125-1.7q-.125-.85-.375-1.7l4.7-3.4-1.9-3.45-5.3 2.3q-1.15-1.35-2.625-2.25-1.475-.9-3.225-1.1l-.7-5.6h-4.2l-.7 5.6q-1.7.3-3.2 1.175-1.5.875-2.7 2.175l-5.25-2.3-1.9 3.45 4.65 3.4q-.2.85-.325 1.7T12.35 24q0 .85.125 1.7t.325 1.7l-4.65 3.4 1.9 3.45 5.25-2.3q1.25 1.25 2.75 2.1 1.5.85 3.15 1.25Z');
+    }
+
+    function HandleMouseOutParametres() {
+        const svgPath = document.querySelector('.svgPathParametres');
+        svgPath.setAttribute('d', 'M27.35 44.3h-6.7q-.65 0-1.15-.4-.5-.4-.6-1.05l-.8-4.95q-.85-.3-1.85-.875T14.5 35.85l-4.55 2.1q-.6.3-1.25.1-.65-.2-.95-.8l-3.4-6.05q-.35-.55-.175-1.175T4.85 29l4.25-3.1q-.1-.4-.125-.95-.025-.55-.025-.95 0-.4.025-.95.025-.55.125-.95L4.85 19q-.5-.4-.675-1.025Q4 17.35 4.35 16.8l3.4-6.05q.35-.6.975-.8.625-.2 1.225.1l4.6 2.1q.7-.6 1.7-1.15 1-.55 1.85-.85l.8-5.05q.1-.6.6-1t1.15-.4h6.7q.65 0 1.15.4.5.4.6 1l.8 5q.85.35 1.875.875T33.5 12.15l4.55-2.1q.6-.3 1.25-.1.65.2.95.8l3.4 6q.35.55.2 1.2-.15.65-.7 1.05l-4.25 3q.1.45.125 1 .025.55.025 1 0 .45-.025.975-.025.525-.125.975L43.15 29q.5.4.675 1.025.175.625-.175 1.175l-3.4 6.05q-.35.6-.975.8-.625.2-1.225-.1l-4.6-2.1q-.7.6-1.675 1.2-.975.6-1.875.85l-.8 4.95q-.1.65-.6 1.05t-1.15.4ZM24 30.5q2.7 0 4.6-1.9 1.9-1.9 1.9-4.6 0-2.7-1.9-4.6-1.9-1.9-4.6-1.9-2.7 0-4.6 1.9-1.9 1.9-1.9 4.6 0 2.7 1.9 4.6 1.9 1.9 4.6 1.9Z');
+    }
+
+    function HandleMouseOverCalendrier(){
+        const svgPath = document.querySelector('.svgPathCalendrier');
+        svgPath.setAttribute('d', 'M24 28.05q-.9 0-1.475-.575Q21.95 26.9 21.95 26q0-.9.575-1.475.575-.575 1.475-.575.9 0 1.475.575.575.575.575 1.475 0 .9-.575 1.475-.575.575-1.475.575Zm-8 0q-.9 0-1.475-.575Q13.95 26.9 13.95 26q0-.9.575-1.475.575-.575 1.475-.575.9 0 1.475.575.575.575.575 1.475 0 .9-.575 1.475-.575.575-1.475.575Zm16 0q-.85 0-1.45-.575T29.95 26q0-.9.6-1.475.6-.575 1.45-.575t1.45.575q.6.575.6 1.475 0 .9-.575 1.475-.575.575-1.475.575Zm-8 8q-.9 0-1.475-.6-.575-.6-.575-1.45t.575-1.45q.575-.6 1.475-.6.9 0 1.475.575.575.575.575 1.475 0 .85-.575 1.45t-1.475.6Zm-8 0q-.9 0-1.475-.6-.575-.6-.575-1.45t.575-1.45q.575-.6 1.475-.6.9 0 1.475.575.575.575.575 1.475 0 .85-.575 1.45t-1.475.6Zm16 0q-.85 0-1.45-.6t-.6-1.45q0-.85.6-1.45t1.45-.6q.85 0 1.45.575t.6 1.475q0 .85-.575 1.45t-1.475.6ZM9.1 44.3q-1.35 0-2.375-1.025T5.7 40.9V10.1q0-1.4 1.025-2.4t2.375-1h3.15V5.4q0-.7.5-1.2t1.2-.5q.75 0 1.25.5t.5 1.2v1.3h16.6V5.4q0-.7.5-1.2t1.2-.5q.75 0 1.25.5t.5 1.2v1.3h3.15q1.4 0 2.4 1t1 2.4v30.8q0 1.35-1 2.375T38.9 44.3Zm0-3.4h29.8V19.5H9.1v21.4Zm0-24.4h29.8v-6.4H9.1Zm0 0v-6.4 6.4Z');
+    }
+
+    function HandleMouseOutCalendrier(){
+        const svgPath = document.querySelector('.svgPathCalendrier');
+        svgPath.setAttribute('d','M24 28.05q-.9 0-1.475-.575Q21.95 26.9 21.95 26q0-.9.575-1.475.575-.575 1.475-.575.9 0 1.475.575.575.575.575 1.475 0 .9-.575 1.475-.575.575-1.475.575Zm-8 0q-.9 0-1.475-.575Q13.95 26.9 13.95 26q0-.9.575-1.475.575-.575 1.475-.575.9 0 1.475.575.575.575.575 1.475 0 .9-.575 1.475-.575.575-1.475.575Zm16 0q-.85 0-1.45-.575T29.95 26q0-.9.6-1.475.6-.575 1.45-.575t1.45.575q.6.575.6 1.475 0 .9-.575 1.475-.575.575-1.475.575Zm-8 8q-.9 0-1.475-.6-.575-.6-.575-1.45t.575-1.45q.575-.6 1.475-.6.9 0 1.475.575.575.575.575 1.475 0 .85-.575 1.45t-1.475.6Zm-8 0q-.9 0-1.475-.6-.575-.6-.575-1.45t.575-1.45q.575-.6 1.475-.6.9 0 1.475.575.575.575.575 1.475 0 .85-.575 1.45t-1.475.6Zm16 0q-.85 0-1.45-.6t-.6-1.45q0-.85.6-1.45t1.45-.6q.85 0 1.45.575t.6 1.475q0 .85-.575 1.45t-1.475.6ZM9.1 44.3q-1.35 0-2.375-1.025T5.7 40.9V10.1q0-1.4 1.025-2.4t2.375-1h3.15V5.4q0-.7.5-1.2t1.2-.5q.75 0 1.25.5t.5 1.2v1.3h16.6V5.4q0-.7.5-1.2t1.2-.5q.75 0 1.25.5t.5 1.2v1.3h3.15q1.4 0 2.4 1t1 2.4v30.8q0 1.35-1 2.375T38.9 44.3Zm0-3.4h29.8V19.5H9.1v21.4Z');
+    }
+
+
+
     return (
         <div className="nav_bar_verticale">
             <div className="parti_one">
                 <NavLink className="mon_compte" to="/Account">
                     <button className="button" type="submit">
-                        <ImageToggleOnMouseOver primaryImg={img1} secondaryImg={img11} alt="" />
+                        <svg onMouseOver={HandleMouseOverCompte} onMouseOut={HandleMouseOutCompte} className="svgImage" xmlns="http://www.w3.org/2000/svg" height="48" width="48">
+                            <path onMouseOut={HandleMouseOutCompte} onMouseOver={HandleMouseOverCompte} className="svgPathCompte" d="M24 23.8q-3.4 0-5.525-2.125-2.125-2.125-2.125-5.525 0-3.4 2.125-5.55T24 8.45q3.4 0 5.55 2.15t2.15 5.55q0 3.4-2.15 5.525Q27.4 23.8 24 23.8ZM11.2 40.15q-1.35 0-2.3-.975-.95-.975-.95-2.325v-1.6q0-1.95.975-3.35.975-1.4 2.525-2.1 3.35-1.5 6.4-2.25 3.05-.75 6.15-.75 3.1 0 6.125.775T36.5 29.8q1.6.7 2.6 2.1 1 1.4 1 3.35v1.6q0 1.35-.95 2.325-.95.975-2.35.975Z">
+                            </path>
+                        </svg>
                     </button>
                 </NavLink>
             </div>
             <div className="parti_two">
                 <NavLink className="dashboard" to="/Dashboard">
                     <button className="button" type="submit">
-                        <ImageToggleOnMouseOver primaryImg={img2} secondaryImg={img21} alt="" />
+                        <svg onMouseOver={HandleMouseOverDashboard} onMouseOut={HandleMouseOutDashboard} className="svgImage" xmlns="http://www.w3.org/2000/svg" height="48" width="48">
+                            <path onMouseOut={HandleMouseOutDashboard} onMouseOver={HandleMouseOverDashboard} className="svgPathDashboard" d="M21.05 31q1.2 1.2 3.1 1.175 1.9-.025 2.8-1.375L36 17.3q.4-.65-.075-1.1-.475-.45-1.075-.05l-13.5 9.05q-1.35.9-1.425 2.75Q19.85 29.8 21.05 31Zm-11.3 9.3q-.95 0-1.85-.475Q7 39.35 6.6 38.5q-1.35-2.4-2.05-4.925-.7-2.525-.7-5.375 0-4.2 1.6-7.925 1.6-3.725 4.325-6.5t6.425-4.4q3.7-1.625 7.85-1.625 4.15 0 7.825 1.625t6.4 4.4Q41 16.55 42.6 20.275t1.6 7.925q0 2.85-.65 5.425Q42.9 36.2 41.5 38.5q-.65 1.25-1.375 1.525-.725.275-1.825.275Z">
+                            </path>
+                        </svg>
                     </button>
                 </NavLink>
                 <NavLink className="analyse" to="/Analyse">
-                        <button className="button" type="submit">
-                            <ImageToggleOnMouseOver primaryImg={img3} secondaryImg={img31} alt="" />
-                        </button>
+                    <button className="button" type="submit">
+                        <svg onMouseOver={HandleMouseOverAnalyse} onMouseOut={HandleMouseOutAnalyse} className="svgImage" xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path className="svgPathAnalyse" d="M15.75 34.15q.65 0 1.075-.425.425-.425.425-1.075V21.9q0-.65-.425-1.075-.425-.425-1.075-.425-.65 0-1.075.425-.425.425-.425 1.075v10.75q0 .65.45 1.075.45.425 1.05.425Zm8.25 0q.65 0 1.075-.425.425-.425.425-1.075v-17.3q0-.65-.425-1.075-.425-.425-1.075-.425-.65 0-1.075.425-.425.425-.425 1.075v17.3q0 .65.425 1.075.425.425 1.075.425Zm8.25 0q.65 0 1.075-.425.425-.425.425-1.075v-4.4q0-.65-.45-1.075-.45-.425-1.05-.425-.65 0-1.075.425-.425.425-.425 1.075v4.4q0 .65.425 1.075.425.425 1.075.425ZM9.1 42.3q-1.35 0-2.375-1.025T5.7 38.9V9.1q0-1.4 1.025-2.4t2.375-1h29.8q1.4 0 2.4 1t1 2.4v29.8q0 1.35-1 2.375T38.9 42.3Z"></path></svg>
+                    </button>
                 </NavLink>
                 <NavLink className="calendrier" to="/Calendrier">
-                        <button className="button" type="submit">
-                            <ImageToggleOnMouseOver primaryImg={img4} secondaryImg={img41} alt="" />
-                        </button>
+                    <button className="button" type="submit">
+                        <svg onMouseOver={HandleMouseOverCalendrier} onMouseOut={HandleMouseOutCalendrier} className="svgImage" xmlns="http://www.w3.org/2000/svg" height="48" width="48">
+                            <path onMouseOut={HandleMouseOutCalendrier} onMouseOver={HandleMouseOverCalendrier} className="svgPathCalendrier" d="M24 28.05q-.9 0-1.475-.575Q21.95 26.9 21.95 26q0-.9.575-1.475.575-.575 1.475-.575.9 0 1.475.575.575.575.575 1.475 0 .9-.575 1.475-.575.575-1.475.575Zm-8 0q-.9 0-1.475-.575Q13.95 26.9 13.95 26q0-.9.575-1.475.575-.575 1.475-.575.9 0 1.475.575.575.575.575 1.475 0 .9-.575 1.475-.575.575-1.475.575Zm16 0q-.85 0-1.45-.575T29.95 26q0-.9.6-1.475.6-.575 1.45-.575t1.45.575q.6.575.6 1.475 0 .9-.575 1.475-.575.575-1.475.575Zm-8 8q-.9 0-1.475-.6-.575-.6-.575-1.45t.575-1.45q.575-.6 1.475-.6.9 0 1.475.575.575.575.575 1.475 0 .85-.575 1.45t-1.475.6Zm-8 0q-.9 0-1.475-.6-.575-.6-.575-1.45t.575-1.45q.575-.6 1.475-.6.9 0 1.475.575.575.575.575 1.475 0 .85-.575 1.45t-1.475.6Zm16 0q-.85 0-1.45-.6t-.6-1.45q0-.85.6-1.45t1.45-.6q.85 0 1.45.575t.6 1.475q0 .85-.575 1.45t-1.475.6ZM9.1 44.3q-1.35 0-2.375-1.025T5.7 40.9V10.1q0-1.4 1.025-2.4t2.375-1h3.15V5.4q0-.7.5-1.2t1.2-.5q.75 0 1.25.5t.5 1.2v1.3h16.6V5.4q0-.7.5-1.2t1.2-.5q.75 0 1.25.5t.5 1.2v1.3h3.15q1.4 0 2.4 1t1 2.4v30.8q0 1.35-1 2.375T38.9 44.3Zm0-3.4h29.8V19.5H9.1v21.4Z">
+                            </path>
+                        </svg>
+                    </button>
                 </NavLink>
             </div>
             <div className="parti_three">
                 <NavLink className="repertoire" to="/Repertoire">
                     <button className="button" type="submit">
-                        <ImageToggleOnMouseOver primaryImg={img5} secondaryImg={img51} alt="" />
+                        <svg onMouseOver={HandleMouseOverRepertoire} onMouseOut={HandleMouseOutRepertoire} className="svgImage" xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path className="svgPathRepertoire" d="M1.55 36.15q-.7 0-1.2-.5t-.5-1.2v-1.1q0-2.05 2.1-3.275T7.5 28.85q.5 0 1.025.025.525.025.975.075-.4.9-.6 1.85-.2.95-.2 2v3.35Zm12 0q-.7 0-1.2-.5t-.5-1.2V32.8q0-3.3 3.35-5.375T24 25.35q5.45 0 8.8 2.075 3.35 2.075 3.35 5.375v1.65q0 .7-.5 1.2t-1.2.5Zm25.75 0V32.8q0-1.05-.2-2t-.6-1.85q.45-.05.975-.075.525-.025 1.025-.025 3.4 0 5.525 1.225Q48.15 31.3 48.15 33.35v1.1q0 .7-.5 1.2t-1.2.5ZM7.5 27.4q-1.5 0-2.55-1.05Q3.9 25.3 3.9 23.8q0-1.5 1.05-2.55Q6 20.2 7.5 20.2q1.5 0 2.55 1.05 1.05 1.05 1.05 2.55 0 1.5-1.05 2.55Q9 27.4 7.5 27.4Zm33 0q-1.5 0-2.55-1.05-1.05-1.05-1.05-2.55 0-1.5 1.05-2.55Q39 20.2 40.5 20.2q1.5 0 2.55 1.05 1.05 1.05 1.05 2.55 0 1.5-1.05 2.55Q42 27.4 40.5 27.4ZM24 23.85q-2.55 0-4.35-1.775-1.8-1.775-1.8-4.375 0-2.55 1.8-4.325Q21.45 11.6 24 11.6t4.35 1.775q1.8 1.775 1.8 4.325 0 2.6-1.8 4.375T24 23.85Z"></path></svg>
                     </button>
                 </NavLink>
             </div>
             <div className="parti_four">
                 <NavLink className="parametres" to="/Parametres">
                     <button className="button" type="submit">
-                        <ImageToggleOnMouseOver primaryImg={img6} secondaryImg={img61} alt="" />
+                        <svg onMouseOver={HandleMouseOverParametres} onMouseOut={HandleMouseOutParametres} className="svgImage" xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path className="svgPathParametres" d="M27.35 44.3h-6.7q-.65 0-1.15-.4-.5-.4-.6-1.05l-.8-4.95q-.85-.3-1.85-.875T14.5 35.85l-4.55 2.1q-.6.3-1.25.1-.65-.2-.95-.8l-3.4-6.05q-.35-.55-.175-1.175T4.85 29l4.25-3.1q-.1-.4-.125-.95-.025-.55-.025-.95 0-.4.025-.95.025-.55.125-.95L4.85 19q-.5-.4-.675-1.025Q4 17.35 4.35 16.8l3.4-6.05q.35-.6.975-.8.625-.2 1.225.1l4.6 2.1q.7-.6 1.7-1.15 1-.55 1.85-.85l.8-5.05q.1-.6.6-1t1.15-.4h6.7q.65 0 1.15.4.5.4.6 1l.8 5q.85.35 1.875.875T33.5 12.15l4.55-2.1q.6-.3 1.25-.1.65.2.95.8l3.4 6q.35.55.2 1.2-.15.65-.7 1.05l-4.25 3q.1.45.125 1 .025.55.025 1 0 .45-.025.975-.025.525-.125.975L43.15 29q.5.4.675 1.025.175.625-.175 1.175l-3.4 6.05q-.35.6-.975.8-.625.2-1.225-.1l-4.6-2.1q-.7.6-1.675 1.2-.975.6-1.875.85l-.8 4.95q-.1.65-.6 1.05t-1.15.4ZM24 30.5q2.7 0 4.6-1.9 1.9-1.9 1.9-4.6 0-2.7-1.9-4.6-1.9-1.9-4.6-1.9-2.7 0-4.6 1.9-1.9 1.9-1.9 4.6 0 2.7 1.9 4.6 1.9 1.9 4.6 1.9Z"></path></svg>
                     </button>
                 </NavLink>
             </div>
diff --git a/src/pages/Analyse.js b/src/pages/Analyse.js
index 1480ef5..57ab2b4 100644
--- a/src/pages/Analyse.js
+++ b/src/pages/Analyse.js
@@ -145,7 +145,7 @@ const Analyse = () => {
                 <div className="haut_de_page">
                     <h2 className="titre">Analyse</h2>
                     <div className="rechLogo">
-                        <img className="logo" srcSet="./LogoApp.svg"/>
+                        <img className="logo" srcSet={theme === "light" ? './LogoApp.svg' : './LogoApp_light.svg'}/>
                     </div>
                 </div>
 
diff --git a/src/pages/Calendrier.js b/src/pages/Calendrier.js
index d3c5c5f..0d731d5 100644
--- a/src/pages/Calendrier.js
+++ b/src/pages/Calendrier.js
@@ -87,7 +87,7 @@ function Calendrier(){
                     <h2 className="titre">Calendrier</h2>
                     <link href='fullcalendar/main.css' rel='stylesheet' />
                     <div className="rechLogo">
-                        <img className="logo" srcSet="./LogoApp.svg"/>
+                        <img className="logo" srcSet={theme === "light" ? './LogoApp.svg' : './LogoApp_light.svg'}/>
                     </div>
                 </div>
 
@@ -96,7 +96,7 @@ function Calendrier(){
                     <div className="Calendrier">
                         <h2 className="Titre">Ajouter un évènement
                             <div className="mini_formulaire_evenement">
-                                <input className="ajout_input" type="text" placeholder="Ajoutez un titre" style={{height: "20px", width: "100%", marginRight: "10px", marginLeft: "10px",marginBottom: "10px"}} 
+                                <input className="ajout_input" type="text" placeholder="Ajoutez un titre" style={{height: "20px", marginRight: "10px", marginLeft: "10px",marginBottom: "10px"}} 
                                 onChange={(e) => setTitre(e.target.value)} />
                                 <input className='date' type="date" placeholder="Ajoutez un jour" style={{height: "70%", width: "90%", marginRight: "10px", marginLeft: "10px", marginBottom: "10px", borderRadius: "10px"}} 
                                 onChange={(e) => setJour(e.target.value)} />
diff --git a/src/pages/Compte.js b/src/pages/Compte.js
index 5f0b07c..fa57d5c 100644
--- a/src/pages/Compte.js
+++ b/src/pages/Compte.js
@@ -53,7 +53,7 @@ function Compte() {
                 <div className="haut_de_page">
                     <h2 className="titre">Mon Compte</h2>
                     <div className="rechLogo">
-                        <img className="logo" srcSet="./LogoApp.svg" />
+                        <img className="logo" srcSet={theme === "light" ? './LogoApp.svg' : './LogoApp_light.svg'}/>
                     </div>
                 </div>
                 <div className="bas_de_page">
diff --git a/src/pages/Dashboard.js b/src/pages/Dashboard.js
index 44e3efb..73d8c92 100644
--- a/src/pages/Dashboard.js
+++ b/src/pages/Dashboard.js
@@ -1,24 +1,24 @@
-import React, {useState,useEffect} from 'react';
+import React, { useState, useEffect } from 'react';
 import NavigationDashboard from '../components/NavigationDashboard';
 import Session from 'react-session-api';
 import axios from 'axios';
 
 const api = axios.create({
     baseURL: 'http://localhost:8080'
-  })
+})
 
-function Dashboard(){
+function Dashboard() {
 
-    const [infoContactRecent, setInfoContactRecent] = useState([]); 
-    const [datakey, setDataKey] = useState([]); 
-    const [infoBestCustomer, setinfoBestCustomer] = useState([]); 
+    const [infoContactRecent, setInfoContactRecent] = useState([]);
+    const [datakey, setDataKey] = useState([]);
+    const [infoBestCustomer, setinfoBestCustomer] = useState([]);
 
-    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"))
     }
 
-    useEffect(() =>{
+    useEffect(() => {
 
         const date = new Date();
         date.setMonth(date.getMonth() - 1);
@@ -46,13 +46,13 @@ function Dashboard(){
         <body className={theme}>
 
             <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"></link>
-            
+
             <div className="page_dashboard">
                 {/* Create an account page */}
                 <div className="haut_de_page">
                     <h2 className="titre">Dashboard</h2>
                     <div className="rechLogo">
-                        <img className="logo" srcSet="./LogoApp.svg"/>
+                        <img className="logo" srcSet={theme === "light" ? './LogoApp.svg' : './LogoApp_light.svg'} />
                     </div>
                 </div>
                 <div className="bas_de_page">
@@ -106,7 +106,7 @@ function Dashboard(){
                                 ))}
                             </div>
                         </div>
-                    </div>             
+                    </div>
                 </div>
             </div>
         </body>
diff --git a/src/pages/MailPourAdmin.js b/src/pages/MailPourAdmin.js
index c44542e..667315d 100644
--- a/src/pages/MailPourAdmin.js
+++ b/src/pages/MailPourAdmin.js
@@ -62,7 +62,7 @@ const MailPourAdmin = () => {
 
             <div className="page_mailAdmin">
                 <div className="haut_de_page">
-                    <h2 className="titre">Avertir un administrateur</h2>
+                    <h2 className="titre">Signaler un problème</h2>
                     <div className="rechLogo">
                         <img className="logo" srcSet="./LogoApp.svg" />
                     </div>
@@ -72,12 +72,12 @@ const MailPourAdmin = () => {
                     <form className="form" onSubmit={sendMail}>
                         <div className="Mail">
                             <div className="object">
-                                <p className="name">Objet</p>
-                                <input name="objet" type="text" placeholder="Objet de l'alerte" />
+                                <h3 className="name">Objet</h3>
+                                <input name="objet" type="text" placeholder="Objet de l'alerte" className="inputObjet"/>
                             </div>
                             <div className="value">
-                                <p className="name">Raison</p>
-                                <textarea name="raison" placeholder="Raison de l'alerte" rows="10" cols="180" />
+                                <h3 className="name">Raison</h3>
+                                <textarea name="raison" placeholder="Raison de l'alerte" rows="10" cols="180" className="inputArea"/>
 
                             </div>
                             <p>{mailError === true?"Le mail n'a pas pu être envoyé":''}</p>
diff --git a/src/pages/Parametres.js b/src/pages/Parametres.js
index 04c90ba..cc4fceb 100644
--- a/src/pages/Parametres.js
+++ b/src/pages/Parametres.js
@@ -24,7 +24,7 @@ const Parametre = () => {
                 <div className="haut_de_page">
                     <h2 className="titre">Paramètres</h2>
                     <div className="rechLogo">
-                        <img className="logo" srcSet="./LogoApp.svg"/>
+                        <img className="logo" srcSet={theme === "light" ? './LogoApp.svg' : './LogoApp_light.svg'}/>
                     </div>
                 </div>
                 <div className="bas_de_page">
diff --git a/src/pages/Repertoire.js b/src/pages/Repertoire.js
index f3ca6df..6aa5662 100644
--- a/src/pages/Repertoire.js
+++ b/src/pages/Repertoire.js
@@ -48,7 +48,7 @@ function Repertoire() {
                 <div className="haut_de_page">
                     <h2 className="titre">Repertoire</h2>
                     <div className="rechLogo">
-                        <img className="logo" srcSet="./LogoApp.svg" />
+                        <img className="logo" srcSet={theme === "light" ? './LogoApp.svg' : './LogoApp_light.svg'}/>
                     </div>
                 </div>
                 <div className="bas_de_page">
@@ -65,10 +65,10 @@ function Repertoire() {
                                 <button className="boutonAddContact">Ajouter</button>
                             </NavLink>
                         </span>
-                        <TableContainer component={Paper} className="tabListContact">
+                        <TableContainer component={Paper} className="tabListContact" style={{color: '#fff'}}>
                             <Table>
                                 <TableHead>
-                                    <TableRow>
+                                    <TableRow className="headerListe">
                                         <TableCell>Photo</TableCell>
                                         <TableCell>Nom</TableCell>
                                         <TableCell>Prénom</TableCell>
diff --git a/src/styles/components/_analyse.scss b/src/styles/components/_analyse.scss
index 4f55914..f41865a 100644
--- a/src/styles/components/_analyse.scss
+++ b/src/styles/components/_analyse.scss
@@ -19,7 +19,8 @@ body {
             align-items: center;
             margin: 10px 10px 5px 10px;
             
-            background: rgba(255, 255, 255, 0.3);
+            background: rgba(255, 255, 255, 1);
+            border: 1px solid #cbd0dd;
             border-radius: 5px;
             backdrop-filter: blur(3px);
             -webkit-backdrop-filter: blur(15px);
@@ -57,7 +58,9 @@ body {
                 width: 5%;
                 margin: 5px 5px 10px 10px;
 
-                background: rgba(255, 255, 255, 0.3);
+                background: rgba(255, 255, 255, 1);
+                border: 1px solid #cbd0dd;
+
                 border-radius: 5px;
                 backdrop-filter: blur(3px);
                 -webkit-backdrop-filter: blur(15px);
@@ -129,8 +132,8 @@ body {
                     justify-content: space-between;
                     width: 49.75%;
                     height: auto;
-
-                    background: rgba(255, 255, 255, 0.3);
+                    border: 1px solid #cbd0dd;
+                    background: rgba(255, 255, 255, 1);
                     border-radius: 5px;
                     backdrop-filter: blur(3px);
                     -webkit-backdrop-filter: blur(15px);
@@ -149,8 +152,8 @@ body {
                         margin: auto;
                         padding: 25px;
                         font-size: 40px;
-
-                        background: rgba(255, 255, 255, 0.3);
+                        border: 1px solid #cbd0dd;
+                        background: rgba(255, 255, 255, 1);
                         border-radius: 15px;
                         backdrop-filter: blur(3px);
                         -webkit-backdrop-filter: blur(15px);
@@ -172,8 +175,8 @@ body {
                     justify-content: space-between;
                     width: 49.75%;
                     height: auto;
-
-                    background: rgba(255, 255, 255, 0.3);
+                    border: 1px solid #cbd0dd;
+                    background: rgba(255, 255, 255, 1);
                     border-radius: 5px;
                     backdrop-filter: blur(3px);
                     -webkit-backdrop-filter: blur(15px);
@@ -191,8 +194,8 @@ body {
                         margin: auto;
                         padding: 30px;
                         font-size: 40px;
-
-                        background: rgba(255, 255, 255, 0.3);
+                        border: 1px solid #cbd0dd;
+                        background: rgba(255, 255, 255, 1);
                         border-radius: 15px;
                         backdrop-filter: blur(3px);
                         -webkit-backdrop-filter: blur(15px);
diff --git a/src/styles/components/_calendrier.scss b/src/styles/components/_calendrier.scss
index 388a349..6812f9b 100644
--- a/src/styles/components/_calendrier.scss
+++ b/src/styles/components/_calendrier.scss
@@ -17,7 +17,9 @@ body {
             align-items: center;
             margin: 10px 10px 5px 10px;
 
-            background: rgba(255, 255, 255, 0.3);
+            background: rgba(255, 255, 255, 1);
+            border: 1px solid #cbd0dd;
+
             border-radius: 5px;
             backdrop-filter: blur(3px);
             -webkit-backdrop-filter: blur(15px);
@@ -55,7 +57,9 @@ body {
                 width: 5%;
                 margin: 5px 5px 10px 10px;
 
-                background: rgba(255, 255, 255, 0.3);
+                background: rgba(255, 255, 255, 1);
+                border: 1px solid #cbd0dd;
+
                 border-radius: 5px;
                 backdrop-filter: blur(3px);
                 -webkit-backdrop-filter: blur(15px);
@@ -116,7 +120,9 @@ body {
             .Calendrier {
                 display: flex;
                 flex-direction: row;
-                background: rgba(255, 255, 255, 0.3);
+                background: rgba(255, 255, 255, 1);
+                border: 1px solid #cbd0dd;
+
                 border-radius: 5px;
                 backdrop-filter: blur(3px);
                 -webkit-backdrop-filter: blur(15px);
@@ -133,6 +139,8 @@ body {
                     -webkit-backdrop-filter: blur(15px);
                     padding-top: 10px;
                     padding-bottom: 10px;
+                    border-right: 1px solid #cbd0dd;
+
 
                     .mini_formulaire_evenement {
                         display: flex;
@@ -142,7 +150,6 @@ body {
 
                         .ajout_input {
                             position: relative;
-                            width: 100%;
                             height: 100%;
                             outline: none;
                             border: none;
@@ -150,12 +157,18 @@ body {
                             font-size: 16px;
                             font-weight: 400;
                             color: rgb(90, 90, 90);
-                            border: 1px solid rgba(50, 55, 72, 1);
+                            border: 1px solid #cbd0dd;
                             padding: 1rem 1rem;
-                            margin-right: 10px;
+                            font-size: 13px;
+                            margin: 10px;
+                        }
+                        .date {
+                            border: 1px solid #cbd0dd;
+
                         }
                         .select {
-                            border: 1px solid rgba(50, 55, 72, 1);
+                            all: none;
+                            border: 1px solid #cbd0dd;
                             border-radius: 10px;
                             margin-left: 10px;
                             margin-right: 8px;
@@ -172,16 +185,20 @@ body {
                         width: 75%;
                         height: 50px;
                         border-radius: 10px;
-                        background-color: rgba(163, 163, 163, 0.371);
-                        border: 1px solid rgba(255, 255, 255, 0.1);
+                        background: rgba(37, 176, 3, 0.14);
+                        border: 1px solid;
                         backdrop-filter: blur(30px);
-                        color: rgb(255, 255, 255);
+                        color: #90d67f;
+                        margin-top: 10px;
+                        border-color: rgba(37, 176, 3, 0.14);
+
                         cursor: pointer;
                         font-size: 15px;
 
                         &:hover {
-                            background-color: rgba(114, 114, 114, 0.371);
-                        }
+                            color: #90d67f;
+                            background: rgba(37, 176, 3, 0.2);
+                            border-color: rgba(167, 223, 153, 0.226);                        }
 
                         &:active {
                             background-color: rgba(68, 68, 68, 0.972);
diff --git a/src/styles/components/_compte.scss b/src/styles/components/_compte.scss
index dac10ea..5a6295a 100644
--- a/src/styles/components/_compte.scss
+++ b/src/styles/components/_compte.scss
@@ -17,7 +17,8 @@ body {
             align-items: center;
             margin: 10px 10px 5px 10px;
 
-            background: rgba(255, 255, 255, 0.3);
+            background: rgba(255, 255, 255, 1);
+            border: 1px solid #cbd0dd;
             border-radius: 5px;
             backdrop-filter: blur(3px);
             -webkit-backdrop-filter: blur(15px);
@@ -55,7 +56,9 @@ body {
                 width: 5%;
                 margin: 5px 5px 10px 10px;
 
-                background: rgba(255, 255, 255, 0.3);
+                background: rgba(255, 255, 255, 1);
+                border: 1px solid #cbd0dd;
+
                 border-radius: 5px;
                 backdrop-filter: blur(3px);
                 -webkit-backdrop-filter: blur(15px);
@@ -122,7 +125,9 @@ body {
                 height: auto;
                 margin: 5px 10px 10px 5px;
 
-                background: rgba(255, 255, 255, 0.3);
+                background: rgba(255, 255, 255, 1);
+                border: 1px solid #cbd0dd;
+
                 border-radius: 5px;
                 backdrop-filter: blur(3px);
                 -webkit-backdrop-filter: blur(15px);
@@ -154,6 +159,8 @@ body {
                             height: 135px;
                             width: 135px;
                             background: rgba(255, 255, 255, 0.1);
+                            border: 1px solid #cbd0dd;
+
                             border-radius: 100px;
                             backdrop-filter: blur(3px);
                             -webkit-backdrop-filter: blur(15px);
diff --git a/src/styles/components/_dashboard.scss b/src/styles/components/_dashboard.scss
index c9b3b6a..b0ea49a 100644
--- a/src/styles/components/_dashboard.scss
+++ b/src/styles/components/_dashboard.scss
@@ -18,7 +18,8 @@ body {
             align-items: center;
             margin: 10px 10px 5px 10px;
             
-            background: rgba(255, 255, 255, 0.3);
+            background: rgba(255, 255, 255, 1);
+            border: 1px solid #cbd0dd;
             border-radius: 5px;
             backdrop-filter: blur(3px);
             -webkit-backdrop-filter: blur(15px);
@@ -56,7 +57,9 @@ body {
                 width: 5%;
                 margin: 5px 5px 10px 10px;
 
-                background: rgba(255, 255, 255, 0.3);
+                background: rgba(255, 255, 255, 1);
+                border: 1px solid #cbd0dd;
+
                 border-radius: 5px;
                 -webkit-backdrop-filter: blur(15px);
 
@@ -139,7 +142,9 @@ body {
                             width: 40%;
                             height: auto;
                             
-                            background: rgba(255, 255, 255, 0.3);
+                            background: rgba(255, 255, 255, 1);
+                            border: 1px solid #cbd0dd;
+
                             border-radius: 5px;
                             backdrop-filter: blur(3px);
                             -webkit-backdrop-filter: blur(15px);
@@ -150,7 +155,9 @@ body {
                             width: 58.5%;
                             height: auto;
 
-                            background: rgba(255, 255, 255, 0.3);
+                            background: rgba(255, 255, 255, 1);
+                            border: 1px solid #cbd0dd;
+
                             border-radius: 5px;
                             backdrop-filter: blur(3px);
                             -webkit-backdrop-filter: blur(15px);
@@ -168,8 +175,9 @@ body {
                             display: flex;
                             width: 45%;
                             height: auto;
+                            border: 1px solid #cbd0dd;
 
-                            background: rgba(255, 255, 255, 0.3);
+                            background: rgba(255, 255, 255, 1);
                             border-radius: 5px;
                             backdrop-filter: blur(3px);
                             -webkit-backdrop-filter: blur(15px);
@@ -193,8 +201,9 @@ body {
                                     display: flex;
                                     width: auto;
                                     height: 53%;
+                                    border: 1px solid #cbd0dd;
 
-                                    background: rgba(255, 255, 255, 0.3);
+                                    background: rgba(255, 255, 255, 1);
                                     border-radius: 5px;
                                     backdrop-filter: blur(3px);
                                     -webkit-backdrop-filter: blur(15px);                                    
@@ -204,8 +213,9 @@ body {
                                     display: flex;
                                     width: auto;
                                     height: 43%;
+                                    border: 1px solid #cbd0dd;
 
-                                    background: rgba(255, 255, 255, 0.3);
+                                    background: rgba(255, 255, 255, 1);
                                     border-radius: 5px;
                                     backdrop-filter: blur(3px);
                                     -webkit-backdrop-filter: blur(15px);
@@ -223,8 +233,9 @@ body {
                                     display: flex;
                                     width: auto;
                                     height: 46%;
+                                    border: 1px solid #cbd0dd;
 
-                                    background: rgba(255, 255, 255, 0.3);
+                                    background: rgba(255, 255, 255, 1);
                                     border-radius: 5px;
                                     backdrop-filter: blur(3px);
                                     -webkit-backdrop-filter: blur(15px);                                    
@@ -234,8 +245,9 @@ body {
                                     display: flex;
                                     width: auto;
                                     height: 50%;
+                                    border: 1px solid #cbd0dd;
 
-                                    background: rgba(255, 255, 255, 0.3);
+                                    background: rgba(255, 255, 255, 1);
                                     border-radius: 5px;
                                     backdrop-filter: blur(3px);
                                     -webkit-backdrop-filter: blur(15px);
@@ -255,8 +267,9 @@ body {
                         display: flex;
                         width: auto;
                         height: 64%;
+                        border: 1px solid #cbd0dd;
                         
-                        background: rgba(255, 255, 255, 0.3);
+                        background: rgba(255, 255, 255, 1);
                         border-radius: 5px;
                         backdrop-filter: blur(3px);
                         -webkit-backdrop-filter: blur(15px);
@@ -266,8 +279,9 @@ body {
                         display: flex;
                         width: auto;
                         height: 34%;
+                        border: 1px solid #cbd0dd;
                         
-                        background: rgba(255, 255, 255, 0.3);
+                        background: rgba(255, 255, 255, 1);
                         border-radius: 5px;
                         backdrop-filter: blur(3px);
                         -webkit-backdrop-filter: blur(15px);
diff --git a/src/styles/components/_mailPourAdmin.scss b/src/styles/components/_mailPourAdmin.scss
index 8b55aee..f4a0ccc 100644
--- a/src/styles/components/_mailPourAdmin.scss
+++ b/src/styles/components/_mailPourAdmin.scss
@@ -19,9 +19,9 @@ body {
             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.37);
+            background: rgba(255, 255, 255, 1);
+            border: 1px solid #cbd0dd;
+            border-radius: 5px;
             backdrop-filter: blur(3px);
             -webkit-backdrop-filter: blur(15px);
 
@@ -58,9 +58,9 @@ body {
                 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.37);
+                background: rgba(255, 255, 255, 1);
+                border: 1px solid #cbd0dd;
+                border-radius: 5px;
                 backdrop-filter: blur(3px);
                 -webkit-backdrop-filter: blur(15px);
 
@@ -122,13 +122,12 @@ body {
                 display: flex;
                 flex-direction: column;
                 justify-content: space-evenly;
-                width: 94.3%;
                 height: auto;
                 margin: 5px 10px 10px 5px;
 
-                background: rgba(255, 255, 255, 0.3);
-                border-radius: 15px;
-                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+                background: rgba(255, 255, 255, 1);
+                border: 1px solid #cbd0dd;
+                border-radius: 5px;
                 backdrop-filter: blur(3px);
                 -webkit-backdrop-filter: blur(15px);
 
@@ -141,14 +140,23 @@ body {
                     height: 40%;
 
                     background: rgba(255, 255, 255, 0.1);
-                    border-radius: 15px;
-                    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+                    border-radius: 5px;
                     backdrop-filter: blur(3px);
                     -webkit-backdrop-filter: blur(15px);
 
-                    .input {
-                        margin: 13px;
-                        width: 65%;
+                    .inputObjet{
+                        width: 100%;
+                        height: 100%;
+                        padding: 10px;
+                        outline: none;
+                        border: none;
+                        border-radius: .375rem;
+                        font-size: 16px;
+                        font-weight: 400;
+                        color: #333;
+                        border: 1px solid #cbd0dd;
+                        height: 30px;
+                        margin-top: 13px;
                     }
 
                 }
@@ -164,15 +172,23 @@ body {
                     height: 40%;
 
                     background: rgba(255, 255, 255, 0.1);
-                    border-radius: 15px;
-                    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+                    border-radius: 5px;
                     backdrop-filter: blur(3px);
                     -webkit-backdrop-filter: blur(15px);
 
-                    .textArea {
+                    .inputArea {
                         resize: none;
-                        margin: 13px;
-
+                        width: 100%;
+                        height: 100%;
+                        padding: 10px;
+                        outline: none;
+                        border: none;
+                        border-radius: .375rem;
+                        font-size: 16px;
+                        font-weight: 400;
+                        color: #333;
+                        border: 1px solid #cbd0dd;
+                        margin-top: 13px;
                     }
                 }
 
@@ -185,14 +201,40 @@ body {
                     height: 15%;
 
                     background: rgba(255, 255, 255, 0.1);
-                    border-radius: 15px;
-                    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+                    border-radius: 5px;
                     backdrop-filter: blur(3px);
                     -webkit-backdrop-filter: blur(15px);
                     
                     .button {
-                        width: 20%;
-                        margin: 13px;
+                        cursor: pointer;
+                        color: #141824;
+                        background: #f5f7fa;
+                        border-radius: 0.375rem;
+                        padding: 0.5rem 1rem;
+                        border: 1px solid #cbd0dd;
+
+                        &:hover {
+                            color: #141824;
+                            background: #e3e6ed;
+                            border-color: #cbd0dd;
+                        }
+
+                        &:focus {
+                            box-shadow: 0 0 0 0.2rem rgba(211, 214, 218, 0.5);
+                        }
+
+                        &:active {
+                            color: #000000;
+                            background: #f7f9fb;
+                            border-color: #f6f8fb;
+                            box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0);
+                        }
+
+                        &:disabled {
+                            color: #000000;
+                            background: #f5f7fa;
+                            border-color: #f5f7fa;
+                        }
                     }
                 }
             }
diff --git a/src/styles/components/_parametre.scss b/src/styles/components/_parametre.scss
index dd5a011..2515796 100644
--- a/src/styles/components/_parametre.scss
+++ b/src/styles/components/_parametre.scss
@@ -19,7 +19,8 @@ body {
             align-items: center;
             margin: 10px 10px 5px 10px;
 
-            background: rgba(255, 255, 255, 0.3);
+            background: rgba(255, 255, 255, 1);
+            border: 1px solid #cbd0dd;
             border-radius: 5px;
             backdrop-filter: blur(3px);
             -webkit-backdrop-filter: blur(15px);
@@ -57,7 +58,9 @@ body {
                 width: 5%;
                 margin: 5px 5px 10px 10px;
 
-                background: rgba(255, 255, 255, 0.3);
+                background: rgba(255, 255, 255, 1);
+                border: 1px solid #cbd0dd;
+
                 border-radius: 5px;
                 backdrop-filter: blur(3px);
                 -webkit-backdrop-filter: blur(15px);
@@ -131,7 +134,9 @@ body {
                     height: 28.5%;
                     padding: 10px;
 
-                    background: rgba(255, 255, 255, 0.3);
+                    background: rgba(255, 255, 255, 1);
+                    border: 1px solid #cbd0dd;
+
                     border-radius: 5px;
                     backdrop-filter: blur(3px);
                     -webkit-backdrop-filter: blur(15px);
@@ -141,7 +146,7 @@ body {
                         flex-direction: row;
                         justify-content: space-between;
                         height: 50%;
-                        border-bottom: 1px solid black;
+                        border-bottom: 1px solid #cbd0dd;
 
                         .text_one_haut {
                             font-size: 20px;
@@ -155,7 +160,7 @@ body {
                         justify-content: space-between;
                         padding: 9px;
                         height: 25%;
-                        border-bottom: 1px solid black;
+                        border-bottom: 1px solid #cbd0dd;
 
                         .text_one_milieu {
                             margin-top: 8px;
@@ -262,7 +267,9 @@ body {
                     height: 28.5%;
                     padding: 10px;
 
-                    background: rgba(255, 255, 255, 0.3);
+                    background: rgba(255, 255, 255, 1);
+                    border: 1px solid #cbd0dd;
+
                     border-radius: 5px;
                     backdrop-filter: blur(3px);
                     -webkit-backdrop-filter: blur(15px);
@@ -270,7 +277,7 @@ body {
                     .two_haut {
                         display: flex;
                         height: 75%;
-                        border-bottom: 1px solid black;
+                        border-bottom: 1px solid #cbd0dd;
 
                         .text_two_haut {
                             font-size: 20px;
@@ -335,8 +342,9 @@ body {
                     width: auto;
                     height: 40%;
 
-                    background: rgba(255, 255, 255, 0.3);
+                    background: rgba(255, 255, 255, 1);
                     border-radius: 5px;
+                    border: 1px solid #cbd0dd;
                     backdrop-filter: blur(3px);
                     -webkit-backdrop-filter: blur(15px);
 
@@ -355,7 +363,7 @@ body {
                         margin-right: 10px;
                         padding: 10px;
 
-                        border-top: 1px solid black;
+                        border-top: 1px solid #cbd0dd;
 
                         .text_three {
                             display: flex;
diff --git a/src/styles/components/_repertoire.scss b/src/styles/components/_repertoire.scss
index b655e44..ca03db9 100644
--- a/src/styles/components/_repertoire.scss
+++ b/src/styles/components/_repertoire.scss
@@ -17,7 +17,9 @@ body {
             align-items: center;
             margin: 10px 10px 5px 10px;
 
-            background: rgba(255, 255, 255, 0.3);
+            background: rgba(255, 255, 255, 1);
+            border: 1px solid #cbd0dd;
+
             border-radius: 5px;
             backdrop-filter: blur(3px);
             -webkit-backdrop-filter: blur(15px);
@@ -95,8 +97,9 @@ body {
                 align-items: center;
                 width: 5%;
                 margin: 5px 5px 10px 10px;
+                border: 1px solid #cbd0dd;
 
-                background: rgba(255, 255, 255, 0.3);
+                background: rgba(255, 255, 255, 1);
                 border-radius: 5px;
                 -webkit-backdrop-filter: blur(15px);
 
@@ -227,6 +230,8 @@ body {
                         font-size: 16px;
                         font-weight: 400;
                         color: rgb(90, 90, 90);
+                        border: 1px solid #cbd0dd;
+
                     }
 
                     .search {
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index f291355..5c9cca6 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -50,18 +50,24 @@ li {
 
 .dark {
     background-color: $xiketic;
-    color: white;
+    color: rgb(159, 166, 188);
 
     .page_analyse {
         .haut_de_page {
             background: rgba(21, 24, 35, 1);
             border: 1px solid rgba(50, 55, 72, 1);
+            .titre {
+                color: rgb(159, 166, 188);
+            }
         }
 
         .bas_de_page {
             .nav_bar_verticale {
                 background: rgba(21, 24, 35, 1);
                 border: 1px solid rgba(50, 55, 72, 1);
+                .svgImage {
+                    fill: rgb(159, 166, 188);
+                }
             }
 
             .Analyse {
@@ -72,6 +78,10 @@ li {
                     .Stat-1_titre p {
                         background-color: rgba(21, 24, 35, 1);
                         border: 1px solid rgba(50, 55, 72, 1);
+                        color: rgb(159, 166, 188);
+                    }
+                    canvas {
+                        color: rgb(159, 166, 188);
                     }
                 }
 
@@ -82,6 +92,7 @@ li {
                     .Stat-2_titre p {
                         background-color: rgba(21, 24, 35, 1);
                         border: 1px solid rgba(50, 55, 72, 1);
+                        color: rgb(159, 166, 188);
                     }
                 }
             }
@@ -93,19 +104,30 @@ li {
         .haut_de_page {
             background: rgba(21, 24, 35, 1);
             border: 1px solid rgba(50, 55, 72, 1);
+            .titre{
+                color: rgb(159, 166, 188);
+            }
         }
 
         .bas_de_page {
             .nav_bar_verticale {
                 background: rgba(21, 24, 35, 1);
                 border: 1px solid rgba(50, 55, 72, 1);
+                .svgImage {
+                    fill: rgb(159, 166, 188);
+                }
             }
 
             .Parametre {
                 .one {
                     background: rgba(21, 24, 35, 1);
                     border: 1px solid rgba(50, 55, 72, 1);
+                    color: rgb(159, 166, 188);
+                    .one_haut {
+                        border-color: rgba(50, 55, 72, 1);
+                    }
                     .one_milieu{
+                        border-color: rgba(50, 55, 72, 1);
                         .bouton_submit{
                             .bouton_signalerPB{
                                 color: #cbd0dd;
@@ -173,12 +195,18 @@ li {
                 .two {
                     background: rgba(21, 24, 35, 1);
                     border: 1px solid rgba(50, 55, 72, 1);
+                    color: rgb(159, 166, 188);
+                    .two_haut {
+                        border-color: rgba(50, 55, 72, 1);
+                    }
                 }
 
                 .three {
                     background: rgba(21, 24, 35, 1);
                     border: 1px solid rgba(50, 55, 72, 1);
+                    color: rgb(159, 166, 188);
                     .déconnexion{
+                        border-color: rgba(50, 55, 72, 1);
                         .bouton{
                             color: #cbd0dd;
                                 background: rgba(49, 55, 74, 0.5);
@@ -216,12 +244,18 @@ li {
         .haut_de_page {
             background: rgba(21, 24, 35, 1);
             border: 1px solid rgba(50, 55, 72, 1);
+            .titre{
+                color: rgb(159, 166, 188);
+            }
         }
 
         .bas_de_page {
             .nav_bar_verticale {
                 background: rgba(21, 24, 35, 1);
                 border: 1px solid rgba(50, 55, 72, 1);
+                .svgImage {
+                    fill: rgb(159, 166, 188);
+                }
             }
 
             .Compte {
@@ -231,8 +265,10 @@ li {
                 .name_picture {
                     background: rgba(21, 24, 35, 1);
                     border: 1px solid rgba(50, 55, 72, 1);
+                    color: rgb(159, 166, 188);
 
                     .picture {
+                        border-color: rgba(50, 55, 72, 1);
                         #display_image {
                             border: 1px solid rgba(50, 55, 72, 1);
                         }
@@ -273,11 +309,19 @@ li {
                 .infoPerso {
                     background: rgba(21, 24, 35, 1);
                     border: 1px solid rgba(50, 55, 72, 1);
+                    color: rgb(159, 166, 188);
+                    .description, .parti_pays,.parti_mail { 
+                        border-color: rgba(50, 55, 72, 1);
+                    }
                 }
 
                 .infoEntreprise {
                     background: rgba(21, 24, 35, 1);
                     border: 1px solid rgba(50, 55, 72, 1);
+                    color: rgb(159, 166, 188);
+                    .description, .parti_name,.parti_secteurAct { 
+                        border-color: rgba(50, 55, 72, 1);
+                    }
                 }
             }
         }
@@ -288,12 +332,18 @@ li {
         .haut_de_page {
             background: rgba(21, 24, 35, 1);
             border: 1px solid rgba(50, 55, 72, 1);
+            .titre{
+                color: rgb(159, 166, 188);
+            }
         }
 
         .bas_de_page {
             .nav_bar_verticale {
                 background: rgba(21, 24, 35, 1);
                 border: 1px solid rgba(50, 55, 72, 1);
+                .svgImage {
+                    fill: rgb(159, 166, 188);
+                }
             }
 
         }
@@ -354,6 +404,19 @@ li {
             .tabListContact {
                 background: rgba(21, 24, 35, 1);
                 border: 1px solid rgba(50, 55, 72, 1);
+                color: rgb(159, 166, 188);
+                th {
+                    color: rgb(159, 166, 188);
+                }
+                td {
+                    color: rgb(159, 166, 188);
+                }
+                tr {
+                    border-color: rgba(50, 55, 72, 1);
+                    &:hover {
+                        background-color: rgba(49, 55, 74, 0.5);
+                    }
+                }
             }
         }
     }
@@ -362,12 +425,18 @@ li {
         .haut_de_page {
             background: rgba(21, 24, 35, 1);
             border: 1px solid rgba(50, 55, 72, 1);
+            .titre{
+                color: rgb(159, 166, 188);
+            }
         }
 
         .bas_de_page {
             .nav_bar_verticale {
                 background: rgba(21, 24, 35, 1);
                 border: 1px solid rgba(50, 55, 72, 1);
+                .svgImage {
+                    fill: rgb(159, 166, 188);
+                }
             }
 
             .Calendrier {
@@ -377,6 +446,7 @@ li {
                 .Titre {
                     background: rgba(21, 24, 35, 1);
                     border-right: 1px solid rgba(50, 55, 72, 1);
+                    color: rgb(159, 166, 188);
 
                     .mini_formulaire_evenement {
                         .ajout_input {
@@ -392,19 +462,6 @@ li {
                         }
 
                     }
-
-                    .bouton_ajout {
-                        margin-top: 10px;
-                        color: #90d67f;
-                        background: rgba(37, 176, 3, 0.14);
-                        border-color: rgba(37, 176, 3, 0.14);
-
-                        &:hover {
-                            color: #90d67f;
-                            background: rgba(37, 176, 3, 0.2);
-                            border-color: rgba(167, 223, 153, 0.226);
-                        }
-                    }
                 }
             }
         }
@@ -420,6 +477,9 @@ li {
             .nav_bar_verticale {
                 background: rgba(21, 24, 35, 1);
                 border: 1px solid rgba(50, 55, 72, 1);
+                .svgImage {
+                    fill: rgb(159, 166, 188);
+                }
             }
 
             .Dashboard {