Add Preferences page

9 files changed, 182 insertions, 2 deletions

diff --git a/app/assets/css/style.css b/app/assets/css/style.css
index d3da3124a0..f5e792e798 100644
--- a/app/assets/css/style.css
+++ b/app/assets/css/style.css
@@ -10,6 +10,7 @@
 @import '../../components/CustomScrollbars.css';
 @import '../../components/Login.css';
 @import '../../components/Connect.css';
+@import '../../components/Preferences.css';
 @import '../../components/AdvancedSettings.css';
 @import '../../components/Account.css';
 @import '../../components/Support.css';
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>
diff --git a/app/containers/PreferencesPage.js b/app/containers/PreferencesPage.js
new file mode 100644
index 0000000000..757bd693a7
--- /dev/null
+++ b/app/containers/PreferencesPage.js
@@ -0,0 +1,20 @@
+// @flow
+
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { push } from 'react-router-redux';
+import Preferences from '../components/Preferences';
+
+import type { ReduxState, ReduxDispatch } from '../redux/store';
+import type { SharedRouteProps } from '../routes';
+
+const mapStateToProps = (state: ReduxState) => state;
+const mapDispatchToProps = (dispatch: ReduxDispatch, _props: SharedRouteProps) => {
+  const { push: pushHistory } = bindActionCreators({ push }, dispatch);
+  return {
+    onClose: () => pushHistory('/settings'),
+    onChangeLanSharing: (_changed) => {},
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Preferences);
diff --git a/app/containers/SettingsPage.js b/app/containers/SettingsPage.js
index 938d306fee..bfe30ee566 100644
--- a/app/containers/SettingsPage.js
+++ b/app/containers/SettingsPage.js
@@ -18,6 +18,7 @@ const mapDispatchToProps = (dispatch: ReduxDispatch, _props: SharedRouteProps) =
     onClose: () => pushHistory('/connect'),
     onViewAccount: () => pushHistory('/settings/account'),
     onViewSupport: () => pushHistory('/settings/support'),
+    onViewPreferences: () => pushHistory('/settings/preferences'),
     onViewAdvancedSettings: () => pushHistory('/settings/advanced'),
     onExternalLink: (type) => open(links[type]),
   };
diff --git a/app/redux/settings/reducers.js b/app/redux/settings/reducers.js
index 21258a80a7..ea1e88c537 100644
--- a/app/redux/settings/reducers.js
+++ b/app/redux/settings/reducers.js
@@ -34,6 +34,7 @@ export type RelayLocationRedux = {
 export type SettingsReduxState = {
   relaySettings: RelaySettingsRedux,
   relayLocations: Array<RelayLocationRedux>,
+  allowLan: boolean,
 };
 
 const initialState: SettingsReduxState = {
@@ -45,6 +46,7 @@ const initialState: SettingsReduxState = {
     }
   },
   relayLocations: [],
+  allowLan: false,
 };
 
 export default function(state: SettingsReduxState = initialState, action: ReduxAction): SettingsReduxState {
diff --git a/app/routes.js b/app/routes.js
index f428c8093b..9caea27884 100644
--- a/app/routes.js
+++ b/app/routes.js
@@ -9,6 +9,7 @@ import ConnectPage from './containers/ConnectPage';
 import SettingsPage from './containers/SettingsPage';
 import AdvancedSettingsPage from './containers/AdvancedSettingsPage';
 import AccountPage from './containers/AccountPage';
+import PreferencesPage from './containers/PreferencesPage';
 import SupportPage from './containers/SupportPage';
 import SelectLocationPage from './containers/SelectLocationPage';
 import { getTransitionProps } from './transitions';
@@ -97,8 +98,9 @@ export default function makeRoutes(getState: ReduxGetState, componentProps: Shar
               <PrivateRoute exact path="/connect" component={ ConnectPage } />
               <PublicRoute exact path="/settings" component={ SettingsPage } />
               <PrivateRoute exact path="/settings/account" component={ AccountPage } />
-              <PublicRoute exact path="/settings/support" component={ SupportPage } />
+              <PublicRoute exact path="/settings/preferences" component={ PreferencesPage } />
               <PublicRoute exact path="/settings/advanced" component={ AdvancedSettingsPage } />
+              <PublicRoute exact path="/settings/support" component={ SupportPage } />
               <PrivateRoute exact path="/select-location" component={ SelectLocationPage } />
             </Switch>
           </CSSTransitionGroup>
diff --git a/app/transitions.js b/app/transitions.js
index fe6da53563..58e692f99c 100644
--- a/app/transitions.js
+++ b/app/transitions.js
@@ -49,8 +49,9 @@ const transitions: TransitionMap = {
  */
 const transitionRules = [
   r('/settings', '/settings/account', transitions.push),
-  r('/settings', '/settings/support', transitions.push),
+  r('/settings', '/settings/preferences', transitions.push),
   r('/settings', '/settings/advanced', transitions.push),
+  r('/settings', '/settings/support', transitions.push),
   r(null, '/settings', transitions.slide),
   r(null, '/select-location', transitions.slide)
 ];