Workaround text field placeholder color until the support for it landed in ReactXP for web

See: https://github.com/Microsoft/reactxp/pull/868

3 files changed, 15 insertions, 0 deletions

diff --git a/gui/packages/desktop/src/assets/css/global.css b/gui/packages/desktop/src/assets/css/global.css
index 06f8838934..114f58140d 100644
--- a/gui/packages/desktop/src/assets/css/global.css
+++ b/gui/packages/desktop/src/assets/css/global.css
@@ -30,3 +30,16 @@ body {
   width: 100%;
   display: flex;
 }
+
+/*
+ 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/Cell.js b/gui/packages/desktop/src/renderer/components/Cell.js
index 3a946abc97..a92983fa00 100644
--- a/gui/packages/desktop/src/renderer/components/Cell.js
+++ b/gui/packages/desktop/src/renderer/components/Cell.js
@@ -184,6 +184,7 @@ export function Input({ style, ...otherProps }: Types.TextInputProps) {
       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()}