button post

Site Web/client/src/components/AjoutLien.js

@@ -3,6 +3,7 @@ import React, {useContext, useState} from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { addPost, getPosts } from '../actions/post.actions';
 import { UidContext } from './AppContext';
+import IconeFavor from '../assets/img/logo.png';
 
 const AjoutLien = () => {
     const uid = useContext(UidContext);
@@ -75,9 +76,20 @@ const AjoutLien = () => {
                     </button>
                 }
                 {uid !== null &&
-                    <button className='button-add-link'  onClick={() => setDisplayAdd(true)} >
+                    // <button className='button-add-link'  onClick={() => setDisplayAdd(true)} >
-                        Poster un lien
+                    //     Poster un lien
+                    // </button>
+                    <ul className="wrapperAjout">
+  
+                    <button className="iconFavor" onClick={() => setDisplayAdd(true)}>
+                        <div className="flexButon">
+                        {/* <img src={IconeFavor}/> */}
+                        <span>Poster un lien</span>
+                        
+                        </div>
                     </button>
+ 
+                    </ul>
                 }
             </div>
             {displayAdd && (
@@ -111,7 +123,7 @@ const AjoutLien = () => {
                                     value={tag}
                                     onChange={e => setTag(e.target.value)}
                                 />
-                                <i type="submit" onClick={handleSubmit}>Add Tag</i>
+                                <i type="submit" onClick={handleSubmit}>Ajouter un tag</i>
 
                                 <ul>
                                     {tags.map(t => (
@@ -121,7 +133,7 @@ const AjoutLien = () => {
 
                                 <div id="newPoste-buttonForm">
                                     <div>
-                                        <button  onClick={() => setDisplayAdd(false)} className="newPoste-btn-cancel" >retour</button>
+                                        <button  onClick={() => setDisplayAdd(false)} className="newPoste-btn-cancel" >Retour</button>
                                     </div>
                                     <div>
                                         <button onClick={handlePost} className="newPoste-btn">Poster</button>

Site Web/client/src/styles/component/_ajoutLien.scss

@@ -9,10 +9,50 @@
     cursor: pointer;
 }
 
+.flexButon img {
+  width: 20px;
+  padding-right:20px;
+}
+
+.flexButon {
+  display: flex;
+  flex-direction: row;
+  justify-content:space-evenly;
+  
+}
+
+.wrapperAjout .iconFavor {
+  position: fixed;
+  background: #ffffff;
+  border-radius: 25px;
+  width: 250px;
+  height: 50px;
+  font-size: 18px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+
+  border : none;
+}
+
+.wrapperAjout .iconFavor:hover span {
+  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
+  
+}
+
+.wrapperAjout .iconFavor:hover {
+  background: #a8a8a8;
+  color: #ffffff;
+  border : none;
+}
+
 .popup-ajout-container {
   position: fixed;
   animation: popup 1s forwards;
-  z-index: 100;
+  z-index: 10000;
   left: 50%;
   
     @keyframes popup {