Amélioration des indications mes réponses et comprendre

Ce ne sont plus des boutons

source/components/Results.js

@@ -57,7 +57,7 @@ export default class Results extends Component {
               ))}
             </ul>
           </div>
-          <button className="scrollButton down" style={{opacity: done ? 1 : 0}}>↓ Comprendre mes résultats</button>
+          <h3 className="scrollIndication down" style={{opacity: done ? 1 : 0}}><i className="fa fa-long-arrow-down" aria-hidden="true"></i> Comprendre mes résultats</h3>
         </section>
       </div>
     )

source/components/Simulateur.css

@@ -75,8 +75,9 @@
 	opacity: 1;
 }
 
-.scrollButton {
+.scrollIndication {
 	display: block;
+	text-align: center;
 	margin: 1.4em auto;
 	transition: 1s opacity;
 	color: #4A89DC;
@@ -84,9 +85,15 @@
 	font-size: 100%;
 	font-weight: 600;
 }
-.scrollButton.up {
+.scrollIndication i {
+	margin: 0 .3em;
+}
+.scrollIndication:hover i {
+	font-weight: bold;
+}
+.scrollIndication.up {
 	margin-top: 0;
 }
-.scrollButton.down {
+.scrollIndication.down {
 	margin-bottom: 0;
 }

source/components/conversation/Conversation.js

@@ -52,7 +52,7 @@ export default class Conversation extends Component {
           </div>
         )}
         <Element name="myScrollToElement" id="myScrollToElement">
-          <button className="scrollButton up" style={{opacity: foldedSteps.length != 0 ? 1 : 0}}>↑ Modifier mes réponses</button>
+          <h3 className="scrollIndication up" style={{opacity: foldedSteps.length != 0 ? 1 : 0}}><i className="fa fa-long-arrow-up" aria-hidden="true"></i> Modifier mes réponses</h3>
           <div id="currentQuestion">
             {currentQuestion || <Satisfaction simu={this.props.simu} />}
           </div>