Merge branch 'add-lan-sharing'

3 files changed, 176 insertions, 2 deletions

diff --git a/app/components/Preferences.js b/app/components/Preferences.js
new file mode 100644
index 0000000000..f0b65d4a06
--- /dev/null
+++ b/app/components/Preferences.js
@@ -0,0 +1,57 @@
+// @flow
+import React from 'react';
+import { Component, Text, Button, View } from 'reactxp';
+import { Layout, Container, Header } from './Layout';
+import Img from './Img';
+import Switch from './Switch';
+import styles from './PreferencesStyles';
+
+export type PreferencesProps = {
+  allowLan: boolean;
+  onChangeAllowLan: (boolean) => void;
+  onClose: () => void;
+};
+
+export default class Preferences extends Component {
+  props: PreferencesProps;
+
+  render() {
+    return (
+      <Layout>
+        <Header hidden={ true } style={ 'defaultDark' } />
+        <Container>
+          <View style={ styles.preferences }>
+            <Button style={ styles.preferences__close } cursor='default' onPress={ this.props.onClose } testName='closeButton'>
+              <View style={ styles.preferences__close_content }>
+                <Img style={ styles.preferences__close_icon } source="icon-back" />
+                <Text style={ styles.preferences__close_title }>Settings</Text>
+              </View>
+            </Button>
+            <View style={ styles.preferences__container }>
+
+              <View style={ styles.preferences__header }>
+                <Text style={ styles.preferences__title }>Preferences</Text>
+              </View>
+
+              <View style={ styles.preferences__content }>
+                <View style={ styles.preferences__cell }>
+                  <View style={ styles.preferences__cell_label_container }>
+                    <Text style={ styles.preferences__cell_label }>Local network sharing</Text>
+                  </View>
+                  <View style={ styles.preferences__cell_accessory }>
+                    <Switch isOn={ this.props.allowLan } onChange={ this.props.onChangeAllowLan } />
+                  </View>
+                </View>
+                <View style={ styles.preferences__cell_footer }>
+                  <Text style={ styles.preferences__cell_footer_label }>
+                    { 'Allows access to other devices on the same network for sharing, printing etc.' }
+                  </Text>
+                </View>
+              </View>
+            </View>
+          </View>
+        </Container>
+      </Layout>
+    );
+  }
+}
diff --git a/app/components/PreferencesStyles.js b/app/components/PreferencesStyles.js
new file mode 100644
index 0000000000..64d900b09a
--- /dev/null
+++ b/app/components/PreferencesStyles.js
@@ -0,0 +1,103 @@
+// @flow
+
+import { createViewStyles, createTextStyles } from '../lib/styles';
+
+export default {
+  ...createViewStyles({
+    preferences: {
+      background: '#192E45',
+      height: '100%',
+    },
+    preferences__container: {
+      display: 'flex',
+      flexDirection: 'column',
+      height: '100%',
+    },
+    preferences__header: {
+      flexGrow: 0,
+      flexShrink: 0,
+      flexBasis: 'auto',
+      paddingTop: 40,
+      paddingRight: 24,
+      paddingLeft: 24,
+      paddingBottom: 24,
+      position: 'relative' /* anchor for close button */
+    },
+    preferences__close: {
+      position: 'absolute',
+      top: 0,
+      left: 12,
+      borderWidth: 0,
+      padding: 0,
+      margin: 0,
+      zIndex: 1, /* part of .preferences__container covers the button */
+      cursor: 'default',
+    },
+    preferences__close_content: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    preferences__close_icon: {
+      opacity: 0.6,
+      marginRight: 8,
+    },
+    preferences__content: {
+      flexDirection: 'column',
+      flexGrow: 1,
+      flexShrink: 1,
+      flexBasis: 'auto',
+    },
+    preferences__cell: {
+      backgroundColor: 'rgba(41,71,115,1)',
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    preferences__cell_accessory: {
+      marginRight: 12,
+    },
+    preferences__cell_footer: {
+      paddingTop: 8,
+      paddingRight: 24,
+      paddingBottom: 24,
+      paddingLeft: 24,
+    },
+    preferences__cell_label_container: {
+      paddingTop: 15,
+      paddingRight: 12,
+      paddingBottom: 15,
+      paddingLeft: 24,
+      flexGrow: 1,
+    },
+  }),
+  ...createTextStyles({
+    preferences__close_title: {
+      fontFamily: 'Open Sans',
+      fontSize: 13,
+      fontWeight: 600,
+      color: 'rgba(255, 255, 255, 0.6)',
+    },
+    preferences__title: {
+      fontFamily: 'DINPro',
+      fontSize: 32,
+      fontWeight: 900,
+      lineHeight: 40,
+      color: '#fff',
+    },
+    preferences__cell_label: {
+      fontFamily: 'DINPro',
+      fontSize: 20,
+      fontWeight: 900,
+      lineHeight: 26,
+      letterSpacing: -0.2,
+      color: '#fff',
+    },
+    preferences__cell_footer_label: {
+      fontFamily: 'Open Sans',
+      fontSize: 13,
+      fontWeight: 600,
+      lineHeight: 20,
+      letterSpacing: -0.2,
+      color: 'rgba(255,255,255,0.8)'
+    }
+  })
+};
\ No newline at end of file
diff --git a/app/components/Settings.js b/app/components/Settings.js
index fe73ffd0af..b0b758b58c 100644
--- a/app/components/Settings.js
+++ b/app/components/Settings.js
@@ -18,6 +18,7 @@ export type SettingsProps = {
   onClose: () => void,
   onViewAccount: () => void,
   onViewSupport: () => void,
+  onViewPreferences: () => void,
   onViewAdvancedSettings: () => void,
   onExternalLink: (type: string) => void
 };
@@ -58,6 +59,7 @@ export default class Settings extends Component {
                     {/* show account options when logged in */}
                     {isLoggedIn ? (
                       <View style={styles.settings_account} testName='settings__account'>
+
                         <Button onPress={ this.props.onViewAccount } testName='settings__view_account'>
                           <View style={styles.settings__cell}>
                             <Text style={styles.settings__cell_label}>Account</Text>
@@ -75,15 +77,27 @@ export default class Settings extends Component {
                     ) : null}
 
                     {isLoggedIn ? (
-                      <Button onPress={ this.props.onViewAdvancedSettings }>
+                      <Button onPress={ this.props.onViewPreferences } testName='settings__preferences'>
+                        <View style={styles.settings__cell}>
+                          <Text style={styles.settings__cell_label}>Preferences</Text>
+                          <Img style={styles.settings__cell_disclosure} source='icon-chevron' tintColor='currentColor' />
+                        </View>
+                      </Button>
+                    ) : null}
+
+                    {isLoggedIn ? (
+                      <Button onPress={ this.props.onViewAdvancedSettings } testName="settings__advanced">
                         <View style={styles.settings__cell}>
                           <Text style={styles.settings__cell_label}>Advanced</Text>
                           <Img style={styles.settings__cell_disclosure} source='icon-chevron' tintColor='currentColor'/>
                         </View>
-                        <View style={styles.settings__cell_spacer}></View>
                       </Button>
                     ) : null}
 
+                    {isLoggedIn ? (
+                      <View style={styles.settings__cell_spacer}></View>
+                    ) : null}
+
                     <Button onPress={ this.props.onExternalLink.bind(this, 'faq') } testName='settings__external_link'>
                       <View style={styles.settings__cell}>
                         <Text style={styles.settings__cell_label}>FAQs</Text>