From 5120ff83be4cddc147c36af66f00b69f585f7907 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Wed, 6 Mar 2019 11:22:21 +0000
Subject: [PATCH 1/2] Enable show prefix for phone input in Settings

This fixes an unrelated bug where the currently selected country's prefix number
wasn't being displayed. Since other country dropdown's show the prefix, and this
is also for phone numbers, it seems good to also show it here as well.
---
 src/components/views/settings/PhoneNumbers.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/views/settings/PhoneNumbers.js b/src/components/views/settings/PhoneNumbers.js
index 1b557573ea..bfd3896a80 100644
--- a/src/components/views/settings/PhoneNumbers.js
+++ b/src/components/views/settings/PhoneNumbers.js
@@ -235,6 +235,7 @@ export default class PhoneNumbers extends React.Component {
                                          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} />

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 2/2] 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>