Change mssfix color when out of range

2 files changed, 23 insertions, 0 deletions

diff --git a/gui/packages/desktop/src/renderer/components/AdvancedSettings.js b/gui/packages/desktop/src/renderer/components/AdvancedSettings.js
index 108ea5fced..9289ca7fe2 100644
--- a/gui/packages/desktop/src/renderer/components/AdvancedSettings.js
+++ b/gui/packages/desktop/src/renderer/components/AdvancedSettings.js
@@ -16,6 +16,9 @@ import Switch from './Switch';
 import styles from './AdvancedSettingsStyles';
 import Img from './Img';
 
+const MIN_MSSFIX_VALUE = 1000;
+const MAX_MSSFIX_VALUE = 1500;
+
 type Props = {
   enableIpv6: boolean,
   protocol: string,
@@ -64,6 +67,13 @@ export class AdvancedSettings extends Component<Props, State> {
       portSelector = this._createPortSelector();
     }
 
+    let mssfixStyle;
+    if (this._mssfixIsValid()) {
+      mssfixStyle = styles.advanced_settings__mssfix_valid_value;
+    } else {
+      mssfixStyle = styles.advanced_settings__mssfix_invalid_value;
+    }
+
     return (
       <Layout>
         <Container>
@@ -109,6 +119,7 @@ export class AdvancedSettings extends Component<Props, State> {
                     maxLength={5}
                     placeholder={'None'}
                     value={this.state.editedMssfix}
+                    style={mssfixStyle}
                     onChangeText={this._onMssfixChange}
                     onFocus={this._onMssfixFocus}
                     onBlur={this._onMssfixBlur}
@@ -162,6 +173,12 @@ export class AdvancedSettings extends Component<Props, State> {
       return { focusOnMssfix: false, persistedMssfix: state.editedMssfix };
     });
   };
+
+  _mssfixIsValid(): boolean {
+    const mssfix = this.state.editedMssfix;
+
+    return mssfix >= MIN_MSSFIX_VALUE && mssfix <= MAX_MSSFIX_VALUE;
+  }
 }
 
 type SelectorProps<T> = {
diff --git a/gui/packages/desktop/src/renderer/components/AdvancedSettingsStyles.js b/gui/packages/desktop/src/renderer/components/AdvancedSettingsStyles.js
index d1f0b6d4d7..a71ff39964 100644
--- a/gui/packages/desktop/src/renderer/components/AdvancedSettingsStyles.js
+++ b/gui/packages/desktop/src/renderer/components/AdvancedSettingsStyles.js
@@ -85,4 +85,10 @@ export default {
     color: colors.white,
     flex: 0,
   }),
+  advanced_settings__mssfix_valid_value: Styles.createTextStyle({
+    color: colors.blue,
+  }),
+  advanced_settings__mssfix_invalid_value: Styles.createTextStyle({
+    color: colors.red,
+  }),
 };