Reactxp starter pack

Some changes in app init and rendering the header bar in reactxp. Moved linking and exit to separate files for web/mobile

6 files changed, 107 insertions, 83 deletions

diff --git a/app/components/HeaderBar.css b/app/components/HeaderBar.css
deleted file mode 100644
index 9fcc65047b..0000000000
--- a/app/components/HeaderBar.css
+++ /dev/null
@@ -1,61 +0,0 @@
-.headerbar {
-  padding: 12px;
-  background-color: #294D73;
-  transition: 0.5s background-color ease-in-out;
-}
-
-/* macOS app runs as menubar app so add extra padding */
-.headerbar--darwin {
-  padding-top: 24px;
-}
-
-.headerbar--hidden {
-  padding: 24px 0 0 0;
-}
-
-.headerbar--style-defaultDark {
-  background-color: #192E45;
-}
-
-.headerbar--style-error {
-  background-color: #D0021B;
-}
-
-.headerbar--style-success {
-  background-color: #44AD4D;
-}
-
-.headerbar__container {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.headerbar__title {
-  font-family: DINPro;
-  font-size: 24px;
-  font-weight: 900;
-  line-height: 30px;
-  letter-spacing: -0.5px;
-  color: rgba(255,255,255,0.6);
-  display: inline-block;
-  vertical-align: middle;
-  margin-left: 8px;
-}
-
-.headerbar__logo {
-  height: 50px;
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.headerbar__settings {
-  display: block;
-  border: 0;
-  padding: 0;
-  margin: 0 0 0 auto;
-  width: 24px;
-  height: 24px;
-  background-color: transparent;
-  background-image: url(../assets/images/icon-settings.svg);
-}
diff --git a/app/components/HeaderBar.js b/app/components/HeaderBar.js
index 26e937ad23..0960954d58 100644
--- a/app/components/HeaderBar.js
+++ b/app/components/HeaderBar.js
@@ -1,6 +1,16 @@
 // @flow
-import React, { Component } from 'react';
-import { If, Then } from 'react-if';
+import React from 'react';
+import {
+  Component,
+  Text,
+  Button,
+  Image,
+  View
+} from 'reactxp';
+
+import Img from './Img';
+
+import styles from './HeaderBarStyles';
 
 export type HeaderBarStyle = 'default' | 'defaultDark' | 'error' | 'success';
 export type HeaderBarProps = {
@@ -19,33 +29,34 @@ export default class HeaderBar extends Component {
     onSettings: null
   };
 
-  render(): React.Element<*> {
+  render() {
     let containerClass = [
-      'headerbar',
-      'headerbar--' + process.platform,
-      'headerbar--style-' + this.props.style
+      styles['headerbar'],
+      styles['headerbar__' + process.platform],
+      styles['headerbar__style_' + this.props.style]
     ];
 
     if(this.props.hidden) {
-      containerClass.push('headerbar--hidden');
+      containerClass.push(styles['headerbar__hidden']);
     }
 
     return (
-      <div className={ containerClass.join(' ') }>
-        <If condition={ !this.props.hidden }>
-          <Then>
-            <div className="headerbar__container">
-              <img className="headerbar__logo" src="./assets/images/logo-icon.svg" />
-              <h2 className="headerbar__title">MULLVAD VPN</h2>
-              <If condition={ !!this.props.showSettings }>
-                <Then>
-                  <button className="headerbar__settings" onClick={ this.props.onSettings } />
-                </Then>
-              </If>
-            </div>
-          </Then>
-        </If>
-      </div>
+      <View style={ containerClass }>
+        {!this.props.hidden ? 
+          <View style={styles.headerbar__container}>
+            <Img style={ styles.headerbar__logo } source='logo-icon'/>
+            <Text style={styles.headerbar__title}>MULLVAD VPN</Text>
+          </View> 
+        : null}
+        
+        {!!this.props.showSettings ? 
+          <View style={styles.headerbar__settings}>
+            <Button  onPress={ this.props.onSettings }>
+              <Img style={ styles.headerbar__settings } source='icon-settings'/>
+            </Button>
+          </View> 
+        : null}    
+      </View>
     );
   }
 }
diff --git a/app/components/HeaderBarStyles.js b/app/components/HeaderBarStyles.js
new file mode 100644
index 0000000000..c2f86c2dc9
--- /dev/null
+++ b/app/components/HeaderBarStyles.js
@@ -0,0 +1,46 @@
+import { Styles } from 'reactxp';
+
+const styles = {
+  headerbar:Styles.createViewStyle({
+  padding: 12,
+  backgroundColor: '#294D73',
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+}),headerbar__hidden: Styles.createViewStyle({
+  paddingTop: 0,
+  paddingBottom: 0,
+  paddingLeft: 0,
+  paddingRight: 0,
+}),headerbar__style_defaultDark: Styles.createViewStyle({
+  backgroundColor: '#192E45',
+}),headerbar__style_error: Styles.createViewStyle({
+  backgroundColor: '#D0021B',
+}),headerbar__style_success: Styles.createViewStyle({
+  backgroundColor: '#44AD4D',
+}),headerbar__container: Styles.createViewStyle({
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+}),headerbar__title: Styles.createTextStyle({
+  fontFamily: 'DINPro',
+  fontSize: 24,
+  fontWeight: '900',
+  lineHeight: 30,
+  letterSpacing: -0.5,
+  color: 'rgba(255,255,255,0.6)',
+  marginLeft: 8,
+}),headerbar__logo: Styles.createViewStyle({
+  height: 50,
+  width: 50,
+}),headerbar__settings: Styles.createViewStyle({
+  width: 24,
+  height: 24,
+  backgroundColor: 'transparent',
+  marginLeft: -6, //Because of button.css, when removed remove this
+  marginTop: -1, //Because of button.css, when removed remove this
+})
+};
+
+
+module.exports = styles;
\ No newline at end of file
diff --git a/app/components/Img.android.js b/app/components/Img.android.js
new file mode 100644
index 0000000000..25e5e474c9
--- /dev/null
+++ b/app/components/Img.android.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import { Image, Component } from 'reactxp';
+
+export default class Img extends Component {
+	render(): React.Element<*> {
+    return (<Image style={ this.props.style } source={ this.props.source }/>);
+  }
+}
\ No newline at end of file
diff --git a/app/components/Img.js b/app/components/Img.js
new file mode 100644
index 0000000000..c82d96c1be
--- /dev/null
+++ b/app/components/Img.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import { View, Component } from 'reactxp';
+
+export default class Img extends Component {
+	render(): React.Element<*> {
+
+	const url = "./assets/images/" + this.props.source + ".svg";
+
+	const style = this.props.style;
+
+    return (<View style={ style }> <img src={ url } /> </View>);
+  }
+}
\ No newline at end of file
diff --git a/app/components/WindowChrome.css b/app/components/WindowChrome.css
index 8f3fcdb52c..b2206d9095 100644
--- a/app/components/WindowChrome.css
+++ b/app/components/WindowChrome.css
@@ -3,4 +3,11 @@
   -webkit-mask:
     url(../assets/images/app-triangle.svg) 50% 0% no-repeat,
     url(../assets/images/app-header-backdrop.svg) no-repeat;
+}
+
+.window-chrome {
+	flex: 1 1 auto;
+	height: 100%;
+  	width: 100%;
+  	display: flex;
 }
\ No newline at end of file