Convert preferences to ReactXP

5 files changed, 145 insertions, 125 deletions

diff --git a/app/assets/css/style.css b/app/assets/css/style.css
index f5e792e798..d3da3124a0 100644
--- a/app/assets/css/style.css
+++ b/app/assets/css/style.css
@@ -10,7 +10,6 @@
 @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
deleted file mode 100644
index c081e739af..0000000000
--- a/app/components/Preferences.css
+++ /dev/null
@@ -1,91 +0,0 @@
-.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
index 76fbb11111..f0b65d4a06 100644
--- a/app/components/Preferences.js
+++ b/app/components/Preferences.js
@@ -1,49 +1,55 @@
 // @flow
-import React, { Component } from 'react';
+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';
 
-import type { SettingsReduxState } from '../redux/settings/reducers';
-
-export type onChangeLanSharingProps = {
-  settings: SettingsReduxState;
-  onChangeLanSharing: (boolean) => void;
+export type PreferencesProps = {
+  allowLan: boolean;
+  onChangeAllowLan: (boolean) => void;
   onClose: () => void;
 };
 
 export default class Preferences extends Component {
-  props: onChangeLanSharingProps;
+  props: PreferencesProps;
 
-  render(): React.Element<*> {
+  render() {
     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">
+          <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 }>
 
-              <div className="preferences__header">
-                <h2 className="preferences__title">Preferences</h2>
-              </div>
+              <View style={ styles.preferences__header }>
+                <Text style={ styles.preferences__title }>Preferences</Text>
+              </View>
 
-              <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>
+              <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/containers/PreferencesPage.js b/app/containers/PreferencesPage.js
index b6bc60350d..793848d35b 100644
--- a/app/containers/PreferencesPage.js
+++ b/app/containers/PreferencesPage.js
@@ -8,13 +8,16 @@ import Preferences from '../components/Preferences';
 import type { ReduxState, ReduxDispatch } from '../redux/store';
 import type { SharedRouteProps } from '../routes';
 
-const mapStateToProps = (state: ReduxState) => state;
+const mapStateToProps = (state: ReduxState) => ({
+  allowLan: state.settings.allowLan
+});
+
 const mapDispatchToProps = (dispatch: ReduxDispatch, props: SharedRouteProps) => {
   const { backend } = props;
   const { push: pushHistory } = bindActionCreators({ push }, dispatch);
   return {
     onClose: () => pushHistory('/settings'),
-    onChangeLanSharing: (allowLan) => {
+    onChangeAllowLan: (allowLan) => {
       backend.setAllowLan(allowLan);
     },
   };