Show error message if version is inconsistent

2 files changed, 33 insertions, 5 deletions

diff --git a/gui/packages/desktop/src/renderer/components/Settings.js b/gui/packages/desktop/src/renderer/components/Settings.js
index 7c077f03a9..877052569b 100644
--- a/gui/packages/desktop/src/renderer/components/Settings.js
+++ b/gui/packages/desktop/src/renderer/components/Settings.js
@@ -2,7 +2,7 @@
 
 import moment from 'moment';
 import * as React from 'react';
-import { Component, View } from 'reactxp';
+import { Component, Text, View } from 'reactxp';
 import * as AppButton from './AppButton';
 import * as Cell from './Cell';
 import Img from './Img';
@@ -136,9 +136,23 @@ export default class Settings extends Component<Props> {
   }
 
   _renderMiddleButtons() {
-    const icon = this.props.consistentVersion ? null : (
-      <Img source="icon-alert" tintColor={colors.red} style={styles.settings__version_warning} />
-    );
+    let icon;
+    let footer;
+    if (!this.props.consistentVersion) {
+      icon = (
+        <Img source="icon-alert" tintColor={colors.red} style={styles.settings__version_warning} />
+      );
+      footer = (
+        <View style={styles.settings__cell_footer}>
+          <Text style={styles.settings__cell_footer_label}>
+            {'Inconsistent internal version information, please restart the app.'}
+          </Text>
+        </View>
+      );
+    } else {
+      footer = <View style={styles.settings__cell_spacer} />;
+    }
+
     return (
       <View>
         <Cell.CellButton
@@ -149,7 +163,7 @@ export default class Settings extends Component<Props> {
           <Cell.SubText>{this.props.appVersion}</Cell.SubText>
           <Cell.Img height={16} width={16} source="icon-extLink" />
         </Cell.CellButton>
-        <View style={styles.settings__cell_spacer} />
+        {footer}
       </View>
     );
   }
diff --git a/gui/packages/desktop/src/renderer/components/SettingsStyles.js b/gui/packages/desktop/src/renderer/components/SettingsStyles.js
index 8ffefcabdf..56ec6b3752 100644
--- a/gui/packages/desktop/src/renderer/components/SettingsStyles.js
+++ b/gui/packages/desktop/src/renderer/components/SettingsStyles.js
@@ -27,6 +27,12 @@ export default {
     height: 24,
     flex: 0,
   }),
+  settings__cell_footer: Styles.createViewStyle({
+    paddingTop: 8,
+    paddingRight: 24,
+    paddingBottom: 24,
+    paddingLeft: 24,
+  }),
   settings__footer: Styles.createViewStyle({
     paddingTop: 24,
     paddingBottom: 24,
@@ -40,4 +46,12 @@ export default {
   settings__account_paid_until_label__error: Styles.createTextStyle({
     color: colors.red,
   }),
+  settings__cell_footer_label: Styles.createTextStyle({
+    fontFamily: 'Open Sans',
+    fontSize: 13,
+    fontWeight: '600',
+    lineHeight: 20,
+    letterSpacing: -0.2,
+    color: colors.white60,
+  }),
 };