From d743153afae2e9750898ae1e49a717a6ba4bd472 Mon Sep 17 00:00:00 2001
From: Mael <mael.thomas@data.gouv.fr>
Date: Wed, 13 Jun 2018 17:48:22 +0200
Subject: [PATCH] :art: Amelioration du style des exemples

---
 source/components/rule/Examples.css |  8 ++---
 source/components/rule/Examples.js  | 49 +++++++++++++++++++----------
 2 files changed, 34 insertions(+), 23 deletions(-)

diff --git a/source/components/rule/Examples.css b/source/components/rule/Examples.css
index 0cf0a8914..22898a856 100644
--- a/source/components/rule/Examples.css
+++ b/source/components/rule/Examples.css
@@ -18,16 +18,12 @@
 	list-style-type: none;
 }
 #examples .example {
-	font-weight: 500;
 	margin: 0.6em;
-	cursor: pointer;
-}
-#examples .example.selected .name {
-	font-weight: bold;
 }
 
 #examples .name {
-	border: none;
+	border-width: 1px;
+	border-style: solid;
 	padding: 0.2em 0.6em;
 	border-radius: 0.2em;
 	font-size: 100%;
diff --git a/source/components/rule/Examples.js b/source/components/rule/Examples.js
index 15112b083..375456631 100644
--- a/source/components/rule/Examples.js
+++ b/source/components/rule/Examples.js
@@ -69,20 +69,35 @@ let Example = ({
 	rule,
 	currentExample,
 	setExample,
-	themeColours: { colour, textColour }
-}) => (
-	<li
-		key={nom}
-		className={classNames('example', {
-			selected: currentExample && currentExample.name == nom
-		})}
-		onClick={() =>
-			currentExample && currentExample.name == nom
-				? setExample(null)
-				: setExample(nom, situation, rule.dottedName)
-		}>
-		<button className="name" style={{ color: textColour, background: colour }}>
-			{capitalise0(nom)}
-		</button>
-	</li>
-)
+	themeColours: { colour, textColourOnWhite, textColour }
+}) =>
+	do {
+		let selected = currentExample && currentExample.name == nom
+		;<li
+			key={nom}
+			className={classNames('example', {
+				selected
+			})}
+			onClick={() =>
+				selected
+					? setExample(null)
+					: setExample(nom, situation, rule.dottedName)
+			}>
+			<button
+				className="name"
+				style={
+					selected
+						? {
+								background: colour,
+								color: textColour,
+								borderColor: textColourOnWhite
+						  }
+						: {
+								borderColor: textColourOnWhite,
+								color: textColourOnWhite
+						  }
+				}>
+				{capitalise0(nom)}
+			</button>
+		</li>
+	}