🐛 Bug hover-click iOS (suite)

source/components/conversation/IgnoreStepButton.css

@@ -1,4 +0,0 @@
-#ignore {
-	position: relative;
-	text-align: right;
-}

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>

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>

source/components/utils/HoverDecorator.js

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