From 2ba0226cfad3d66f469be05731dc4056139e2e4f Mon Sep 17 00:00:00 2001
From: Mael Thomas <mael.thomas@data.gouv.fr>
Date: Mon, 13 Feb 2017 15:18:44 +0100
Subject: [PATCH] =?UTF-8?q?La=20s=C3=A9paration=20simulation=20/=20compren?=
 =?UTF-8?q?dre=20est=20plus=20=C3=A9vidente?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 source/components/CDD.css     | 12 ++++++------
 source/components/IntroCDD.js |  2 ++
 source/components/PageType.js |  6 ++++++
 source/components/Results.js  |  4 ++--
 source/components/Rule.css    |  3 ++-
 source/components/Rule.js     |  3 ++-
 source/containers/Layout.css  | 28 +++++++++++++++++++++++++---
 source/containers/Layout.js   |  2 +-
 8 files changed, 46 insertions(+), 14 deletions(-)
 create mode 100644 source/components/PageType.js

diff --git a/source/components/CDD.css b/source/components/CDD.css
index bcf400160..109c2c734 100644
--- a/source/components/CDD.css
+++ b/source/components/CDD.css
@@ -8,7 +8,6 @@
 
 #sim #introduction {
 	margin-left: 1.2em;
-	margin-top: 2em;
 	font-size: 110%;
 	padding-top: 0;
 	width: 60%;
@@ -121,26 +120,27 @@
 	font-size: 300%;
 }
 
-#results li:hover .explore {
+#results li:hover .understand {
 	display: inline;
 }
 
-#results li .explore {
+#results li .understand {
 	display: none;
 }
 
-#results .explore button {
+#results .understand button {
 	background: #4A89DC;
 	color: white;
 	font-weight: 600;
 	border: none;
+  padding: .3em .8em;
 }
-#results .explore i {
+#results .understand i {
 	display: inline-block;
 	font-size: 190%;
 	line-height: .2em;
 	opacity: .8
 }
-#results .explore:hover i {
+#results .understand:hover i {
 	opacity: 1
 }
diff --git a/source/components/IntroCDD.js b/source/components/IntroCDD.js
index 5056ca2a2..729ba6fc5 100644
--- a/source/components/IntroCDD.js
+++ b/source/components/IntroCDD.js
@@ -1,8 +1,10 @@
 import React from 'react'
 import colours from './themeColours'
+import PageType from './PageType'
 
 export default () =>
 	<div>
+		<PageType type="simulation"/>
 		<h1>Simulateur CDD</h1>
 		<section id="introduction">
 			<p>
diff --git a/source/components/PageType.js b/source/components/PageType.js
new file mode 100644
index 000000000..de988c7bf
--- /dev/null
+++ b/source/components/PageType.js
@@ -0,0 +1,6 @@
+import React from 'react'
+
+export default ({type}) => <span id="page-type">
+	<i className={"fa fa-" + (type == 'simulation' ? 'calculator' : 'cogs')} aria-hidden="true"></i>
+	<span>{type}</span>
+</span>
diff --git a/source/components/Results.js b/source/components/Results.js
index 5cc40f709..abe0c45de 100644
--- a/source/components/Results.js
+++ b/source/components/Results.js
@@ -25,9 +25,9 @@ export default class Results extends Component {
 										:computedValue + '€'
 								}
 								</p>
-								<Link to={"/regle/" + name} className="explore">
+								<Link to={"/regle/" + name} className="understand">
 									<button>
-										Explorer <i className="fa fa-cogs" aria-hidden="true"></i>
+										Comprendre <i className="fa fa-cogs" aria-hidden="true"></i>
 									</button>
 								</Link>
 							</li>
diff --git a/source/components/Rule.css b/source/components/Rule.css
index 0471dd26a..e98896b26 100644
--- a/source/components/Rule.css
+++ b/source/components/Rule.css
@@ -21,6 +21,7 @@
 }
 
 #rule h1 {
+	margin-bottom: 1%;
 	color: #4B4B66;
 	display: flex;
 	align-items: center;
@@ -45,7 +46,7 @@
 }
 
 #meta-paragraph {
-	background: #4B4B661A;
+	background: rgba(51, 51, 80, 0.03);
 	margin: 0 3em;
 	padding: 1em;
 }
diff --git a/source/components/Rule.js b/source/components/Rule.js
index 3cc8cf00f..627abb862 100644
--- a/source/components/Rule.js
+++ b/source/components/Rule.js
@@ -3,7 +3,7 @@ import {findRuleByName} from '../engine/rules.js'
 import './Rule.css'
 import JSONTree from 'react-json-tree'
 import R from 'ramda'
-
+import PageType from './PageType'
 
 export default class Rule extends Component {
 	render() {
@@ -14,6 +14,7 @@ export default class Rule extends Component {
 
 		return (
 			<div id="rule">
+				<PageType type="comprendre"/>
 				<h1>
 					<span className="rule-type">{rule.type}</span>
 					<span className="rule-name">{name}</span>
diff --git a/source/containers/Layout.css b/source/containers/Layout.css
index b1588173f..cbe250abe 100644
--- a/source/containers/Layout.css
+++ b/source/containers/Layout.css
@@ -7,13 +7,14 @@ body {
 }
 
 #site-logo {
+	width: 60px;
 	position: fixed;
-	left: 3em;
-	top: 3em;
+  left: 1%;
+  top: 4.5%;
 }
 
 h1 {
-	padding: 1em 3.5em 0;
+	margin: 6% 3% 0;
 	font-size: 250%;
 	font-weight: 400;
 }
@@ -30,3 +31,24 @@ h1 {
 	text-align: center;
 	z-index: 1000000;
 }
+
+#page-type {
+	display: inline-block;
+	position: fixed;
+	right: 3%;
+	top: 9%;
+	opacity: .4;
+	color: #333350;
+  opacity: 0.8;
+}
+
+#page-type span {
+	text-transform: uppercase;
+	font-size: 100%;
+	font-weight: bold;
+}
+
+#page-type i {
+	display: block;
+	font-size: 700%;
+}
diff --git a/source/containers/Layout.js b/source/containers/Layout.js
index c361deb1b..e958f9daa 100644
--- a/source/containers/Layout.js
+++ b/source/containers/Layout.js
@@ -13,7 +13,7 @@ export default class Layout extends Component {
 				{
 					this.props.location.pathname != '/' &&
 					<Link to="/">
-						<img id="site-logo" src={require('../images/logo.png')} style={{width: '100px'}} />
+						<img id="site-logo" src={require('../images/logo.png')} />
 					</Link>
 				}
 			</div>