CellButton rework

7 files changed, 182 insertions, 131 deletions

diff --git a/app/components/Settings.js b/app/components/Settings.js
index a55b3c085f..7e72d620cd 100644
--- a/app/components/Settings.js
+++ b/app/components/Settings.js
@@ -2,7 +2,7 @@
 import moment from 'moment';
 import React from 'react';
 import { Component, Text, View } from 'reactxp';
-import { Button, CellButton, RedButton, Label } from './styled';
+import { Button, CellButton, RedButton, Label, Icon, SubText } from './styled';
 import { Layout, Container } from './Layout';
 import CustomScrollbars from './CustomScrollbars';
 import styles from './SettingsStyles';
@@ -80,47 +80,45 @@ export default class Settings extends Component {
       <View style={styles.settings_account} testName='settings__account'>
         {isOutOfTime ? (
           <CellButton onPress={ this.props.onViewAccount }
-            text='Account'
-            testName='settings__account_paid_until_label'
-            subtext='OUT OF TIME'
-            subtextStyle={ styles.settings__account_paid_until_label__error }
-            icon='icon-chevron'
-            iconStyle={styles.settings__icon_chevron}
-            tintColor='currentColor'/>
+            testName='settings__account_paid_until_label'>
+            <Label>Account</Label>
+            <SubText style={styles.settings__account_paid_until_label__error}>OUT OF TIME</SubText>
+            <Icon height='12' width='7' source='icon-chevron' />
+          </CellButton>
         ) : (
           <CellButton onPress={ this.props.onViewAccount }
-            text='Account'
-            testName='settings__account_paid_until_label'
-            subtext={ formattedExpiry }
-            icon='icon-chevron'
-            iconStyle={styles.settings__icon_chevron}
-            tintColor='currentColor'/>
+            testName='settings__account_paid_until_label'>
+            <Label>Account</Label>
+            <SubText>{ formattedExpiry }</SubText>
+            <Icon height='12' width='7' source='icon-chevron' />
+          </CellButton>
         )}
       </View>
 
       <CellButton onPress={ this.props.onViewPreferences }
-        testName='settings__preferences'
-        text='Preferences'
-        icon='icon-chevron'
-        tintColor='currentColor'/>
+        testName='settings__preferences'>
+        <Label>Preferences</Label>
+        <Icon height='12' width='7' source='icon-chevron' />
+      </CellButton>
 
       <CellButton onPress={ this.props.onViewAdvancedSettings }
-        testName='settings__advanced'
-        text='Advanced'
-        icon='icon-chevron'
-        tintColor='currentColor'/>
+        testName='settings__advanced'>
+        <Label>Advanced</Label>
+        <Icon height='12' width='7' source='icon-chevron' />
+      </CellButton>
       <View style={styles.settings__cell_spacer}/>
     </View>;
   }
 
   _renderMiddleButtons() {
-    return <View> <CellButton onPress={ this.props.onExternalLink.bind(this, 'download') }
-      testName='settings__version'
-      text='App version'
-      subtext={this._formattedVersion()}
-      icon='icon-extLink'
-      tintColor='currentColor'/>
-    <View style={styles.settings__cell_spacer}/>
+    return <View>
+      <CellButton onPress={ this.props.onExternalLink.bind(this, 'download') }
+        testName='settings__version'>
+        <Label>App version</Label>
+        <SubText>{this._formattedVersion()}</SubText>
+        <Icon height='16' width='16' source='icon-extLink' />
+      </CellButton>
+      <View style={styles.settings__cell_spacer}/>
     </View>;
   }
 
@@ -136,23 +134,22 @@ export default class Settings extends Component {
   _renderBottomButtons() {
     return <View>
       <CellButton onPress={ this.props.onExternalLink.bind(this, 'faq') }
-        testName='settings__external_link'
-        text='FAQs'
-        icon='icon-extLink'
-        tintColor='currentColor'/>
+        testName='settings__external_link'>
+        <Label>FAQs</Label>
+        <Icon height='16' width='16' source='icon-extLink' />
+      </CellButton>
 
       <CellButton onPress={ this.props.onExternalLink.bind(this, 'guides') }
-        testName='settings__external_link'
-        text='Guides'
-        icon='icon-extLink'
-        tintColor='currentColor'/>
+        testName='settings__external_link'>
+        <Label>Guides</Label>
+        <Icon height='16' width='16' source='icon-extLink' />
+      </CellButton>
 
       <CellButton onPress={ this.props.onViewSupport }
-        testName='settings__view_support'
-        text='Contact support'
-        icon='icon-chevron'
-        iconStyle={styles.settings__icon_chevron}
-        tintColor='currentColor'/>
+        testName='settings__view_support'>
+        <Label>Contact support</Label>
+        <Icon height='12' width='7' source='icon-chevron' />
+      </CellButton>
     </View>;
   }
 
diff --git a/app/components/styled/AppButton.js b/app/components/styled/AppButton.js
index d57775ef06..3c28e0b760 100644
--- a/app/components/styled/AppButton.js
+++ b/app/components/styled/AppButton.js
@@ -2,6 +2,8 @@
 import React from 'react';
 import { Text, Component } from 'reactxp';
 import { Button } from './Button';
+import { Label } from './Label';
+import { Icon } from './Icon';
 import Img from '../Img';
 import { colors } from '../../config';
 
@@ -54,50 +56,9 @@ const styles = {
       alignContent: 'center',
       justifyContent: 'center',
     },
-    icon:{
-      position: 'absolute',
-      width: 7,
-      height: 12,
-      alignSelf: 'flex-end',
-    },
   }),
