Move country dropdown inside field in Settings

This updates the Settings phone input to match the new styling used on auth
flows.

Fixes https://github.com/vector-im/riot-web/issues/9049
This commit is contained in:
J. Ryan Stinnett 2019-03-06 11:26:05 +00:00
parent 5120ff83be
commit 13957bb5e7

View file

@ -224,21 +224,23 @@ export default class PhoneNumbers extends React.Component {
); );
} }
const phoneCountry = <CountryDropdown onOptionChange={this._onCountryChanged}
className="mx_PhoneNumbers_country"
value={this.state.phoneCountry}
disabled={this.state.verifying}
isSmall={true}
showPrefix={true}
/>;
return ( return (
<div className="mx_PhoneNumbers"> <div className="mx_PhoneNumbers">
{existingPhoneElements} {existingPhoneElements}
<form onSubmit={this._onAddClick} autoComplete={false} <form onSubmit={this._onAddClick} autoComplete={false}
noValidate={true} className="mx_PhoneNumbers_new"> noValidate={true} className="mx_PhoneNumbers_new">
<div className="mx_PhoneNumbers_input"> <div className="mx_PhoneNumbers_input">
<CountryDropdown onOptionChange={this._onCountryChanged}
className="mx_PhoneNumbers_country"
value={this.state.phoneCountry}
disabled={this.state.verifying}
isSmall={true}
showPrefix={true}
/>
<Field id="newPhoneNumber" ref="newPhoneNumber" label={_t("Phone Number")} <Field id="newPhoneNumber" ref="newPhoneNumber" label={_t("Phone Number")}
type="text" autoComplete="off" disabled={this.state.verifying} /> type="text" autoComplete="off" disabled={this.state.verifying}
prefix={phoneCountry} />
</div> </div>
{addVerifySection} {addVerifySection}
</form> </form>