From 078ec37662199ba778b04b86d5a7ec682f7dadff Mon Sep 17 00:00:00 2001
From: Johan Girod <johangirod@gmail.com>
Date: Thu, 26 Apr 2018 14:40:22 +0200
Subject: [PATCH] =?UTF-8?q?:art:=20cache=20le=20bandeau=20de=20news=20quan?=
 =?UTF-8?q?d=20la=20simulation=20a=20commenc=C3=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 source/components/News.css       | 28 +++++++++++++++++++++
 source/components/News.js        | 32 ++++++++++++++++++++++++
 source/components/pages/Home.css | 17 -------------
 source/components/pages/Home.js  | 43 ++++++--------------------------
 4 files changed, 68 insertions(+), 52 deletions(-)
 create mode 100644 source/components/News.css
 create mode 100644 source/components/News.js
 delete mode 100644 source/components/pages/Home.css

diff --git a/source/components/News.css b/source/components/News.css
new file mode 100644
index 000000000..06b5dc9fa
--- /dev/null
+++ b/source/components/News.css
@@ -0,0 +1,28 @@
+.news-header {
+	display: flex;
+	align-items: center;
+	max-width: 30em;
+	margin: 0 auto;
+	justify-content: center;
+	animation: fade-in 2s;
+}
+.news-header p {
+	color: #4b4b66;
+	font-size: 85%;
+}
+
+.news-header i {
+	margin-right: 1em;
+}
+
+@keyframes fade-in {
+	from {
+		opacity: 0;
+	}
+	50% {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
diff --git a/source/components/News.js b/source/components/News.js
new file mode 100644
index 000000000..73fade65d
--- /dev/null
+++ b/source/components/News.js
@@ -0,0 +1,32 @@
+import React from 'react'
+import { connect } from 'react-redux'
+import { compose } from 'ramda'
+import withColours from './withColours'
+import { Trans, translate } from 'react-i18next'
+import './News.css'
+
+let News = ({ hidden, colours: { textColourOnWhite } }) =>
+	!hidden ? (
+		<div className="news-header">
+			<i
+				className="fa fa-newspaper-o"
+				aria-hidden="true"
+				style={{
+					color: textColourOnWhite
+				}}
+			/>
+			<p>
+				<Trans i18nKey="news">
+					Le simulateur est maintenant utilisable en anglais
+				</Trans>
+			</p>
+		</div>
+	) : null
+
+export default compose(
+	withColours,
+	translate(),
+	connect(state => ({
+		hidden: state.conversationStarted
+	}))
+)(News)
diff --git a/source/components/pages/Home.css b/source/components/pages/Home.css
deleted file mode 100644
index 9ef391887..000000000
--- a/source/components/pages/Home.css
+++ /dev/null
@@ -1,17 +0,0 @@
-#updateMessage {
-	display: flex;
-	align-items: center;
-	max-width: 30em;
-	margin: 0 auto;
-}
-#updateMessage p {
-	color: #4b4b66;
-	font-size: 85%;
-	transition: 0.8s opacity;
-	transition-delay: 0.2s;
-}
-#updateMessage i {
-	margin-right: 1em;
-	transition: 0.8s opacity;
-}
-
diff --git a/source/components/pages/Home.js b/source/components/pages/Home.js
index 94f1de29e..106e41b10 100644
--- a/source/components/pages/Home.js
+++ b/source/components/pages/Home.js
@@ -1,38 +1,11 @@
-import React, { Component } from 'react'
-import { Trans, translate } from 'react-i18next'
+import React from 'react'
 import './Pages.css'
-import './Home.css'
-import withColours from '../withColours'
 import Simu from '../Simu'
+import News from '../News'
 
-@translate()
-@withColours
-export default class Home extends Component {
-	state = {}
-	componentDidMount() {
-		setTimeout(() => this.setState({ showUpdateMessage: true }), 1000)
-	}
-	render() {
-		let opacityStyle = { opacity: this.state.showUpdateMessage ? 1 : 0 }
-		return (
-			<div id="home" className="page">
-				<div id="updateMessage">
-					<i
-						className="fa fa-newspaper-o"
-						aria-hidden="true"
-						style={{
-							...opacityStyle,
-							color: this.props.colours.textColourOnWhite
-						}}
-					/>
-					<p style={opacityStyle}>
-						<Trans i18nKey="news">
-							Le simulateur est maintenant utilisable en anglais
-						</Trans>
-					</p>
-				</div>
-				<Simu />
-			</div>
-		)
-	}
-}
+export default () => (
+	<div id="home" className="page">
+		<News />
+		<Simu />
+	</div>
+)