diff --git a/Site Web/client/src/assets/img/plus.png b/Site Web/client/src/assets/img/plus.png new file mode 100644 index 00000000..36d8a4bd Binary files /dev/null and b/Site Web/client/src/assets/img/plus.png differ diff --git a/Site Web/client/src/components/Configurations/ConfigurationDuCompte.js b/Site Web/client/src/components/Configurations/ConfigurationDuCompte.js index ba15f76f..b4768711 100644 --- a/Site Web/client/src/components/Configurations/ConfigurationDuCompte.js +++ b/Site Web/client/src/components/Configurations/ConfigurationDuCompte.js @@ -15,7 +15,7 @@ const ConfigurationDuCompte =()=>{

Modifucation information du compte

-
+
email @@ -46,7 +46,7 @@ const ConfigurationDuCompte =()=>{ value={controlPassword}/>
-
+

Suppression du compte

@@ -54,7 +54,7 @@ const ConfigurationDuCompte =()=>{ - gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg +

Note : action irreversible qui vous fera perdre toutes les données du compte en conséquence

) diff --git a/Site Web/client/src/components/Configurations/ConfigurationDuProfil.js b/Site Web/client/src/components/Configurations/ConfigurationDuProfil.js index 6f0c730f..021d9b20 100644 --- a/Site Web/client/src/components/Configurations/ConfigurationDuProfil.js +++ b/Site Web/client/src/components/Configurations/ConfigurationDuProfil.js @@ -1,53 +1,85 @@ import React, { useState } from 'react'; import { useSelector } from 'react-redux'; import PP from "../../assets/img/unknown.png"; +import PLUS from "../../assets/img/plus.png"; import { NavLink } from "react-router-dom"; const ConfigurationDuProfil = ()=>{ + + const userData = useSelector((state) => state.user.user); const [pseudo, setPseudo] = useState(''); const [nomUtilisateur, setNomUtilisateur] = useState(''); + const [displayAdd, setDisplayAdd] = useState(false); + const handleModals=()=>{ + + + }; - return( + return(
-

Modifucation du Profil

+

Modifucation du Profil

- - -
+ +
Pseudo: Nom d'utilisateur: -
-
- - setNomUtilisateur (e.target.value)} - value={pseudo} - /> - setPseudo (e.target.value)} - /> -
+
+
+ setNomUtilisateur (e.target.value)} + value={nomUtilisateur} + /> + setPseudo (e.target.value)} + /> +

Acces au dossiers personnel

+
+
+ + +
+ dossiers + +
+ + {displayAdd && ( +
+
+
+ + +
+
+ + +
+
+
+ )}
) } -export default ConfigurationDuProfil; +export default ConfigurationDuProfil; \ No newline at end of file diff --git a/Site Web/client/src/pages/Configuration.js b/Site Web/client/src/pages/Configuration.js index 620be1d6..bfbfbb48 100644 --- a/Site Web/client/src/pages/Configuration.js +++ b/Site Web/client/src/pages/Configuration.js @@ -30,22 +30,24 @@ const Configuration = () => { return(
+
- - - +
{ConfigurationProfil &&} {ConfigurationCompte &&} {PolitiqueConfidentialite &&} +
); } diff --git a/Site Web/client/src/styles/_settings.scss b/Site Web/client/src/styles/_settings.scss index 6d8e21d6..08a36eb4 100644 --- a/Site Web/client/src/styles/_settings.scss +++ b/Site Web/client/src/styles/_settings.scss @@ -5,6 +5,8 @@ $color-2: #CCF2F4; $color-3: #F4F9F9; $color-4: #AAAAAA; $color-5: #AABBCC; +$color-6: #5499c7 ; +$color-7: #1b4f72 ; @@ -17,6 +19,8 @@ $color-5: #AABBCC; // $color-6: yellow; + + * { padding: 0; margin: 0; @@ -24,7 +28,7 @@ $color-5: #AABBCC; } .imageDeProfil{ - object-fit: none; + object-fit: cover; clip-path:circle(50%); } diff --git a/Site Web/client/src/styles/component/_configurationDuCompte.scss b/Site Web/client/src/styles/component/_configurationDuCompte.scss index 680974c5..5225aa7b 100644 --- a/Site Web/client/src/styles/component/_configurationDuCompte.scss +++ b/Site Web/client/src/styles/component/_configurationDuCompte.scss @@ -25,9 +25,24 @@ margin-left: 6%; width: 16%; max-width: 160px; + min-width: 120px; background-color: $color-3; border: 2px solid $color-4; border-radius: 20px; + } + .buttonSuppressionText{ + margin-left: 2%; + max-width: 400px; + min-width: 200px; + width: 35%; + font-style: italic; + color: red; + opacity: 70%; + background-color: $color-3; + height: fit-content; + padding: 1%; + + } button:hover { background-color: $color-1; diff --git a/Site Web/client/src/styles/component/_configurationDuProfil.scss b/Site Web/client/src/styles/component/_configurationDuProfil.scss index ee1c7b3f..b908bfc0 100644 --- a/Site Web/client/src/styles/component/_configurationDuProfil.scss +++ b/Site Web/client/src/styles/component/_configurationDuProfil.scss @@ -1,8 +1,4 @@ -.modificationDuProfilBackgroud{ - // background: $color-6; - -} .modificationDuProfil{ display: flex; @@ -25,13 +21,38 @@ span{ } -.imageDeProfilConfiguration{ + +.plusButton{ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + opacity: 0; + transition: opacity 0.5s; +} + + +.imageDeProfilConfigurationPlus { + position: relative; width: 15%; + max-width: 180px; + min-width: 130px; + border: none; + +} + +.imageDeProfilConfigurationPlus:hover .plusButton { + opacity:0.70; } + .imageDeProfilConfiguration:hover{ filter: blur(1px); + opacity: 0.2; + transition: opacity 1s; + } + .accesDossiersPerso{ display: flex; align-items: row; @@ -46,12 +67,111 @@ input{ margin-bottom: 2%; } + + .accesDossiersPerso{ display: flex; + flex-direction: column; } +.accesDossiersPersoValidation{ + flex-direction: row; +} .textAccesDossiersPerso{ margin-left:18px; + font-size: medium; + font-style: italic; + opacity: 70%; + } +.popup-modificationProfil{ + z-index: 100; + width: 100%; + height: 100%; + top: 0; + left: 0; + position: fixed; + animation: popup 1s forwards; + + @keyframes popup { + to { + backdrop-filter: blur(2px); + } + } + + .modal { + position: absolute; + top: 10%; + left: 50%; + transform: translate(-100%); + background: $color-2; + padding: 25px; + border-radius: 20px; + box-shadow: 0 0 2px rgba(131, 130, 130, 0.356); + overflow: auto; + transform: scaleY(0); + transform-origin: center; + animation: modal .5s forwards; + max-width: 360px; + min-width: 320px; + border: 2px solid $color-4; + border-bottom-right-radius: 50px; + + @keyframes modal { + to { + transform: scale(1) translate(-50%); + } + } + + &:hover { + transform: scale(1.07); + } + } + + + &::-webkit-scrollbar { + width: 2px; + } + &::-webkit-scrollbar-track { + background: $color-4; + } + &::-webkit-scrollbar-thumb { + background: $color-1; + } + &::-webkit-scrollbar-thumb:hover { + background: #555; + } + .imagesPopup{ + display: flex; + justify-content: space-between; + flex-direction: row; + + } + .imagesPopup{ + display: flex; + flex-direction: row; + justify-content: space-between; + + } + .buttonPopup { + display: flex; + flex-direction: row; + justify-content: space-between; + margin-top: 5%; + margin-left: 8%; + margin-right: 8%; + button{ + background: $color-4; + border-radius: 20px; + + &:hover { + color: $color-3; + transform: translateX(2px); + } + } + + } + +} diff --git a/Site Web/client/src/styles/component/_politiqueDeConfidentialite.scss b/Site Web/client/src/styles/component/_politiqueDeConfidentialite.scss index 394dc064..f05690b9 100644 --- a/Site Web/client/src/styles/component/_politiqueDeConfidentialite.scss +++ b/Site Web/client/src/styles/component/_politiqueDeConfidentialite.scss @@ -1,30 +1,30 @@ .PolitiqueDeConfidentialiteText{ - margin-top: 2%; - text-indent: 1%; - text-align: justify; - display: flex; - justify-content: center; - p{ - max-width:85% ; - min-width: 380px; - animation-duration: 3s; - animation-name: slidein; + margin-top: 2%; + text-indent: 1%; + text-align: justify; + display: flex; + justify-content: center; + p{ + max-width:85% ; + min-width: 380px; + animation-duration: 2s; + animation-name: slide; + - - @keyframes slidein { - from { - margin-top: 100%; - width: 50%; - } - - to { - margin-top: 0%; - width: 100%; - } + @keyframes slide { + from { + margin-top: 100%; + width: 50%; } - - } + + to { + margin-top: 0%; + width: 100%; + } + } + + } } diff --git a/Site Web/client/src/styles/index.scss b/Site Web/client/src/styles/index.scss index 734827f0..977b7ee7 100644 --- a/Site Web/client/src/styles/index.scss +++ b/Site Web/client/src/styles/index.scss @@ -10,6 +10,7 @@ @import'./component/politiqueDeConfidentialite'; @import './component/newPoste'; + @import './component/notif'; @import './component/trends'; diff --git a/Site Web/client/src/styles/pages/_configuration.scss b/Site Web/client/src/styles/pages/_configuration.scss index a985975f..1952efa1 100644 --- a/Site Web/client/src/styles/pages/_configuration.scss +++ b/Site Web/client/src/styles/pages/_configuration.scss @@ -1,28 +1,46 @@ + .boutonDeConfigurations{ + display: flex; - justify-content: center; + justify-content: space-between; flex-direction: row; + background-color: $color-7; + margin-left: -1%; + margin-right: 1%; + - button{ + a{ + + transition: margin-right 2s,1s; + transition: background-color linear 1s,1s; padding: 1%; margin-bottom: 1%; - margin-top: 2%; - margin-left: 6%; - width: 16%; - max-width: 200px; + margin-top: 1%; + margin-left: 3%; + margin-right: 3%; + width: 30%; + min-width: 140px; background-color: $color-3; border: 2px solid $color-4; border-radius: 20px; + text-align: center; + height: px; } - button:hover { - background-color: $color-1; - border-color: black; - + a:hover { + background-color: $color-6; + padding-right:14%; + color:$color-3; } } +.configuration{ + input:focus{ + background-color:$color-3; + } + margin-left: 1%; +} .ligneHorizontal{ border-bottom: thick solid $color-1; @@ -32,6 +50,13 @@ margin-top: 2%; } + +// body{ +// background-color: gray; +// } + + + .mainConfig{ display: flex; flex-direction: column;