AppButton-rework

8 files changed, 181 insertions, 154 deletions

diff --git a/app/components/Account.js b/app/components/Account.js
index 1241d1f724..b2352369ba 100644
--- a/app/components/Account.js
+++ b/app/components/Account.js
@@ -2,7 +2,7 @@
 import moment from 'moment';
 import React from 'react';
 import { Component, Text, View } from 'reactxp';
-import { Button, AppButton } from './styled';
+import { Button, RedButton, GreenButton, Label, Icon } from './styled';
 import { Layout, Container } from './Layout';
 import styles from './AccountStyles';
 import Img from './Img';
@@ -60,19 +60,19 @@ export default class Account extends Component {
                   </View>
 
                   <View style={styles.account__footer}>
-                    <AppButton style={styles.account__buymore}
-                      hoverStyle={styles.account__buymore_hover}
+                    <GreenButton
                       onPress={ this.props.onBuyMore }
                       text='Buy more credit'
                       icon='icon-extLink'
-                      iconStyle={styles.account__buymore_icon}
-                      tintColor='currentColor'
-                      testName='account__buymore'/>
-                    <AppButton style={styles.account__logout}
-                      hoverStyle={styles.account__logout_hover}
+                      testName='account__buymore'>
+                      <Label>Buy more credit</Label>
+                      <Icon source='icon-extLink' height='16' width='16' />
+                    </GreenButton>
+                    <RedButton
                       onPress={ this.props.onLogout }
-                      text='Log out'
-                      testName='account__logout'/>
+                      testName='account__logout'>
+                      Log out
+                    </RedButton>
                   </View>
 
                 </View>
diff --git a/app/components/AccountStyles.js b/app/components/AccountStyles.js
index e4819f2cee..406215cd4f 100644
--- a/app/components/AccountStyles.js
+++ b/app/components/AccountStyles.js
@@ -61,30 +61,6 @@ export default {
     account__footer: {
       marginTop: 12,
     },
-    account__buymore: {
-      marginTop: 12,
-      marginLeft: 24,
-      marginRight: 24,
-      backgroundColor: colors.green,
-    },
-    account__buymore_hover: {
-      backgroundColor: colors.green90,
-    },
-    account__buymore_icon: {
-      width: 16,
-      height: 16,
-      marginRight: 8,
-    },
-    account__logout:{
-      marginTop: 12,
-      marginLeft: 24,
-      marginRight: 24,
-      marginBottom: 12,
-      backgroundColor: colors.red,
-    },
-    account__logout_hover:{
-      backgroundColor: colors.red95,
-    },
   }),
   ...createTextStyles({
     account__close_title: {
diff --git a/app/components/Settings.js b/app/components/Settings.js
index 8c66c4bb1f..17853fe423 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, AppButton } from './styled';
+import { Button, CellButton, RedButton, Label, Icon } from './styled';
 import { Layout, Container } from './Layout';
 import CustomScrollbars from './CustomScrollbars';
 import styles from './SettingsStyles';
@@ -158,11 +158,11 @@ export default class Settings extends Component {
 
   _renderQuitButton() {
     return <View style={styles.settings__footer}>
-      <AppButton style={styles.settings__footer_button}
-        hoverStyle={styles.settings__footer_button_hover}
+      <RedButton
         onPress={this.props.onQuit}
-        testName='settings__quit'
-        text='Quit app'/>
+        testName='settings__quit'>
+        <Label>Quit app</Label>
+      </RedButton>
     </View>;
   }
 }
\ No newline at end of file
diff --git a/app/components/SettingsStyles.js b/app/components/SettingsStyles.js
index a47ec770d3..430c942462 100644
--- a/app/components/SettingsStyles.js
+++ b/app/components/SettingsStyles.js
@@ -17,7 +17,7 @@ export default Object.assign(createViewStyles({
     paddingTop: 16,
     paddingRight: 24,
     paddingLeft: 24,
-    paddingBottom: 24,
+    paddingBottom: 16,
   },
   settings__content: {
     flexDirection: 'column',
@@ -57,10 +57,8 @@ export default Object.assign(createViewStyles({
     backgroundColor: colors.red95,
   },
   settings__footer: {
-    paddingTop: 24,
-    paddingLeft: 24,
-    paddingRight: 24,
-    paddingBottom: 24,
+    paddingTop: 16,
+    paddingBottom: 16,
   },
 }), createTextStyles({
   settings__title:{
diff --git a/app/components/Support.js b/app/components/Support.js
index 02ff5934c7..bcadd63741 100644
--- a/app/components/Support.js
+++ b/app/components/Support.js
@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 import { Component, Text, View, TextInput } from 'reactxp';
-import { Button, AppButton } from './styled';
+import { Button, BlueButton, GreenButton, Label, Icon } from './styled';
 import { Layout, Container } from './Layout';
 import styles from './SupportStyles';
 import Img from './Img';
@@ -191,32 +191,29 @@ export default class Support extends Component {
       <Text style={styles.support__no_email_warning}>
       You are about to send the problem report without a way for us to get back to you. If you want an answer to your report you will have to enter an email address.
       </Text>
-      <AppButton style={styles.support__form_send}
-        hoverStyle={styles.support__form_send_hover}
+      <GreenButton
         disabled={ !this.validate() }
         onPress={ this.onSend }
-        testName='support__send_logs'
-        text='Send anyway'/>
+        testName='support__send_logs'>
+        Send anyway
+      </GreenButton>
     </View>;
   }
 
   _renderActionButtons() {
     return [
-      <AppButton key={1}
+      <BlueButton key={1}
         onPress={ this.onViewLog }
-        style={ styles.support__form_view_logs }
-        testName='support__view_logs'
-        text='View app logs'
-        icon="icon-extLink"
-        iconStyle={styles.support__open_icon}
-        tintColor='currentColor'/>,
-      <AppButton key={2}
-        style={styles.support__form_send}
-        hoverStyle={styles.support__form_send_hover}
+        testName='support__view_logs'>
+        <Label>View app logs</Label>
+        <Icon source='icon-extLink' height='16' width='16' />
+      </BlueButton>,
+      <GreenButton key={2}
         disabled={ !this.validate() }
         onPress={ this.onSend }
-        testName='support__send_logs'
-        text='Send'/>
+        testName='support__send_logs'>
+        Send
+      </GreenButton>
     ];
   }
 
@@ -281,14 +278,14 @@ export default class Support extends Component {
         </View>
       </View>
       <View style={styles.support__footer}>
-        <AppButton style={styles.support__form_edit_logs}
-          onPress={ () => this.setState({ sendState: 'INITIAL' }) }
-          text='Edit message'/>
-        <AppButton style={styles.support__form_send}
-          hoverStyle={styles.support__form_send_hover}
+        <BlueButton onPress={ () => this.setState({ sendState: 'INITIAL' }) }>
+          Edit message
+        </BlueButton>
+        <GreenButton
           onPress={ this.onSend }
-          testName='support__send_logs'
-          text='Try again'/>
+          testName='support__send_logs'>
+          Try again
+        </GreenButton>
       </View>
     </View>;
   }
diff --git a/app/components/SupportStyles.js b/app/components/SupportStyles.js
index 1a0eb9eae3..85eb693fee 100644
--- a/app/components/SupportStyles.js
+++ b/app/components/SupportStyles.js
@@ -46,17 +46,16 @@ export default Object.assign(createViewStyles({
   },
   support__form_row:{
     paddingTop: 0,
-    paddingBottom: 0,
-    paddingLeft: 24,
-    paddingRight: 24,
+    paddingBottom: 8,
+    paddingLeft: 22,
+    paddingRight: 22,
   },
   support__form_row_message:{
     flex: 1,
     paddingTop: 0,
-    paddingBottom: 0,
-    paddingLeft: 24,
-    paddingRight: 24,
-    marginTop: 8,
+    paddingBottom: 8,
+    paddingLeft: 22,
+    paddingRight: 22,
   },
   support__form_message_scroll_wrap:{
     flex: 1,
@@ -65,40 +64,16 @@ export default Object.assign(createViewStyles({
     overflow: 'hidden',
   },
   support__footer:{
-    paddingTop: 1,
-    paddingRight: 24,
-    paddingLeft: 24,
-    paddingBottom: 24,
-    marginTop: 12,
+    paddingTop: 0,
+    paddingBottom: 16,
     display: 'flex',
     flexDirection: 'column',
     flex: 0,
   },
-  support__form_view_logs:{
-    backgroundColor: colors.blue,
-    color: colors.white80,
-  },
-  support__form_edit_logs:{
-    backgroundColor: colors.blue,
-    color: colors.white80,
-  },
-  support__form_send:{
-    backgroundColor: 'rgba(63,173,77,0.8)',
-    marginTop: 16,
-  },
-  support__form_send_hover:{
-    backgroundColor: colors.green,
-  },
   support__status_icon:{
     textAlign: 'center',
     marginBottom: 32,
   },
-  support__open_icon:{
-    color: colors.white80,
-    marginLeft: 8,
-    width: 16,
-    height: 16,
-  },
 }), createTextStyles({
   support__close_title:{
     fontFamily: 'Open Sans',
@@ -124,13 +99,13 @@ export default Object.assign(createViewStyles({
     letterSpacing: -0.2,
   },
   support__form_email:{
-    width: '100%',
+    flex: 1,
     borderRadius: 4,
     overflow: 'hidden',
-    paddingTop: 10,
-    paddingLeft: 12,
-    paddingRight: 12,
-    paddingBottom: 12,
+    paddingTop: 14,
+    paddingLeft: 14,
+    paddingRight: 14,
+    paddingBottom: 14,
     fontFamily: 'Open Sans',
     fontSize: 13,
     fontWeight: '600',
@@ -139,10 +114,10 @@ export default Object.assign(createViewStyles({
     backgroundColor: colors.white,
   },
   support__form_message:{
-    paddingTop: 10,
-    paddingLeft: 12,
-    paddingRight: 12,
-    paddingBottom: 10,
+    paddingTop: 14,
+    paddingLeft: 14,
+    paddingRight: 14,
+    paddingBottom: 14,
     fontFamily: 'Open Sans',
     fontSize: 13,
     fontWeight: '600',
@@ -177,5 +152,9 @@ export default Object.assign(createViewStyles({
     fontSize: 13,
     lineHeight: 16,
     color: colors.white80,
+    paddingTop: 8,
+    paddingLeft: 24,
+    paddingRight: 24,
+    paddingBottom: 8,
   },
 }));
diff --git a/app/components/styled/AppButton.js b/app/components/styled/AppButton.js
index 4b3996d3c6..d094c6c28b 100644
--- a/app/components/styled/AppButton.js
+++ b/app/components/styled/AppButton.js
@@ -9,82 +9,154 @@ import { createViewStyles, createTextStyles } from '../../lib/styles';
 
 const styles = {
   ...createViewStyles({
-    cell:{
+    red:{
+      backgroundColor: colors.red95,
+    },
+    redHover: {
+      backgroundColor: colors.red,
+    },
+    green:{
+      backgroundColor: colors.green,
+    },
+    greenHover:{
+      backgroundColor: colors.green90,
+    },
+    blue:{
       backgroundColor: colors.blue80,
+    },
+    blueHover:{
+      backgroundColor: colors.blue60,
+    },
+    transparent:{
+      backgroundColor: colors.white20,
+    },
+    transparentHover:{
+      backgroundColor: colors.white40,
+    },
+    white80:{
+      color: colors.white80,
+    },
+    white: {
+      color: colors.white,
+    },
+    common:{
       paddingTop: 7,
       paddingLeft: 12,
       paddingRight: 12,
       paddingBottom: 9,
+      marginTop: 8,
+      marginBottom: 8,
+      marginLeft: 24,
+      marginRight: 24,
       borderRadius: 4,
       flex: 1,
-      flexDirection: 'row',
-      alignItems: 'center',
+      flexDirection: 'column',
       alignContent: 'center',
-      justifyContent: 'space-between',
-    },
-    hover:{
-      backgroundColor: colors.blue60,
+      justifyContent: 'center',
     },
     icon:{
-      marginLeft: 8,
-      width: 0,
-      height: 0,
-      flexGrow: 0,
-      flexShrink: 0,
-      flexBasis: 'auto',
-      alignItems: 'flex-end',
-      color: colors.white80,
+      position: 'absolute',
+      width: 7,
+      height: 12,
+      alignSelf: 'flex-end',
     },
   }),
   ...createTextStyles({
     label:{
-      alignItems: 'center',
-      alignContent: 'center',
+      alignSelf: 'center',
       fontFamily: 'DINPro',
       fontSize: 20,
       fontWeight: '900',
       lineHeight: 26,
-      color: colors.white80,
-    },
-    labelHover: {
-      color: colors.white,
     },
   })
 };
 
-export default class AppButton extends Component {
+
+export class Label extends Component {
+  render() {
+    const color = this.props.color || styles.white;
+    return (
+      <Text style={[ styles.label, color ]}>
+        {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';
+    const color = this.props.color || styles.white;
+    return (
+      <Img style={[ styles.icon, {
+        width,
+        height,
+        }, color]}
+      source={source}
+      tintColor='currentColor'/>);
+  }
+}
+
+export default class BaseButton extends Component {
   props: {
-    icon?: string,
-    iconStyle?: string,
-    hoverStyle?: string,
-    text: string,
-    textHoverStyle?: string,
-    tintColor?: string,
-    style?: string,
-    disabled?: boolean,
+    children: React.Element<*>,
+    disabled: boolean,
   };
 
   state = { hovered: false };
 
-  render() {
-    const { style, tintColor, hoverStyle, text, textHoverStyle, icon, iconStyle, disabled, ...otherProps } = this.props;
+  textColor = () => this.state.hovered ? styles.white80 : styles.white;
+  iconTintColor = () => this.state.hovered ? styles.white80 : styles.white;
+  backgroundStyle = () => this.state.hovered ? styles.white80 : styles.white;
 
+  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={() => !disabled ? this.setState({ hovered: true }) : null }
-        onHoverEnd={() => !disabled ? this.setState({ hovered: false }) : null }
-        disabled={ disabled }
+      <Button style={[ styles.common, this.backgroundStyle() ]}
+        onHoverStart={this.onHoverStart}
+        onHoverEnd={this.onHoverEnd}
         {...otherProps}>
+        {
+          React.Children.map(children, (node) => {
+            if (React.isValidElement(node)){
+              let updatedProps = {};
 
-        <View style={[ styles.icon, iconStyle ]}/>
-
-        <Text style={[ styles.label, this.state.hovered ? [styles.labelHover, textHoverStyle] : null ]}>{ text }</Text>
+              if(node.type.name === 'Label') {
+                updatedProps = { color: this.textColor() };
+              }
 
-        {icon ? <Img style={[ styles.icon, iconStyle ]}
-          source={ icon }
-          tintColor={ tintColor }/> : <View style={[ styles.icon, iconStyle ]}/> }
+              if(node.type.name === 'Icon') {
+                updatedProps = { color: this.iconTintColor() };
+              }
 
+              return React.cloneElement(node, updatedProps);
+            } else {
+              return <Label>{children}</Label>;
+            }
+          })
+        }
       </Button>
     );
   }
 }
+
+export class RedButton extends BaseButton{
+  backgroundStyle = () => this.state.hovered ? styles.redHover : styles.red;
+}
+
+export class GreenButton extends BaseButton{
+  backgroundStyle = () => this.state.hovered ? styles.greenHover : styles.green;
+}
+
+export class BlueButton extends BaseButton{
+  backgroundStyle = () => this.state.hovered ? styles.blueHover : styles.blue;
+}
+
+export class TransparentButton extends BaseButton{
+  backgroundStyle = () => this.state.hovered ? styles.transparentHover : styles.transparent;
+}
\ No newline at end of file
diff --git a/app/components/styled/index.js b/app/components/styled/index.js
index df3862be21..f8967ffde2 100644
--- a/app/components/styled/index.js
+++ b/app/components/styled/index.js
@@ -2,10 +2,15 @@
 
 import { Button } from './Button';
 import CellButton from './CellButton';
-import AppButton from './AppButton';
+import {RedButton, GreenButton, BlueButton, TransparentButton, Label, Icon} from './AppButton';
 
 export {
   Button,
   CellButton,
-  AppButton,
+  RedButton,
+  GreenButton,
+  BlueButton,
+  TransparentButton,
+  Label,
+  Icon,
 };