From 55964d2fda5c688937ab5c2755f2b2e6cef8dcb2 Mon Sep 17 00:00:00 2001
From: Miguel Alatzar <migbot@users.noreply.github.com>
Date: Wed, 17 Jul 2019 12:56:25 -0700
Subject: [PATCH] Add placeholderTextColor when using placeholders (#2976)

---
 .../edit_channel_info/edit_channel_info.js     |  3 ++-
 .../post_textbox/post_textbox_base.js          |  3 +--
 .../text_input_with_localized_placeholder.js   |  3 +++
 .../widgets/settings/text_setting.js           |  1 +
 .../__snapshots__/forgot_password.test.js.snap |  2 ++
 app/screens/forgot_password/forgot_password.js |  3 +++
 app/screens/login/login.js                     |  7 +++++--
 app/screens/select_server/select_server.js     |  2 ++
 package-lock.json                              | 18 +++---------------
 9 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/app/components/edit_channel_info/edit_channel_info.js b/app/components/edit_channel_info/edit_channel_info.js
index 028240bdc..70871ab9a 100644
--- a/app/components/edit_channel_info/edit_channel_info.js
+++ b/app/components/edit_channel_info/edit_channel_info.js
@@ -12,6 +12,8 @@ import {
 } from 'react-native';
 import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
 
+import {General} from 'mattermost-redux/constants';
+
 import ErrorText from 'app/components/error_text';
 import FormattedText from 'app/components/formatted_text';
 import Loading from 'app/components/loading';
@@ -19,7 +21,6 @@ import StatusBar from 'app/components/status_bar';
 import TextInputWithLocalizedPlaceholder from 'app/components/text_input_with_localized_placeholder';
 
 import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
-import {General} from 'mattermost-redux/constants';
 import {getShortenedURL} from 'app/utils/url';
 import {t} from 'app/utils/i18n';
 
diff --git a/app/components/post_textbox/post_textbox_base.js b/app/components/post_textbox/post_textbox_base.js
index f129c7d74..0fa6403b8 100644
--- a/app/components/post_textbox/post_textbox_base.js
+++ b/app/components/post_textbox/post_textbox_base.js
@@ -32,7 +32,6 @@ import {t} from 'app/utils/i18n';
 import {confirmOutOfOfficeDisabled} from 'app/utils/status';
 import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
 
-const PLACEHOLDER_COLOR = changeOpacity('#000', 0.5);
 const {RNTextInputReset} = NativeModules;
 
 export default class PostTextBoxBase extends PureComponent {
@@ -617,7 +616,7 @@ export default class PostTextBoxBase extends PureComponent {
                         onChangeText={this.handleTextChange}
                         onSelectionChange={this.handlePostDraftSelectionChanged}
                         placeholder={intl.formatMessage(placeholder, {channelDisplayName})}
-                        placeholderTextColor={PLACEHOLDER_COLOR}
+                        placeholderTextColor={changeOpacity('#000', 0.5)}
                         multiline={true}
                         blurOnSubmit={false}
                         underlineColorAndroid='transparent'
diff --git a/app/components/text_input_with_localized_placeholder.js b/app/components/text_input_with_localized_placeholder.js
index 431ade37c..771721587 100644
--- a/app/components/text_input_with_localized_placeholder.js
+++ b/app/components/text_input_with_localized_placeholder.js
@@ -6,6 +6,8 @@ import PropTypes from 'prop-types';
 import {intlShape} from 'react-intl';
 import {TextInput} from 'react-native';
 
+import {changeOpacity} from 'app/utils/theme';
+
 export default class TextInputWithLocalizedPlaceholder extends PureComponent {
     static propTypes = {
         ...TextInput.propTypes,
@@ -37,6 +39,7 @@ export default class TextInputWithLocalizedPlaceholder extends PureComponent {
                 ref='input'
                 {...otherProps}
                 placeholder={placeholderString}
+                placeholderTextColor={changeOpacity('#000', 0.5)}
                 disableFullscreenUI={true}
             />
         );
diff --git a/app/components/widgets/settings/text_setting.js b/app/components/widgets/settings/text_setting.js
index e913fd7b0..87b1dd335 100644
--- a/app/components/widgets/settings/text_setting.js
+++ b/app/components/widgets/settings/text_setting.js
@@ -151,6 +151,7 @@ export default class TextSetting extends PureComponent {
                         <TextInput
                             value={value}
                             placeholder={placeholder}
+                            placeholderTextColor={changeOpacity(theme.centerChannelColor, 0.5)}
                             onChangeText={this.onChangeText}
                             style={inputStyle}
                             autoCapitalize='none'
diff --git a/app/screens/forgot_password/__snapshots__/forgot_password.test.js.snap b/app/screens/forgot_password/__snapshots__/forgot_password.test.js.snap
index 3fa6fee02..c75da12af 100644
--- a/app/screens/forgot_password/__snapshots__/forgot_password.test.js.snap
+++ b/app/screens/forgot_password/__snapshots__/forgot_password.test.js.snap
@@ -143,6 +143,7 @@ exports[`ForgotPassword should match snapshot 1`] = `
           disableFullscreenUI={true}
           keyboardType="email-address"
           onChangeText={[Function]}
+          placeholderTextColor="rgba(0,0,0,0.5)"
           rejectResponderTermination={true}
           style={
             Object {
@@ -253,6 +254,7 @@ exports[`ForgotPassword snapshot for error on failure of email regex 1`] = `
           disableFullscreenUI={true}
           keyboardType="email-address"
           onChangeText={[Function]}
+          placeholderTextColor="rgba(0,0,0,0.5)"
           rejectResponderTermination={true}
           style={
             Object {
diff --git a/app/screens/forgot_password/forgot_password.js b/app/screens/forgot_password/forgot_password.js
index 4684b2bf6..698eace45 100644
--- a/app/screens/forgot_password/forgot_password.js
+++ b/app/screens/forgot_password/forgot_password.js
@@ -23,6 +23,8 @@ import ErrorText from 'app/components/error_text';
 import FormattedText from 'app/components/formatted_text';
 import StatusBar from 'app/components/status_bar';
 
+import {changeOpacity} from 'app/utils/theme';
+
 export default class ForgotPassword extends PureComponent {
     static propTypes = {
         actions: PropTypes.shape({
@@ -124,6 +126,7 @@ export default class ForgotPassword extends PureComponent {
                         style={GlobalStyles.inputBox}
                         onChangeText={this.changeEmail}
                         placeholder={formatMessage({id: 'login.email', defaultMessage: 'Email'})}
+                        placeholderTextColor={changeOpacity('#000', 0.5)}
                         autoCorrect={false}
                         autoCapitalize='none'
                         keyboardType='email-address'
diff --git a/app/screens/login/login.js b/app/screens/login/login.js
index 0157f5567..3fcd0e81d 100644
--- a/app/screens/login/login.js
+++ b/app/screens/login/login.js
@@ -19,6 +19,8 @@ import {
 import Button from 'react-native-button';
 import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
 
+import {RequestStatus} from 'mattermost-redux/constants';
+
 import ErrorText from 'app/components/error_text';
 import FormattedText from 'app/components/formatted_text';
 import StatusBar from 'app/components/status_bar';
@@ -27,11 +29,10 @@ import {preventDoubleTap} from 'app/utils/tap';
 import tracker from 'app/utils/time_tracker';
 import {t} from 'app/utils/i18n';
 import {setMfaPreflightDone, getMfaPreflightDone} from 'app/utils/security';
+import {changeOpacity} from 'app/utils/theme';
 
 import telemetry from 'app/telemetry';
 
-import {RequestStatus} from 'mattermost-redux/constants';
-
 export const mfaExpectedErrors = ['mfa.validate_token.authenticate.app_error', 'ent.mfa.validate_token.authenticate.app_error'];
 
 export default class Login extends PureComponent {
@@ -380,6 +381,7 @@ export default class Login extends PureComponent {
                             onChangeText={this.props.actions.handleLoginIdChanged}
                             style={GlobalStyles.inputBox}
                             placeholder={this.createLoginPlaceholder()}
+                            placeholderTextColor={changeOpacity('#000', 0.5)}
                             autoCorrect={false}
                             autoCapitalize='none'
                             keyboardType='email-address'
@@ -395,6 +397,7 @@ export default class Login extends PureComponent {
                             onChangeText={this.props.actions.handlePasswordChanged}
                             style={GlobalStyles.inputBox}
                             placeholder={this.context.intl.formatMessage({id: 'login.password', defaultMessage: 'Password'})}
+                            placeholderTextColor={changeOpacity('#000', 0.5)}
                             secureTextEntry={true}
                             autoCorrect={false}
                             autoCapitalize='none'
diff --git a/app/screens/select_server/select_server.js b/app/screens/select_server/select_server.js
index a51d25539..8d470e3d7 100644
--- a/app/screens/select_server/select_server.js
+++ b/app/screens/select_server/select_server.js
@@ -36,6 +36,7 @@ import {isValidUrl, stripTrailingSlashes} from 'app/utils/url';
 import {preventDoubleTap} from 'app/utils/tap';
 import tracker from 'app/utils/time_tracker';
 import {t} from 'app/utils/i18n';
+import {changeOpacity} from 'app/utils/theme';
 
 import telemetry from 'app/telemetry';
 
@@ -448,6 +449,7 @@ export default class SelectServer extends PureComponent {
                                 id: 'mobile.components.select_server_view.siteUrlPlaceholder',
                                 defaultMessage: 'https://mattermost.example.com',
                             })}
+                            placeholderTextColor={changeOpacity('#000', 0.5)}
                             returnKeyType='go'
                             underlineColorAndroid='transparent'
                             disableFullscreenUI={true}
diff --git a/package-lock.json b/package-lock.json
index 611383daa..c4c7f6846 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5238,7 +5238,6 @@
           "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
           "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
           "dev": true,
-          "optional": true,
           "requires": {
             "is-extendable": "^0.1.0"
           }
@@ -5283,8 +5282,7 @@
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
           "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "is-glob": {
           "version": "4.0.1",
@@ -7705,7 +7703,6 @@
           "version": "1.1.11",
           "resolved": false,
           "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -7863,7 +7860,6 @@
           "version": "1.0.0",
           "resolved": false,
           "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -7878,7 +7874,6 @@
           "version": "3.0.4",
           "resolved": false,
           "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -7893,7 +7888,6 @@
           "version": "2.3.5",
           "resolved": false,
           "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==",
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -7912,7 +7906,6 @@
           "version": "0.5.1",
           "resolved": false,
           "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -8006,7 +7999,6 @@
           "version": "1.4.0",
           "resolved": false,
           "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -8129,7 +8121,6 @@
           "version": "1.0.2",
           "resolved": false,
           "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -8149,7 +8140,6 @@
           "version": "3.0.1",
           "resolved": false,
           "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -16051,8 +16041,7 @@
           "version": "0.3.2",
           "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
           "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "braces": {
           "version": "2.3.2",
@@ -16315,8 +16304,7 @@
           "version": "6.0.2",
           "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
           "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "micromatch": {
           "version": "3.1.10",