Merge branch 'quit-button-position'

4 files changed, 114 insertions, 104 deletions

diff --git a/app/components/CustomScrollbars.js b/app/components/CustomScrollbars.js
index d2f89d5e15..69381f60cd 100644
--- a/app/components/CustomScrollbars.js
+++ b/app/components/CustomScrollbars.js
@@ -53,10 +53,11 @@ export default class CustomScrollbars extends Component {
   }
 
   render() {
+    const { autoHide: _autoHide, thumbInset: _thumbInset, children, ...otherProps } = this.props;
     const showScrollbars = this.state.canScroll && this.state.showScrollIndicators;
     const thumbAnimationClass = showScrollbars ? ' custom-scrollbars__thumb--visible' : '';
     return (
-      <div className="custom-scrollbars">
+      <div {...otherProps } className="custom-scrollbars">
         <div className={ `custom-scrollbars__thumb ${thumbAnimationClass}` }
           style={{ position: 'absolute', top: 0, right: 0 }}
           ref={ this._onThumbRef }></div>
@@ -64,7 +65,7 @@ export default class CustomScrollbars extends Component {
           style={{ overflow: 'auto' }}
           onScroll={ this._onScroll }
           ref={ this._onScrollableRef }>
-          { this.props.children }
+          { children }
         </div>
       </div>
     );
diff --git a/app/components/PreferencesStyles.js b/app/components/PreferencesStyles.js
index 64d900b09a..002494a6c5 100644
--- a/app/components/PreferencesStyles.js
+++ b/app/components/PreferencesStyles.js
@@ -21,7 +21,6 @@ export default {
       paddingRight: 24,
       paddingLeft: 24,
       paddingBottom: 24,
-      position: 'relative' /* anchor for close button */
     },
     preferences__close: {
       position: 'absolute',
diff --git a/app/components/Settings.js b/app/components/Settings.js
index b0b758b58c..a92a7e57e8 100644
--- a/app/components/Settings.js
+++ b/app/components/Settings.js
@@ -28,16 +28,6 @@ export default class Settings extends Component {
   props: SettingsProps;
 
   render() {
-    const isLoggedIn = this.props.account.status === 'ok';
-    let isOutOfTime = false, formattedExpiry = '';
-    let expiryIso = this.props.account.expiry;
-
-    if(isLoggedIn && expiryIso) {
-      let expiry = moment(this.props.account.expiry);
-      isOutOfTime = expiry.isSameOrBefore(moment());
-      formattedExpiry = expiry.fromNow(true) + ' left';
-    }
-
     return (
       <Layout>
         <Header hidden={ true } style={ 'defaultDark' } />
@@ -52,80 +42,16 @@ export default class Settings extends Component {
                 <Text style={styles.settings__title}>Settings</Text>
               </View>
 
-              <CustomScrollbars autoHide={ true }>
+              <CustomScrollbars style={styles.settings__scrollview} autoHide={ true }>
 
                 <View style={styles.settings__content}>
-                  <View style={styles.settings__main}>
-                    {/* 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>
-                            <View style={styles.settings__account_paid_until_label_container}>
-                              {isOutOfTime ? (
-                                <Text style={styles.settings__account_paid_until_label__error} testName='settings__account_paid_until_label'>OUT OF TIME</Text>
-                              ) : (
-                                <Text style={styles.settings__account_paid_until_label} testName='settings__account_paid_until_label'>{formattedExpiry}</Text>
-                              )}
-                            </View>
-                            <Img style={styles.settings__cell_disclosure} source='icon-chevron' tintColor='currentColor'/>
-                          </View>
-                        </Button>
-                      </View>
-                    ) : null}
-
-                    {isLoggedIn ? (
-                      <Button onPress={ this.props.onViewPreferences } testName='settings__preferences'>
-                        <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 } testName="settings__advanced">
-                        <View style={styles.settings__cell}>
-                          <Text style={styles.settings__cell_label}>Advanced</Text>
-                          <Img style={styles.settings__cell_disclosure} source='icon-chevron' tintColor='currentColor'/>
-                        </View>
-                      </Button>
-                    ) : null}
-
-                    {isLoggedIn ? (
-                      <View style={styles.settings__cell_spacer}></View>
-                    ) : null}
-
-                    <Button onPress={ this.props.onExternalLink.bind(this, 'faq') } testName='settings__external_link'>
-                      <View style={styles.settings__cell}>
-                        <Text style={styles.settings__cell_label}>FAQs</Text>
-                        <Img style={styles.settings__cell_icon} source='icon-extLink' tintColor='currentColor'/>
-                      </View>
-                    </Button>
-
-                    <Button onPress={ this.props.onExternalLink.bind(this, 'guides') } testName='settings__external_link'>
-                      <View style={styles.settings__cell}>
-                        <Text style={styles.settings__cell_label}>Guides</Text>
-                        <Img style={styles.settings__cell_icon} source='icon-extLink' tintColor='currentColor'/>
-                      </View>
-                    </Button>
-
-                    <Button onPress={ this.props.onViewSupport }  testName='settings__view_support'>
-                      <View style={styles.settings__cell}>
-                        <Text style={styles.settings__cell_label}>Contact support</Text>
-                        <Img style={styles.settings__cell_disclosure} source='icon-chevron' tintColor='currentColor'/>
-                      </View>
-                    </Button>
-                  </View>
-
-                  <View style={styles.settings__footer}>
-                    <Button style={styles.settings__footer_button} onPress={this.props.onQuit} testName='settings__quit'>
-                      <Text style={styles.settings__footer_button_label}>Quit app</Text>
-                    </Button>
+                  <View>
+                    { this._renderTopButtons() }
+                    { this._renderBottomButtons() }
                   </View>
+                  { this._renderQuitButton() }
                 </View>
+
               </CustomScrollbars>
             </View>
           </View>
@@ -133,4 +59,86 @@ export default class Settings extends Component {
       </Layout>
     );
   }
+
+  _renderTopButtons() {
+    const isLoggedIn = this.props.account.status === 'ok';
+    if (!isLoggedIn) {
+      return null;
+    }
+
+    let isOutOfTime = false, formattedExpiry = '';
+    let expiryIso = this.props.account.expiry;
+
+    if(isLoggedIn && expiryIso) {
+      let expiry = moment(this.props.account.expiry);
+      isOutOfTime = expiry.isSameOrBefore(moment());
+      formattedExpiry = (expiry.fromNow(true) + ' left').toUpperCase();
+    }
+
+    return <View>
+      <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>
+            <View style={styles.settings__account_paid_until_label_container}>
+              {isOutOfTime ? (
+                <Text style={styles.settings__account_paid_until_label__error} testName='settings__account_paid_until_label'>OUT OF TIME</Text>
+              ) : (
+                <Text style={styles.settings__account_paid_until_label} testName='settings__account_paid_until_label'>{formattedExpiry}</Text>
+              )}
+            </View>
+            <Img style={styles.settings__cell_disclosure} source='icon-chevron' tintColor='currentColor'/>
+          </View>
+        </Button>
+      </View>
+
+      <ButtonCell onPress={ this.props.onViewPreferences } testName='settings__preferences'>
+        <Text style={styles.settings__cell_label}>Preferences</Text>
+        <Img style={styles.settings__cell_disclosure} source='icon-chevron' tintColor='currentColor' />
+      </ButtonCell>
+
+      <ButtonCell onPress={ this.props.onViewAdvancedSettings } testName='settings__advanced'>
+        <Text style={styles.settings__cell_label}>Advanced</Text>
+        <Img style={styles.settings__cell_disclosure} source='icon-chevron' tintColor='currentColor'/>
+      </ButtonCell>
+
+      <View style={styles.settings__cell_spacer}></View>
+    </View>;
+  }
+
+  _renderBottomButtons() {
+    return <View>
+      <ButtonCell onPress={ this.props.onExternalLink.bind(this, 'faq') } testName='settings__external_link'>
+        <Text style={styles.settings__cell_label}>FAQs</Text>
+        <Img style={styles.settings__cell_icon} source='icon-extLink' tintColor='currentColor'/>
+      </ButtonCell>
+
+      <ButtonCell onPress={ this.props.onExternalLink.bind(this, 'guides') } testName='settings__external_link'>
+        <Text style={styles.settings__cell_label}>Guides</Text>
+        <Img style={styles.settings__cell_icon} source='icon-extLink' tintColor='currentColor'/>
+      </ButtonCell>
+
+      <ButtonCell onPress={ this.props.onViewSupport }  testName='settings__view_support'>
+        <Text style={styles.settings__cell_label}>Contact support</Text>
+        <Img style={styles.settings__cell_disclosure} source='icon-chevron' tintColor='currentColor'/>
+      </ButtonCell>
+    </View>;
+  }
+
+  _renderQuitButton() {
+    return <View style={styles.settings__footer}>
+      <Button style={styles.settings__footer_button} onPress={this.props.onQuit} testName='settings__quit'>
+        <Text style={styles.settings__footer_button_label}>Quit app</Text>
+      </Button>
+    </View>;
+  }
+}
+
+function ButtonCell(props) {
+  const { children, ...rest } = props;
+  return <Button { ...rest } >
+    <View style={styles.settings__cell}>
+      { children }
+    </View>
+  </Button>;
 }
diff --git a/app/components/SettingsStyles.js b/app/components/SettingsStyles.js
index 4ea470b9f6..394aa6f1ce 100644
--- a/app/components/SettingsStyles.js
+++ b/app/components/SettingsStyles.js
@@ -10,32 +10,40 @@ export default Object.assign(createViewStyles({
     height: '100%'
   },
   settings__header:{
-    flex: 0,
-    paddingTop: 12,
-    paddingBottom: 12,
-    paddingLeft: 24,
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: 'auto',
+    paddingTop: 40,
     paddingRight: 24,
-    position: 'relative' /* anchor for close button */
+    paddingLeft: 24,
+    paddingBottom: 24,
   },
-  settings__content:{
+  settings__content: {
     flexDirection: 'column',
     flex: 1,
     justifyContent: 'space-between',
     height: '100%',
   },
-  settings__close:{
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-    marginTop: 0,
-    marginLeft: 12,
+  settings__scrollview: {
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: '100%',
+  },
+  settings__close: {
+    position: 'absolute',
+    top: 0,
+    left: 12,
+    borderWidth: 0,
+    padding: 0,
+    margin: 0,
+    zIndex: 1, /* part of .settings__close covers the button */
+    cursor: 'default',
   },
   settings__close_icon:{
     width: 24,
     height: 24,
     flex: 0,
     opacity: 0.6,
-    marginRight: 8,
   },
   settings__cell:{
     backgroundColor: 'rgba(41,71,115,1)',
@@ -79,14 +87,9 @@ export default Object.assign(createViewStyles({
     paddingRight: 12,
     paddingBottom: 9,
     borderRadius: 4,
-    justifyContent: 'center',
     alignItems: 'center',
-    width: '100%',
   },
-  settings__footer:{
-    width: '100%',
-    justifyContent: 'center',
-    alignItems: 'center',
+  settings__footer: {
     paddingTop: 24,
     paddingLeft: 24,
     paddingRight: 24,
@@ -119,13 +122,12 @@ export default Object.assign(createViewStyles({
   },
   settings__account_paid_until_label_container :{
     flexGrow: 0,
-    textAlign: 'end',
+    textAlign: 'right',
   },
   settings__account_paid_until_label:{
     fontFamily: 'Open Sans',
     fontSize: 13,
     fontWeight: '800',
     color: 'rgba(255, 255, 255, 0.8)',
-    textTransform: 'uppercase',
   },
 }));