Some style updates

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',
     },
   })