diff --git a/src/components/Contact/ContactDetail.js b/src/components/Contact/ContactDetail.js index 3611764..0b5f6e9 100644 --- a/src/components/Contact/ContactDetail.js +++ b/src/components/Contact/ContactDetail.js @@ -1,5 +1,5 @@ import React from 'react' -import {Link,useLocation} from'react-router-dom'; +import {Link,useLocation, useParams} from'react-router-dom'; import user from '../../images/user.jpg'; const ContactDetail = (props) => { @@ -9,6 +9,7 @@ const ContactDetail = (props) => { // FROM CONTACTCARD IN LINK IT TOOK STATE AND THEN IT IS PASSED HERE let location = useLocation(); const {name, email} = location.state.contact; + const {idcontact} = useParams(); return (
diff --git a/src/pages/Repertoire.js b/src/pages/Repertoire.js index 6aa5662..8b64f34 100644 --- a/src/pages/Repertoire.js +++ b/src/pages/Repertoire.js @@ -40,6 +40,12 @@ function Repertoire() { }); }, []); + function onClickDetail() { + return + + + } + return (
@@ -76,14 +82,19 @@ function Repertoire() { - {contacts.map((contact) => ( - - - {contact.lastname} - {contact.firstname} - {contact.name} - - ))} + + {contacts.map((contact) => ( + + + + {contact.lastname} + {contact.firstname} + {contact.name} + + + + ))} + diff --git a/src/styles/components/_compte.scss b/src/styles/components/_compte.scss index 7327ec3..dbd2cb3 100644 --- a/src/styles/components/_compte.scss +++ b/src/styles/components/_compte.scss @@ -45,403 +45,400 @@ body { } - .bas_de_page { + .bas_de_page { + display: flex; + flex-direction: row; + justify-content: space-between; + width: auto; + height: 86%; + + + .nav_bar_verticale { display: flex; - flex-direction: row; - justify-content: space-between; - width: auto; - height: 86%; + flex-direction: column; + justify-content: space-around; + align-items: center; + width: 5%; + margin: 5px 5px 10px 10px; + + background: rgba(255, 255, 255, 1); + border: 1px solid #cbd0dd; + + border-radius: 5px; + backdrop-filter: blur(3px); + -webkit-backdrop-filter: blur(15px); + .parti_one { + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + width: 100%; + height: 18%; + } - .nav_bar_verticale { + .parti_two { display: flex; flex-direction: column; justify-content: space-around; align-items: center; - width: 5%; - margin: 5px 5px 10px 10px; + width: 100%; + height: 35%; + } - background: rgba(255, 255, 255, 1); - border: 1px solid #cbd0dd; + .parti_three { + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + margin-top: 15px; + width: 100%; + height: 18%; + } - border-radius: 5px; - backdrop-filter: blur(3px); - -webkit-backdrop-filter: blur(15px); + .parti_four { + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + width: 100%; + height: 18%; + } - .parti_one { - display: flex; - flex-direction: row; - justify-content: space-around; - align-items: center; - width: 100%; - height: 18%; - } + .button { + display: flex; + object-fit: cover; + background-color: transparent; + border: none; + cursor: pointer; - .parti_two { + .logo_nav_bar { display: flex; - flex-direction: column; - justify-content: space-around; - align-items: center; - width: 100%; - height: 35%; + margin: 10px; + height: 50px; + width: 50px; } + } + } + } - .parti_three { - display: flex; - flex-direction: row; - justify-content: space-around; - align-items: center; - margin-top: 15px; - width: 100%; - height: 18%; - } - .parti_four { - display: flex; - flex-direction: row; - justify-content: space-around; - align-items: center; - width: 100%; - height: 18%; - } - .button { - display: flex; - object-fit: cover; - background-color: transparent; - border: none; - cursor: pointer; - - .logo_nav_bar { - display: flex; - margin: 10px; - height: 50px; - width: 50px; - } - } - } - } + .Compte { + display: flex; + flex-direction: column; + justify-content: space-evenly; + width: 94.3%; + height: auto; + margin: 5px 10px 10px 5px; + background: rgba(255, 255, 255, 1); + border: 1px solid #cbd0dd; + border-radius: 5px; + backdrop-filter: blur(3px); + -webkit-backdrop-filter: blur(15px); - .Compte { - display: flex; - flex-direction: column; - justify-content: space-evenly; - width: 94.3%; - height: auto; - margin: 5px 10px 10px 5px; + .name_picture { + display: flex; + flex-direction: column; + justify-content: space-evenly; + margin: 13px; + width: auto; + height: 30%; - background: rgba(255, 255, 255, 1); - border: 1px solid #cbd0dd; + background: rgba(255, 255, 255, 0.1); + border-radius: 5px; + backdrop-filter: blur(3px); + -webkit-backdrop-filter: blur(15px); - border-radius: 5px; - backdrop-filter: blur(3px); - -webkit-backdrop-filter: blur(15px); + .picture { + display: flex; + flex-direction: row; + justify-content: left; + margin-right: 25px; + margin-left: 25px; + border-bottom: 1px solid grey; - .name_picture { + #display_image { display: flex; - flex-direction: column; - justify-content: space-evenly; - margin: 13px; - width: auto; - height: 30%; - + margin-bottom: 5px; + height: 135px; + width: 135px; background: rgba(255, 255, 255, 0.1); - border-radius: 5px; + border: 1px solid #cbd0dd; + + border-radius: 100px; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(15px); - .picture { - display: flex; - flex-direction: row; - justify-content: left; - margin-right: 25px; - margin-left: 25px; - border-bottom: 1px solid grey; - - #display_image { - display: flex; - margin-bottom: 5px; - height: 135px; - width: 135px; - background: rgba(255, 255, 255, 0.1); - border: 1px solid #cbd0dd; - - border-radius: 100px; - backdrop-filter: blur(3px); - -webkit-backdrop-filter: blur(15px); - - .img { - border-radius: 100px; - object-fit: cover; - } - } + .img { + border-radius: 100px; + object-fit: cover; } + } + } - .figure { - width: 45%; - } + .figure { + width: 45%; + } - .img { - width: 100%; - } - } + .img { + width: 100%; } } + } +} - /*.bouton_submit { - display: flex; - margin-left: 30px; - align-items: center; - cursor: pointer; - - - - .fileUpload { - color: #3874ff; - border-color: #3874ff; - background-color: transparent; - border: 1px solid #004dff; - border-radius: .375rem; - 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; - } - } - } - } +.bouton_submit { + display: flex; + margin-left: 30px; + align-items: center; + cursor: pointer; - .name { - display: flex; - flex-direction: row; - justify-content: space-between; - margin: 0 25px; - - .presentationNom { - display: flex; - flex-direction: row; - justify-content: space-evenly; - - .def { - display: flex; - font-weight: bold; - } - - .nom { - display: flex; - margin-left: 125px; - ; - } - - .texte { - display: flex; - flex-wrap: wrap; - 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; - - &:hover { - background-color: lightgrey; - } - } - } - } - } + .fileUpload { + color: #3874ff; + border-color: #3874ff; + background-color: transparent; + border: 1px solid #004dff; + border-radius: .375rem; + 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; - .infoPerso { - display: flex; - flex-direction: column; - justify-content: space-evenly; - margin-left: 13px; - margin-right: 13px; - width: auto; - height: 30%; - - background: rgba(255, 255, 255, 0.1); - border-radius: 15px; - box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); - backdrop-filter: blur(3px); - -webkit-backdrop-filter: blur(15px); - - .description { - display: flex; - margin: 0 25px; - border-bottom: 1px solid grey; - padding: 0 0 10px 0; - font-weight: bold; - } + &:hover { + color: #fff; + background-color: #3874ff; + border-color: #004dff; + } - .parti_mail { - display: flex; - flex-direction: row; - margin: 0 25px; - border-bottom: 1px solid grey; - padding: 0 0 15px 0; - - .def { - display: flex; - font-weight: bold; - } + &:focus { + color: #fff; + background-color: #3874ff; + border-color: #004dff; + box-shadow: 0 0 0 0.2rem rgba(56, 116, 255, 0.5); + } - .mail { - display: flex; - margin-left: 199px; - } - } + &:active { + color: #fff; + background-color: #3874ff; + border-color: #004dff; + box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0); + } - .parti_pays { - display: flex; - flex-direction: row; - margin: 0 25px; - border-bottom: 1px solid grey; - padding: 0 0 15px 0; - - .def { - display: flex; - font-weight: bold; - } + &:disabled { + color: #3874ff; + background-color: transparent; + border-color: #3874ff; + } + } +} - .pays_region { - display: flex; - margin-left: 110px; - } - } - .parti_tel { - display: flex; - flex-direction: row; - margin: 0 25px; +.name { + display: flex; + flex-direction: row; + justify-content: space-between; + margin: 0 25px; - .def { - display: flex; - font-weight: bold; - } + .presentationNom { + display: flex; + flex-direction: row; + justify-content: space-evenly; - .tel { - display: flex; - margin-left: 207px; - } - } + .def { + display: flex; + font-weight: bold; + } + + .nom { + display: flex; + margin-left: 125px; + ; + } + + .texte { + display: flex; + flex-wrap: wrap; + 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; + + &:hover { + background-color: lightgrey; } + } + } +} - .infoEntreprise { - display: flex; - flex-direction: column; - justify-content: space-evenly; - margin: 13px; - width: auto; - height: 30%; - - background: rgba(255, 255, 255, 0.1); - border-radius: 15px; - box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); - backdrop-filter: blur(3px); - -webkit-backdrop-filter: blur(15px); - - .description { - display: flex; - margin: 0 25px; - border-bottom: 1px solid grey; - padding: 0 0 10px 0; - font-weight: bold; - } - .parti_name { - display: flex; - flex-direction: row; - margin: 0 25px; - border-bottom: 1px solid grey; - padding: 0 0 15px 0; - - .def { - display: flex; - font-weight: bold; - } - .name { - display: flex; - margin-left: 92px; - } - } +.infoPerso { + display: flex; + flex-direction: column; + justify-content: space-evenly; + margin-left: 13px; + margin-right: 13px; + width: auto; + height: 30%; + + background: rgba(255, 255, 255, 0.1); + border-radius: 15px; + box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); + backdrop-filter: blur(3px); + -webkit-backdrop-filter: blur(15px); + + .description { + display: flex; + margin: 0 25px; + border-bottom: 1px solid grey; + padding: 0 0 10px 0; + font-weight: bold; + } - .parti_secteurAct { - display: flex; - flex-direction: row; - margin: 0 25px; - border-bottom: 1px solid grey; - padding: 0 0 15px 0; - - .def { - display: flex; - font-weight: bold; - } + .parti_mail { + display: flex; + flex-direction: row; + margin: 0 25px; + border-bottom: 1px solid grey; + padding: 0 0 15px 0; - .secteurAct { - display: flex; - margin-left: 98px; - } - } + .def { + display: flex; + font-weight: bold; + } - .parti_nbClient { - display: flex; - flex-direction: row; - margin: 0 25px; + .mail { + display: flex; + margin-left: 199px; + } + } - .def { - display: flex; - font-weight: bold; - } + .parti_pays { + display: flex; + flex-direction: row; + margin: 0 25px; + border-bottom: 1px solid grey; + padding: 0 0 15px 0; - .nbClient { - display: flex; - margin-left: 115px; - } - } - } + .def { + display: flex; + font-weight: bold; + } + + .pays_region { + display: flex; + margin-left: 110px; + } + } + + .parti_tel { + display: flex; + flex-direction: row; + margin: 0 25px; + + .def { + display: flex; + font-weight: bold; + } + + .tel { + display: flex; + margin-left: 207px; + } + } +} + +.infoEntreprise { + display: flex; + flex-direction: column; + justify-content: space-evenly; + margin: 13px; + width: auto; + height: 30%; + + background: rgba(255, 255, 255, 0.1); + border-radius: 15px; + box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); + backdrop-filter: blur(3px); + -webkit-backdrop-filter: blur(15px); + + .description { + display: flex; + margin: 0 25px; + border-bottom: 1px solid grey; + padding: 0 0 10px 0; + font-weight: bold; + } + + .parti_name { + display: flex; + flex-direction: row; + margin: 0 25px; + border-bottom: 1px solid grey; + padding: 0 0 15px 0; + + .def { + display: flex; + font-weight: bold; + } + + .name { + display: flex; + margin-left: 92px; + } + } + + .parti_secteurAct { + display: flex; + flex-direction: row; + margin: 0 25px; + border-bottom: 1px solid grey; + padding: 0 0 15px 0; + + .def { + display: flex; + font-weight: bold; + } + + .secteurAct { + display: flex; + margin-left: 98px; + } + } + + .parti_nbClient { + display: flex; + flex-direction: row; + margin: 0 25px; + + .def { + display: flex; + font-weight: bold; + } + + .nbClient { + display: flex; + margin-left: 115px; } } } @@ -465,5 +462,4 @@ body { border-radius: 10px; background-color: $xiketic; cursor: pointer; -} } \ No newline at end of file