Add Preferences page

3 files changed, 153 insertions, 0 deletions

diff --git a/app/components/Preferences.css b/app/components/Preferences.css
new file mode 100644
index 0000000000..c081e739af
--- /dev/null
+++ b/app/components/Preferences.css
@@ -0,0 +1,91 @@
+.preferences {
+  background: #192E45;
+  height: 100%;
+}
+
+.preferences__container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.preferences__header {
+  flex: 0 0 auto;
+  padding: 40px 24px 24px;
+  position: relative; /* anchor for close button */
+}
+
+.preferences__close {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  top: 24px;
+  left: 12px;
+  z-index: 1; /* part of .preferences__container covers the button */
+}
+
+.preferences__close-icon {
+  opacity: 0.6;
+  margin-right: 8px;
+}
+
+.preferences__close-title {
+  font-family: "Open Sans";
+  font-size: 13px;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.preferences__title {
+  font-family: DINPro;
+  font-size: 32px;
+  font-weight: 900;
+  line-height: 40px;
+  color: #FFFFFF;
+}
+
+.preferences__content {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.preferences__cell {
+  background-color:rgba(41,71,115,1);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.preferences__cell + .preferences__cell {
+  margin-top: 1px;
+}
+
+.preferences__cell-label {
+  padding: 15px 12px 15px 24px;
+  flex: 1 0 auto;
+  font-family: DINPro;
+  font-size: 20px;
+  font-weight: 900;
+  line-height: 26px;
+  letter-spacing: -0.2px;
+  color: #FFFFFF;
+}
+
+.preferences__cell-accessory {
+  flex: 0 0 auto;
+  margin-right: 12px;
+}
+
+.preferences__cell-footer {
+  padding: 8px 24px 24px;
+  font-family: "Open Sans";
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 20px;
+  letter-spacing: -0.2px;
+  color: rgba(255,255,255,0.8);
+}
\ No newline at end of file
diff --git a/app/components/Preferences.js b/app/components/Preferences.js
new file mode 100644
index 0000000000..76fbb11111
--- /dev/null
+++ b/app/components/Preferences.js
@@ -0,0 +1,51 @@
+// @flow
+import React, { Component } from 'react';
+import { Layout, Container, Header } from './Layout';
+
+import Switch from './Switch';
+
+import type { SettingsReduxState } from '../redux/settings/reducers';
+
+export type onChangeLanSharingProps = {
+  settings: SettingsReduxState;
+  onChangeLanSharing: (boolean) => void;
+  onClose: () => void;
+};
+
+export default class Preferences extends Component {
+  props: onChangeLanSharingProps;
+
+  render(): React.Element<*> {
+    return (
+      <Layout>
+        <Header hidden={ true } style={ 'defaultDark' } />
+        <Container>
+          <div className="preferences">
+            <div className="preferences__close" onClick={ this.props.onClose }>
+              <img className="preferences__close-icon" src="./assets/images/icon-back.svg" />
+              <span className="preferences__close-title">Settings</span>
+            </div>
+            <div className="preferences__container">
+
+              <div className="preferences__header">
+                <h2 className="preferences__title">Preferences</h2>
+              </div>
+
+              <div className="preferences__content">
+                <div className="preferences__cell">
+                  <div className="preferences__cell-label">Local network sharing</div>
+                  <div className="preferences__cell-accessory">
+                    <Switch isOn={ this.props.settings.allowLan } onChange={ this.props.onChangeLanSharing } />
+                  </div>
+                </div>
+                <div className="preferences__cell-footer">
+                  { 'Allows access to other devices on the same network for sharing, printing etc.' }
+                </div>
+              </div>
+            </div>
+          </div>
+        </Container>
+      </Layout>
+    );
+  }
+}
diff --git a/app/components/Settings.js b/app/components/Settings.js
index fe73ffd0af..34e518e401 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,6 +77,15 @@ export default class Settings extends Component {
                     ) : null}
 
                     {isLoggedIn ? (
+                      <Button onPress={ this.props.onViewPreferences }>
+                        <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 }>
                         <View style={styles.settings__cell}>
                           <Text style={styles.settings__cell_label}>Advanced</Text>