🎨 Style des boutons de défilement (réponses et comprendre)

source/components/Results.css

@@ -20,9 +20,6 @@
 }
 
 #results button {
-	display: block;
-	margin: .5em auto 0;
-	transition: 1s opacity;
 }
 
 #results-actions {

source/components/Results.js

@@ -63,7 +63,7 @@ export default class Results extends Component {
               ))}
             </ul>
           </div>
-          <button style={{opacity: done ? 1 : 0}}>Comprendre mes résultats</button>
+          <button className="scrollButton down" style={{opacity: done ? 1 : 0}}>↓ Comprendre mes résultats</button>
         </section>
       </div>
     )

source/components/ResultsGrid.css

@@ -1,3 +1,3 @@
 .resultsGrid {
-	margin-top: 6em;
+	margin: 6em 0;
 }

source/components/Simulateur.css

@@ -74,3 +74,17 @@
 	box-shadow: none;
 	opacity: 1;
 }
+
+.scrollButton {
+	display: block;
+	margin: .8em auto;
+	transition: 1s opacity;
+	color: #4A89DC;
+	border: none;
+}
+.scrollButton.up {
+	margin-top: 0;
+}
+.scrollButton.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 style={{opacity: foldedSteps.length != 0 ? 1 : 0}}>↑ Modifier mes réponses</button>
+          <button className="scrollButton up" style={{opacity: foldedSteps.length != 0 ? 1 : 0}}>↑ Modifier mes réponses</button>
           <div id="currentQuestion">
             {currentQuestion || <Satisfaction simu={this.props.simu} />}
           </div>

source/components/conversation/conversation.css

@@ -2,20 +2,12 @@
 
 #myScrollToElement {
 	height: 55%;
+	padding: 1em;
 }
 
-#myScrollToElement button {
-	display: block;
-	margin: 0 auto 1em;
-	transition: 1s opacity;
-}
-
-
-#myScrollToElement, #foldedSteps {
-	padding: 1em 1em;
-}
 
 #foldedSteps {
+	padding: 1em;
 	margin-bottom: 6em;
 }