diff options
| -rw-r--r-- | app/components/styled/AppButton.js | 92 | ||||
| -rw-r--r-- | app/components/styled/index.js | 2 | ||||
| -rw-r--r-- | app/config.json | 25 |
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)" } } |