Add AppButton and colors in Config

2 files changed, 94 insertions, 0 deletions

diff --git a/app/components/styled/AppButton.js b/app/components/styled/AppButton.js
new file mode 100644
index 0000000000..c1b8067d80
--- /dev/null
+++ b/app/components/styled/AppButton.js
@@ -0,0 +1,92 @@
+// @flow
+import React from 'react';
+import { View, Text, Component } from 'reactxp';
+import { Button } from './Button';
+import Img from '../Img';
+import { colors } from '../../config';
+
+import { createViewStyles, createTextStyles } from '../../lib/styles';
+
+const styles = {
+  ...createViewStyles({
+    cell:{
+      backgroundColor: colors.blue80,
+      paddingTop: 7,
+      paddingLeft: 12,
+      paddingRight: 12,
+      paddingBottom: 9,
+      borderRadius: 4,
+      flex: 1,
+      flexDirection: 'row',
+      alignItems: 'center',
+      alignContent: 'center',
+      justifyContent: 'space-between',
+    },
+    hover:{
+      backgroundColor: colors.blue60,
+    },
+    icon:{
+      marginLeft: 8,
+      width: 0,
+      height: 0,
+      flexGrow: 0,
+      flexShrink: 0,
+      flexBasis: 'auto',
+      alignItems: 'flex-end',
+      color: colors.white80,
+    },
+  }),
+  ...createTextStyles({
+    label:{
+      alignItems: 'center',
+      alignContent: 'center',
+      fontFamily: 'DINPro',
+      fontSize: 20,
+      fontWeight: '900',
+      lineHeight: 26,
+      color: colors.white80,
+    },
+    labelHover: {
+      color: colors.white,
+    },
+  })
+};
+
+export default class AppButton extends Component {
+  props: {
+    icon?: string,
+    iconStyle?: string,
+    hoverStyle?: string,
+    text: string,
+    textHoverStyle?: string,
+    tintColor?: string,
+    onPress?: () => void,
+    style?: string,
+    disabled?: boolean,
+  };
+
+  state = { hovered: false };
+
+  render() {
+    const { style, tintColor, hoverStyle, text, textHoverStyle, icon, iconStyle, onPress, disabled, ...otherProps } = this.props;
+
+    return (
+      <Button style={[ styles.cell, style, this.state.hovered ? [styles.hover, hoverStyle] : null ]}
+        onPress={ onPress }
+        onHoverStart={() => !disabled ? this.setState({ hovered: true }) : null }
+        onHoverEnd={() => !disabled ? this.setState({ hovered: false }) : null }
+        disabled={ disabled }
+        {...otherProps}>
+
+        <View style={[ styles.icon, iconStyle ]}/>
+
+        <Text style={[ styles.label, this.state.hovered ? [styles.labelHover, textHoverStyle] : null ]}>{ text }</Text>
+
+        {icon ? <Img style={[ styles.icon, iconStyle ]}
+          source={ icon }
+          tintColor={ tintColor }/> : <View style={[ styles.icon, iconStyle ]}/> }
+
+      </Button>
+    );
+  }
+}
diff --git a/app/components/styled/index.js b/app/components/styled/index.js
index 0aeddca65e..df3862be21 100644
--- a/app/components/styled/index.js
+++ b/app/components/styled/index.js
@@ -2,8 +2,10 @@
 
 import { Button } from './Button';
 import CellButton from './CellButton';
+import AppButton from './AppButton';
 
 export {
   Button,
   CellButton,
+  AppButton,
 };