refonte css theme noir+ mise en place DA bouton

package-lock.json

@@ -21,6 +21,7 @@
         "@testing-library/user-event": "^13.5.0",
         "addeventlistener": "^2.0.0",
         "axios": "^1.2.1",
+        "bootstrap": "^5.2.3",
         "chart": "^0.1.2",
         "chart.js": "^4.0.1",
         "crypto-js": "^4.1.1",
@@ -30,6 +31,7 @@
         "pg": "^8.8.0",
         "react": "^18.2.0",
         "react-big-calendar": "^1.5.0",
+        "react-bootstrap": "^2.7.0",
         "react-chartjs-2": "^5.0.1",
         "react-datepicker": "^4.8.0",
         "react-dom": "^18.2.0",
@@ -4154,6 +4156,17 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@react-aria/ssr": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.4.0.tgz",
+      "integrity": "sha512-qzuGk14/fUyUAoW/EBwgFcuMkVNXJVGlezTgZ1HovpCZ+p9844E7MUFHE7CuzFzPEIkVeqhBNIoIu+VJJ8YCOA==",
+      "dependencies": {
+        "@babel/runtime": "^7.6.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
     "node_modules/@remix-run/router": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.4.tgz",
@@ -4173,6 +4186,26 @@
         "react": ">=16.8.0"
       }
     },
+    "node_modules/@restart/ui": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.4.1.tgz",
+      "integrity": "sha512-J7wFOx2DcmkBqCqiZgDsggLO7faiNh4Nv1/v80FmbRgP+MYpwaVDKKXLC69DA4+ejgNIsBP5ORtC74EZqO1j8A==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@popperjs/core": "^2.11.5",
+        "@react-aria/ssr": "^3.2.0",
+        "@restart/hooks": "^0.4.7",
+        "@types/warning": "^3.0.0",
+        "dequal": "^2.0.2",
+        "dom-helpers": "^5.2.0",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -6350,6 +6383,24 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
     },
+    "node_modules/bootstrap": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
+      "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.6"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -16584,6 +16635,23 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/prop-types-extra": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "dependencies": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=0.14.0"
+      }
+    },
+    "node_modules/prop-types-extra/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/prop-types/node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -16795,6 +16863,35 @@
         "react-dom": "^16.14.0 || ^17 || ^18"
       }
     },
+    "node_modules/react-bootstrap": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.7.0.tgz",
+      "integrity": "sha512-Jcrn6aUuRVBeSB6dzKODKZU1TONOdhAxu0IDm4Sv74SJUm98dMdhSotF2SNvFEADANoR+stV+7TK6SNX1wWu5w==",
+      "dependencies": {
+        "@babel/runtime": "^7.17.2",
+        "@restart/hooks": "^0.4.6",
+        "@restart/ui": "^1.4.1",
+        "@types/react-transition-group": "^4.4.4",
+        "classnames": "^2.3.1",
+        "dom-helpers": "^5.2.1",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.8.1",
+        "prop-types-extra": "^1.1.0",
+        "react-transition-group": "^4.4.2",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.14.8",
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-chartjs-2": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.0.1.tgz",
@@ -22853,6 +22950,14 @@
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
       "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw=="
     },
+    "@react-aria/ssr": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.4.0.tgz",
+      "integrity": "sha512-qzuGk14/fUyUAoW/EBwgFcuMkVNXJVGlezTgZ1HovpCZ+p9844E7MUFHE7CuzFzPEIkVeqhBNIoIu+VJJ8YCOA==",
+      "requires": {
+        "@babel/runtime": "^7.6.2"
+      }
+    },
     "@remix-run/router": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.4.tgz",
@@ -22866,6 +22971,22 @@
         "dequal": "^2.0.2"
       }
     },
+    "@restart/ui": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.4.1.tgz",
+      "integrity": "sha512-J7wFOx2DcmkBqCqiZgDsggLO7faiNh4Nv1/v80FmbRgP+MYpwaVDKKXLC69DA4+ejgNIsBP5ORtC74EZqO1j8A==",
+      "requires": {
+        "@babel/runtime": "^7.18.3",
+        "@popperjs/core": "^2.11.5",
+        "@react-aria/ssr": "^3.2.0",
+        "@restart/hooks": "^0.4.7",
+        "@types/warning": "^3.0.0",
+        "dequal": "^2.0.2",
+        "dom-helpers": "^5.2.0",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      }
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -24514,6 +24635,12 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
     },
+    "bootstrap": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
+      "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
+      "requires": {}
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -31817,6 +31944,22 @@
         }
       }
     },
+    "prop-types-extra": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "requires": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        }
+      }
+    },
     "proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -31966,6 +32109,25 @@
         "uncontrollable": "^7.2.1"
       }
     },
+    "react-bootstrap": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.7.0.tgz",
+      "integrity": "sha512-Jcrn6aUuRVBeSB6dzKODKZU1TONOdhAxu0IDm4Sv74SJUm98dMdhSotF2SNvFEADANoR+stV+7TK6SNX1wWu5w==",
+      "requires": {
+        "@babel/runtime": "^7.17.2",
+        "@restart/hooks": "^0.4.6",
+        "@restart/ui": "^1.4.1",
+        "@types/react-transition-group": "^4.4.4",
+        "classnames": "^2.3.1",
+        "dom-helpers": "^5.2.1",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.8.1",
+        "prop-types-extra": "^1.1.0",
+        "react-transition-group": "^4.4.2",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      }
+    },
     "react-chartjs-2": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.0.1.tgz",

package.json

@@ -16,6 +16,7 @@
     "@testing-library/user-event": "^13.5.0",
     "addeventlistener": "^2.0.0",
     "axios": "^1.2.1",
+    "bootstrap": "^5.2.3",
     "chart": "^0.1.2",
     "chart.js": "^4.0.1",
     "crypto-js": "^4.1.1",
@@ -25,6 +26,7 @@
     "pg": "^8.8.0",
     "react": "^18.2.0",
     "react-big-calendar": "^1.5.0",
+    "react-bootstrap": "^2.7.0",
     "react-chartjs-2": "^5.0.1",
     "react-datepicker": "^4.8.0",
     "react-dom": "^18.2.0",

server-api/package-lock.json

@@ -15,16 +15,17 @@
         "@mui/material": "^5.10.13",
         "body": "^5.1.0",
         "body-parser": "^1.20.1",
+        "bootstrap": "^5.2.3",
         "corps": "^0.1.0",
         "cors": "^2.8.5",
         "crypto-js": "^4.1.1",
-        "crypto-js": "^4.1.1",
         "express": "^4.18.2",
         "fullcalendar": "^5.11.3",
         "googleapis": "^105.0.0",
         "mysql": "^2.18.1",
         "nodemailer": "^6.8.0",
