Style mssfix field

3 files changed, 38 insertions, 27 deletions

diff --git a/gui/packages/desktop/src/renderer/components/AdvancedSettings.js b/gui/packages/desktop/src/renderer/components/AdvancedSettings.js
index 4fe0d2366e..a33ca074a5 100644
--- a/gui/packages/desktop/src/renderer/components/AdvancedSettings.js
+++ b/gui/packages/desktop/src/renderer/components/AdvancedSettings.js
@@ -115,16 +115,18 @@ export class AdvancedSettings extends Component<Props, State> {
 
                   <Cell.Container>
                     <Cell.Label>Mssfix</Cell.Label>
-                    <Cell.Input
-                      keyboardType={'numeric'}
-                      maxLength={5}
-                      placeholder={'Default'}
-                      value={mssfixValue === null ? '' : mssfixValue.toString()}
-                      style={mssfixStyle}
-                      onChangeText={this._onMssfixChange}
-                      onFocus={this._onMssfixFocus}
-                      onBlur={this._onMssfixBlur}
-                    />
+                    <Cell.InputFrame style={styles.advanced_settings__mssfix_frame}>
+                      <Cell.Input
+                        keyboardType={'numeric'}
+                        maxLength={4}
+                        placeholder={'Default'}
+                        value={mssfixValue === null ? '' : mssfixValue.toString()}
+                        style={mssfixStyle}
+                        onChangeText={this._onMssfixChange}
+                        onFocus={this._onMssfixFocus}
+                        onBlur={this._onMssfixBlur}
+                      />
+                    </Cell.InputFrame>
                   </Cell.Container>
                   <Cell.Footer>
                     Set OpenVPN MSS value. Valid range: {MIN_MSSFIX_VALUE} - {MAX_MSSFIX_VALUE}.
diff --git a/gui/packages/desktop/src/renderer/components/AdvancedSettingsStyles.js b/gui/packages/desktop/src/renderer/components/AdvancedSettingsStyles.js
index a71ff39964..5857ddf183 100644
--- a/gui/packages/desktop/src/renderer/components/AdvancedSettingsStyles.js
+++ b/gui/packages/desktop/src/renderer/components/AdvancedSettingsStyles.js
@@ -85,8 +85,13 @@ export default {
     color: colors.white,
     flex: 0,
   }),
+  advanced_settings__mssfix_frame: Styles.createViewStyle({
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: 80,
+  }),
   advanced_settings__mssfix_valid_value: Styles.createTextStyle({
-    color: colors.blue,
+    color: colors.white,
   }),
   advanced_settings__mssfix_invalid_value: Styles.createTextStyle({
     color: colors.red,
diff --git a/gui/packages/desktop/src/renderer/components/Cell.js b/gui/packages/desktop/src/renderer/components/Cell.js
index 5653af0ae3..3a946abc97 100644
--- a/gui/packages/desktop/src/renderer/components/Cell.js
+++ b/gui/packages/desktop/src/renderer/components/Cell.js
@@ -62,25 +62,21 @@ const styles = {
   },
 
   input: {
-    view: Styles.createViewStyle({
-      flexGrow: 1,
-      paddingLeft: 12,
-      paddingRight: 12,
-      paddingTop: 8,
-      paddingBottom: 8,
-      marginRight: 3,
-      borderWidth: 2,
-      borderRadius: 8,
-      borderColor: 'transparent',
+    frame: Styles.createViewStyle({
+      flexGrow: 0,
+      backgroundColor: 'rgba(255,255,255,0.1)',
+      borderRadius: 4,
+      paddingHorizontal: 2,
+      paddingVertical: 2,
     }),
     text: Styles.createTextStyle({
-      color: colors.blue,
-      backgroundColor: 'rgba(255, 255, 255, 0.5)',
-      fontFamily: 'DINPro',
+      color: colors.white,
+      backgroundColor: 'transparent',
+      fontFamily: 'Open Sans',
       fontSize: 20,
-      fontWeight: '900',
+      fontWeight: '600',
       lineHeight: 26,
-      textAlign: 'center',
+      textAlign: 'right',
     }),
   },
 
@@ -172,11 +168,19 @@ export function Label({
   );
 }
 
+export function InputFrame({ style, children, ...otherProps }: Types.ViewProps) {
+  return (
+    <View style={[styles.input.frame, style]} {...otherProps}>
+      {children}
+    </View>
+  );
+}
+
 export function Input({ style, ...otherProps }: Types.TextInputProps) {
   return (
     <TextInput
       maxLength={10}
-      placeholderTextColor={colors.blue40}
+      placeholderTextColor={colors.white60}
       autoCorrect={false}
       autoFocus={false}
       style={[styles.input.text, styles.input.view, style]}