Make HeaderBar more composable

1 files changed, 128 insertions, 35 deletions

diff --git a/app/components/HeaderBar.js b/app/components/HeaderBar.js
index a46856eb46..02b1d86e31 100644
--- a/app/components/HeaderBar.js
+++ b/app/components/HeaderBar.js
@@ -1,55 +1,148 @@
 // @flow
 import React from 'react';
-import { Component, Text, Button, View } from 'reactxp';
-
+import { Component, Text, Button, View, Styles } from 'reactxp';
 import Img from './Img';
-
-import styles from './HeaderBarStyles';
-import platformStyles from './HeaderBarPlatformStyles';
+import { colors } from '../config';
 
 export type HeaderBarStyle = 'default' | 'defaultDark' | 'error' | 'success';
-export type HeaderBarProps = {
-  style: HeaderBarStyle,
-  showSettings: boolean,
-  onSettings: ?() => void,
+type HeaderBarProps = {
+  barStyle: HeaderBarStyle,
+};
+
+const headerBarStyles = {
+  container: {
+    base: Styles.createViewStyle({
+      paddingTop: 12,
+      paddingBottom: 12,
+      paddingLeft: 12,
+      paddingRight: 12,
+    }),
+    platformOverride: {
+      darwin: Styles.createViewStyle({
+        paddingTop: 24,
+      }),
+      linux: Styles.createViewStyle({
+        WebkitAppRegion: 'drag',
+      }),
+    },
+  },
+  content: Styles.createViewStyle({
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    // the size of "brand" logo
+    minHeight: 51,
+  }),
+  barStyle: {
+    default: Styles.createViewStyle({
+      backgroundColor: colors.blue,
+    }),
+    defaultDark: Styles.createViewStyle({
+      backgroundColor: colors.darkBlue,
+    }),
+    error: Styles.createViewStyle({
+      backgroundColor: colors.red,
+    }),
+    success: Styles.createViewStyle({
+      backgroundColor: colors.green,
+    }),
+  },
 };
 
 export default class HeaderBar extends Component<HeaderBarProps> {
   static defaultProps: HeaderBarProps = {
-    style: 'default',
-    showSettings: false,
-    onSettings: null,
+    barStyle: 'default',
   };
 
   render() {
-    const containerClass = [
-      styles['headerbar'],
-      platformStyles[process.platform],
-      styles['style_' + this.props.style],
+    const style = [
+      headerBarStyles.container.base,
+      headerBarStyles.container.platformOverride[process.platform],
+      headerBarStyles.barStyle[this.props.barStyle],
+      this.props.style,
     ];
 
     return (
-      <View style={containerClass}>
-        <View style={styles.container} testName="headerbar__container">
-          <Img height={50} width={50} source="logo-icon" />
-          <Text style={styles.title}>MULLVAD VPN</Text>
-        </View>
+      <View style={style}>
+        <View style={headerBarStyles.content}>{this.props.children}</View>
+      </View>
+    );
+  }
+}
 
-        {this.props.showSettings ? (
-          <Button
-            style={styles.settings}
-            onPress={this.props.onSettings}
-            testName="headerbar__settings">
-            <Img
-              height={24}
-              width={24}
-              source="icon-settings"
-              style={[styles.settings_icon, platformStyles.settings_icon]}
-              hoverStyle={styles.settings_icon_hover}
-            />
-          </Button>
-        ) : null}
+const brandStyles = {
+  container: Styles.createViewStyle({
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+  }),
+  title: Styles.createTextStyle({
+    fontFamily: 'DINPro',
+    fontSize: 24,
+    fontWeight: '900',
+    lineHeight: 30,
+    letterSpacing: -0.5,
+    color: colors.white60,
+    marginLeft: 8,
+  }),
+};
+
+export class Brand extends Component {
+  render() {
+    return (
+      <View style={brandStyles.container} testName="headerbar__container">
+        <Img width={50} height={50} source="logo-icon" />
+        <Text style={brandStyles.title}>{'MULLVAD VPN'}</Text>
       </View>
     );
   }
 }
+
+type SettingsButtonProps = {
+  onPress: ?() => void,
+};
+
+const settingsBarButtonStyles = {
+  container: {
+    base: Styles.createViewStyle({
+      cursor: 'default',
+      padding: 0,
+      marginLeft: 8,
+    }),
+    platformOverride: {
+      linux: Styles.createViewStyle({
+        WebkitAppRegion: 'no-drag',
+      }),
+    },
+  },
+  icon: {
+    normal: Styles.createViewStyle({
+      color: colors.white60,
+    }),
+    hover: Styles.createViewStyle({
+      color: colors.white,
+    }),
+  },
+};
+
+export class SettingsBarButton extends Component<SettingsButtonProps> {
+  render() {
+    return (
+      <Button
+        style={[
+          settingsBarButtonStyles.container.base,
+          settingsBarButtonStyles.container.platformOverride[process.platform],
+        ]}
+        onPress={this.props.onPress}
+        testName="headerbar__settings">
+        <Img
+          height={24}
+          width={24}
+          source="icon-settings"
+          style={settingsBarButtonStyles.icon.normal}
+          hoverStyle={settingsBarButtonStyles.icon.hover}
+        />
+      </Button>
+    );
+  }
+}