Anchor the quit button to the bottom of the settings page

3 files changed, 89 insertions, 80 deletions

diff --git a/app/components/CustomScrollbars.css b/app/components/CustomScrollbars.css
index 4604b1e413..1251c170f5 100644
--- a/app/components/CustomScrollbars.css
+++ b/app/components/CustomScrollbars.css
@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: column;
   position: relative;
+  height: 100%;
 }
 
 .custom-scrollbars__scrollable {
diff --git a/app/components/Settings.js b/app/components/Settings.js
index b0b758b58c..cb739153d2 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' } />
@@ -55,77 +45,13 @@ export default class Settings extends Component {
               <CustomScrollbars 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';
+    }
+
+    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 }>
+        <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..28b406a9ce 100644
--- a/app/components/SettingsStyles.js
+++ b/app/components/SettingsStyles.js
@@ -90,7 +90,7 @@ export default Object.assign(createViewStyles({
     paddingTop: 24,
     paddingLeft: 24,
     paddingRight: 24,
-    paddingBottom: 24,
+    paddingBottom: 24 * 2, // Not entirely sure why I need to double the padding here :/
   },
 }), createTextStyles({
   settings__title:{