diff --git a/src/routes/settings/routes/profile/components/ProfileSettingsForm.jsx b/src/routes/settings/routes/profile/components/ProfileSettingsForm.jsx index 098bbc7ab..100aa25fc 100644 --- a/src/routes/settings/routes/profile/components/ProfileSettingsForm.jsx +++ b/src/routes/settings/routes/profile/components/ProfileSettingsForm.jsx @@ -37,6 +37,9 @@ class ProfileSettingsForm extends Component { this.onChange = this.onChange.bind(this) this.onBusinessPhoneCountryChange = this.onBusinessPhoneCountryChange.bind(this) this.onCountryChange = this.onCountryChange.bind(this) + + this.hideCountrySelectAlert = this.hideCountrySelectAlert.bind(this) + this.hideBusinessPhoneAlert = this.hideBusinessPhoneAlert.bind(this) } onCountryChange(country) { @@ -82,6 +85,18 @@ class ProfileSettingsForm extends Component { } } + hideCountrySelectAlert() { + this.setState({ + countrySelectionDirty: false + }) + } + + hideBusinessPhoneAlert () { + this.setState({ + businessPhoneDirty: false + }) + } + getField(label, name, isRequired=false) { let validations = null if (name === 'businessPhone') { @@ -183,6 +198,7 @@ class ProfileSettingsForm extends Component { forceCountry={this.state.countrySelected} value={this.props.values.settings.businessPhone} onChangeCountry={this.onBusinessPhoneCountryChange} + onOutsideClick={this.hideBusinessPhoneAlert} /> { this.state.businessPhoneDirty && @@ -238,6 +254,7 @@ class ProfileSettingsForm extends Component { placeholder="- Select country -" showDropdownIndicator setValueOnly + onBlur={this.hideCountrySelectAlert} /> { this.state.countrySelectionDirty && diff --git a/src/routes/settings/routes/profile/components/ProfileSettingsForm.scss b/src/routes/settings/routes/profile/components/ProfileSettingsForm.scss index 1e448c3c9..333e72508 100644 --- a/src/routes/settings/routes/profile/components/ProfileSettingsForm.scss +++ b/src/routes/settings/routes/profile/components/ProfileSettingsForm.scss @@ -176,13 +176,12 @@ margin: 5px auto; @include roboto; - color: $tc-gray-70; font-size: 13px; line-height:20px; font-style:italic; - border: 1px solid $tc-red-30; + border: 1px solid $tc-orange-30; background: $tc-red-10; - color: $tc-red-70; + color: $tc-orange-70; padding:10px; border-radius: 2px; } \ No newline at end of file