-        "parser": "^0.1.4"
+        "parser": "^0.1.4",
+        "react-bootstrap": "^2.7.0"
       },
       "devDependencies": {
         "nodemon": "^2.0.20"
@@ -867,6 +868,48 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@react-aria/ssr": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.4.0.tgz",
+      "integrity": "sha512-qzuGk14/fUyUAoW/EBwgFcuMkVNXJVGlezTgZ1HovpCZ+p9844E7MUFHE7CuzFzPEIkVeqhBNIoIu+VJJ8YCOA==",
+      "dependencies": {
+        "@babel/runtime": "^7.6.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@restart/hooks": {
+      "version": "0.4.7",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.7.tgz",
+      "integrity": "sha512-ZbjlEHcG+FQtpDPHd7i4FzNNvJf2enAwZfJbpM8CW7BhmOAbsHpZe3tsHwfQUrBuyrxWqPYp2x5UMnilWcY22A==",
+      "dependencies": {
+        "dequal": "^2.0.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@restart/ui": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.4.1.tgz",
+      "integrity": "sha512-J7wFOx2DcmkBqCqiZgDsggLO7faiNh4Nv1/v80FmbRgP+MYpwaVDKKXLC69DA4+ejgNIsBP5ORtC74EZqO1j8A==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@popperjs/core": "^2.11.5",
+        "@react-aria/ssr": "^3.2.0",
+        "@restart/hooks": "^0.4.7",
+        "@types/warning": "^3.0.0",
+        "dequal": "^2.0.2",
+        "dom-helpers": "^5.2.0",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      }
+    },
     "node_modules/@types/parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@@ -908,6 +951,11 @@
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
       "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
     },
+    "node_modules/@types/warning": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
+      "integrity": "sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA=="
+    },
     "node_modules/abbrev": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@@ -1120,6 +1168,24 @@
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
       "integrity": "sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ=="
     },
+    "node_modules/bootstrap": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
+      "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.6"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -1267,6 +1333,11 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
     "node_modules/clsx": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
@@ -1409,14 +1480,6 @@
       "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.1.1.tgz",
       "integrity": "sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw=="
     },
-    "node_modules/cryptojs": {
-      "version": "2.5.3",
-      "resolved": "https://registry.npmjs.org/cryptojs/-/cryptojs-2.5.3.tgz",
-      "integrity": "sha512-+rdPl1UCxE8s3R94NNn+zMKOiI4MJ7dyh3X0c5uBL3btDr4zQ6acd7f9mY7Wb5MrccZEi2Rrha3OEtLcc5XXog==",
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/csstype": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
@@ -1439,6 +1502,14 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/destroy": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
@@ -1984,6 +2055,14 @@
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/ipaddr.js": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
@@ -2502,6 +2581,23 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/prop-types-extra": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "dependencies": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=0.14.0"
+      }
+    },
+    "node_modules/prop-types-extra/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/prop-types/node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -2573,6 +2669,35 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-bootstrap": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.7.0.tgz",
+      "integrity": "sha512-Jcrn6aUuRVBeSB6dzKODKZU1TONOdhAxu0IDm4Sv74SJUm98dMdhSotF2SNvFEADANoR+stV+7TK6SNX1wWu5w==",
+      "dependencies": {
+        "@babel/runtime": "^7.17.2",
+        "@restart/hooks": "^0.4.6",
+        "@restart/ui": "^1.4.1",
+        "@types/react-transition-group": "^4.4.4",
+        "classnames": "^2.3.1",
+        "dom-helpers": "^5.2.1",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.8.1",
+        "prop-types-extra": "^1.1.0",
+        "react-transition-group": "^4.4.2",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.14.8",
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@@ -2591,6 +2716,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -2920,6 +3050,20 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/uncontrollable": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": ">=16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      },
+      "peerDependencies": {
+        "react": ">=15.0.0"
+      }
+    },
     "node_modules/undefsafe": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz",
@@ -2994,6 +3138,14 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
@@ -3586,6 +3738,38 @@
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
       "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw=="
     },
+    "@react-aria/ssr": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.4.0.tgz",
+      "integrity": "sha512-qzuGk14/fUyUAoW/EBwgFcuMkVNXJVGlezTgZ1HovpCZ+p9844E7MUFHE7CuzFzPEIkVeqhBNIoIu+VJJ8YCOA==",
+      "requires": {
+        "@babel/runtime": "^7.6.2"
+      }
+    },
+    "@restart/hooks": {
+      "version": "0.4.7",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.7.tgz",
+      "integrity": "sha512-ZbjlEHcG+FQtpDPHd7i4FzNNvJf2enAwZfJbpM8CW7BhmOAbsHpZe3tsHwfQUrBuyrxWqPYp2x5UMnilWcY22A==",
+      "requires": {
+        "dequal": "^2.0.2"
+      }
+    },
+    "@restart/ui": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.4.1.tgz",
+      "integrity": "sha512-J7wFOx2DcmkBqCqiZgDsggLO7faiNh4Nv1/v80FmbRgP+MYpwaVDKKXLC69DA4+ejgNIsBP5ORtC74EZqO1j8A==",
+      "requires": {
+        "@babel/runtime": "^7.18.3",
+        "@popperjs/core": "^2.11.5",
+        "@react-aria/ssr": "^3.2.0",
+        "@restart/hooks": "^0.4.7",
+        "@types/warning": "^3.0.0",
+        "dequal": "^2.0.2",
+        "dom-helpers": "^5.2.0",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      }
+    },
     "@types/parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@@ -3627,6 +3811,11 @@
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
       "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
     },
+    "@types/warning": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
+      "integrity": "sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA=="
+    },
     "abbrev": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@@ -3791,6 +3980,12 @@
         }
       }
     },
+    "bootstrap": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
+      "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
+      "requires": {}
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -3885,6 +4080,11 @@
         "readdirp": "~3.6.0"
       }
     },
+    "classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
     "clsx": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
@@ -3996,11 +4196,6 @@
       "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.1.1.tgz",
       "integrity": "sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw=="
     },
-    "cryptojs": {
-      "version": "2.5.3",
-      "resolved": "https://registry.npmjs.org/cryptojs/-/cryptojs-2.5.3.tgz",
-      "integrity": "sha512-+rdPl1UCxE8s3R94NNn+zMKOiI4MJ7dyh3X0c5uBL3btDr4zQ6acd7f9mY7Wb5MrccZEi2Rrha3OEtLcc5XXog=="
-    },
     "csstype": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
@@ -4020,6 +4215,11 @@
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
       "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw=="
     },
+    "dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA=="
+    },
     "destroy": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
@@ -4447,6 +4647,14 @@
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
+    "invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "ipaddr.js": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
@@ -4816,6 +5024,22 @@
         }
       }
     },
+    "prop-types-extra": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "requires": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        }
+      }
+    },
     "proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -4864,6 +5088,25 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "react-bootstrap": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.7.0.tgz",
+      "integrity": "sha512-Jcrn6aUuRVBeSB6dzKODKZU1TONOdhAxu0IDm4Sv74SJUm98dMdhSotF2SNvFEADANoR+stV+7TK6SNX1wWu5w==",
+      "requires": {
+        "@babel/runtime": "^7.17.2",
+        "@restart/hooks": "^0.4.6",
+        "@restart/ui": "^1.4.1",
+        "@types/react-transition-group": "^4.4.4",
+        "classnames": "^2.3.1",
+        "dom-helpers": "^5.2.1",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.8.1",
+        "prop-types-extra": "^1.1.0",
+        "react-transition-group": "^4.4.2",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      }
+    },
     "react-dom": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@@ -4879,6 +5122,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
     "react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -5144,6 +5392,17 @@
         "mime-types": "~2.1.24"
       }
     },
+    "uncontrollable": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+      "requires": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": ">=16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
     "undefsafe": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz",
@@ -5190,6 +5449,14 @@
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
       "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg=="
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",

server-api/package.json

@@ -15,6 +15,7 @@
     "@mui/material": "^5.10.13",
     "body": "^5.1.0",
     "body-parser": "^1.20.1",
+    "bootstrap": "^5.2.3",
     "corps": "^0.1.0",
     "cors": "^2.8.5",
     "crypto-js": "^4.1.1",
@@ -23,7 +24,8 @@
     "googleapis": "^105.0.0",
     "mysql": "^2.18.1",
     "nodemailer": "^6.8.0",
