Convert preferences to ReactXP

1 files changed, 37 insertions, 31 deletions

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>
     );