🎨 Redesign du bouton "Reprendre votre simulation"

source/components/Results.css

@@ -6,11 +6,10 @@
 	width: 90%;
 	max-width: 45em;
 	margin: 0 auto;
+	padding: 0;
 
-	padding: .1em;
 	background: #4A89DC;
 	color: white;
-	padding: .6em 0;
 	font-size: 120%;
 	box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.25);
 
@@ -27,25 +26,15 @@
 
 
 #results-actions {
-	display: inline-block;
-	float: left;
-	width: 18%;
-	margin: 0;
-	padding: 0 0 0 2em;
-}
-
-#results-actions {
-	display: flex;
-	align-items: center;
-	justify-content: space-around;
-	height: 100%;
+	border-bottom: 1px solid white;
+	background: #333350;
 }
 
 #toSimulation {
-	font-size: 190%;
+	font-size: 150%;
 	color: white;
-	background: #4A89DC;
-	padding: .6em .6em;
+	margin-left: .6em;
+	line-height: 1.8em;
 	text-decoration: none;
 	border-radius: .2em;
 	position: relative;
@@ -55,7 +44,7 @@
 }
 
 #results h2 {
-	margin: 0 .6em;
+	margin: .6em;
 	font-weight: 600;
 	color: white;
 	text-align: left;
@@ -73,8 +62,14 @@
 	flex-wrap: wrap;
 	height: 70%;
 	width: 96%;
-	margin: .6em auto;
+	margin: .6em auto 1.2em;
+}
 
+
+#results li {
+	margin: 0 1em 0 2em;
+	display: inline-block;
+	width: 100%;
 }
 
 

source/components/Results.js

@@ -48,7 +48,9 @@ export default class Results extends Component {
 					</div>
 				}
 				<ul>
-					{explanation.map( rule => <RuleValueVignette key={rule.nom} {...rule} conversationStarted={conversationStarted} />)}
+					{explanation.map( rule => <li key={rule.nom}>
+						<RuleValueVignette {...rule} conversationStarted={conversationStarted} />
+					</li>)}
 				</ul>
 			</section>
 		)

source/components/rule/RuleValueVignette2.css

@@ -1,9 +1,4 @@
 
-.RuleValueVignette {
-	margin: 0 1em 0 2em;
-	display: inline-block;
-	width: 100%;
-}
 
 .RuleValueVignette li a {
 	text-decoration: none;
@@ -19,6 +14,9 @@
 	display: flex;
 	justify-content: space-between;
 }
+.RuleValueVignette .rule-box:hover {
+	background: rgba(255, 255, 255, 0.16)
+}
 
 .RuleValueVignette .rule-box > span {
 	display: inline-block;