Merge branch 'drag-settings'

14 files changed, 111 insertions, 160 deletions

diff --git a/app/components/Account.js b/app/components/Account.js
index bcb2c11ebd..2534a3e40c 100644
--- a/app/components/Account.js
+++ b/app/components/Account.js
@@ -5,6 +5,7 @@ import { Component, Text, View, App, Types } from 'reactxp';
 import * as AppButton from './AppButton';
 import { Layout, Container } from './Layout';
 import NavigationBar, { BackBarItem } from './NavigationBar';
+import SettingsHeader, { HeaderTitle } from './SettingsHeader';
 import styles from './AccountStyles';
 import Img from './Img';
 import { formatAccount } from '../lib/formatters';
@@ -96,9 +97,9 @@ export default class Account extends Component<AccountProps, AccountState> {
             </NavigationBar>
 
             <View style={styles.account__container}>
-              <View style={styles.account__header}>
-                <Text style={styles.account__title}>Account</Text>
-              </View>
+              <SettingsHeader>
+                <HeaderTitle>Account</HeaderTitle>
+              </SettingsHeader>
 
               <View style={styles.account__content}>
                 <View style={styles.account__main}>
diff --git a/app/components/AccountStyles.js b/app/components/AccountStyles.js
index f31add058e..14fc478a54 100644
--- a/app/components/AccountStyles.js
+++ b/app/components/AccountStyles.js
@@ -14,15 +14,6 @@ export default {
       flex: 1,
       paddingBottom: 48,
     },
-    account__header: {
-      flexGrow: 0,
-      flexShrink: 0,
-      flexBasis: 'auto',
-      paddingTop: 16,
-      paddingRight: 24,
-      paddingLeft: 24,
-      paddingBottom: 24,
-    },
     account__scrollview: {
       flexGrow: 1,
       flexShrink: 1,
@@ -53,13 +44,6 @@ export default {
     },
   }),
   ...createTextStyles({
-    account__title: {
-      fontFamily: 'DINPro',
-      fontSize: 32,
-      fontWeight: '900',
-      lineHeight: 40,
-      color: colors.white,
-    },
     account__row_label: {
       fontFamily: 'Open Sans',
       fontSize: 13,
diff --git a/app/components/AdvancedSettings.js b/app/components/AdvancedSettings.js
index 52e8a634b0..fa1c61152f 100644
--- a/app/components/AdvancedSettings.js
+++ b/app/components/AdvancedSettings.js
@@ -4,6 +4,7 @@ import * as React from 'react';
 import { Button, Component, Text, View } from 'reactxp';
 import { Layout, Container } from './Layout';
 import NavigationBar, { BackBarItem } from './NavigationBar';
+import SettingsHeader, { HeaderTitle } from './SettingsHeader';
 import CustomScrollbars from './CustomScrollbars';
 import styles from './AdvancedSettingsStyles';
 import Img from './Img';
@@ -35,9 +36,9 @@ export class AdvancedSettings extends Component<AdvancedSettingsProps> {
             </NavigationBar>
 
             <View style={styles.advanced_settings__container}>
-              <View style={styles.advanced_settings__header}>
-                <Text style={styles.advanced_settings__title}>Advanced</Text>
-              </View>
+              <SettingsHeader>
+                <HeaderTitle>Advanced</HeaderTitle>
+              </SettingsHeader>
               <CustomScrollbars style={styles.advanced_settings__scrollview} autoHide={true}>
                 <View style={styles.advanced_settings__content}>
                   <Selector
diff --git a/app/components/AdvancedSettingsStyles.js b/app/components/AdvancedSettingsStyles.js
index 6d23ee929b..63ab4a3f1c 100644
--- a/app/components/AdvancedSettingsStyles.js
+++ b/app/components/AdvancedSettingsStyles.js
@@ -13,15 +13,6 @@ export default {
       flexDirection: 'column',
       flex: 1,
     },
-    advanced_settings__header: {
-      flexGrow: 0,
-      flexShrink: 0,
-      flexBasis: 'auto',
-      paddingTop: 16,
-      paddingRight: 24,
-      paddingLeft: 24,
-      paddingBottom: 24,
-    },
     advanced_settings__scrollview: {
       flexGrow: 1,
       flexShrink: 1,
@@ -100,13 +91,6 @@ export default {
       lineHeight: 26,
       color: colors.white,
     },
-    advanced_settings__title: {
-      fontFamily: 'DINPro',
-      fontSize: 32,
-      fontWeight: '900',
-      lineHeight: 40,
-      color: colors.white,
-    },
     advanced_settings__cell_label: {
       fontFamily: 'DINPro',
       fontSize: 20,
diff --git a/app/components/NavigationBar.js b/app/components/NavigationBar.js
index da90642068..e8e4de16f9 100644
--- a/app/components/NavigationBar.js
+++ b/app/components/NavigationBar.js
@@ -10,21 +10,23 @@ const styles = {
     default: Styles.createViewStyle({
       flex: 0,
       alignItems: 'flex-start',
-      marginLeft: 12,
+      paddingLeft: 12,
     }),
     darwin: Styles.createViewStyle({
-      marginTop: 24,
+      paddingTop: 24,
     }),
     win32: Styles.createViewStyle({
-      marginTop: 12,
+      paddingTop: 12,
     }),
     linux: Styles.createViewStyle({
-      marginTop: 12,
+      paddingTop: 12,
+      WebkitAppRegion: 'drag',
     }),
   },
   closeBarItem: {
     default: Styles.createViewStyle({
       cursor: 'default',
+      WebkitAppRegion: 'no-drag',
     }),
     icon: Styles.createViewStyle({
       flex: 0,
@@ -37,6 +39,7 @@ const styles = {
       padding: 0,
       margin: 0,
       cursor: 'default',
+      WebkitAppRegion: 'no-drag',
     }),
     content: Styles.createViewStyle({
       flexDirection: 'row',
diff --git a/app/components/Preferences.js b/app/components/Preferences.js
index 9a0143edff..ceb76f4384 100644
--- a/app/components/Preferences.js
+++ b/app/components/Preferences.js
@@ -3,6 +3,7 @@ import React from 'react';
 import { Component, Text, View } from 'reactxp';
 import { Layout, Container } from './Layout';
 import NavigationBar, { BackBarItem } from './NavigationBar';
+import SettingsHeader, { HeaderTitle } from './SettingsHeader';
 import Switch from './Switch';
 import styles from './PreferencesStyles';
 
@@ -40,9 +41,9 @@ export default class Preferences extends Component<PreferencesProps, State> {
             </NavigationBar>
 
             <View style={styles.preferences__container}>
-              <View style={styles.preferences__header}>
-                <Text style={styles.preferences__title}>Preferences</Text>
-              </View>
+              <SettingsHeader>
+                <HeaderTitle>Preferences</HeaderTitle>
+              </SettingsHeader>
 
               <View style={styles.preferences__content}>
                 <View style={styles.preferences__cell}>
diff --git a/app/components/PreferencesStyles.js b/app/components/PreferencesStyles.js
index eaedf5f761..cafd37a016 100644
--- a/app/components/PreferencesStyles.js
+++ b/app/components/PreferencesStyles.js
@@ -13,15 +13,6 @@ export default {
       flexDirection: 'column',
       flex: 1,
     },
-    preferences__header: {
-      flexGrow: 0,
-      flexShrink: 0,
-      flexBasis: 'auto',
-      paddingTop: 16,
-      paddingRight: 24,
-      paddingLeft: 24,
-      paddingBottom: 24,
-    },
     preferences__content: {
       flexDirection: 'column',
       flexGrow: 1,
@@ -51,13 +42,6 @@ export default {
     },
   }),
   ...createTextStyles({
-    preferences__title: {
-      fontFamily: 'DINPro',
-      fontSize: 32,
-      fontWeight: '900',
-      lineHeight: 40,
-      color: colors.white,
-    },
     preferences__cell_label: {
       fontFamily: 'DINPro',
       fontSize: 20,
diff --git a/app/components/SelectLocation.js b/app/components/SelectLocation.js
index 6c7087e451..6257f89aef 100644
--- a/app/components/SelectLocation.js
+++ b/app/components/SelectLocation.js
@@ -1,8 +1,10 @@
 // @flow
 import * as React from 'react';
-import { Button, Text, View } from 'reactxp';
+import { View } from 'reactxp';
 import { Layout, Container } from './Layout';
 import CustomScrollbars from './CustomScrollbars';
+import NavigationBar, { CloseBarItem } from './NavigationBar';
+import SettingsHeader, { HeaderTitle, HeaderSubTitle } from './SettingsHeader';
 import * as Cell from './Cell';
 import styles from './SelectLocationStyles';
 import Img from './Img';
@@ -67,20 +69,22 @@ export default class SelectLocation extends React.Component<SelectLocationProps,
       <Layout>
         <Container>
           <View style={styles.select_location}>
-            <Button style={styles.close} onPress={this.props.onClose} testName="close">
-              <Img style={styles.close_icon} source="icon-close" />
-            </Button>
+            <NavigationBar>
+              <CloseBarItem action={this.props.onClose} />
+            </NavigationBar>
             <View style={styles.container}>
-              <View style={styles.header}>
-                <Text style={styles.title}>Select location</Text>
-              </View>
+              <SettingsHeader style={styles.title_header}>
+                <HeaderTitle>Select location</HeaderTitle>
+              </SettingsHeader>
 
               <CustomScrollbars autoHide={true} ref={(ref) => (this._scrollView = ref)}>
                 <View style={styles.content}>
-                  <Text style={styles.subtitle}>
-                    While connected, your real location is masked with a private and secure location
-                    in the selected region
-                  </Text>
+                  <SettingsHeader style={styles.subtitle_header}>
+                    <HeaderSubTitle>
+                      While connected, your real location is masked with a private and secure
+                      location in the selected region
+                    </HeaderSubTitle>
+                  </SettingsHeader>
 
                   {this.props.settings.relayLocations.map((relayCountry) => {
                     return this._renderCountry(relayCountry);
diff --git a/app/components/SelectLocationStyles.js b/app/components/SelectLocationStyles.js
index 6268f6ea16..424f535ae1 100644
--- a/app/components/SelectLocationStyles.js
+++ b/app/components/SelectLocationStyles.js
@@ -1,5 +1,5 @@
 // @flow
-import { createViewStyles, createTextStyles } from '../lib/styles';
+import { createViewStyles } from '../lib/styles';
 import { colors } from '../config';
 
 export default {
@@ -12,20 +12,11 @@ export default {
       flexDirection: 'column',
       flex: 1,
     },
-    header: {
-      flex: 0,
-      marginBottom: 16,
-    },
-    close: {
-      marginLeft: 12,
-      marginTop: 24,
-      cursor: 'default',
+    title_header: {
+      paddingBottom: 0,
     },
-    close_icon: {
-      width: 24,
-      height: 24,
-      flex: 0,
-      opacity: 0.6,
+    subtitle_header: {
+      paddingTop: 0,
     },
     content: {
       overflow: 'visible',
@@ -94,29 +85,4 @@ export default {
       color: colors.white,
     },
   }),
-  ...createTextStyles({
-    title: {
-      fontFamily: 'DINPro',
-      fontSize: 32,
-      fontWeight: '900',
-      lineHeight: 40,
-      color: colors.white,
-      paddingTop: 16,
-      paddingLeft: 24,
-      paddingRight: 24,
-    },
-    subtitle: {
-      fontFamily: 'Open Sans',
-      fontSize: 13,
-      fontWeight: '600',
-      lineHeight: 20,
-      color: colors.white60,
-      letterSpacing: -0.2,
-      paddingTop: 0,
-      paddingLeft: 24,
-      paddingRight: 24,
-      paddingBottom: 24,
-      flex: 0,
-    },
-  }),
 };
diff --git a/app/components/Settings.js b/app/components/Settings.js
index 260003b5c6..4a8784fe0e 100644
--- a/app/components/Settings.js
+++ b/app/components/Settings.js
@@ -1,11 +1,12 @@
 // @flow
 import moment from 'moment';
 import * as React from 'react';
-import { Component, Text, View } from 'reactxp';
+import { Component, View } from 'reactxp';
 import * as AppButton from './AppButton';
 import * as Cell from './Cell';
 import { Layout, Container } from './Layout';
 import NavigationBar, { CloseBarItem } from './NavigationBar';
+import SettingsHeader, { HeaderTitle } from './SettingsHeader';
 import CustomScrollbars from './CustomScrollbars';
 import styles from './SettingsStyles';
 import Img from './Img';
@@ -37,9 +38,9 @@ export default class Settings extends Component<SettingsProps> {
             </NavigationBar>
 
             <View style={styles.settings__container}>
-              <View style={styles.settings__header}>
-                <Text style={styles.settings__title}>Settings</Text>
-              </View>
+              <SettingsHeader>
+                <HeaderTitle>Settings</HeaderTitle>
+              </SettingsHeader>
 
               <CustomScrollbars style={styles.settings__scrollview} autoHide={true}>
                 <View style={styles.settings__content}>
diff --git a/app/components/SettingsHeader.js b/app/components/SettingsHeader.js
new file mode 100644
index 0000000000..c1791d6fc0
--- /dev/null
+++ b/app/components/SettingsHeader.js
@@ -0,0 +1,61 @@
+// @flow
+
+import * as React from 'react';
+import { Component, Text, View, Styles } from 'reactxp';
+import { colors } from '../config';
+
+const styles = {
+  header: {
+    default: Styles.createViewStyle({
+      flexGrow: 0,
+      flexShrink: 0,
+      flexBasis: 'auto',
+      paddingTop: 16,
+      paddingRight: 24,
+      paddingLeft: 24,
+      paddingBottom: 24,
+    }),
+    linux: Styles.createViewStyle({
+      WebkitAppRegion: 'drag',
+    }),
+  },
+  title: Styles.createTextStyle({
+    fontFamily: 'DINPro',
+    fontSize: 32,
+    fontWeight: '900',
+    lineHeight: 40,
+    color: colors.white,
+  }),
+  subtitle: Styles.createTextStyle({
+    marginTop: 4,
+    fontFamily: 'Open Sans',
+    fontSize: 13,
+    fontWeight: '600',
+    overflow: 'visible',
+    color: colors.white80,
+    lineHeight: 20,
+    letterSpacing: -0.2,
+  }),
+};
+
+export default class SettingsHeader extends Component {
+  render() {
+    return (
+      <View style={[styles.header.default, styles.header[process.platform], this.props.style]}>
+        {this.props.children}
+      </View>
+    );
+  }
+}
+
+export class HeaderTitle extends Component {
+  render() {
+    return <Text style={[styles.title]}>{this.props.children}</Text>;
+  }
+}
+
+export class HeaderSubTitle extends Component {
+  render() {
+    return <Text style={[styles.subtitle]}>{this.props.children}</Text>;
+  }
+}
diff --git a/app/components/SettingsStyles.js b/app/components/SettingsStyles.js
index e165e82fe2..c67edcecf9 100644
--- a/app/components/SettingsStyles.js
+++ b/app/components/SettingsStyles.js
@@ -11,15 +11,6 @@ export default {
       flexDirection: 'column',
       flex: 1,
     },
-    settings__header: {
-      flexGrow: 0,
-      flexShrink: 0,
-      flexBasis: 'auto',
-      paddingTop: 16,
-      paddingRight: 24,
-      paddingLeft: 24,
-      paddingBottom: 24,
-    },
     settings__content: {
       flexDirection: 'column',
       flex: 1,
@@ -43,13 +34,6 @@ export default {
     },
   }),
   ...createTextStyles({
-    settings__title: {
-      fontFamily: 'DINPro',
-      fontSize: 32,
-      fontWeight: '900',
-      lineHeight: 40,
-      color: colors.white,
-    },
     settings__account_paid_until_label__error: {
       color: colors.red,
     },
diff --git a/app/components/Support.js b/app/components/Support.js
index d909262429..23ddbb1b8e 100644
--- a/app/components/Support.js
+++ b/app/components/Support.js
@@ -4,6 +4,7 @@ import { Component, Text, View, TextInput } from 'reactxp';
 import * as AppButton from './AppButton';
 import { Layout, Container } from './Layout';
 import NavigationBar, { BackBarItem } from './NavigationBar';
+import SettingsHeader, { HeaderTitle, HeaderSubTitle } from './SettingsHeader';
 import styles from './SupportStyles';
 import Img from './Img';
 
@@ -137,16 +138,16 @@ export default class Support extends Component<SupportProps, SupportState> {
   render() {
     const { sendState } = this.state;
     const header = (
-      <View style={styles.support__header}>
-        <Text style={styles.support__title}>Report a problem</Text>
+      <SettingsHeader>
+        <HeaderTitle>Report a problem</HeaderTitle>
         {(sendState === 'INITIAL' || sendState === 'CONFIRM_NO_EMAIL') && (
-          <Text style={styles.support__subtitle}>
+          <HeaderSubTitle>
             {
               "To help you more effectively, your app's log file will be attached to this message. Your data will remain secure and private, as it is anonymised before being sent over an encrypted channel."
             }
-          </Text>
+          </HeaderSubTitle>
         )}
-      </View>
+      </SettingsHeader>
     );
 
     const content = this._renderContent();
diff --git a/app/components/SupportStyles.js b/app/components/SupportStyles.js
index 077335ae99..b03a7344ed 100644
--- a/app/components/SupportStyles.js
+++ b/app/components/SupportStyles.js
@@ -12,13 +12,6 @@ export default Object.assign(
       flexDirection: 'column',
       flex: 1,
     },
-    support__header: {
-      flex: 0,
-      paddingTop: 12,
-      paddingBottom: 24,
-      paddingLeft: 24,
-      paddingRight: 24,
-    },
     support__content: {
       flex: 1,
       display: 'flex',
@@ -68,23 +61,6 @@ export default Object.assign(
     },
   }),
   createTextStyles({
-    support__title: {
-      fontFamily: 'DINPro',
-      fontSize: 32,
-      fontWeight: '900',
-      lineHeight: 40,
-      color: colors.white,
-      marginBottom: 4,
-    },
-    support__subtitle: {
-      fontFamily: 'Open Sans',
-      fontSize: 13,
-      fontWeight: '600',
-      overflow: 'visible',
-      color: colors.white80,
-      lineHeight: 20,
-      letterSpacing: -0.2,
-    },
     support__form_email: {
       flex: 1,
       borderRadius: 4,