Remove global styles from app buttons

10 files changed, 82 insertions, 67 deletions

diff --git a/app/components/Account.js b/app/components/Account.js
index dc26121c4c..20435d48ba 100644
--- a/app/components/Account.js
+++ b/app/components/Account.js
@@ -93,6 +93,7 @@ export default class Account extends Component<AccountProps, AccountState> {
 
                   <View style={styles.account__footer}>
                     <AppButton.GreenButton
+                      style={styles.account__buy_button}
                       onPress={this.props.onBuyMore}
                       text="Buy more credit"
                       icon="icon-extLink"
@@ -101,7 +102,7 @@ export default class Account extends Component<AccountProps, AccountState> {
                       <Img source="icon-extLink" height={16} width={16} />
                     </AppButton.GreenButton>
                     <AppButton.RedButton onPress={this.props.onLogout} testName="account__logout">
-                      Log out
+                      {'Log out'}
                     </AppButton.RedButton>
                   </View>
                 </View>
diff --git a/app/components/AccountStyles.js b/app/components/AccountStyles.js
index eda95d5dec..f31add058e 100644
--- a/app/components/AccountStyles.js
+++ b/app/components/AccountStyles.js
@@ -21,7 +21,7 @@ export default {
       paddingTop: 16,
       paddingRight: 24,
       paddingLeft: 24,
-      paddingBottom: 12,
+      paddingBottom: 24,
     },
     account__scrollview: {
       flexGrow: 1,
@@ -42,10 +42,14 @@ export default {
       paddingBottom: 0,
       paddingLeft: 24,
       paddingRight: 24,
-      marginTop: 24,
+      marginBottom: 24,
     },
     account__footer: {
-      marginTop: 12,
+      paddingLeft: 24,
+      paddingRight: 24,
+    },
+    account__buy_button: {
+      marginBottom: 24,
     },
   }),
   ...createTextStyles({
diff --git a/app/components/AppButton.js b/app/components/AppButton.js
index 1b8f50cad2..af8f36b47c 100644
--- a/app/components/AppButton.js
+++ b/app/components/AppButton.js
@@ -7,12 +7,17 @@ import Img from './Img';
 
 export class Label extends Text {}
 
-class BaseButton extends Component {
-  props: {
-    children?: React.Node,
-    disabled: boolean,
-  };
+type Props = {
+  children?: React.Node,
+  style?: Object,
+  disabled: boolean,
+};
 
+type State = {
+  hovered: boolean,
+};
+
+class BaseButton extends Component<Props, State> {
   state = { hovered: false };
 
   textStyle = () => styles.white;
@@ -22,13 +27,13 @@ class BaseButton extends Component {
   onHoverStart = () => (!this.props.disabled ? this.setState({ hovered: true }) : null);
   onHoverEnd = () => (!this.props.disabled ? this.setState({ hovered: false }) : null);
   render() {
-    const { children, ...otherProps } = this.props;
+    const { children, style, ...otherProps } = this.props;
     return (
       <Button
-        style={[styles.common, this.backgroundStyle()]}
+        {...otherProps}
+        style={[styles.common, this.backgroundStyle(), style]}
         onHoverStart={this.onHoverStart}
-        onHoverEnd={this.onHoverEnd}
-        {...otherProps}>
+        onHoverEnd={this.onHoverEnd}>
         {React.Children.map(children, (node) => {
           if (React.isValidElement(node)) {
             let updatedProps = {};
diff --git a/app/components/AppButtonStyles.js b/app/components/AppButtonStyles.js
index d1cf500cdb..d84b78b8a3 100644
--- a/app/components/AppButtonStyles.js
+++ b/app/components/AppButtonStyles.js
@@ -44,10 +44,6 @@ export default {
       paddingLeft: 9,
       paddingRight: 9,
       paddingBottom: 9,
-      marginTop: 8,
-      marginBottom: 8,
-      marginLeft: 24,
-      marginRight: 24,
       borderRadius: 4,
       flex: 1,
       flexDirection: 'column',
diff --git a/app/components/Connect.js b/app/components/Connect.js
index 4759f1619d..dabde569dc 100644
--- a/app/components/Connect.js
+++ b/app/components/Connect.js
@@ -232,7 +232,9 @@ export default class Connect extends Component<ConnectProps, ConnectState> {
           {/* footer when disconnected */}
           {isDisconnected ? (
             <View style={styles.footer}>
-              <AppButton.TransparentButton onPress={this.props.onSelectLocation}>
+              <AppButton.TransparentButton
+                style={styles.switch_location_button}
+                onPress={this.props.onSelectLocation}>
                 <AppButton.Label>{this.props.selectedRelayName}</AppButton.Label>
                 <Img height={12} width={7} source="icon-chevron" />
               </AppButton.TransparentButton>
@@ -245,7 +247,9 @@ export default class Connect extends Component<ConnectProps, ConnectState> {
           {/* footer when connecting */}
           {isConnecting ? (
             <View style={styles.footer}>
-              <AppButton.TransparentButton onPress={this.props.onSelectLocation}>
+              <AppButton.TransparentButton
+                style={styles.switch_location_button}
+                onPress={this.props.onSelectLocation}>
                 {'Switch location'}
               </AppButton.TransparentButton>
               <AppButton.RedTransparentButton onPress={this.props.onDisconnect}>
@@ -257,7 +261,9 @@ export default class Connect extends Component<ConnectProps, ConnectState> {
           {/* footer when connected */}
           {isConnected ? (
             <View style={styles.footer}>
-              <AppButton.TransparentButton onPress={this.props.onSelectLocation}>
+              <AppButton.TransparentButton
+                style={styles.switch_location_button}
+                onPress={this.props.onSelectLocation}>
                 {'Switch location'}
               </AppButton.TransparentButton>
               <AppButton.RedTransparentButton
diff --git a/app/components/ConnectStyles.js b/app/components/ConnectStyles.js
index 85558d6a12..0db0d75179 100644
--- a/app/components/ConnectStyles.js
+++ b/app/components/ConnectStyles.js
@@ -5,7 +5,6 @@ import { colors } from '../config';
 export default {
   ...createViewStyles({
     connect: {
-      height: '100%',
       flex: 1,
     },
     map: {
@@ -26,7 +25,9 @@ export default {
     },
     footer: {
       flex: 0,
-      marginBottom: 16,
+      paddingBottom: 16,
+      paddingLeft: 24,
+      paddingRight: 24,
     },
     blocking_container: {
       width: '100%',
@@ -42,16 +43,6 @@ export default {
       marginRight: 8,
       backgroundColor: colors.red,
     },
-    server: {
-      paddingTop: 7,
-      paddingLeft: 12,
-      paddingRight: 12,
-      paddingBottom: 9,
-      backgroundColor: colors.white20,
-      borderRadius: 4,
-      flexDirection: 'row',
-      alignItems: 'center',
-    },
     status: {
       paddingTop: 0,
       paddingLeft: 24,
@@ -67,6 +58,9 @@ export default {
       height: 60,
       marginTop: 94,
     },
+    switch_location_button: {
+      marginBottom: 16,
+    },
   }),
   ...createTextStyles({
     blocking_message: {
diff --git a/app/components/LoginStyles.js b/app/components/LoginStyles.js
index 5e64e8b1eb..d9094a2f13 100644
--- a/app/components/LoginStyles.js
+++ b/app/components/LoginStyles.js
@@ -5,10 +5,12 @@ import { colors } from '../config';
 export default {
   ...createViewStyles({
     login_footer: {
-      backgroundColor: colors.darkBlue,
-      paddingTop: 18,
-      paddingBottom: 16,
       flex: 0,
+      paddingTop: 16,
+      paddingBottom: 24,
+      paddingLeft: 24,
+      paddingRight: 24,
+      backgroundColor: colors.darkBlue,
     },
     status_icon: {
       flex: 0,
@@ -81,7 +83,6 @@ export default {
       color: colors.white,
       opacity: 0,
     },
-
     account_dropdown__spacer: {
       height: 1,
       backgroundColor: colors.darkBlue,
@@ -120,8 +121,7 @@ export default {
       fontWeight: '600',
       lineHeight: 18,
       letterSpacing: -0.2,
-      marginLeft: 24,
-      marginRight: 24,
+      marginBottom: 8,
     },
     title: {
       fontFamily: 'DINPro',
diff --git a/app/components/SettingsStyles.js b/app/components/SettingsStyles.js
index 9bc7c16a08..e165e82fe2 100644
--- a/app/components/SettingsStyles.js
+++ b/app/components/SettingsStyles.js
@@ -36,8 +36,10 @@ export default {
       flex: 0,
     },
     settings__footer: {
-      paddingTop: 16,
-      paddingBottom: 16,
+      paddingTop: 24,
+      paddingBottom: 24,
+      paddingLeft: 24,
+      paddingRight: 24,
     },
   }),
   ...createTextStyles({
diff --git a/app/components/Support.js b/app/components/Support.js
index 34fc360215..d909262429 100644
--- a/app/components/Support.js
+++ b/app/components/Support.js
@@ -190,7 +190,7 @@ export default class Support extends Component<SupportProps, SupportState> {
     return (
       <View style={styles.support__content}>
         <View style={styles.support__form}>
-          <View style={styles.support__form_row}>
+          <View style={styles.support__form_row_email}>
             <TextInput
               style={styles.support__form_email}
               placeholder="Your email (optional)"
@@ -232,26 +232,30 @@ export default class Support extends Component<SupportProps, SupportState> {
           disabled={!this.validate()}
           onPress={this.onSend}
           testName="support__send_logs">
-          Send anyway
+          {'Send anyway'}
         </AppButton.GreenButton>
       </View>
     );
   }
 
   _renderActionButtons() {
-    return [
-      <AppButton.BlueButton key={1} onPress={this.onViewLog} testName="support__view_logs">
-        <AppButton.Label>View app logs</AppButton.Label>
-        <Img source="icon-extLink" height={16} width={16} />
-      </AppButton.BlueButton>,
-      <AppButton.GreenButton
-        key={2}
-        disabled={!this.validate()}
-        onPress={this.onSend}
-        testName="support__send_logs">
-        Send
-      </AppButton.GreenButton>,
-    ];
+    return (
+      <View>
+        <AppButton.BlueButton
+          style={styles.view_logs_button}
+          onPress={this.onViewLog}
+          testName="support__view_logs">
+          <AppButton.Label>View app logs</AppButton.Label>
+          <Img source="icon-extLink" height={16} width={16} />
+        </AppButton.BlueButton>
+        <AppButton.GreenButton
+          disabled={!this.validate()}
+          onPress={this.onSend}
+          testName="support__send_logs">
+          Send
+        </AppButton.GreenButton>
+      </View>
+    );
   }
 
   _renderLoading() {
diff --git a/app/components/SupportStyles.js b/app/components/SupportStyles.js
index 77b4609568..077335ae99 100644
--- a/app/components/SupportStyles.js
+++ b/app/components/SupportStyles.js
@@ -15,7 +15,7 @@ export default Object.assign(
     support__header: {
       flex: 0,
       paddingTop: 12,
-      paddingBottom: 12,
+      paddingBottom: 24,
       paddingLeft: 24,
       paddingRight: 24,
     },
@@ -31,15 +31,17 @@ export default Object.assign(
       flexDirection: 'column',
     },
     support__form_row: {
-      paddingTop: 0,
-      paddingBottom: 8,
       paddingLeft: 22,
       paddingRight: 22,
+      marginBottom: 12,
+    },
+    support__form_row_email: {
+      paddingLeft: 22,
+      paddingRight: 22,
+      marginBottom: 12,
     },
     support__form_row_message: {
       flex: 1,
-      paddingTop: 0,
-      paddingBottom: 8,
       paddingLeft: 22,
       paddingRight: 22,
     },
@@ -50,9 +52,10 @@ export default Object.assign(
       overflow: 'hidden',
     },
     support__footer: {
-      paddingTop: 0,
+      paddingTop: 16,
       paddingBottom: 16,
-      display: 'flex',
+      paddingLeft: 24,
+      paddingRight: 24,
       flexDirection: 'column',
       flex: 0,
     },
@@ -60,6 +63,9 @@ export default Object.assign(
       textAlign: 'center',
       marginBottom: 32,
     },
+    view_logs_button: {
+      marginBottom: 16,
+    },
   }),
   createTextStyles({
     support__title: {
@@ -68,7 +74,7 @@ export default Object.assign(
       fontWeight: '900',
       lineHeight: 40,
       color: colors.white,
-      marginBottom: 16,
+      marginBottom: 4,
     },
     support__subtitle: {
       fontFamily: 'Open Sans',
@@ -133,10 +139,7 @@ export default Object.assign(
       fontSize: 13,
       lineHeight: 16,
       color: colors.white80,
-      paddingTop: 8,
-      paddingLeft: 24,
-      paddingRight: 24,
-      paddingBottom: 8,
+      marginBottom: 12,
     },
   }),
 );