From 432044190f981d2646cf976e07485ffce1a7a28c Mon Sep 17 00:00:00 2001
From: Johan Girod <johangirod@gmail.com>
Date: Thu, 31 Oct 2019 18:48:21 +0100
Subject: [PATCH] =?UTF-8?q?:art:=20uniformise=20le=20style=20de=20l'aide?=
 =?UTF-8?q?=20et=20des=20contr=C3=B4les?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 source/components/conversation/Aide.js | 35 ++++++++++++++++++--------
 1 file changed, 24 insertions(+), 11 deletions(-)

diff --git a/source/components/conversation/Aide.js b/source/components/conversation/Aide.js
index 03c18adc3..4d9ab472b 100644
--- a/source/components/conversation/Aide.js
+++ b/source/components/conversation/Aide.js
@@ -1,9 +1,11 @@
 import { EXPLAIN_VARIABLE } from 'Actions/actions'
+import Animate from 'Components/ui/animate'
 import { Markdown } from 'Components/utils/markdown'
 import withColours from 'Components/utils/withColours'
 import { findRuleByDottedName } from 'Engine/rules'
 import { compose } from 'ramda'
 import React from 'react'
+import emoji from 'react-easy-emoji'
 import { connect } from 'react-redux'
 import { flatRulesSelector } from 'Selectors/analyseSelectors'
 import References from '../rule/References'
@@ -28,16 +30,21 @@ export default compose(
 		refs = rule.références
 
 	return (
-		<div id="helpWrapper" className="active">
-			<section id="help">
-				<button
-					id="closeHelp"
-					onClick={stopExplaining}
-					style={{ color: colours.colour }}>
-					✖️
-				</button>
+		<Animate.fromTop><div css={`
+		display: flex; 
+		align-items: center;
+		img {
+			margin: 0 1em 0 !important;
+			width: 1.6em !important;
+			height: 1.6em !important;
+		}
+	`}>
+			{emoji('ℹ️')}
+
+			<div className="controlText ui__ card" css="padding: 0.6rem 0; flex: 1;">
+				<h4>{rule.title}</h4>
 				<p>
-					<Markdown source={`# ${rule.title} \n\n${text}`} />
+					<Markdown source={text} />
 				</p>
 				{refs && (
 					<div>
@@ -45,7 +52,13 @@ export default compose(
 						<References refs={refs} />
 					</div>
 				)}
-			</section>
-		</div>
+				<button
+					className="hide"
+					aria-label="close"
+					onClick={stopExplaining}
+				>
+					×
+			</button>
+			</div></div></Animate.fromTop>
 	)
 })