1 files changed, 46 insertions, 36 deletions

diff --git a/app/components/styled/CellButton.js b/app/components/styled/CellButton.js
index 1a0e055b01..f0251c942e 100644
--- a/app/components/styled/CellButton.js
+++ b/app/components/styled/CellButton.js
@@ -9,7 +9,7 @@ import { createViewStyles, createTextStyles } from '../../lib/styles';
 
 const styles = {
   ...createViewStyles({
-    cell:{
+    cell: {
       backgroundColor: colors.blue80,
       paddingTop: 14,
       paddingBottom: 14,
@@ -21,19 +21,19 @@ const styles = {
       alignItems: 'center',
       alignContent: 'center',
     },
-    blue:{
+    blue: {
       backgroundColor: colors.blue80,
     },
-    blueHover:{
+    blueHover: {
       backgroundColor: colors.blue60,
     },
-    white40:{
+    white40: {
       color: colors.white40,
     },
-    white60:{
+    white60: {
       color: colors.white60,
     },
-    white80:{
+    white80: {
       color: colors.white80,
     },
     white: {
@@ -45,7 +45,7 @@ const styles = {
     },
   }),
   ...createTextStyles({
-    label:{
+    label: {
       color: colors.white,
       alignSelf: 'center',
       fontFamily: 'DINPro',
@@ -55,7 +55,7 @@ const styles = {
       flex: 1,
       marginLeft: 8,
     },
-    subtext:{
+    subtext: {
       color: colors.white60,
       fontFamily: 'Open Sans',
       fontSize: 13,
@@ -69,12 +69,11 @@ const styles = {
 export class SubText extends Text {}
 export class Label extends Text {}
 
-
 type CellButtonProps = {
   children?: React.Node,
   disabled?: boolean,
   cellHoverStyle?: Types.ViewStyle,
-  style?: Types.ViewStyle
+  style?: Types.ViewStyle,
 };
 
 type State = { hovered: boolean };
@@ -82,44 +81,55 @@ type State = { hovered: boolean };
 export default class CellButton extends Component<CellButtonProps, State> {
   state = { hovered: false };
 
-  textStyle = (cellHoverStyle?: Types.ViewStyle) => this.state.hovered ? cellHoverStyle : null;
-  iconStyle = (cellHoverStyle?: Types.ViewStyle) => this.state.hovered ? cellHoverStyle : null;
-  subtextStyle = (cellHoverStyle?: Types.ViewStyle) => this.state.hovered ? cellHoverStyle : null;
-  backgroundStyle = (cellHoverStyle?: Types.ViewStyle) => this.state.hovered ? cellHoverStyle || styles.blueHover : null;
+  textStyle = (cellHoverStyle?: Types.ViewStyle) => (this.state.hovered ? cellHoverStyle : null);
+  iconStyle = (cellHoverStyle?: Types.ViewStyle) => (this.state.hovered ? cellHoverStyle : null);
+  subtextStyle = (cellHoverStyle?: Types.ViewStyle) => (this.state.hovered ? cellHoverStyle : 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;
+  onHoverStart = () => (!this.props.disabled ? this.setState({ hovered: true }) : null);
+  onHoverEnd = () => (!this.props.disabled ? this.setState({ hovered: false }) : null);
 
   render() {
     const { children, style, cellHoverStyle, ...otherProps } = this.props;
     return (
-      <Button style={[ styles.cell, style, this.backgroundStyle(cellHoverStyle) ]}
+      <Button
+        style={[styles.cell, style, this.backgroundStyle(cellHoverStyle)]}
         onHoverStart={this.onHoverStart}
         onHoverEnd={this.onHoverEnd}
         {...otherProps}>
-        {
-          React.Children.map(children, (node) => {
-            if (React.isValidElement(node)) {
-              let updatedProps = {};
-
-              if(node.type.name === 'Label') {
-                updatedProps = { style: [styles.label, node.props.style, this.textStyle(node.props.cellHoverStyle)]};
-              }
+        {React.Children.map(children, (node) => {
+          if (React.isValidElement(node)) {
+            let updatedProps = {};
 
-              if(node.type.name === 'Img') {
-                updatedProps = { tintColor:'currentColor', style: [styles.icon, node.props.style, this.iconStyle(node.props.cellHoverStyle)]};
-              }
+            if (node.type.name === 'Label') {
+              updatedProps = {
+                style: [styles.label, node.props.style, this.textStyle(node.props.cellHoverStyle)],
+              };
+            }
 
-              if(node.type.name === 'SubText') {
-                updatedProps = { style: [styles.subtext, node.props.style, this.subtextStyle(node.props.cellHoverStyle)]};
-              }
+            if (node.type.name === 'Img') {
+              updatedProps = {
+                tintColor: 'currentColor',
+                style: [styles.icon, node.props.style, this.iconStyle(node.props.cellHoverStyle)],
+              };
+            }
 
-              return React.cloneElement(node, updatedProps);
-            } else if (node){
-              return <Label style={[styles.label, this.textStyle()]}>{children}</Label>;
+            if (node.type.name === 'SubText') {
+              updatedProps = {
+                style: [
+                  styles.subtext,
+                  node.props.style,
+                  this.subtextStyle(node.props.cellHoverStyle),
+                ],
+              };
             }
-          })
-        }
+
+            return React.cloneElement(node, updatedProps);
+          } else if (node) {
+            return <Label style={[styles.label, this.textStyle()]}>{children}</Label>;
+          }
+        })}
       </Button>
     );
   }