-  ...createTextStyles({
-    label:{
-      alignSelf: 'center',
-      fontFamily: 'DINPro',
-      fontSize: 20,
-      fontWeight: '900',
-      lineHeight: 26,
-    },
-  })
 };
 
-
-export class Label extends Component {
-  render() {
-    return (
-      <Text style={[ styles.label, this.props.style ]}>
-        {this.props.children}
-      </Text>
-    );
-  }
-}
-
-export class Icon extends Component {
-  render() {
-    const width = this.props.width || 7;
-    const height = this.props.height || 12;
-    const source = this.props.source || 'icon-chevron';
-    return (
-      <Img style={[ styles.icon,
-        {width,
-          height},
-        this.props.style]}
-      source={source}
-      tintColor='currentColor'/>);
-  }
-}
-
 export default class BaseButton extends Component {
   props: {
     children: React.Element<*>,
diff --git a/app/components/styled/CellButton.js b/app/components/styled/CellButton.js
index f805c089c4..5a50955747 100644
--- a/app/components/styled/CellButton.js
+++ b/app/components/styled/CellButton.js
@@ -2,6 +2,9 @@
 import React from 'react';
 import { Text, Component } from 'reactxp';
 import { Button } from './Button';
+import { Label } from './Label';
+import { Icon } from './Icon';
+import { SubText } from './SubText';
 import Img from '../Img';
 import { colors } from '../../config';
 
@@ -10,7 +13,6 @@ import { createViewStyles, createTextStyles } from '../../lib/styles';
 const styles = {
   ...createViewStyles({
     cell:{
-      backgroundColor: colors.blue,
       paddingTop: 15,
       paddingBottom: 15,
       paddingLeft: 24,
@@ -19,75 +21,80 @@ const styles = {
       flex: 1,
       flexDirection: 'row',
       alignItems: 'center',
+      alignContent: 'center',
       justifyContent: 'space-between'
     },
-    hover:{
-      backgroundColor: colors.blue80
+    blue:{
+      backgroundColor: colors.blue80,
     },
-    icon:{
-      marginLeft: 8,
-      width: 16,
-      height: 16,
-      flexGrow: 0,
-      flexShrink: 0,
-      flexBasis: 'auto',
-      alignItems: 'flex-end',
+    blueHover:{
+      backgroundColor: colors.blue60,
+    },
+    white40:{
+      color: colors.white40,
+    },
+    white60:{
+      color: colors.white60,
+    },
+    white80:{
       color: colors.white80,
     },
-  }),
-  ...createTextStyles({
-    label:{
-      fontFamily: 'DINPro',
-      fontSize: 20,
-      fontWeight: '900',
-      lineHeight: 26,
+    white: {
       color: colors.white,
-      flexGrow: 1,
-      flexShrink: 0,
-      flexBasis: 'auto',
     },
-    subtext:{
-      fontFamily: 'Open Sans',
-      fontSize: 13,
-      fontWeight: '800',
-      color: colors.white80,
-      flexGrow: 0,
-      textAlign: 'right',
+    relative: {
+      position: 'relative',
+      alignSelf: 'center',
     },
-  })
+  }),
 };
 
 export default class CellButton extends Component {
   props: {
-    icon?: string,
-    iconStyle?: string,
-    hoverStyle?: string,
-    subtextStyle?: string,
-    text: string,
-    subtext?: string,
-    tintColor?: string,
-    style?: string
+    children: React.Element<*>,
+    disabled: boolean,
   };
 
   state = { hovered: false };
 
-  render() {
-    const { style, tintColor, hoverStyle, text, subtext, subtextStyle, icon, iconStyle, ...otherProps } = this.props;
+  textStyle = () => this.state.hovered ? styles.white80 : styles.white;
+  iconStyle = () => this.state.hovered ? styles.white80 : styles.white;
+  subtextStyle = () => this.state.hovered ? styles.white40 : styles.white60;
+  backgroundStyle = () => this.state.hovered ? styles.blueHover : styles.blue;
 
+  onHoverStart = () => !this.props.disabled ? this.setState({ hovered: true }) : null;
+  onHoverEnd = () => !this.props.disabled ? this.setState({ hovered: false }) : null;
+
+  render() {
+    const { children, ...otherProps } = this.props;
     return (
-      <Button style={[ styles.cell, style, this.state.hovered ? [styles.hover, hoverStyle] : null ]}
-        onHoverStart={() => this.setState({ hovered: true })}
-        onHoverEnd={() => this.setState({ hovered: false })}
+      <Button style={[ styles.cell, this.backgroundStyle() ]}
+        onHoverStart={this.onHoverStart}
+        onHoverEnd={this.onHoverEnd}
         {...otherProps}>
+        {
+          React.Children.map(children, (node) => {
+            if (React.isValidElement(node)){
+              let updatedProps = {};
 
-        <Text style={ styles.label }>{ text }</Text>
+              if(node.type.name === 'Label') {
+                updatedProps = { style: [this.textStyle(), node.props.style]};
+              }
 
-        { subtext ? <Text style={[ styles.subtext, subtextStyle ]}>{ subtext }</Text> : null }
+              if(node.type.name === 'Icon') {
+                updatedProps = { style: [this.iconStyle(), styles.relative, node.props.style]};
+              }
 
-        <Img style={[ styles.icon, iconStyle ]}
-          source={ icon }
-          tintColor={ tintColor }/>
+              if(node.type.name === 'SubText') {
+                updatedProps = { style: [this.subtextStyle(), node.props.style]};
+              }
 
+              return React.cloneElement(node, updatedProps);
+            } else {
+              return <Label style={this.textStyle()}>{children}</Label>;
+            }
+          })
+        }
       </Button>
     );
   }
diff --git a/app/components/styled/Icon.js b/app/components/styled/Icon.js
new file mode 100644
index 0000000000..354d9e9423
--- /dev/null
+++ b/app/components/styled/Icon.js
@@ -0,0 +1,30 @@
+// @flow
+import React from 'react';
+import { Component } from 'reactxp';
+import Img from '../Img';
+
+import { createViewStyles } from '../../lib/styles';
+
+const styles = {
+  ...createViewStyles({
+    icon:{
+      position: 'absolute',
+      alignSelf: 'flex-end',
+    },
+  }),
+};
+
+export class Icon extends Component {
+  render() {
+    const width = this.props.width || 7;
+    const height = this.props.height || 12;
+    const source = this.props.source || 'icon-chevron';
+    return (
+      <Img style={[ styles.icon,
+        {width,
+          height},
+        this.props.style]}
+      source={source}
+      tintColor='currentColor'/>);
+  }
+}
\ No newline at end of file
diff --git a/app/components/styled/Label.js b/app/components/styled/Label.js
new file mode 100644
index 0000000000..9862b095b3
--- /dev/null
+++ b/app/components/styled/Label.js
@@ -0,0 +1,26 @@
+// @flow
+import React from 'react';
+import { Text, Component } from 'reactxp';
+import { createTextStyles } from '../../lib/styles';
+
+const styles = {
+  ...createTextStyles({
+    label:{
+      alignSelf: 'center',
+      fontFamily: 'DINPro',
+      fontSize: 20,
+      fontWeight: '900',
+      lineHeight: 26,
+    },
+  })
+};
+
+export class Label extends Component {
+  render() {
+    return (
+      <Text style={[ styles.label, this.props.style ]}>
+        {this.props.children}
+      </Text>
+    );
+  }
+}
\ No newline at end of file
diff --git a/app/components/styled/SubText.js b/app/components/styled/SubText.js
new file mode 100644
index 0000000000..744c2148c4
--- /dev/null
+++ b/app/components/styled/SubText.js
@@ -0,0 +1,26 @@
+// @flow
+import React from 'react';
+import { Text, Component } from 'reactxp';
+import { createTextStyles } from '../../lib/styles';
+
+const styles = {
+  ...createTextStyles({
+    subtext:{
+      fontFamily: 'Open Sans',
+      fontSize: 13,
+      fontWeight: '800',
+      flexGrow: 0,
+      textAlign: 'right',
+    },
+  })
+};
+
+export class SubText extends Component {
+  render() {
+    return (
+      <Text style={[ styles.subtext, this.props.style ]}>
+        {this.props.children}
+      </Text>
+    );
+  }
+}
\ No newline at end of file
diff --git a/app/components/styled/index.js b/app/components/styled/index.js
index f8967ffde2..ac0a631df9 100644
--- a/app/components/styled/index.js
+++ b/app/components/styled/index.js
@@ -2,7 +2,10 @@
 
 import { Button } from './Button';
 import CellButton from './CellButton';
-import {RedButton, GreenButton, BlueButton, TransparentButton, Label, Icon} from './AppButton';
+import { RedButton, GreenButton, BlueButton, TransparentButton } from './AppButton';
+import { Label } from './Label';
+import { Icon } from './Icon';
+import { SubText } from './SubText';
 
 export {
   Button,
@@ -13,4 +16,5 @@ export {
   TransparentButton,
   Label,
   Icon,
+  SubText,
 };