🎨 cache le bandeau de news quand la simulation a commencé

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;
+	}
+}

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)

source/components/pages/Home.css

@@ -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;
-}
-

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