diff options
Diffstat (limited to 'gui')
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', }), }, |