summaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--app/components/SettingsStyles.js6
-rw-r--r--app/components/styled/AppButton.js16
-rw-r--r--app/components/styled/CellButton.js18
-rw-r--r--app/components/styled/Icon.js16
-rw-r--r--app/components/styled/Label.js2
-rw-r--r--app/components/styled/SubText.js2
6 files changed, 25 insertions, 35 deletions
diff --git a/app/components/SettingsStyles.js b/app/components/SettingsStyles.js
index 430c942462..67452511e8 100644
--- a/app/components/SettingsStyles.js
+++ b/app/components/SettingsStyles.js
@@ -50,12 +50,6 @@ export default Object.assign(createViewStyles({
height: 24,
flex: 0
},
- settings__footer_button:{
- backgroundColor: colors.red,
- },
- settings__footer_button_hover:{
- backgroundColor: colors.red95,
- },
settings__footer: {
paddingTop: 16,
paddingBottom: 16,
diff --git a/app/components/styled/AppButton.js b/app/components/styled/AppButton.js
index 2b9e4538da..1b113d36d4 100644
--- a/app/components/styled/AppButton.js
+++ b/app/components/styled/AppButton.js
@@ -39,10 +39,16 @@ const styles = {
white: {
color: colors.white,
},
+ icon:{
+ position: 'absolute',
+ alignSelf: 'flex-end',
+ right: 8,
+ marginLeft: 8,
+ },
common:{
- paddingTop: 7,
- paddingLeft: 12,
- paddingRight: 12,
+ paddingTop: 9,
+ paddingLeft: 9,
+ paddingRight: 9,
paddingBottom: 9,
marginTop: 8,
marginBottom: 8,
@@ -59,7 +65,7 @@ const styles = {
export default class BaseButton extends Component {
props: {
- children: React.Element<*>,
+ children: Array<React.Element<*>> | React.Element<*>,
disabled: boolean,
};
@@ -88,7 +94,7 @@ export default class BaseButton extends Component {
}
if(node.type.name === 'Icon') {
- updatedProps = { style: this.iconStyle() };
+ updatedProps = { style: [styles.icon, this.iconStyle()]};
}
return React.cloneElement(node, updatedProps);
diff --git a/app/components/styled/CellButton.js b/app/components/styled/CellButton.js
index b11c2171e6..ca5b0a3739 100644
--- a/app/components/styled/CellButton.js
+++ b/app/components/styled/CellButton.js
@@ -10,16 +10,15 @@ import { createViewStyles } from '../../lib/styles';
const styles = {
...createViewStyles({
cell:{
- paddingTop: 15,
- paddingBottom: 15,
- paddingLeft: 24,
- paddingRight: 24,
+ paddingTop: 14,
+ paddingBottom: 14,
+ paddingLeft: 16,
+ paddingRight: 16,
marginBottom: 1,
flex: 1,
flexDirection: 'row',
alignItems: 'center',
alignContent: 'center',
- justifyContent: 'space-between'
},
blue:{
backgroundColor: colors.blue80,
@@ -39,23 +38,24 @@ const styles = {
white: {
color: colors.white,
},
- relative: {
+ icon: {
position: 'relative',
alignSelf: 'center',
+ marginLeft: 8,
},
}),
};
export default class CellButton extends Component {
props: {
- children: React.Element<*>,
+ 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;
+ iconStyle = () => this.state.hovered ? styles.white40 : styles.white60;
subtextStyle = () => this.state.hovered ? styles.white40 : styles.white60;
backgroundStyle = () => this.state.hovered ? styles.blueHover : styles.blue;
@@ -79,7 +79,7 @@ export default class CellButton extends Component {
}
if(node.type.name === 'Icon') {
- updatedProps = { style: [this.iconStyle(), styles.relative, node.props.style]};
+ updatedProps = { style: [this.iconStyle(), styles.icon, node.props.style]};
}
if(node.type.name === 'SubText') {
diff --git a/app/components/styled/Icon.js b/app/components/styled/Icon.js
index 354d9e9423..6f3bc09471 100644
--- a/app/components/styled/Icon.js
+++ b/app/components/styled/Icon.js
@@ -3,26 +3,14 @@ import React from 'react';
import { Component } from 'reactxp';
import Img from '../Img';
-import { createViewStyles } from '../../lib/styles';
-
-const styles = {
- ...createViewStyles({
- icon:{
- position: 'absolute',
- alignSelf: 'flex-end',
- },
- }),
-};
-
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';
return (
- <Img style={[ styles.icon,
- {width,
- height},
+ <Img style={[{width,
+ height},
this.props.style]}
source={source}
tintColor='currentColor'/>);
diff --git a/app/components/styled/Label.js b/app/components/styled/Label.js
index 9862b095b3..71949e7571 100644
--- a/app/components/styled/Label.js
+++ b/app/components/styled/Label.js
@@ -11,6 +11,8 @@ const styles = {
fontSize: 20,
fontWeight: '900',
lineHeight: 26,
+ flex: 1,
+ marginLeft: 8,
},
})
};
diff --git a/app/components/styled/SubText.js b/app/components/styled/SubText.js
index 744c2148c4..76b5bb87fd 100644
--- a/app/components/styled/SubText.js
+++ b/app/components/styled/SubText.js
@@ -9,7 +9,7 @@ const styles = {
fontFamily: 'Open Sans',
fontSize: 13,
fontWeight: '800',
- flexGrow: 0,
+ flex: 0,
textAlign: 'right',
},
})