Add AppButton and colors in Config

3 files changed, 119 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,
 };
diff --git a/app/config.json b/app/config.json
index d022e65ef6..fdbbfe7ae2 100644
--- a/app/config.json
+++ b/app/config.json
@@ -6,5 +6,30 @@
     "guides": "https://mullvad.net/guides/",
     "download": "https://mullvad.net/download/",
     "supportEmail": "mailto:support@mullvad.net"
+  },
+  "colors": {
+    "darkBlue": "#192e45",
+    "blue": "#294d73",
+    "green": "#44ad4d",
+    "darkGreen": "#205425",
+    "red": "#d0021b",
+    "darkYellow": "#8e4e13",
+    "yellow": "#ffd524",
+    "white": "#ffffff",
+    "white80": "rgba(255, 255, 255, 0.8)",
+    "white60": "rgba(255, 255, 255, 0.6)",
+    "white40": "rgba(255, 255, 255, 0.4)",
+    "white20": "rgba(255, 255, 255, 0.2)",
+    "blue20": "rgba(41, 77, 115, 0.2)",
+    "blue40": "rgba(41, 77, 115, 0.4)",
+    "blue80": "rgba(41, 77, 115, 0.5)",
+    "blue60": "rgba(41, 77, 115, 0.6)",
+    "blue80": "rgba(41, 77, 115, 0.8)",
+    "blue80": "rgba(41, 77, 115, 0.9)",
+    "red95": "rgba(208, 2, 27, 0.95)",
+    "red40": "rgba(208, 2, 27, 0.40)",
+    "red45": "rgba(208, 2, 27, 0.45)",
+    "green90": "rgba(68, 173, 77, 0.9)",
+    "green40": "rgba(68, 173, 77, 0.4)"
   }
 }