Merge branch 'mssfix-field-appearance'

6 files changed, 51 insertions, 29 deletions

diff --git a/gui/packages/desktop/src/assets/css/global.css b/gui/packages/desktop/src/assets/css/global.css
index a6a157e84c..114f58140d 100644
--- a/gui/packages/desktop/src/assets/css/global.css
+++ b/gui/packages/desktop/src/assets/css/global.css
@@ -31,6 +31,15 @@ body {
   display: flex;
 }
 
-::-webkit-input-placeholder {
+/*
+ Temporary fix for placeholder colors until the following PR lands in master:
+ https://github.com/Microsoft/reactxp/pull/868
+ */
+
+* [data-test-id='AccountInput']::placeholder {
   color: rgba(41, 77, 115, 0.4);
 }
+
+* [data-test-id='CellInputField']::placeholder {
+  color: rgba(255, 255, 255, 0.6);
+}
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..a92983fa00 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,14 +168,23 @@ 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]}
+      testId="CellInputField"
       {...otherProps}
     />
   );
diff --git a/gui/packages/desktop/src/renderer/components/Login.js b/gui/packages/desktop/src/renderer/components/Login.js
index 160ec3f0f9..66e699704a 100644
--- a/gui/packages/desktop/src/renderer/components/Login.js
+++ b/gui/packages/desktop/src/renderer/components/Login.js
@@ -366,6 +366,7 @@ export default class Login extends Component<Props, State> {
               autoFocus={true}
               ref={(ref) => (this._accountInput = ref)}
               testName="AccountInput"
+              testId="AccountInput"
             />
             <Animated.View
               style={this._accountInputButtonStyles()}
diff --git a/gui/packages/desktop/src/renderer/components/NavigationBar.js b/gui/packages/desktop/src/renderer/components/NavigationBar.js
index 7c603ea68b..f85f161c5b 100644
--- a/gui/packages/desktop/src/renderer/components/NavigationBar.js
+++ b/gui/packages/desktop/src/renderer/components/NavigationBar.js
@@ -41,7 +41,7 @@ const styles = {
       fontSize: 16,
       fontWeight: '600',
       lineHeight: 22,
-      color: colors.white60,
+      color: colors.white,
       alignSelf: 'center',
     }),
   },