Ajout de l'image dans la page mon compte (Terminé)

3 years ago · 93aba8e766
parent bd9f2ed464
commit 93aba8e766
3 changed files with 53 additions and 11 deletions
--- a/src/pages/Compte.js
+++ b/src/pages/Compte.js
@ -1,12 +1,20 @@
 import { Component } from '@fullcalendar/core';
-import { render } from '@testing-library/react';
-import { click } from '@testing-library/user-event/dist/click';
-import React from 'react';
+import React, { useState } from 'react';
 import NavigationDashboard from '../components/NavigationDashboard';
+import img1 from '../img/logo_personEntouré.svg';



-const Compte = () => {
+
+function Compte() {
+
+    const [file, setFile] = useState();
+    function handleChange(e) {
+        console.log(e.target.files);
+        setFile(URL.createObjectURL(e.target.files[0]));
+    }
+
+
    return (
        <body>

@ -31,9 +39,16 @@ const Compte = () => {
                    <div className="Compte">
                        <div className="name_picture">
                            <div className="picture">
-                                <div id="display_image"></div>
+                                <div id="display_image">
+                                    <img src={img1} srcSet={file} id="img" className="img"></img>
+                                </div>
                                <div className='bouton_submit'>
-                                    <input type="file" name="fileUpload" id="fileUpload" accept="image/*"/>
+                                    <input type="file" name="fileUpload" id="input" accept="image/" onChange={handleChange} />
+                                    <div className="label">
+                                        <label className="fileUpload" htmlFor="input">
+                                            Ajoutez votre photo
+                                        </label>
+                                    </div>
                                </div>
                            </div>
                            <div className="name">
@ -81,8 +96,8 @@ const Compte = () => {
            </div>
        </body>
    );
-
 };


+
 export default Compte;
--- a/src/styles/components/_compte.scss
+++ b/src/styles/components/_compte.scss
@ -199,10 +199,15 @@ body {
                            height: 135px;
                            width: 135px;
                            background: rgba(255, 255, 255, 0.1);
-                            border-radius: 15px;
+                            border-radius: 100px;
                            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
                            backdrop-filter: blur(3px);
                            -webkit-backdrop-filter: blur(15px);
+
+                            .img {
+                                border-radius: 100px;
+                                object-fit: cover;
+                            }
                        }
                        
                        .figure{
@ -220,7 +225,9 @@ body {
                            align-items: center;
                            cursor: pointer;

-                            .bouton_ajoutPhoto {
+                            
+
+                            /*.bouton_ajoutPhoto {
                                height: 40px;
                                width: 150px;
                                background-color: rgb(190, 189, 189);
@ -231,7 +238,7 @@ body {
                                &:hover{
                                    background-color: lightgrey;   
                                }
-                            }
+                            }*/
                        }
                    }

@ -432,3 +439,23 @@ body {
        }
    }
 }
+
+#input[type="file"] {
+    display: none;
+}
+
+.fileUpload{
+    width: 100%;
+    margin-top: 1rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: auto;
+    width: 150px;
+    height: 50px;
+    color: white;
+    border-radius: 10px;
+    background-color: $xiketic;
+    cursor: pointer;
+}
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@ -26,7 +26,7 @@ $alice-blue: rgba(232, 238, 242, 1);
 $blue-munsell: rgba(0, 136, 163, 1);
 $malachite: rgba(50, 232, 117, 1);
 $rufous: rgba(155, 41, 21, 1);
-$xiketic: rgba(2, 1, 20, 1);
+$xiketic: rgb(21, 18, 75);

 /* SCSS Gradient */
 $gradient-top: linear-gradient(0deg, #e8eef2ff, #0088a3ff, #32e875ff, #9b2915ff, #020114ff);