From 13957bb5e791ddb6126cddda120a67eeef9a10a4 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Wed, 6 Mar 2019 11:26:05 +0000
Subject: [PATCH] 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
---
 src/components/views/settings/PhoneNumbers.js | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/views/settings/PhoneNumbers.js b/src/components/views/settings/PhoneNumbers.js
index bfd3896a80..d85642d346 100644
--- a/src/components/views/settings/PhoneNumbers.js
+++ b/src/components/views/settings/PhoneNumbers.js
@@ -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 (
             <div className="mx_PhoneNumbers">
                 {existingPhoneElements}
                 <form onSubmit={this._onAddClick} autoComplete={false}
                       noValidate={true} className="mx_PhoneNumbers_new">
                     <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")}
-                               type="text" autoComplete="off" disabled={this.state.verifying} />
+                               type="text" autoComplete="off" disabled={this.state.verifying}
+                               prefix={phoneCountry} />
                     </div>
                     {addVerifySection}
                 </form>