Style changes to use config-colors and AppButtons

6 files changed, 79 insertions, 122 deletions

diff --git a/app/components/HeaderBarStyles.js b/app/components/HeaderBarStyles.js
index c2d53a2036..a8569f2f81 100644
--- a/app/components/HeaderBarStyles.js
+++ b/app/components/HeaderBarStyles.js
@@ -1,5 +1,6 @@
 // @flow
 import { createTextStyles, createViewStyles } from '../lib/styles';
+import { colors } from '../config';
 
 export default {
   ...createViewStyles({
@@ -8,7 +9,7 @@ export default {
       paddingBottom: 12,
       paddingLeft: 12,
       paddingRight: 12,
-      backgroundColor: '#294D73',
+      backgroundColor: colors.blue,
       flexDirection: 'row',
       justifyContent: 'space-between',
       alignItems: 'center',
@@ -23,13 +24,13 @@ export default {
       paddingTop: 24,
     },
     headerbar__style_defaultDark: {
-      backgroundColor: '#192E45',
+      backgroundColor: colors.darkBlue,
     },
     headerbar__style_error: {
-      backgroundColor: '#D0021B',
+      backgroundColor: colors.red,
     },
     headerbar__style_success: {
-      backgroundColor: '#44AD4D',
+      backgroundColor: colors.green,
     },
     headerbar__container: {
       display: 'flex',
@@ -55,7 +56,7 @@ export default {
       fontWeight: '900',
       lineHeight: 30,
       letterSpacing: -0.5,
-      color: 'rgba(255,255,255,0.6)',
+      color: colors.white60,
       marginLeft: 8,
     }
   })
diff --git a/app/components/PreferencesStyles.js b/app/components/PreferencesStyles.js
index 24d0884605..a0dfcb2d7b 100644
--- a/app/components/PreferencesStyles.js
+++ b/app/components/PreferencesStyles.js
@@ -1,11 +1,11 @@
 // @flow
-
 import { createViewStyles, createTextStyles } from '../lib/styles';
+import { colors } from '../config';
 
 export default {
   ...createViewStyles({
     preferences: {
-      backgroundColor: '#192E45',
+      backgroundColor: colors.darkBlue,
       height: '100%',
     },
     preferences__container: {
@@ -47,7 +47,7 @@ export default {
       flexBasis: 'auto',
     },
     preferences__cell: {
-      backgroundColor: 'rgba(41,71,115,1)',
+      backgroundColor: colors.blue,
       flexDirection: 'row',
       alignItems: 'center',
     },
@@ -73,14 +73,14 @@ export default {
       fontFamily: 'Open Sans',
       fontSize: 13,
       fontWeight: '600',
-      color: 'rgba(255, 255, 255, 0.6)',
+      color: colors.white60,
     },
     preferences__title: {
       fontFamily: 'DINPro',
       fontSize: 32,
       fontWeight: '900',
       lineHeight: 40,
-      color: '#fff',
+      color: colors.white
     },
     preferences__cell_label: {
       fontFamily: 'DINPro',
@@ -88,7 +88,7 @@ export default {
       fontWeight: '900',
       lineHeight: 26,
       letterSpacing: -0.2,
-      color: '#fff',
+      color: colors.white,
     },
     preferences__cell_footer_label: {
       fontFamily: 'Open Sans',
@@ -96,7 +96,7 @@ export default {
       fontWeight: '600',
       lineHeight: 20,
       letterSpacing: -0.2,
-      color: 'rgba(255,255,255,0.8)'
+      color: colors.white80
     }
   })
 };
\ No newline at end of file
diff --git a/app/components/Settings.js b/app/components/Settings.js
index 8e7e8717bb..d854b51d7d 100644
--- a/app/components/Settings.js
+++ b/app/components/Settings.js
@@ -2,7 +2,7 @@
 import moment from 'moment';
 import React from 'react';
 import { Component, Text, View } from 'reactxp';
-import { Button, CellButton } from './styled';
+import { Button, CellButton, AppButton } from './styled';
 import { Layout, Container, Header } from './Layout';
 import CustomScrollbars from './CustomScrollbars';
 import styles from './SettingsStyles';
@@ -31,7 +31,6 @@ export default class Settings extends Component {
   render() {
     return (
       <Layout>
-        <Header hidden={ true } style={ 'defaultDark' } />
         <Container>
           <View style={styles.settings}>
             <Button style={styles.settings__close} onPress={ this.props.onClose } testName='settings__close'>
@@ -81,7 +80,7 @@ export default class Settings extends Component {
 
     return <View>
       <View style={styles.settings_account} testName='settings__account'>
-        {!isOutOfTime ? (
+        {isOutOfTime ? (
           <CellButton onPress={ this.props.onViewAccount }
             text='Account'
             testName='settings__account_paid_until_label'
@@ -158,9 +157,11 @@ export default class Settings extends Component {
 
   _renderQuitButton() {
     return <View style={styles.settings__footer}>
-      <Button style={styles.settings__footer_button} onPress={this.props.onQuit} testName='settings__quit'>
-        <Text style={styles.settings__footer_button_label}>Quit app</Text>
-      </Button>
+      <AppButton style={styles.settings__footer_button}
+        hoverStyle={styles.settings__footer_button_hover}
+        onPress={this.props.onQuit}
+        testName='settings__quit'
+        text='Quit app'/>
     </View>;
   }
 }
\ No newline at end of file
diff --git a/app/components/SettingsStyles.js b/app/components/SettingsStyles.js
index 5585b7b273..f054ecbce9 100644
--- a/app/components/SettingsStyles.js
+++ b/app/components/SettingsStyles.js
@@ -1,19 +1,21 @@
 import { createViewStyles, createTextStyles } from '../lib/styles';
+import { colors } from '../config';
 
 export default Object.assign(createViewStyles({
   settings: {
-    backgroundColor: '#192E45',
+    backgroundColor: colors.darkBlue,
     height: '100%'
   },
   settings__container:{
     flexDirection: 'column',
-    height: '100%'
+    height: '100%',
+    paddingBottom: 48,
   },
   settings__header:{
     flexGrow: 0,
     flexShrink: 0,
     flexBasis: 'auto',
-    paddingTop: 40,
+    paddingTop: 16,
     paddingRight: 24,
     paddingLeft: 24,
     paddingBottom: 24,
@@ -29,13 +31,8 @@ export default Object.assign(createViewStyles({
     flexBasis: '100%',
   },
   settings__close: {
-    position: 'absolute',
-    top: 0,
-    left: 12,
-    borderWidth: 0,
-    padding: 0,
-    margin: 0,
-    zIndex: 1, /* part of .settings__close covers the button */
+    marginLeft: 12,
+    marginTop: 24,
     cursor: 'default',
   },
   settings__close_icon:{
@@ -46,7 +43,7 @@ export default Object.assign(createViewStyles({
   },
   settings__icon_chevron:{
     marginLeft: 8,
-    color: 'rgba(255, 255, 255, 0.8)',
+    color: colors.white80,
     width: 7,
     height: 12,
   },
@@ -55,13 +52,10 @@ export default Object.assign(createViewStyles({
     flex: 0
   },
   settings__footer_button:{
-    backgroundColor: 'rgba(208,2,27,1)',
-    paddingTop: 7,
-    paddingLeft: 12,
-    paddingRight: 12,
-    paddingBottom: 9,
-    borderRadius: 4,
-    alignItems: 'center',
+    backgroundColor: colors.red,
+  },
+  settings__footer_button_hover:{
+    backgroundColor: colors.red95,
   },
   settings__footer: {
     paddingTop: 24,
@@ -75,16 +69,9 @@ export default Object.assign(createViewStyles({
     fontSize: 32,
     fontWeight: '900',
     lineHeight: 40,
-    color: '#FFFFFF'
-  },
-  settings__footer_button_label:{
-    fontFamily: 'DINPro',
-    fontSize: 20,
-    fontWeight: '900',
-    lineHeight: 26,
-    color: 'rgba(255,255,255,0.8)'
+    color: colors.white
   },
   settings__account_paid_until_label__error:{
-    color: '#d0021b',
+    color: colors.red,
   },
 }));
diff --git a/app/components/Support.js b/app/components/Support.js
index dc646bdb0e..359225b640 100644
--- a/app/components/Support.js
+++ b/app/components/Support.js
@@ -1,7 +1,8 @@
 // @flow
 import React from 'react';
-import { Component, Text, Button, View, TextInput } from 'reactxp';
-import { Layout, Container, Header } from './Layout';
+import { Component, Text, View, TextInput } from 'reactxp';
+import { Button, AppButton } from './styled';
+import { Layout, Container } from './Layout';
 import styles from './SupportStyles';
 import Img from './Img';
 
@@ -117,14 +118,11 @@ export default class Support extends Component {
 
     return (
       <Layout>
-        <Header hidden={ true } style={ 'defaultDark' } />
         <Container>
           <View style={styles.support}>
             <Button style={styles.support__close} onPress={ this.props.onClose } testName="support__close">
-              <View style={styles.support__close}>
-                <Img style={styles.support__close_icon} source="icon-back" />
-                <Text style={styles.support__close_title}>Settings</Text>
-              </View>
+              <Img style={styles.support__close_icon} source="icon-back" />
+              <Text style={styles.support__close_title}>Settings</Text>
             </Button>
             <View style={styles.support__container}>
 
@@ -201,16 +199,21 @@ export default class Support extends Component {
 
   _renderActionButtons() {
     return [
-      <Button key={1} onPress={ this.onViewLog } style={{'flex':1}} testName='support__view_logs'>
-        <View style={styles.support__form_view_logs}>
-          <View style={styles.support__open_icon}></View>
-          <Text style={styles.support__button_label}>View app logs</Text>
-          <Img source="icon-extLink" style={styles.support__open_icon} tintColor='currentColor'/>
-        </View>
-      </Button>,
-      <Button key={2} style={styles.support__form_send} disabled={ !this.validate() } onPress={ this.onSend } testName='support__send_logs'>
-        <Text style={styles.support__button_label}>Send</Text>
-      </Button>
+      <AppButton key={1}
+        onPress={ this.onViewLog }
+        style={ styles.support__form_view_logs }
+        testName='support__view_logs'
+        text='View app logs'
+        icon="icon-extLink"
+        iconStyle={styles.support__open_icon}
+        tintColor='currentColor'/>,
+      <AppButton key={2}
+        style={styles.support__form_send}
+        hoverStyle={styles.support__form_send_hover}
+        disabled={ !this.validate() }
+        onPress={ this.onSend }
+        testName='support__send_logs'
+        text='Send'/>
     ];
   }
 
diff --git a/app/components/SupportStyles.js b/app/components/SupportStyles.js
index f0b0df5c18..fce2594783 100644
--- a/app/components/SupportStyles.js
+++ b/app/components/SupportStyles.js
@@ -1,14 +1,16 @@
 import { createViewStyles, createTextStyles } from '../lib/styles';
+import { colors } from '../config';
 
 export default Object.assign(createViewStyles({
   support:{
-    backgroundColor: '#192E45',
+    backgroundColor: colors.darkBlue,
     height: '100%',
   },
   support__container:{
     display: 'flex',
     flexDirection: 'column',
     height: '100%',
+    paddingBottom: 24,
   },
   support__header:{
     flex: 0,
@@ -16,10 +18,10 @@ export default Object.assign(createViewStyles({
     paddingBottom: 12,
     paddingLeft: 24,
     paddingRight: 24,
-    overflow: 'visible',
-    position: 'relative' /* anchor for close button */
   },
   support__close:{
+    paddingLeft: 12,
+    paddingTop: 24,
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'flex-start',
@@ -75,71 +77,43 @@ export default Object.assign(createViewStyles({
     flex: 0,
   },
   support__form_view_logs:{
-    backgroundColor: 'rgba(41,71,115,1)',
-    color: 'rgba(255,255,255,0.8)',
-    paddingTop: 7,
-    paddingLeft: 12,
-    paddingRight: 12,
-    paddingBottom: 9,
-    borderRadius: 4,
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    flexDirection: 'row',
-    flex: 1,
+    backgroundColor: colors.blue,
+    color: colors.white80,
   },
   support__form_edit_logs:{
-    backgroundColor: 'rgba(41,71,115,1)',
-    color: 'rgba(255,255,255,0.8)',
-    paddingTop: 7,
-    paddingLeft: 12,
-    paddingRight: 12,
-    paddingBottom: 9,
-    borderRadius: 4,
-    justifyContent: 'center',
-    alignItems: 'center',
-    flexDirection: 'row',
-    flex: 1,
+    backgroundColor: colors.blue,
+    color: colors.white80,
   },
   support__form_send:{
-    backgroundColor: 'rgba(63,173,77,1)',
-    color: 'rgba(255,255,255,0.8)',
-    paddingTop: 7,
-    paddingLeft: 12,
-    paddingRight: 12,
-    paddingBottom: 9,
-    borderRadius: 4,
+    backgroundColor: 'rgba(63,173,77,0.8)',
     marginTop: 16,
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    flex: 1,
+  },
+  support__form_send_hover:{
+    backgroundColor: colors.green,
   },
   support__status_icon:{
     textAlign: 'center',
     marginBottom: 32,
   },
   support__open_icon:{
-    color: 'rgba(255,255,255,0.8)',
+    color: colors.white80,
     marginLeft: 8,
     width: 16,
     height: 16,
-    flexGrow: 0,
-    flexShrink: 0,
-    flexBasis: 'auto',
-    alignItems: 'flex-end',
   },
 }), createTextStyles({
   support__close_title:{
     fontFamily: 'Open Sans',
     fontSize: 13,
     fontWeight: '600',
-    color: 'rgba(255, 255, 255, 0.6)',
+    color: colors.white60,
   },
   support__title:{
     fontFamily: 'DINPro',
     fontSize: 32,
     fontWeight: '900',
     lineHeight: 40,
-    color: '#FFFFFF',
+    color: colors.white,
     marginBottom: 16,
   },
   support__subtitle:{
@@ -147,7 +121,7 @@ export default Object.assign(createViewStyles({
     fontSize: 13,
     fontWeight: '600',
     overflow: 'visible',
-    color: 'rgba(255,255,255,0.8)',
+    color: colors.white80,
     lineHeight: 20,
     letterSpacing: -0.2,
   },
@@ -163,8 +137,8 @@ export default Object.assign(createViewStyles({
     fontSize: 13,
     fontWeight: '600',
     lineHeight: 26,
-    color: '#294D73',
-    backgroundColor: '#fff',
+    color: colors.blue,
+    backgroundColor: colors.white,
   },
   support__form_message:{
     paddingTop: 10,
@@ -174,13 +148,13 @@ export default Object.assign(createViewStyles({
     fontFamily: 'Open Sans',
     fontSize: 13,
     fontWeight: '600',
-    color: '#294D73',
-    backgroundColor: '#fff',
+    color: colors.blue,
+    backgroundColor: colors.white,
     flex: 1,
   },
   support__sent_email:{
     fontWeight: '900',
-    color: 'white',
+    color: colors.white,
   },
   support__status_security__secure:{
     fontFamily: 'Open Sans',
@@ -188,7 +162,7 @@ export default Object.assign(createViewStyles({
     fontWeight: '800',
     lineHeight: 22,
     marginBottom: 4,
-    color: '#44AD4D',
+    color: colors.green,
   },
   support__send_status:{
     fontFamily: 'DINPro',
@@ -197,22 +171,13 @@ export default Object.assign(createViewStyles({
     maxHeight: 'calc(1.16em * 2)',
     overflow: 'visible',
     letterSpacing: -0.9,
-    color: '#FFFFFF',
+    color: colors.white,
     marginBottom: 4,
   },
-  support__button_label:{
-    fontFamily: 'DINPro',
-    fontSize: 20,
-    fontWeight: '900',
-    lineHeight: 26,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
   support__no_email_warning: {
     fontFamily: 'Open Sans',
     fontSize: 13,
     lineHeight: 16,
-
-    color: 'rgba(255,255,255,0.8)',
+    color: colors.white80,
   },
 }));