Make settings headers also drag the window

11 files changed, 84 insertions, 106 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/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/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..c0a3149d02
--- /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.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,