développement page compte

public/logo_personEntouré.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M11.15 35.1q3.15-1.95 6.2-2.975Q20.4 31.1 24 31.1q3.6 0 6.7 1.025t6.2 2.975q2.2-2.7 3.1-5.4.9-2.7.9-5.7 0-7.2-4.85-12.05Q31.2 7.1 24 7.1q-7.2 0-12.05 4.85Q7.1 16.8 7.1 24q0 3 .925 5.7t3.125 5.4ZM24 25.6q-2.95 0-4.925-2-1.975-2-1.975-4.95 0-2.9 2-4.9 2-2 4.9-2 2.95 0 4.925 2 1.975 2 1.975 4.95 0 2.9-2 4.9-2 2-4.9 2Zm0 18.7q-4.25 0-7.95-1.6T9.6 38.325q-2.75-2.775-4.325-6.45Q3.7 28.2 3.7 24q0-4.25 1.6-7.925T9.675 9.65q2.775-2.75 6.45-4.35Q19.8 3.7 24.05 3.7q4.2 0 7.875 1.6t6.425 4.35q2.75 2.75 4.35 6.45 1.6 3.7 1.6 7.9t-1.6 7.875q-1.6 3.675-4.35 6.45Q35.6 41.1 31.9 42.7T24 44.3Z"/></svg>

src/pages/Compte.js

@@ -52,7 +52,19 @@ const Compte = () => {
                     </div>
                     <div className="Compte">
                         <div className="name_picture">
-                            <p>name_picture</p>
+                            <div className="picture">
+                                <img className="photo_profil" srcSet="./logo_personEntouré.svg"/>
+                                <div className='bouton_submit'>
+                                    <button className="bouton_ajoutPhoto" type="submit">Ajouter une photo</button>
+                                </div>
+                            </div>
+                            <div className="name">
+                                <p className="def">Nom Complet :</p>
+                                <p className="nom">Mateo Centeno</p>
+                                <div className='bouton_submit'>
+                                    <button className="bouton_modifierNom" type="submit">Modifier le nom</button>
+                                </div>
+                            </div>
                         </div>
                         <div className="infoPerso">
                             <p>infoPerso</p>

src/styles/components/_compte.scss

@@ -26,7 +26,6 @@ body {
 
             .titre {
                 font-size: 40px;
-                font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
             }
             
             .rechLogo {
@@ -138,6 +137,7 @@ body {
                 .name_picture {
                     display: flex;
                     flex-direction: column;
+                    justify-content: space-evenly;
                     margin: 30px;
                     width: auto;
                     height: 30%;
@@ -147,6 +147,56 @@ body {
                     box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
                     backdrop-filter: blur(3px);
                     -webkit-backdrop-filter: blur(15px);
+
+                    .picture {
+                        display: flex;
+                        flex-direction: row;
+                        justify-content: left;
+                        margin-left: 25px;
+
+                        .photo_profil {
+                            display: flex;
+                            height: 150px;
+                            width: 150px;
+                        }
+
+                        .bouton_submit {
+                            display: flex;
+                            margin-left: 30px;
+                            align-items: center;
+
+                            .bouton_ajoutPhoto {
+                                height: 40px;
+                                width: 150px;
+                                background-color: grey;
+                                border-radius: 5px;
+                                border: 1px solid black;
+                                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+                    
+                                &:hover{
+                                    background-color: lightgrey;   
+                                }
+                            }
+                        }
+                    }
+
+                    .name {
+                        display: flex;
+                        flex-direction: row;
+
+                        .def {
+                            display: flex;
+                        }
+
+                        .nom {
+                            display: flex;
+                        }
+
+                        .bouton_submit {
+                            display: flex;
+                            justify-content: right;
+                        }
+                    }
                 }
 
                 .infoPerso {