-    "parser": "^0.1.4"
+    "parser": "^0.1.4",
+    "react-bootstrap": "^2.7.0"
   },
   "description": "",
   "devDependencies": {

src/pages/Calendrier.js

@@ -96,15 +96,16 @@ 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"}} 
+                                <input className="ajout_input" type="text" placeholder="Ajoutez un titre" style={{height: "20px", width: "100%", marginRight: "10px", marginLeft: "10px",marginBottom: "10px"}} 
                                 onChange={(e) => setTitre(e.target.value)} />
-                                <input className='date' type="date" placeholder="Ajoutez un jour" style={{height: "20px", width: "100%", marginRight: "10px"}} 
+                                <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)} />
-                                <input className='date' type="time" placeholder="Ajoutez une heure de début" style={{height: "20px", width: "100%", marginRight: "10px"}}
+                                <input className='date' type="time" placeholder="Ajoutez une heure de début" style={{height: "70%", width: "90%", marginRight: "10px" , marginLeft: "10px",marginBottom: "10px", borderRadius: "10px"}}
                                 onChange={(e) => setHeureDebut(e.target.value)} />
-                                <input className='date' type="time" placeholder="Ajoutez une heure de fin" style={{height: "20px", width: "100%", marginRight: "10px"}}
+                                <input className='date' type="time" placeholder="Ajoutez une heure de fin" style={{height: "70%", width: "90%", marginRight: "10px", marginLeft: "10px", marginBottom: "10px", borderRadius: "10px"}}
                                 onChange={(e) => setHeureFin(e.target.value)} />
                                 <Select
+                                    className="select"
                                     name='idcontact'
                                     value={selectedContact}
                                     onChange={handleChangeContact}
