Separate hovering of Img

3 files changed, 35 insertions, 12 deletions

diff --git a/app/components/Img.js b/app/components/Img.js
index c4fb7637d5..821dd2c290 100644
--- a/app/components/Img.js
+++ b/app/components/Img.js
@@ -1,15 +1,29 @@
 // @flow
-import React from 'react';
-import { View, Component } from 'reactxp';
+import * as React from 'react';
+import { View, Component, Styles } from 'reactxp';
 
-export default class Img extends Component {
-  props: {
+type ImgProps = {
     source: string,
-    tintColor?: string
+    tintColor?: string,
+    hoverColor?: string,
+    disabled?: boolean,
   };
 
+type State = { hovered: boolean };
+
+export default class Img extends Component<ImgProps, State> {
+
+  state = { hovered: false };
+
+  hoverColorStyle = Styles.createViewStyle({color: this.props.hoverColor}, false);
+
+  onHoverStart = () => !this.props.disabled ? this.setState({ hovered: true }) : null;
+  onHoverEnd = () => !this.props.disabled ? this.setState({ hovered: false }) : null;
+
+  getHoverStyle = () => (this.state.hovered && this.props.hoverColor) ? this.hoverColorStyle : null;
+
   render() {
-    const { source, ...otherProps } = this.props;
+    const { source, disabled, style, onMouseEnter, onMouseLeave, ...otherProps } = this.props;
     const tintColor = this.props.tintColor;
     const url = './assets/images/' + source + '.svg';
     let image;
@@ -34,7 +48,10 @@ export default class Img extends Component {
     }
 
     return (
-      <View { ...otherProps }>
+      <View { ...otherProps }
+        onMouseEnter={onMouseEnter || this.onHoverStart}
+        onMouseLeave={onMouseLeave || this.onHoverEnd}
+        style={[style, this.getHoverStyle()]}>
         { image }
       </View>);
   }
diff --git a/app/components/Login.js b/app/components/Login.js
index 239156af5b..1450f5adeb 100644
--- a/app/components/Login.js
+++ b/app/components/Login.js
@@ -396,7 +396,12 @@ class AccountDropdownItem extends React.Component<AccountDropdownItemProps> {
         <Label style={styles.account_dropdown__label} hoverStyle={ styles.account_dropdown__label_hover } onPress={ () => this.props.onSelect(this.props.value) }>
           { this.props.label }
         </Label>
-        <Img style={styles.account_dropdown__remove} hoverStyle={ styles.account_dropdown__remove_hover } source='icon-close-sml' height='16' width='16' onPress={ () => this.props.onRemove(this.props.value) }/>
+        <Img style={styles.account_dropdown__remove}
+          hoverStyle={ styles.account_dropdown__remove_cell_hover }
+          hoverColor={ styles.account_dropdown__remove_hover }
+          source='icon-close-sml'
+          height='16' width='16'
+          onPress={ () => this.props.onRemove(this.props.value) }/>
       </CellButton>
     );
   }
diff --git a/app/components/LoginStyles.js b/app/components/LoginStyles.js
index 757ace7317..a3c998c9a0 100644
--- a/app/components/LoginStyles.js
+++ b/app/components/LoginStyles.js
@@ -93,10 +93,10 @@ export default {
     },
     account_dropdown__remove: {
       justifyContent: 'center',
-      color: colors.blue60,
+      color: colors.blue40,
     },
-    account_dropdown__remove_hover: {
-      color: colors.blue,
+    account_dropdown__remove_cell_hover: {
+      color: colors.blue60,
     },
     account_dropdown__label_hover: {
       color: colors.blue,
@@ -156,5 +156,6 @@ export default {
       border: 0,
       textAlign: 'left',
     },
-  })
+  }),
+  account_dropdown__remove_hover: colors.blue,
 };