Merge branch 'app-version'

2 files changed, 27 insertions, 5 deletions

diff --git a/app/components/Settings.js b/app/components/Settings.js
index a25cb39f19..4022054acd 100644
--- a/app/components/Settings.js
+++ b/app/components/Settings.js
@@ -14,13 +14,14 @@ import type { SettingsReduxState } from '../redux/settings/reducers';
 export type SettingsProps = {
   account: AccountReduxState,
   settings: SettingsReduxState,
+  version: string,
   onQuit: () => void,
   onClose: () => void,
   onViewAccount: () => void,
   onViewSupport: () => void,
   onViewPreferences: () => void,
   onViewAdvancedSettings: () => void,
-  onExternalLink: (type: string) => void
+  onExternalLink: (type: string) => void,
 };
 
 export default class Settings extends Component {
@@ -47,6 +48,9 @@ export default class Settings extends Component {
                 <View style={styles.settings__content}>
                   <View>
                     { this._renderTopButtons() }
+                    <View style={styles.settings__cell_spacer}/>
+                    { this._renderMiddleButtons() }
+                    <View style={styles.settings__cell_spacer}/>
                     { this._renderBottomButtons() }
                   </View>
                   { this._renderQuitButton() }
@@ -83,7 +87,7 @@ export default class Settings extends Component {
             {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>
+              <Text style={styles.settings__cell_subtext} testName='settings__account_paid_until_label'>{formattedExpiry}</Text>
             )}
             <Img style={styles.settings__cell_disclosure} source='icon-chevron' tintColor='currentColor'/>
           </View>
@@ -100,10 +104,28 @@ export default class Settings extends Component {
         <Img style={styles.settings__cell_disclosure} source='icon-chevron' tintColor='currentColor'/>
       </ButtonCell>
 
-      <View style={styles.settings__cell_spacer}></View>
     </View>;
   }
 
+  _renderMiddleButtons() {
+    return <View>
+      <ButtonCell onPress={ this.props.onExternalLink.bind(this, 'download') } testName='settings__version'>
+        <Text style={styles.settings__cell_label}>App version</Text>
+        <Text style={styles.settings__cell_subtext}>{this._formattedVersion()}</Text>
+        <Img style={styles.settings__cell_icon} source='icon-extLink' tintColor='currentColor'/>
+      </ButtonCell>
+    </View>;
+  }
+
+  _formattedVersion() {
+    // the version in package.json has to be semver, but we use a YEAR.release-channel
+    // version scheme. in package.json we thus have to write YEAR.release.X-channel and
+    // this function is responsible for removing .X part.
+    return this.props.version
+      .replace('.0-', '-')  // remove the .0 in 2018.1.0-beta9
+      .replace(/\.0$/, ''); // remove the .0 in 2018.1.0
+  }
+
   _renderBottomButtons() {
     return <View>
       <ButtonCell onPress={ this.props.onExternalLink.bind(this, 'faq') } testName='settings__external_link'>
diff --git a/app/components/SettingsStyles.js b/app/components/SettingsStyles.js
index 15b55d5009..d37703a8fe 100644
--- a/app/components/SettingsStyles.js
+++ b/app/components/SettingsStyles.js
@@ -22,7 +22,6 @@ export default Object.assign(createViewStyles({
     flexDirection: 'column',
     flex: 1,
     justifyContent: 'space-between',
-    height: '100%',
   },
   settings__scrollview: {
     flexGrow: 1,
@@ -71,6 +70,7 @@ export default Object.assign(createViewStyles({
     backgroundColor: 'rgba(41,71,115,0.9)'
   },
   settings__cell_icon:{
+    marginLeft: 8,
     width: 16,
     height: 16,
     flexGrow: 0,
@@ -119,7 +119,7 @@ export default Object.assign(createViewStyles({
     lineHeight: 26,
     color: 'rgba(255,255,255,0.8)'
   },
-  settings__account_paid_until_label:{
+  settings__cell_subtext:{
     fontFamily: 'Open Sans',
     fontSize: 13,
     fontWeight: '800',