@@ -115,7 +116,7 @@ function Calendrier(){
                                 </Select>
                             </div>
                             <button className="bouton_ajout" onClick={handleAddEvent}>
-                                <p>Ajouter l'évènement</p>
+                                Ajouter l'évènement
                             </button>
                         </h2>
                         <Calendar localizer={localizer} events={allEvents} defaultView="week"

src/pages/Compte.js

@@ -65,7 +65,7 @@ function Compte() {
                                     <img src={img1} srcSet={file} id="img" className="img"></img>
                                 </div>
                                 <div className='bouton_submit'>
-                                    <input type="file" name="fileUpload" id="input" accept="image/" onChange={handleChange} />
+                                    <input type="file" name="fileUpload" id="input" class="bouton_ajoutPhoto" accept="image/" onChange={handleChange} />
                                     <div className="label">
                                         <label className="fileUpload" htmlFor="input">
                                             Ajoutez votre photo

src/pages/Repertoire.js

@@ -27,7 +27,7 @@ function Repertoire() {
     useEffect(() => {
         const apiString = '/Contact/' + Session.get("idUser");
         api.get(apiString).then((response) => {
-            
+
             setContacts(response.data);
             console.log("response.data", response.data);
             setSearchTerm(response.data[0].idcontact);
@@ -41,53 +41,54 @@ function Repertoire() {
     }, []);
 
     return (
-        <div className={theme} id="page_repertoire">
+        <body className={theme}>
-            {/* Create an account page */}
+            <div className="page_repertoire">
-            <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"></link>
+                {/* Create an account page */}
-            <div className="haut_de_page">
+                <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"></link>
-                <h2 className="titre">Repertoire</h2>
+                <div className="haut_de_page">
-                <div className="rechLogo">
+                    <h2 className="titre">Repertoire</h2>
-                    <img className="logo" srcSet="./LogoApp.svg" />
+                    <div className="rechLogo">
+                        <img className="logo" srcSet="./LogoApp.svg" />
+                    </div>
                 </div>
-            </div>
+                <div className="bas_de_page">
-            <div className="bas_de_page">
+                    <NavigationDashboard />
-                <NavigationDashboard />
+                    <div className="contenu">
-                <div className="contenu">
+                        <span className="searchAndAddButton">
-                    <span className="searchAndAddButton">
+                            <div className="input_box">
-                        <div className="input_box">
+                                <input type="search" placeholder="Rechercher..." />
-                            <input type="search" placeholder="Rechercher..." />
+                                <span className="search">
-                            <span className="search">
+                                    <i class="uil uil-search search-icon"></i>
-                                <i class="uil uil-search search-icon"></i>
+                                </span>
-                            </span>
+                            </div>
-                        </div>
+                            <NavLink to="/Repertoire/add">
-                        <NavLink to="/Repertoire/add">
+                                <button className="boutonAddContact">Ajouter</button>
-                            <button className="boutonAddContact">Ajouter</button>
+                            </NavLink>
-                        </NavLink>
+                        </span>
-                    </span>
+                        <TableContainer component={Paper} className="tabListContact">
-                    <TableContainer component={Paper} className="tabListContact">
+                            <Table>
-                        <Table>
+                                <TableHead>
-                            <TableHead>
+                                    <TableRow>
-                                <TableRow>
+                                        <TableCell>Photo</TableCell>
-                                    <TableCell>Photo</TableCell>
+                                        <TableCell>Nom</TableCell>
-                                    <TableCell>Nom</TableCell>
+                                        <TableCell>Prénom</TableCell>
-                                    <TableCell>Prénom</TableCell>
+                                        <TableCell>Entreprise</TableCell>
-                                    <TableCell>Entreprise</TableCell>
-                                </TableRow>
-                            </TableHead>
-                            <TableBody>
-                                {contacts.map((contact) => (
-                                    <TableRow key={contact.idcontact}>
-                                        <TableCell><img className="photoContact" src={user} /></TableCell>
-                                        <TableCell>{contact.lastname}</TableCell>
-                                        <TableCell>{contact.firstname}</TableCell>
-                                        <TableCell>{contact.name}</TableCell>
                                     </TableRow>
-                                ))}
+                                </TableHead>
-                            </TableBody>
+                                <TableBody>
-                        </Table>
+                                    {contacts.map((contact) => (
-                    </TableContainer>
+                                        <TableRow key={contact.idcontact}>
-                </div>
+                                            <TableCell><img className="photoContact" src={user} /></TableCell>
-                {/* <TableContainer component={Paper} sx={{ maxHeight: 0.8 }} className="tabListContact">
+                                            <TableCell>{contact.lastname}</TableCell>
+                                            <TableCell>{contact.firstname}</TableCell>
+                                            <TableCell>{contact.name}</TableCell>
+                                        </TableRow>
+                                    ))}
+                                </TableBody>
+                            </Table>
+                        </TableContainer>
+                    </div>
+                    {/* <TableContainer component={Paper} sx={{ maxHeight: 0.8 }} className="tabListContact">
                                 <Table aria-label="simple table" size="small" stickyHeader>
                                     <TableHead >
                                         <TableRow>
@@ -114,8 +115,9 @@ function Repertoire() {
                                     </TableBody>
                                 </Table>
                             </TableContainer> */}
+                </div>
             </div>
-        </div>
+        </body>
     );
 };
 
@@ -137,22 +139,22 @@ function AddContact(props) {
         //console.log(props);
         navigate('/');
     }
-        return (
+    return (
-            <div className='ui main'>
+        <div className='ui main'>
-                <h2>Add Contact</h2>
+            <h2>Add Contact</h2>
-                <form className='ui form' onSubmit={add}>
+            <form className='ui form' onSubmit={add}>
-                    <div className='field'>
+                <div className='field'>
-                        <label>Name</label>
+                    <label>Name</label>
-                        <input type="text" name="Name" placeholder='Name' value={User.name} onChange={e => setUser({ ...User, name: e.target.value })} />
+                    <input type="text" name="Name" placeholder='Name' value={User.name} onChange={e => setUser({ ...User, name: e.target.value })} />
-                    </div>
+                </div>
-                    <div className='field'>
+                <div className='field'>
-                        <label>Email</label>
+                    <label>Email</label>
-                        <input type="text" name="Email" placeholder='Email' value={User.email} onChange={e => setUser({ ...User, email: e.target.value })} />
+                    <input type="text" name="Email" placeholder='Email' value={User.email} onChange={e => setUser({ ...User, email: e.target.value })} />
-                    </div>
+                </div>
-                    <button className='ui secondary button'>Add</button>
+                <button className='ui secondary button'>Add</button>
-                </form>
+            </form>
-            </div>
+        </div>
-        );
+    );
 };
 
 

src/styles/components/_analyse.scss

@@ -20,8 +20,7 @@ body {
             margin: 10px 10px 5px 10px;
             
             background: rgba(255, 255, 255, 0.3);
-            border-radius: 15px;
+            border-radius: 5px;
-            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
             backdrop-filter: blur(3px);
             -webkit-backdrop-filter: blur(15px);
 
@@ -59,8 +58,7 @@ body {
                 margin: 5px 5px 10px 10px;
 
                 background: rgba(255, 255, 255, 0.3);
-                border-radius: 15px;
+                border-radius: 5px;
-                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
                 backdrop-filter: blur(3px);
                 -webkit-backdrop-filter: blur(15px);
 
@@ -133,8 +131,7 @@ body {
                     height: auto;
 
                     background: rgba(255, 255, 255, 0.3);
-                    border-radius: 15px;
+                    border-radius: 5px;
-                    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
                     backdrop-filter: blur(3px);
                     -webkit-backdrop-filter: blur(15px);
 
@@ -155,7 +152,6 @@ body {
 
                         background: rgba(255, 255, 255, 0.3);
                         border-radius: 15px;
-                        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
                         backdrop-filter: blur(3px);
                         -webkit-backdrop-filter: blur(15px);
                     }
@@ -178,8 +174,7 @@ body {
                     height: auto;
 
                     background: rgba(255, 255, 255, 0.3);
-                    border-radius: 15px;
+                    border-radius: 5px;
-                    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
                     backdrop-filter: blur(3px);
                     -webkit-backdrop-filter: blur(15px);
 
@@ -199,7 +194,6 @@ body {
 
                         background: rgba(255, 255, 255, 0.3);
                         border-radius: 15px;
-                        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
                         backdrop-filter: blur(3px);
                         -webkit-backdrop-filter: blur(15px);
                     }

src/styles/components/_calendrier.scss

@@ -1,5 +1,5 @@
 body {
-    
+
     .page_calendrier {
         display: flex;
         flex-direction: column;
@@ -16,17 +16,16 @@ body {
             height: 10%;
             align-items: center;
             margin: 10px 10px 5px 10px;
-            
+
             background: rgba(255, 255, 255, 0.3);
-            border-radius: 15px;
+            border-radius: 5px;
-            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
             backdrop-filter: blur(3px);
             -webkit-backdrop-filter: blur(15px);
 
             .titre {
                 font-size: 40px;
             }
-            
+
             .rechLogo {
                 display: flex;
                 flex-direction: row;
@@ -38,7 +37,7 @@ body {
                     width: 100px;
                     height: 100px;
                 }
-            }            
+            }
         }
 
         .bas_de_page {
@@ -57,8 +56,7 @@ body {
                 margin: 5px 5px 10px 10px;
 
                 background: rgba(255, 255, 255, 0.3);
-                border-radius: 15px;
+                border-radius: 5px;
-                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
                 backdrop-filter: blur(3px);
                 -webkit-backdrop-filter: blur(15px);
 
@@ -106,7 +104,7 @@ body {
                     border: none;
                     cursor: pointer;
 
-                    .logo_nav_bar{
+                    .logo_nav_bar {
                         display: flex;
                         margin: 10px;
                         height: 50px;
@@ -120,7 +118,6 @@ body {
                 flex-direction: row;
                 background: rgba(255, 255, 255, 0.3);
                 border-radius: 5px;
-                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
                 backdrop-filter: blur(3px);
                 -webkit-backdrop-filter: blur(15px);
                 width: 94.3%;
@@ -130,21 +127,39 @@ body {
                 .Titre {
                     display: flex;
                     flex-direction: column;
-                    justify-content: space-around;
+                    justify-content: space-between;
-                    width: 175px;
+                    width: 200px;
-                    margin: 30px;
+                    height: 100%;
-
+                    -webkit-backdrop-filter: blur(15px);
-                    border-radius: 15px;
+                    padding-top: 10px;
-                    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+                    padding-bottom: 10px;
-                    backdrop-filter: blur(3px);
+
-                    -webkit-backdrop-filter: blur(15px);                 
-                
                     .mini_formulaire_evenement {
                         display: flex;
                         flex-direction: column;
-                        margin-top: 10px;
+                        height: 100%;
-                        height: 100px;
+                        justify-content: space-around;
 
+                        .ajout_input {
+                            position: relative;
+                            width: 100%;
+                            height: 100%;
+                            outline: none;
+                            border: none;
+                            border-radius: .375rem;
+                            font-size: 16px;
+                            font-weight: 400;
+                            color: rgb(90, 90, 90);
+                            border: 1px solid rgba(50, 55, 72, 1);
+                            padding: 1rem 1rem;
+                            margin-right: 10px;
+                        }
+                        .select {
+                            border: 1px solid rgba(50, 55, 72, 1);
+                            border-radius: 10px;
+                            margin-left: 10px;
+                            margin-right: 8px;
+                        }
                     }
 
                     .bouton_ajout {
@@ -158,16 +173,18 @@ body {
                         height: 50px;
                         border-radius: 10px;
                         background-color: rgba(163, 163, 163, 0.371);
-                        border: 1px solid rgba(255,255,255,0.1);
+                        border: 1px solid rgba(255, 255, 255, 0.1);
                         backdrop-filter: blur(30px);
                         color: rgb(255, 255, 255);
                         cursor: pointer;
                         font-size: 15px;
-                        &:hover{
+
-                            background-color: rgba(114, 114, 114, 0.371);   
+                        &:hover {
+                            background-color: rgba(114, 114, 114, 0.371);
                         }
-                        &:active{
+
-                            background-color:rgba(68, 68, 68, 0.972);   
+                        &:active {
+                            background-color: rgba(68, 68, 68, 0.972);
                         }
                     }
                 }
@@ -175,12 +192,16 @@ body {
 
             .rbc-calendar {
                 border-radius: 5px;
-                border: 1px solid black;
+                margin-top: 20px;
+                margin-right: 20px;
+                margin-left: 20px;
+
 
                 .rbc-day-bg {
                     border-radius: 5px;
                     border-color: black;
                 }
+
                 .rbc-month-view {
                     border-radius: 10px;
                     border-color: black;
@@ -206,4 +227,4 @@ body {
             }
         }
     }
-}
+}

src/styles/components/_compte.scss

@@ -1,5 +1,3 @@
-
-
 body {
 
     .page_compte {
@@ -8,7 +6,7 @@ body {
         justify-content: space-evenly;
         width: auto;
         height: 100vh;
-    
+
         .haut_de_page {
             display: flex;
             flex-direction: row;
@@ -18,17 +16,16 @@ body {
             height: 10%;
             align-items: center;
             margin: 10px 10px 5px 10px;
-            
+
             background: rgba(255, 255, 255, 0.3);
-            border-radius: 15px;
+            border-radius: 5px;
-            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
             backdrop-filter: blur(3px);
             -webkit-backdrop-filter: blur(15px);
 
             .titre {
                 font-size: 40px;
             }
-            
+
             .rechLogo {
                 display: flex;
                 flex-direction: row;
@@ -40,16 +37,16 @@ body {
                     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;
@@ -59,8 +56,7 @@ body {
                 margin: 5px 5px 10px 10px;
 
                 background: rgba(255, 255, 255, 0.3);
-                border-radius: 15px;
+                border-radius: 5px;
-                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
                 backdrop-filter: blur(3px);
                 -webkit-backdrop-filter: blur(15px);
 
@@ -108,7 +104,7 @@ body {
                     border: none;
                     cursor: pointer;
 
-                    .logo_nav_bar{
+                    .logo_nav_bar {
                         display: flex;
                         margin: 10px;
                         height: 50px;
@@ -116,8 +112,8 @@ body {
                     }
                 }
             }
-            
+
-    
+
             .Compte {
                 display: flex;
                 flex-direction: column;
@@ -127,8 +123,7 @@ body {
                 margin: 5px 10px 10px 5px;
 
                 background: rgba(255, 255, 255, 0.3);
-                border-radius: 15px;
+                border-radius: 5px;
-                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
                 backdrop-filter: blur(3px);
                 -webkit-backdrop-filter: blur(15px);
 
@@ -141,8 +136,7 @@ body {
                     height: 30%;
 
                     background: rgba(255, 255, 255, 0.1);
-                    border-radius: 15px;
+                    border-radius: 5px;
-                    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
                     backdrop-filter: blur(3px);
                     -webkit-backdrop-filter: blur(15px);
 
@@ -161,7 +155,6 @@ body {
                             width: 135px;
                             background: rgba(255, 255, 255, 0.1);
                             border-radius: 100px;
-                            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
                             backdrop-filter: blur(3px);
                             -webkit-backdrop-filter: blur(15px);
 
@@ -170,15 +163,15 @@ body {
                                 object-fit: cover;
                             }
                         }
-                        
+
-                        .figure{
+                        .figure {
                             width: 45%;
                         }
-        
+
-                        .img{
+                        .img {
                             width: 100%;
                         }
-                        
+
 
                         .bouton_submit {
                             display: flex;
@@ -186,20 +179,45 @@ body {
                             align-items: center;
                             cursor: pointer;
 
-                            
 
-                            /*.bouton_ajoutPhoto {
+
-                                height: 40px;
+                            .fileUpload {
-                                width: 150px;
+                                color: #3874ff;
-                                background-color: rgb(190, 189, 189);
+                                border-color: #3874ff;
-                                border-radius: 5px;
+                                background-color: transparent;
-                                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+                                border: 1px solid #004dff;
-                                cursor: pointer;
+                                border-radius: .375rem;
-                    
+                                gap: 1rem;
-                                &:hover{
+                                font-size: 1rem;
-                                    background-color: lightgrey;   
+                                line-height: 1.5;
+                                transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+
+                                &:hover {
+                                    color: #fff;
+                                    background-color: #3874ff;
+                                    border-color: #004dff;
+                                }
+
+                                &:focus {
+                                    color: #fff;
+                                    background-color: #3874ff;
+                                    border-color: #004dff;
+                                    box-shadow: 0 0 0 0.2rem rgba(56, 116, 255, 0.5);
                                 }
-                            }*/
+
+                                &:active {
+                                    color: #fff;
+                                    background-color: #3874ff;
+                                    border-color: #004dff;
+                                    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0);
+                                }
+
+                                &:disabled {
+                                    color: #3874ff;
+                                    background-color: transparent;
+                                    border-color: #3874ff;
+                                }
+                            }
                         }
                     }
 
@@ -212,7 +230,7 @@ body {
                         .presentationNom {
                             display: flex;
                             flex-direction: row;
-                            justify-content: space-evenly;                         
+                            justify-content: space-evenly;
 
                             .def {
                                 display: flex;
@@ -221,24 +239,44 @@ body {
 
                             .nom {
                                 display: flex;
-                                margin-left: 125px;;
+                                margin-left: 125px;
+                                ;
                             }
                         }
 
                         .bouton_submit {
                             display: flex;
-                            
+
                             .bouton_modifierNom {
-                                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.37);
                                 cursor: pointer;
-    
+                                color: #141824;
-                                &:hover{
+                                background: #f5f7fa;
-                                    background-color: lightgrey; 
+                                border-color: #f5f7fa;
+                                border-radius: 0.375rem;
+                                padding: 0.5rem 1rem;
+                                border-width: 1px;
+
+                                &:hover {
+                                    color: #141824;
+                                    background: #e3e6ed;
+                                    border-color: #f6f8fb;
+                                }
+
+                                &: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;
                                 }
                             }
                         }
@@ -256,8 +294,7 @@ body {
                     height: 30%;
 
                     background: rgba(255, 255, 255, 0.1);
-                    border-radius: 15px;
+                    border-radius: 5px;
-                    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
                     backdrop-filter: blur(3px);
                     -webkit-backdrop-filter: blur(15px);
 
@@ -272,7 +309,7 @@ body {
                     .parti_mail {
                         display: flex;
                         flex-direction: row;
-                        margin: 0 25px;                        
+                        margin: 0 25px;
                         border-bottom: 1px solid grey;
                         padding: 0 0 15px 0;
 
@@ -290,7 +327,7 @@ body {
                     .parti_pays {
                         display: flex;
                         flex-direction: row;
-                        margin: 0 25px;                        
+                        margin: 0 25px;
                         border-bottom: 1px solid grey;
                         padding: 0 0 15px 0;
 
@@ -325,14 +362,13 @@ body {
                 .infoEntreprise {
                     display: flex;
                     flex-direction: column;
-                    justify-content: space-evenly;    
+                    justify-content: space-evenly;
                     margin: 13px;
                     width: auto;
                     height: 30%;
 
                     background: rgba(255, 255, 255, 0.1);
-                    border-radius: 15px;
+                    border-radius: 5px;
-                    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
                     backdrop-filter: blur(3px);
                     -webkit-backdrop-filter: blur(15px);
 
@@ -347,7 +383,7 @@ body {
                     .parti_name {
                         display: flex;
                         flex-direction: row;
-                        margin: 0 25px;                        
+                        margin: 0 25px;
                         border-bottom: 1px solid grey;
                         padding: 0 0 15px 0;
 
@@ -362,10 +398,10 @@ body {
                         }
                     }
 
-                    .parti_secteurAct{
+                    .parti_secteurAct {
                         display: flex;
                         flex-direction: row;
-                        margin: 0 25px;                        
+                        margin: 0 25px;
                         border-bottom: 1px solid grey;
                         padding: 0 0 15px 0;
 
@@ -405,7 +441,7 @@ body {
     display: none;
 }
 
-.fileUpload{
+.fileUpload {
     width: 100%;
     margin-top: 1rem;
     display: flex;
@@ -419,4 +455,4 @@ body {
     border-radius: 10px;
     background-color: $xiketic;
     cursor: pointer;
-}
+}

src/styles/components/_dashboard.scss

@@ -19,8 +19,7 @@ body {
             margin: 10px 10px 5px 10px;
             
             background: rgba(255, 255, 255, 0.3);
-            border-radius: 15px;
+            border-radius: 5px;
-            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
             backdrop-filter: blur(3px);
             -webkit-backdrop-filter: blur(15px);
 
@@ -58,9 +57,7 @@ body {
                 margin: 5px 5px 10px 10px;
 
                 background: rgba(255, 255, 255, 0.3);
-                border-radius: 15px;
+                border-radius: 5px;
-                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-                backdrop-filter: blur(3px);
                 -webkit-backdrop-filter: blur(15px);
 
                 .parti_one {
@@ -143,8 +140,7 @@ body {
                             height: auto;
                             
                             background: rgba(255, 255, 255, 0.3);
-                            border-radius: 15px;
+                            border-radius: 5px;
-                            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
                             backdrop-filter: blur(3px);
                             -webkit-backdrop-filter: blur(15px);
                         }
@@ -155,8 +151,7 @@ body {
                             height: auto;
 
                             background: rgba(255, 255, 255, 0.3);
-                            border-radius: 15px;
+                            border-radius: 5px;
-                            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
                             backdrop-filter: blur(3px);
                             -webkit-backdrop-filter: blur(15px);
                         }
@@ -175,8 +170,7 @@ body {
                             height: auto;
 
                             background: rgba(255, 255, 255, 0.3);
-                            border-radius: 15px;
+                            border-radius: 5px;
-                            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
                             backdrop-filter: blur(3px);
                             -webkit-backdrop-filter: blur(15px);
                         }
@@ -201,8 +195,7 @@ body {
                                     height: 53%;
 
                                     background: rgba(255, 255, 255, 0.3);
-                                    border-radius: 15px;
+                                    border-radius: 5px;
-                                    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
                                     backdrop-filter: blur(3px);
                                     -webkit-backdrop-filter: blur(15px);                                    
                                 }
@@ -213,8 +206,7 @@ body {
                                     height: 43%;
 
                                     background: rgba(255, 255, 255, 0.3);
-                                    border-radius: 15px;
+                                    border-radius: 5px;
-                                    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
                                     backdrop-filter: blur(3px);
                                     -webkit-backdrop-filter: blur(15px);
                                 }
@@ -233,8 +225,7 @@ body {
                                     height: 46%;
 
                                     background: rgba(255, 255, 255, 0.3);
-                                    border-radius: 15px;
+                                    border-radius: 5px;
-                                    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
                                     backdrop-filter: blur(3px);
                                     -webkit-backdrop-filter: blur(15px);                                    
                                 }
@@ -245,8 +236,7 @@ body {
                                     height: 50%;
 
                                     background: rgba(255, 255, 255, 0.3);
-                                    border-radius: 15px;
+                                    border-radius: 5px;
-                                    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
                                     backdrop-filter: blur(3px);
                                     -webkit-backdrop-filter: blur(15px);
                                 }
@@ -267,8 +257,7 @@ body {
                         height: 64%;
                         
                         background: rgba(255, 255, 255, 0.3);
-                        border-radius: 15px;
+                        border-radius: 5px;
-                        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
                         backdrop-filter: blur(3px);
                         -webkit-backdrop-filter: blur(15px);
                     }
@@ -279,8 +268,7 @@ body {
                         height: 34%;
                         
                         background: rgba(255, 255, 255, 0.3);
-                        border-radius: 15px;
+                        border-radius: 5px;
-                        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
                         backdrop-filter: blur(3px);
                         -webkit-backdrop-filter: blur(15px);
                     }

src/styles/components/_parametre.scss

@@ -20,8 +20,7 @@ body {
             margin: 10px 10px 5px 10px;
 
             background: rgba(255, 255, 255, 0.3);
-            border-radius: 15px;
+            border-radius: 5px;
-            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
             backdrop-filter: blur(3px);
             -webkit-backdrop-filter: blur(15px);
 
@@ -59,8 +58,7 @@ body {
                 margin: 5px 5px 10px 10px;
 
                 background: rgba(255, 255, 255, 0.3);
-                border-radius: 15px;
+                border-radius: 5px;
-                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
                 backdrop-filter: blur(3px);
                 -webkit-backdrop-filter: blur(15px);
 
@@ -134,8 +132,7 @@ body {
                     padding: 10px;
 
                     background: rgba(255, 255, 255, 0.3);
-                    border-radius: 15px;
+                    border-radius: 5px;
-                    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
                     backdrop-filter: blur(3px);
                     -webkit-backdrop-filter: blur(15px);
 
@@ -170,15 +167,35 @@ body {
                             cursor: pointer;
 
                             .bouton_signalerPB {
-                                width: 110px;
-                                height: 25px;
-                                background-color: rgb(190, 189, 189);
-                                border-radius: 20px;
-                                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
                                 cursor: pointer;
+                                color: #141824;
+                                background: #f5f7fa;
+                                border-color: #f5f7fa;
+                                border-radius: 0.375rem;
+                                padding: 0.5rem 1rem;
+                                border-width: 1px;
 
                                 &:hover {
-                                    background-color: lightgrey;
+                                    color: #141824;
+                                    background: #e3e6ed;
+                                    border-color: #f6f8fb;
+                                }
+
+                                &: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;
                                 }
                             }
                         }
@@ -202,15 +219,35 @@ body {
                             cursor: pointer;
 
                             .bouton_modifierMDP {
-                                width: 110px;
-                                height: 25px;
-                                background-color: rgb(190, 189, 189);
-                                border-radius: 20px;
-                                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
                                 cursor: pointer;
+                                color: #141824;
+                                background: #f5f7fa;
+                                border-color: #f5f7fa;
+                                border-radius: 0.375rem;
+                                padding: 0.5rem 1rem;
+                                border-width: 1px;
 
                                 &:hover {
-                                    background-color: lightgrey;
+                                    color: #141824;
+                                    background: #e3e6ed;
+                                    border-color: #f6f8fb;
+                                }
+
+                                &: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;
                                 }
                             }
                         }
@@ -226,8 +263,7 @@ body {
                     padding: 10px;
 
                     background: rgba(255, 255, 255, 0.3);
-                    border-radius: 15px;
+                    border-radius: 5px;
-                    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
                     backdrop-filter: blur(3px);
                     -webkit-backdrop-filter: blur(15px);
 
@@ -300,8 +336,7 @@ body {
                     height: 40%;
 
                     background: rgba(255, 255, 255, 0.3);
-                    border-radius: 15px;
+                    border-radius: 5px;
-                    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
                     backdrop-filter: blur(3px);
                     -webkit-backdrop-filter: blur(15px);
 
@@ -327,15 +362,35 @@ body {
                         }
 
                         .bouton {
-                            width: 110px;
-                            height: 25px;
-                            background-color: rgb(190, 189, 189);
-                            border-radius: 20px;
-                            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
                             cursor: pointer;
+                            color: #141824;
+                            background: #f5f7fa;
+                            border-color: #f5f7fa;
+                            border-radius: 0.375rem;
+                            padding: 0.5rem 1rem;
+                            border-width: 1px;
 
                             &:hover {
-                                background-color: lightgrey;
+                                color: #141824;
+                                background: #e3e6ed;
+                                border-color: #f6f8fb;
+                            }
+
+                            &: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;
                             }
                         }
                     }

src/styles/components/_repertoire.scss

@@ -1,6 +1,6 @@
 body {
 
-    #page_repertoire {
+    .page_repertoire {
         display: flex;
         flex-direction: column;
         justify-content: space-evenly;
@@ -18,8 +18,7 @@ body {
             margin: 10px 10px 5px 10px;
 
             background: rgba(255, 255, 255, 0.3);
-            border-radius: 15px;
+            border-radius: 5px;
-            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
             backdrop-filter: blur(3px);
             -webkit-backdrop-filter: blur(15px);
 
@@ -42,7 +41,6 @@ body {
                     width: 100%;
                     margin: 30px 30px;
                     border-radius: 25px;
-                    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
 
                     input {
                         position: relative;
@@ -99,9 +97,7 @@ body {
                 margin: 5px 5px 10px 10px;
 
                 background: rgba(255, 255, 255, 0.3);
-                border-radius: 15px;
+                border-radius: 5px;
-                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
-                backdrop-filter: blur(3px);
                 -webkit-backdrop-filter: blur(15px);
 
                 .parti_one {
@@ -174,15 +170,39 @@ body {
 
 
                 .boutonAddContact {
-                    display: flex;
+                    color: #3874ff;
-                    justify-content: center;
+                    border-color: #3874ff;
-                    align-items: center;
+                    background-color: transparent;
-                    height: 40px;
+                    border: 1px solid #004dff;
-                    min-width: 150px;
+                    border-radius: .375rem;
-                    margin: 30px 30px;
+                    padding: .375rem .75rem;
-                    border-radius: 25px;
+                    gap: 1rem;
-                    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+                    font-size: 1rem;
-                    text-decoration-line: none;
+                    line-height: 1.5;
+                    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+                    
+                    &:hover {
+                        color: #fff;
+                        background-color: #3874ff;
+                        border-color: #004dff;
+                    }
+                    &:focus {
+                        color: #fff;
+                        background-color: #3874ff;
+                        border-color: #004dff;
+                        box-shadow: 0 0 0 0.2rem rgba(56, 116, 255, 0.5);
+                    }
+                    &:active {
+                        color: #fff;
+                        background-color: #3874ff;
+                        border-color: #004dff;
+                        box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0);
+                    }
+                    &:disabled {
+                        color: #3874ff;
+                        background-color: transparent;
+                        border-color: #3874ff;
+                    }
                 }
 
                 .input_box {
@@ -195,7 +215,6 @@ body {
                     width: 100%;
                     margin: 30px 30px;
                     border-radius: 25px;
-                    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
 
                     input {
                         position: relative;
@@ -204,10 +223,10 @@ body {
                         padding: 0 15px 0 65px;
                         outline: none;
                         border: none;
-                        border-radius: 25px;
+                        border-radius: .375rem;
                         font-size: 16px;
                         font-weight: 400;
-                        color: #333;
+                        color: rgb(90, 90, 90);
                     }
 
                     .search {
@@ -222,7 +241,7 @@ body {
                         border-radius: 25px 0 0 25px;
 
                         .search-icon {
-                            font-size: 30px;
+                            font-size: 20px;
                             color: black;
                         }
                     }
@@ -237,23 +256,6 @@ body {
                 scroll-behavior: smooth;
                 overflow-y: scroll;
 
-                &::-webkit-scrollbar {
-                    width: 15px;
-                }
-
-                &::-webkit-scrollbar-track {
-                    background: #f1f1f1;
-                }
-
-                &::-webkit-scrollbar-thumb {
-                    background: #888;
-                    border-radius: 10px;
-                }
-
-                &::-webkit-scrollbar-thumb:hover {
-                    background: #555;
-                }
-
                 .photoContact {
                     width: 50px;
                     height: 50px;

src/styles/settings.scss

@@ -1,4 +1,3 @@
-
 $font-1: sans-serif;
 
 $color-1: #61dafb;
@@ -11,7 +10,7 @@ $alice-blue: #e8eef2ff;
 $blue-munsell: #0088a3ff;
 $malachite: #32e875ff;
 $rufous: #9b2915ff;
-$xiketic: #020114ff;
+$xiketic: #0f111a;
 $beau-blue: #b1c5d2;
 
 
@@ -49,7 +48,441 @@ li {
     list-style-type: none;
 }
 
-.dark{
+.dark {
     background-color: $xiketic;
     color: white;
+
+    .page_analyse {
+        .haut_de_page {
+            background: rgba(21, 24, 35, 1);
+            border: 1px solid rgba(50, 55, 72, 1);
+        }
+
+        .bas_de_page {
+            .nav_bar_verticale {
+                background: rgba(21, 24, 35, 1);
+                border: 1px solid rgba(50, 55, 72, 1);
+            }
+
+            .Analyse {
+                .Stat-1 {
+                    background: rgba(21, 24, 35, 1);
+                    border: 1px solid rgba(50, 55, 72, 1);
+
+                    .Stat-1_titre p {
+                        background-color: rgba(21, 24, 35, 1);
+                        border: 1px solid rgba(50, 55, 72, 1);
+                    }
+                }
+
+                .Stat-2 {
+                    background: rgba(21, 24, 35, 1);
+                    border: 1px solid rgba(50, 55, 72, 1);
+
+                    .Stat-2_titre p {
+                        background-color: rgba(21, 24, 35, 1);
+                        border: 1px solid rgba(50, 55, 72, 1);
+                    }
+                }
+            }
+        }
+
+    }
+
+    .page_parametre {
+        .haut_de_page {
+            background: rgba(21, 24, 35, 1);
+            border: 1px solid rgba(50, 55, 72, 1);
+        }
+
+        .bas_de_page {
+            .nav_bar_verticale {
+                background: rgba(21, 24, 35, 1);
+                border: 1px solid rgba(50, 55, 72, 1);
+            }
+
+            .Parametre {
+                .one {
+                    background: rgba(21, 24, 35, 1);
+                    border: 1px solid rgba(50, 55, 72, 1);
+                    .one_milieu{
+                        .bouton_submit{
+                            .bouton_signalerPB{
+                                color: #cbd0dd;
+                                background: rgba(49, 55, 74, 0.5);
+                                border-color: rgba(49, 55, 74, 0.5);
+
+                                &:hover {
+                                    color: #cbd0dd;
+                                    background: rgba(49, 55, 74, 0.8);
+                                    border-color: rgba(101, 105, 119, 0.55);
+                                }
+
+                                &:focus {
+                                    box-shadow: 0 0 0 0.2rem rgba(102, 108, 125, 0.5);
+                                }
+
+                                &:active {
+                                    color: #fff;
+                                    background: rgba(137, 141, 152, 0.6);
+                                    border-color: rgba(101, 105, 119, 0.55);
+                                    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0);
+                                }
+
+                                &:disabled {
+                                    color: #fff;
+                                    background: rgba(49, 55, 74, 0.5);
+                                }
+                            }
+                        }
+                    }
+
+                    .one_bas {
+                        .bouton_submit {
+                            .bouton_modifierMDP {
+                                color: #cbd0dd;
+                                background: rgba(49, 55, 74, 0.5);
+                                border-color: rgba(49, 55, 74, 0.5);
+
+                                &:hover {
+                                    color: #cbd0dd;
+                                    background: rgba(49, 55, 74, 0.8);
+                                    border-color: rgba(101, 105, 119, 0.55);
+                                }
+
+                                &:focus {
+                                    box-shadow: 0 0 0 0.2rem rgba(102, 108, 125, 0.5);
+                                }
+
+                                &:active {
+                                    color: #fff;
+                                    background: rgba(137, 141, 152, 0.6);
+                                    border-color: rgba(101, 105, 119, 0.55);
+                                    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0);
+                                }
+
+                                &:disabled {
+                                    color: #fff;
+                                    background: rgba(49, 55, 74, 0.5);
+                                }
+                            }
+                        }
+                    }
+                }
+
+                .two {
+                    background: rgba(21, 24, 35, 1);
+                    border: 1px solid rgba(50, 55, 72, 1);
+                }
+
+                .three {
+                    background: rgba(21, 24, 35, 1);
+                    border: 1px solid rgba(50, 55, 72, 1);
+                    .déconnexion{
+                        .bouton{
+                            color: #cbd0dd;
+                                background: rgba(49, 55, 74, 0.5);
+                                border-color: rgba(49, 55, 74, 0.5);
+
+                                &:hover {
+                                    color: #cbd0dd;
+                                    background: rgba(49, 55, 74, 0.8);
+                                    border-color: rgba(101, 105, 119, 0.55);
+                                }
+
+                                &:focus {
+                                    box-shadow: 0 0 0 0.2rem rgba(102, 108, 125, 0.5);
+                                }
+
+                                &:active {
+                                    color: #fff;
+                                    background: rgba(137, 141, 152, 0.6);
+                                    border-color: rgba(101, 105, 119, 0.55);
+                                    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0);
+                                }
+
+                                &:disabled {
+                                    color: #fff;
+                                    background: rgba(49, 55, 74, 0.5);
+                                }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .page_compte {
+        .haut_de_page {
+            background: rgba(21, 24, 35, 1);
+            border: 1px solid rgba(50, 55, 72, 1);
+        }
+
+        .bas_de_page {
+            .nav_bar_verticale {
+                background: rgba(21, 24, 35, 1);
+                border: 1px solid rgba(50, 55, 72, 1);
+            }
+
+            .Compte {
+                background: rgba(21, 24, 35, 1);
+                border: 1px solid rgba(50, 55, 72, 1);
+
+                .name_picture {
+                    background: rgba(21, 24, 35, 1);
+                    border: 1px solid rgba(50, 55, 72, 1);
+
+                    .picture {
+                        #display_image {
+                            border: 1px solid rgba(50, 55, 72, 1);
+                        }
+                    }
+                    .name{
+                        .bouton_submit{
+                            .bouton_modifierNom{
+                                color: #cbd0dd;
+                                background: rgba(49, 55, 74, 0.5);
+                                border-color: rgba(49, 55, 74, 0.5);
+
+                                &:hover {
+                                    color: #cbd0dd;
+                                    background: rgba(49, 55, 74, 0.8);
+                                    border-color: rgba(101, 105, 119, 0.55);
+                                }
+
+                                &:focus {
+                                    box-shadow: 0 0 0 0.2rem rgba(102, 108, 125, 0.5);
+                                }
+
+                                &:active {
+                                    color: #fff;
+                                    background: rgba(137, 141, 152, 0.6);
+                                    border-color: rgba(101, 105, 119, 0.55);
+                                    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0);
+                                }
+
+                                &:disabled {
+                                    color: #fff;
+                                    background: rgba(49, 55, 74, 0.5);
+                                }
+                            }
+                        }
+                    }
+                }
+
+                .infoPerso {
+                    background: rgba(21, 24, 35, 1);
+                    border: 1px solid rgba(50, 55, 72, 1);
+                }
+
+                .infoEntreprise {
+                    background: rgba(21, 24, 35, 1);
+                    border: 1px solid rgba(50, 55, 72, 1);
+                }
+            }
+        }
+
+    }
+
+    .page_repertoire {
+        .haut_de_page {
+            background: rgba(21, 24, 35, 1);
+            border: 1px solid rgba(50, 55, 72, 1);
+        }
+
+        .bas_de_page {
+            .nav_bar_verticale {
+                background: rgba(21, 24, 35, 1);
+                border: 1px solid rgba(50, 55, 72, 1);
+            }
+
+        }
+
+        .contenu {
+            .searchAndAddButton {
+                .boutonAddContact {
+                    color: #3874ff;
+                    border-color: #3874ff;
+                    background-color: transparent;
+                    border-radius: .375rem;
+                    padding: .375rem .75rem;
+                    gap: 1rem;
+                    font-size: 1rem;
+                    line-height: 1.5;
+                    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+
+                    &:hover {
+                        color: #fff;
+                        background-color: #3874ff;
+                        border-color: #004dff;
+                    }
+
+                    &:focus {
+                        color: #fff;
+                        background-color: #3874ff;
+                        border-color: #004dff;
+                        box-shadow: 0 0 0 0.2rem rgba(56, 116, 255, 0.5);
+                    }
+
+                    &:active {
+                        color: #fff;
+                        background-color: #3874ff;
+                        border-color: #004dff;
+                        box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0);
+                    }
+
+                    &:disabled {
+                        color: #3874ff;
+                        background-color: transparent;
+                        border-color: #3874ff;
+                    }
+                }
+
+                .input_box {
+                    input {
+                        background: rgba(21, 24, 35, 1);
+                        border: 1px solid rgba(50, 55, 72, 1);
+
+                        &::-webkit-input-placeholder {
+                            color: rgb(160, 166, 186);
+                        }
+                    }
+
+                }
+            }
+
+            .tabListContact {
+                background: rgba(21, 24, 35, 1);
+                border: 1px solid rgba(50, 55, 72, 1);
+            }
+        }
+    }
+
+    .page_calendrier {
+        .haut_de_page {
+            background: rgba(21, 24, 35, 1);
+            border: 1px solid rgba(50, 55, 72, 1);
+        }
+
+        .bas_de_page {
+            .nav_bar_verticale {
+                background: rgba(21, 24, 35, 1);
+                border: 1px solid rgba(50, 55, 72, 1);
+            }
+
+            .Calendrier {
+                background: rgba(21, 24, 35, 1);
+                border: 1px solid rgba(50, 55, 72, 1);
+
+                .Titre {
+                    background: rgba(21, 24, 35, 1);
+                    border-right: 1px solid rgba(50, 55, 72, 1);
+
+                    .mini_formulaire_evenement {
+                        .ajout_input {
+                            background: rgba(21, 24, 35, 1);
+                            border: 1px solid rgba(50, 55, 72, 1);
+                            color: #fff;
+                        }
+
+                        .date {
+                            background: rgba(21, 24, 35, 1);
+                            border: 1px solid rgba(50, 55, 72, 1);
+                            color: #fff;
+                        }
+
+                    }
+
+                    .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);
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .page_dashboard {
+        .haut_de_page {
+            background: rgba(21, 24, 35, 1);
+            border: 1px solid rgba(50, 55, 72, 1);
+        }
+
+        .bas_de_page {
+            .nav_bar_verticale {
+                background: rgba(21, 24, 35, 1);
+                border: 1px solid rgba(50, 55, 72, 1);
+            }
+
+            .Dashboard {
+                ._gauche {
+                    ._haut {
+                        .Mes_infos {
+                            background: rgba(21, 24, 35, 1);
+                            border: 1px solid rgba(50, 55, 72, 1);
+                        }
+
+                        .Alertes {
+                            background: rgba(21, 24, 35, 1);
+                            border: 1px solid rgba(50, 55, 72, 1);
+                        }
+                    }
+
+                    ._bas {
+                        .Mes_prochaines_activités {
+                            background: rgba(21, 24, 35, 1);
+                            border: 1px solid rgba(50, 55, 72, 1);
+                        }
+
+                        .Chiffre_clés {
+                            .Ch_Clé_gauche {
+                                .Ch_Clé_gauche_haut {
+                                    background: rgba(21, 24, 35, 1);
+                                    border: 1px solid rgba(50, 55, 72, 1);
+                                }
+
+                                .Ch_Clé_gauche_bas {
+                                    background: rgba(21, 24, 35, 1);
+                                    border: 1px solid rgba(50, 55, 72, 1);
+                                }
+                            }
+
+                            .Ch_Clé_droite {
+                                .Ch_Clé_droite_haut {
+                                    background: rgba(21, 24, 35, 1);
+                                    border: 1px solid rgba(50, 55, 72, 1);
+                                }
+
+                                .Ch_Clé_droite_bas {
+                                    background: rgba(21, 24, 35, 1);
+                                    border: 1px solid rgba(50, 55, 72, 1);
+                                }
+                            }
+                        }
+                    }
+                }
+
+                ._droite {
+                    .clients_important {
+                        background: rgba(21, 24, 35, 1);
+                        border: 1px solid rgba(50, 55, 72, 1);
+                    }
+
+                    .contacts_ajouté_récemment {
+                        background: rgba(21, 24, 35, 1);
+                        border: 1px solid rgba(50, 55, 72, 1);
+                    }
+                }
+
+            }
+        }
+    }
 }