From 780294fba73f2005d273bc3c8745211aa77bfd97 Mon Sep 17 00:00:00 2001
From: Mael <mael.thomas@data.gouv.fr>
Date: Mon, 20 May 2019 15:07:25 +0200
Subject: [PATCH] :bug: Bug hover-click iOS (suite)

---
 .../conversation/IgnoreStepButton.css         |  4 ---
 .../conversation/IgnoreStepButton.js          | 28 ++++++++++-------
 source/components/conversation/SendButton.js  | 30 ++++++++++++-------
 source/components/utils/HoverDecorator.js     | 19 ------------
 4 files changed, 37 insertions(+), 44 deletions(-)
 delete mode 100644 source/components/conversation/IgnoreStepButton.css
 delete mode 100644 source/components/utils/HoverDecorator.js

diff --git a/source/components/conversation/IgnoreStepButton.css b/source/components/conversation/IgnoreStepButton.css
deleted file mode 100644
index 50bb3331a..000000000
--- a/source/components/conversation/IgnoreStepButton.css
+++ /dev/null
@@ -1,4 +0,0 @@
-#ignore {
-	position: relative;
-	text-align: right;
-}
diff --git a/source/components/conversation/IgnoreStepButton.js b/source/components/conversation/IgnoreStepButton.js
index 6be17019c..875b09234 100644
--- a/source/components/conversation/IgnoreStepButton.js
+++ b/source/components/conversation/IgnoreStepButton.js
@@ -1,12 +1,9 @@
-import HoverDecorator from 'Components/utils/HoverDecorator';
-import withColours from 'Components/utils/withColours';
-import { compose } from 'ramda';
-import React, { Component } from 'react';
-import { Trans, withTranslation } from 'react-i18next';
-import './IgnoreStepButton.css';
+import withColours from 'Components/utils/withColours'
+import { compose } from 'ramda'
+import React, { Component } from 'react'
+import { Trans, withTranslation } from 'react-i18next'
 
 export default compose(
-	HoverDecorator,
 	withTranslation(),
 	withColours
 )(
@@ -27,15 +24,24 @@ export default compose(
 		}
 		render() {
 			return (
-				<div id="ignore">
+				<div
+					css={`
+						position: relative;
+						text-align: right;
+
+						.keyIcon {
+							opacity: 0;
+						}
+						:hover .keyIcon {
+							opacity: 1;
+						}
+					`}>
 					<button
 						className="ui__  small simple skip button"
 						onClick={this.props.action}>
 						<Trans>passer</Trans> →
 					</button>
-					<span
-						className="keyIcon"
-						style={{ opacity: this.props.hover ? 1 : 0 }}>
+					<span className="keyIcon">
 						<Trans>Échap</Trans>
 					</span>
 				</div>
diff --git a/source/components/conversation/SendButton.js b/source/components/conversation/SendButton.js
index 8fc2f78d1..3c2dc613c 100644
--- a/source/components/conversation/SendButton.js
+++ b/source/components/conversation/SendButton.js
@@ -1,12 +1,8 @@
-import HoverDecorator from 'Components/utils/HoverDecorator'
 import { compose } from 'ramda'
 import React, { Component } from 'react'
 import { Trans, withTranslation } from 'react-i18next'
 
-export default compose(
-	HoverDecorator,
-	withTranslation()
-)(
+export default compose(withTranslation())(
 	class SendButton extends Component {
 		getAction() {
 			let { disabled, submit } = this.props
@@ -26,9 +22,25 @@ export default compose(
 			this.getAction()('enter')
 		}
 		render() {
-			let { disabled, hover } = this.props
+			let { disabled } = this.props
 			return (
-				<span className="sendWrapper">
+				<span
+					css={`
+						.keyIcon {
+							opacity: 0;
+						}
+						${!disabled &&
+							`
+							@media (hover) {
+							
+							:hover .keyIcon {
+							opacity: 1
+							}
+							
+							
+							}`}
+					`}
+					className="sendWrapper">
 					<button
 						className="ui__ button plain"
 						disabled={disabled}
@@ -37,9 +49,7 @@ export default compose(
 							<Trans>valider</Trans> ✓
 						</span>
 					</button>
-					<span
-						className="keyIcon"
-						style={{ opacity: hover && !disabled ? 1 : 0 }}>
+					<span className="keyIcon">
 						<Trans>Entrée</Trans>↵
 					</span>
 				</span>
diff --git a/source/components/utils/HoverDecorator.js b/source/components/utils/HoverDecorator.js
deleted file mode 100644
index d130d46fd..000000000
--- a/source/components/utils/HoverDecorator.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React, { Component } from 'react'
-
-export default DecoratedComponent =>
-	class withHover extends Component {
-		state = {
-			hover: false
-		}
-		setHover = state => () => this.setState({ hover: state })
-		render() {
-			return (
-				<span
-					onMouseEnter={this.setHover(true)}
-					onMouseLeave={this.setHover(false)}
-				>
-					<DecoratedComponent {...this.props} hover={this.state.hover} />
-				</span>
-			)
-		}
-	}