cellHoverStyle/hoverStyle

4 files changed, 20 insertions, 20 deletions

diff --git a/app/components/Img.js b/app/components/Img.js
index 821dd2c290..418149d2dc 100644
--- a/app/components/Img.js
+++ b/app/components/Img.js
@@ -1,11 +1,11 @@
 // @flow
 import * as React from 'react';
-import { View, Component, Styles } from 'reactxp';
+import { View, Component, Styles, Types } from 'reactxp';
 
 type ImgProps = {
     source: string,
     tintColor?: string,
-    hoverColor?: string,
+    hoverStyle?: Types.ViewStyle,
     disabled?: boolean,
   };
 
@@ -15,12 +15,10 @@ 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;
+  getHoverStyle = () => this.state.hovered ? this.props.hoverStyle || null : null;
 
   render() {
     const { source, disabled, style, onMouseEnter, onMouseLeave, ...otherProps } = this.props;
diff --git a/app/components/Login.js b/app/components/Login.js
index 1450f5adeb..08b997703a 100644
--- a/app/components/Login.js
+++ b/app/components/Login.js
@@ -392,13 +392,13 @@ type AccountDropdownItemProps = {
 class AccountDropdownItem extends React.Component<AccountDropdownItemProps> {
   render() {
     return (
-      <CellButton style={ styles.account_dropdown__item } hoverStyle={ styles.account_dropdown__item_hover }>
-        <Label style={styles.account_dropdown__label} hoverStyle={ styles.account_dropdown__label_hover } onPress={ () => this.props.onSelect(this.props.value) }>
+      <CellButton style={ styles.account_dropdown__item } cellHoverStyle={ styles.account_dropdown__item_hover }>
+        <Label style={styles.account_dropdown__label} cellHoverStyle={ 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_cell_hover }
-          hoverColor={ styles.account_dropdown__remove_hover }
+          cellHoverStyle={ styles.account_dropdown__remove_cell_hover }
+          hoverStyle={ styles.account_dropdown__remove_hover }
           source='icon-close-sml'
           height='16' width='16'
           onPress={ () => this.props.onRemove(this.props.value) }/>
diff --git a/app/components/LoginStyles.js b/app/components/LoginStyles.js
index a3c998c9a0..19853abd20 100644
--- a/app/components/LoginStyles.js
+++ b/app/components/LoginStyles.js
@@ -98,6 +98,9 @@ export default {
     account_dropdown__remove_cell_hover: {
       color: colors.blue60,
     },
+    account_dropdown__remove_hover: {
+      color: colors.blue,
+    },
     account_dropdown__label_hover: {
       color: colors.blue,
     },
@@ -157,5 +160,4 @@ export default {
       textAlign: 'left',
     },
   }),
-  account_dropdown__remove_hover: colors.blue,
 };
diff --git a/app/components/styled/CellButton.js b/app/components/styled/CellButton.js
index ef96dbce98..196afb574a 100644
--- a/app/components/styled/CellButton.js
+++ b/app/components/styled/CellButton.js
@@ -73,7 +73,7 @@ export class Label extends Text {}
 type CellButtonProps = {
   children?: React.Node,
   disabled?: boolean,
-  hoverStyle?: Types.ViewStyle,
+  cellHoverStyle?: Types.ViewStyle,
   style?: Types.ViewStyle
 };
 
@@ -82,18 +82,18 @@ type State = { hovered: boolean };
 export default class CellButton extends Component<CellButtonProps, State> {
   state = { hovered: false };
 
-  textStyle = (hoverStyle?: Types.ViewStyle) => this.state.hovered ? hoverStyle || styles.white80 : null;
-  iconStyle = (hoverStyle?: Types.ViewStyle) => this.state.hovered ? hoverStyle || styles.white40 : null;
-  subtextStyle = (hoverStyle?: Types.ViewStyle) => this.state.hovered ? hoverStyle || styles.white40 : null;
-  backgroundStyle = (hoverStyle?: Types.ViewStyle) => this.state.hovered ? hoverStyle || styles.blueHover : null;
+  textStyle = (cellHoverStyle?: Types.ViewStyle) => this.state.hovered ? cellHoverStyle || styles.white80 : null;
+  iconStyle = (cellHoverStyle?: Types.ViewStyle) => this.state.hovered ? cellHoverStyle || styles.white40 : null;
+  subtextStyle = (cellHoverStyle?: Types.ViewStyle) => this.state.hovered ? cellHoverStyle || styles.white40 : null;
+  backgroundStyle = (cellHoverStyle?: Types.ViewStyle) => this.state.hovered ? cellHoverStyle || styles.blueHover : null;
 
   onHoverStart = () => !this.props.disabled ? this.setState({ hovered: true }) : null;
   onHoverEnd = () => !this.props.disabled ? this.setState({ hovered: false }) : null;
 
   render() {
-    const { children, style, hoverStyle, ...otherProps } = this.props;
+    const { children, style, cellHoverStyle, ...otherProps } = this.props;
     return (
-      <Button style={[ styles.cell, style, this.backgroundStyle(hoverStyle) ]}
+      <Button style={[ styles.cell, style, this.backgroundStyle(cellHoverStyle) ]}
         onHoverStart={this.onHoverStart}
         onHoverEnd={this.onHoverEnd}
         {...otherProps}>
@@ -103,15 +103,15 @@ export default class CellButton extends Component<CellButtonProps, State> {
               let updatedProps = {};
 
               if(node.type.name === 'Label') {
-                updatedProps = { style: [styles.label, node.props.style, this.textStyle(node.props.hoverStyle)]};
+                updatedProps = { style: [styles.label, node.props.style, this.textStyle(node.props.cellHoverStyle)]};
               }
 
               if(node.type.name === 'Img') {
-                updatedProps = { tintColor:'currentColor', style: [styles.icon, node.props.style, this.iconStyle(node.props.hoverStyle)]};
+                updatedProps = { tintColor:'currentColor', style: [styles.icon, node.props.style, this.iconStyle(node.props.cellHoverStyle)]};
               }
 
               if(node.type.name === 'SubText') {
-                updatedProps = { style: [styles.subtext, node.props.style, this.subtextStyle(node.props.hoverStyle)]};
+                updatedProps = { style: [styles.subtext, node.props.style, this.subtextStyle(node.props.cellHoverStyle)]};
               }
 
               return React.cloneElement(node, updatedProps);