Advanced settings in reactxp

Also bumped reactxp version to allow multiple children to buttons

3 files changed, 188 insertions, 135 deletions

diff --git a/app/components/AdvancedSettings.css b/app/components/AdvancedSettings.css
deleted file mode 100644
index 5a071004d5..0000000000
--- a/app/components/AdvancedSettings.css
+++ /dev/null
@@ -1,95 +0,0 @@
-.advanced-settings {
-  background: #192E45;
-  height: 100%;
-}
-
-.advanced-settings__container {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.advanced-settings__main {
-  margin-bottom: 24px;
-}
-
-.advanced-settings__header {
-  flex: 0 0 auto;
-  padding: 40px 24px 24px;
-  position: relative; /* anchor for close button */
-}
-
-.advanced-settings__content {
-  flex: 1 1 auto;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-.advanced-settings__section-title {
-  background-color:rgb(41, 71, 115);
-  padding: 15px 24px;
-  font-family: DINPro;
-  font-size: 20px;
-  font-weight: 900;
-  line-height: 26px;
-  color: #fff;
-}
-
-.advanced-settings__title {
-  font-family: DINPro;
-  font-size: 32px;
-  font-weight: 900;
-  line-height: 40px;
-  color: #FFFFFF;
-}
-
-.advanced-settings__cell {
-  background-color:rgb(41, 71, 115);
-  padding: 15px 24px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.advanced-settings__cell--dimmed {
-  background-color: rgb(36, 57, 84);
-}
-
-.advanced-settings__cell--dimmed:hover {
-  background-color: rgba(41, 71, 115, 0.9);
-}
-
-.advanced-settings__cell--selected,
-.advanced-settings__cell--selected:hover {
-  background-color: #44AD4D;
-}
-
-.advanced-settings__cell--active:hover {
-  background-color: rgba(41, 71, 115, 0.9);
-}
-
-.advanced-settings__section-title + .advanced-settings__cell,
-.advanced-settings__cell + .advanced-settings__cell {
-  margin-top: 1px;
-}
-
-.advanced-settings__cell-label {
-  font-family: DINPro;
-  font-size: 20px;
-  font-weight: 900;
-  line-height: 26px;
-  color: #FFFFFF;
-  flex: 1 0 auto;
-}
-
-.advanced-settings__cell-icon {
-  width: 24px;
-  flex: 0 0 auto;
-  margin-right: 8px;
-  color: #fff;
-}
-
-.advanced-settings__cell-spacer {
-  height: 24px;
-}
diff --git a/app/components/AdvancedSettings.js b/app/components/AdvancedSettings.js
index 9898d4b02e..5e7bce4ba1 100644
--- a/app/components/AdvancedSettings.js
+++ b/app/components/AdvancedSettings.js
@@ -1,12 +1,13 @@
 // @flow
 
 import React from 'react';
-import { Layout, Container, Header } from './Layout';
+import { Component, Text, Button, View } from 'reactxp';
+import { Layout, Container } from './Layout';
 import CustomScrollbars from './CustomScrollbars';
+import styles from './AdvancedSettingsStyles';
+import Img from './Img';
 
-import TickSVG from '../assets/images/icon-tick.svg';
-
-export class AdvancedSettings extends React.Component {
+export class AdvancedSettings extends Component {
 
   props: {
     protocol: string,
@@ -35,7 +36,7 @@ export class AdvancedSettings extends React.Component {
           this.props.onUpdate(protocol, 'Automatic');
         }}/>
 
-      <div className="advanced-settings__cell-spacer"></div>
+      <View style={ styles.advanced_settings__cell_spacer }></View>
 
       { portSelector }
 
@@ -58,7 +59,6 @@ export class AdvancedSettings extends React.Component {
   }
 }
 
-
 class Selector extends React.Component {
 
   props: {
@@ -68,14 +68,23 @@ class Selector extends React.Component {
     onSelect: (*) => void,
   }
 
+  constructor(props) {
+    super(props);
+    this.state = { hoveredButtonIndex: -1 };
+  }
+
+  handleButtonHover = (value) => {
+    this.setState({ hoveredButtonIndex: value });
+  }
+
   render() {
-    return <div>
-      <div className="advanced-settings__section-title">
+    return <View>
+      <View style={ styles.advanced_settings__section_title }>
         { this.props.title }
-      </div>
+      </View>
 
       { this.props.values.map(value => this._renderCell(value)) }
-    </div>;
+    </View>;
   }
 
   _renderCell(value) {
@@ -88,48 +97,43 @@ class Selector extends React.Component {
   }
 
   _renderSelectedCell(value) {
-    return <div
-      key={ value }
-      className="advanced-settings__cell advanced-settings__cell--selected"
-      onClick={ () => this.props.onSelect(value) } >
-      <div className="advanced-settings__cell-icon"><TickSVG /></div>
-      <div className="advanced-settings__cell-label">{ value }</div>
-    </div>;
+    return <Button style={[ styles.advanced_settings__cell, value === this.state.hoveredButtonIndex ? styles.advanced_settings__cell_selected_hover : null ]} onPress={ () => this.props.onSelect(value) } onHoverStart={() => this.handleButtonHover(value)} onHoverEnd={() => this.handleButtonHover(-1)} key={ value }>
+      <Img style={ styles.advanced_settings__cell_icon } source='icon-tick' tintColor='currentColor'/>
+      <Text style={ styles.advanced_settings__cell_label }>{ value }</Text>
+    </Button>;
   }
 
   _renderUnselectedCell(value) {
-    return <div
-      key={ value }
-      className="advanced-settings__cell advanced-settings__cell--dimmed"
-      onClick={ () => this.props.onSelect(value) }>
-      <div className="advanced-settings__cell-icon"></div>
-      <div className="advanced-settings__cell-label">{ value }</div>
-    </div>;
+    return <Button style={[ styles.advanced_settings__cell_dimmed, value === this.state.hoveredButtonIndex ? styles.advanced_settings__cell_hover : null ]} onPress={ () => this.props.onSelect(value) } onHoverStart={() => this.handleButtonHover(value)} onHoverEnd={() => this.handleButtonHover(-1)} key={ value }>
+      <View style={ styles.advanced_settings__cell_icon }></View>
+      <Text style={ styles.advanced_settings__cell_label }>{ value }</Text>
+    </Button>;
   }
 }
 
 function BaseLayout(props) {
   return <Layout>
-    <Header hidden={ true } style={ 'defaultDark' } />
     <Container>
-      <div className="advanced-settings">
-        <div className="support__close" onClick={ props.onClose }>
-          <img className="support__close-icon" src="./assets/images/icon-back.svg" />
-          <span className="support__close-title">Settings</span>
-        </div>
-        <div className="advanced-settings__container">
-          <div className="advanced-settings__header">
-            <h2 className="advanced-settings__title">Advanced</h2>
-          </div>
+      <View style={ styles.advanced_settings }>
+        <Button style={ styles.advanced_settings__close } cursor='default' onPress={ props.onClose } testName='closeButton'>
+          <View style={ styles.advanced_settings__close_content }>
+            <Img style={ styles.advanced_settings__close_icon } source="icon-back" />
+            <Text style={ styles.advanced_settings__close_title }>Settings</Text>
+          </View>
+        </Button>
+        <View style={ styles.advanced_settings__container }>
+          <View style={ styles.advanced_settings__header }>
+            <Text style={ styles.advanced_settings__title }>Advanced</Text>
+          </View>
           <CustomScrollbars autoHide={ true }>
-            <div className="advanced-settings__content">
-              <div className="advanced-settings__main">
+            <View style={ styles.advanced_settings__content }>
+              <View style={ styles.advanced_settings__main }>
                 { props.children }
-              </div>
-            </div>
+              </View>
+            </View>
           </CustomScrollbars>
-        </div>
-      </div>
+        </View>
+      </View>
     </Container>
   </Layout>;
 }
diff --git a/app/components/AdvancedSettingsStyles.js b/app/components/AdvancedSettingsStyles.js
new file mode 100644
index 0000000000..8e2898c2f2
--- /dev/null
+++ b/app/components/AdvancedSettingsStyles.js
@@ -0,0 +1,144 @@
+// @flow
+
+import { createViewStyles, createTextStyles } from '../lib/styles';
+
+export default {
+  ...createViewStyles({
+    advanced_settings: {
+      backgroundColor: '#192E45',
+      overflow: 'visible',
+    },
+    advanced_settings__container: {
+      display: 'flex',
+      flexDirection: 'column',
+    },
+    advanced_settings__main: {
+      marginBottom: 24,
+    },
+    advanced_settings__header: {
+      flexGrow: 0,
+      flexShrink: 0,
+      flexBasis: 'auto',
+      paddingTop: 16,
+      paddingRight: 24,
+      paddingLeft: 24,
+      paddingBottom: 24,
+    },
+    advanced_settings__close: {
+      cursor: 'default',
+    },
+    advanced_settings__close_content: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingLeft: 12,
+      paddingTop: 24,
+    },
+    advanced_settings__close_icon: {
+      width: 24,
+      height: 24,
+      opacity: 0.6,
+      marginRight: 8,
+    },
+    advanced_settings__content: {
+      flexDirection: 'column',
+      flexGrow: 1,
+      flexShrink: 1,
+      flexBasis: 'auto',
+    },
+    advanced_settings__cell: {
+      backgroundColor: '#44AD4D',
+      flexDirection: 'row',
+      paddingTop: 15,
+      paddingBottom: 15,
+      paddingLeft: 24,
+      paddingRight: 24,
+      marginBottom: 1,
+      justifyContent: 'flex-start',
+    },
+    advanced_settings__cell_hover: {
+      backgroundColor: 'rgba(41, 71, 115, 0.9)',
+    },
+    advanced_settings__cell_selected_hover: {
+      backgroundColor: '#44AD4D',
+    },
+    advanced_settings__cell_spacer: {
+      height: 24,
+    },
+    advanced_settings__cell_icon: {
+      width: 24,
+      height: 24,
+      marginRight: 8,
+      flex: 0,
+      overflow: 'visible',
+      color: 'rgba(255, 255, 255, 0.8)',
+    },
+    advanced_settings__cell_dimmed: {
+      paddingTop: 15,
+      paddingBottom: 15,
+      paddingLeft: 24,
+      paddingRight: 24,
+      marginBottom: 1,
+      backgroundColor: 'rgb(36, 57, 84)',
+      flexDirection: 'row',
+      justifyContent: 'flex-start',
+    },
+    advanced_settings__cell_footer: {
+      paddingTop: 8,
+      paddingRight: 24,
+      paddingBottom: 24,
+      paddingLeft: 24,
+    },
+    advanced_settings__cell_label_container: {
+      paddingTop: 15,
+      paddingRight: 12,
+      paddingBottom: 15,
+      paddingLeft: 24,
+      flexGrow: 1,
+    },
+  }),
+  ...createTextStyles({
+    advanced_settings__section_title: {
+      backgroundColor: 'rgb(41, 71, 115)',
+      paddingTop: 15,
+      paddingBottom: 15,
+      paddingLeft: 24,
+      paddingRight: 24,
+      marginBottom: 1,
+      fontFamily: 'DINPro',
+      fontSize: 20,
+      fontWeight: '900',
+      lineHeight: 26,
+      color: '#fff',
+    },
+    advanced_settings__close_title: {
+      fontFamily: 'Open Sans',
+      fontSize: 13,
+      fontWeight: '600',
+      color: 'rgba(255, 255, 255, 0.6)',
+    },
+    advanced_settings__title: {
+      fontFamily: 'DINPro',
+      fontSize: 32,
+      fontWeight: '900',
+      lineHeight: 40,
+      color: '#fff',
+    },
+    advanced_settings__cell_label: {
+      fontFamily: 'DINPro',
+      fontSize: 20,
+      fontWeight: '900',
+      lineHeight: 26,
+      letterSpacing: -0.2,
+      color: '#fff',
+      flex: 0,
+    },
+    advanced_settings__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