Merge branch 'buttons'

3 files changed, 262 insertions, 1 deletions

diff --git a/app/components/styled/AppButton.js b/app/components/styled/AppButton.js
new file mode 100644
index 0000000000..60da8edb3c
--- /dev/null
+++ b/app/components/styled/AppButton.js
@@ -0,0 +1,136 @@
+// @flow
+import React from 'react';
+import { Text, Component } from 'reactxp';
+import { Button } from './Button';
+import { colors } from '../../config';
+
+import { createViewStyles, createTextStyles } from '../../lib/styles';
+
+const styles = {
+  ...createViewStyles({
+    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,
+    },
+    icon:{
+      position: 'absolute',
+      alignSelf: 'flex-end',
+      right: 8,
+      marginLeft: 8,
+    },
+    common:{
+      paddingTop: 9,
+      paddingLeft: 9,
+      paddingRight: 9,
+      paddingBottom: 9,
+      marginTop: 8,
+      marginBottom: 8,
+      marginLeft: 24,
+      marginRight: 24,
+      borderRadius: 4,
+      flex: 1,
+      flexDirection: 'column',
+      alignContent: 'center',
+      justifyContent: 'center',
+    },
+  }),
+  ...createTextStyles({
+    label:{
+      alignSelf: 'center',
+      fontFamily: 'DINPro',
+      fontSize: 20,
+      fontWeight: '900',
+      lineHeight: 26,
+      flex: 1,
+    },
+  }),
+};
+
+export class Label extends Text {}
+
+export default class BaseButton extends Component {
+  props: {
+    children: Array<React.Element<*>> | React.Element<*>,
+    disabled: boolean,
+  };
+
+  state = { hovered: false };
+
+  textStyle = () => this.state.hovered ? styles.white80 : styles.white;
+  iconStyle = () => 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.common, this.backgroundStyle() ]}
+        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, this.textStyle()]};
+              }
+
+              if(node.type.name === 'Img') {
+                updatedProps = { tintColor:'currentColor', style: [styles.icon, this.iconStyle()]};
+              }
+
+              return React.cloneElement(node, updatedProps);
+            } else {
+              return <Label style={[styles.label, this.textStyle()]}>{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/CellButton.js b/app/components/styled/CellButton.js
new file mode 100644
index 0000000000..7309180241
--- /dev/null
+++ b/app/components/styled/CellButton.js
@@ -0,0 +1,116 @@
+// @flow
+import React from 'react';
+import { Text, Component } from 'reactxp';
+import { Button } from './Button';
+import { colors } from '../../config';
+
+import { createViewStyles, createTextStyles } from '../../lib/styles';
+
+const styles = {
+  ...createViewStyles({
+    cell:{
+      paddingTop: 14,
+      paddingBottom: 14,
+      paddingLeft: 16,
+      paddingRight: 16,
+      marginBottom: 1,
+      flex: 1,
+      flexDirection: 'row',
+      alignItems: 'center',
+      alignContent: 'center',
+    },
+    blue:{
+      backgroundColor: colors.blue80,
+    },
+    blueHover:{
+      backgroundColor: colors.blue60,
+    },
+    white40:{
+      color: colors.white40,
+    },
+    white60:{
+      color: colors.white60,
+    },
+    white80:{
+      color: colors.white80,
+    },
+    white: {
+      color: colors.white,
+    },
+    icon: {
+      marginLeft: 8,
+    },
+  }),
+  ...createTextStyles({
+    label:{
+      alignSelf: 'center',
+      fontFamily: 'DINPro',
+      fontSize: 20,
+      fontWeight: '900',
+      lineHeight: 26,
+      flex: 1,
+      marginLeft: 8,
+    },
+    subtext:{
+      fontFamily: 'Open Sans',
+      fontSize: 13,
+      fontWeight: '800',
+      flex: 0,
+      textAlign: 'right',
+    },
+  }),
+};
+
+export class SubText extends Text {}
+export class Label extends Text {}
+
+export default class CellButton extends Component {
+  props: {
+    children: Array<React.Element<*>> | React.Element<*>,
+    disabled: boolean,
+  };
+
+  state = { hovered: false };
+
+  textStyle = () => this.state.hovered ? styles.white80 : styles.white;
+  iconStyle = () => this.state.hovered ? styles.white40 : styles.white60;
+  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, this.backgroundStyle() ]}
+        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, this.textStyle(), node.props.style]};
+              }
+
+              if(node.type.name === 'Img') {
+                updatedProps = { tintColor:'currentColor', style: [styles.icon, this.iconStyle(), node.props.style]};
+              }
+
+              if(node.type.name === 'SubText') {
+                updatedProps = { style: [styles.subtext, this.subtextStyle(), node.props.style]};
+              }
+
+              return React.cloneElement(node, updatedProps);
+            } else {
+              return <Label style={[styles.label, this.textStyle()]}>{children}</Label>;
+            }
+          })
+        }
+      </Button>
+    );
+  }
+}
diff --git a/app/components/styled/index.js b/app/components/styled/index.js
index 6699594f18..de18529cac 100644
--- a/app/components/styled/index.js
+++ b/app/components/styled/index.js
@@ -1,7 +1,16 @@
 // @flow
 
 import { Button } from './Button';
+import CellButton, { Label, SubText } from './CellButton';
+import { RedButton, GreenButton, BlueButton, TransparentButton } from './AppButton';
 
 export {
-  Button
+  Button,
+  CellButton,
+  RedButton,
+  GreenButton,
+  BlueButton,
+  TransparentButton,
+  Label,
+  SubText,
 };