1 files changed, 98 insertions, 74 deletions
diff --git a/app/components/AdvancedSettings.js b/app/components/AdvancedSettings.js
index c4f014d210..eca00a4da1 100644
--- a/app/components/AdvancedSettings.js
+++ b/app/components/AdvancedSettings.js
@@ -9,7 +9,6 @@ import styles from './AdvancedSettingsStyles';
 import Img from './Img';
 
 export class AdvancedSettings extends Component {
-
   props: {
     protocol: string,
     port: string | number,
@@ -27,62 +26,66 @@ export class AdvancedSettings extends Component {
       portSelector = this._createPortSelector();
     }
 
-    return <BaseLayout onClose={ this.props.onClose }>
-
-      <Selector
-        title={ 'Network protocols' }
-        values={ ['Automatic', 'UDP', 'TCP'] }
-        value={ protocol }
-        onSelect={ protocol => {
-          this.props.onUpdate(protocol, 'Automatic');
-        }}/>
+    return (
+      <BaseLayout onClose={this.props.onClose}>
+        <Selector
+          title={'Network protocols'}
+          values={['Automatic', 'UDP', 'TCP']}
+          value={protocol}
+          onSelect={(protocol) => {
+            this.props.onUpdate(protocol, 'Automatic');
+          }}
+        />
 
-      <View style={ styles.advanced_settings__cell_spacer }></View>
+        <View style={styles.advanced_settings__cell_spacer} />
 
-      { portSelector }
-
-    </BaseLayout>;
+        {portSelector}
+      </BaseLayout>
+    );
   }
 
   _createPortSelector() {
     const protocol = this.props.protocol.toUpperCase();
-    const ports = protocol === 'TCP'
-      ? ['Automatic', 80, 443]
-      : ['Automatic', 1194, 1195, 1196, 1197, 1300, 1301, 1302];
+    const ports =
+      protocol === 'TCP'
+        ? ['Automatic', 80, 443]
+        : ['Automatic', 1194, 1195, 1196, 1197, 1300, 1301, 1302];
 
-    return <Selector
-      title={ protocol + ' port' }
-      values={ ports }
-      value={ this.props.port }
-      onSelect={ port => {
-        this.props.onUpdate(protocol, port);
-      }} />;
+    return (
+      <Selector
+        title={protocol + ' port'}
+        values={ports}
+        value={this.props.port}
+        onSelect={(port) => {
+          this.props.onUpdate(protocol, port);
+        }}
+      />
+    );
   }
 }
 
 class Selector extends Component {
-
   props: {
     title: string,
     values: Array<*>,
     value: *,
     onSelect: (*) => void,
-  }
+  };
 
   state = { hoveredButtonIndex: -1 };
 
   handleButtonHover = (value) => {
     this.setState({ hoveredButtonIndex: value });
-  }
+  };
 
   render() {
-    return <View>
-      <View style={ styles.advanced_settings__section_title }>
-        { this.props.title }
-      </View>
+    return (
+      <View>
+        <View style={styles.advanced_settings__section_title}>{this.props.title}</View>
 
-      { this.props.values.map(value => this._renderCell(value)) }
-    </View>;
+        {this.props.values.map((value) => this._renderCell(value))}
+      </View>
+    );
   }
 
   _renderCell(value) {
@@ -95,54 +98,75 @@ class Selector extends Component {
   }
 
   _renderSelectedCell(value) {
-    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>;
+    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 <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>;
+    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} />
+        <Text style={styles.advanced_settings__cell_label}>{value}</Text>
+      </Button>
+    );
   }
 }
 
 function BaseLayout(props) {
-  return <Layout>
-    <Container>
-      <View style={ styles.advanced_settings }>
-        <Button style={ styles.advanced_settings__close }
-          onPress={ props.onClose }
-          testName='closeButton'>
-          <View style={ styles.advanced_settings__close_content }>
-            <Img height={24} width={24} 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 style={styles.advanced_settings__scrollview} autoHide={ true }>
-            <View style={ styles.advanced_settings__content }>
-              { props.children }
+  return (
+    <Layout>
+      <Container>
+        <View style={styles.advanced_settings}>
+          <Button
+            style={styles.advanced_settings__close}
+            onPress={props.onClose}
+            testName="closeButton">
+            <View style={styles.advanced_settings__close_content}>
+              <Img
+                height={24}
+                width={24}
+                style={styles.advanced_settings__close_icon}
+                source="icon-back"
+              />
+              <Text style={styles.advanced_settings__close_title}>Settings</Text>
             </View>
-          </CustomScrollbars>
+          </Button>
+          <View style={styles.advanced_settings__container}>
+            <View style={styles.advanced_settings__header}>
+              <Text style={styles.advanced_settings__title}>Advanced</Text>
+            </View>
+            <CustomScrollbars style={styles.advanced_settings__scrollview} autoHide={true}>
+              <View style={styles.advanced_settings__content}>{props.children}</View>
+            </CustomScrollbars>
+          </View>
         </View>
-      </View>
-    </Container>
-  </Layout>;
+      </Container>
+    </Layout>
+  );
 }
-