🎨 uniformise le style de l'aide et des contrôles

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>
 	)
 })