From 92394ba60178c99b3cbe607186a81904fd1e9f9d Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Tue, 29 Jan 2019 16:04:44 -0600
Subject: [PATCH] Change country dropdown to be smaller with arrow on right

---
 res/css/_components.scss                     |  1 +
 res/css/views/auth/_CountryDropdown.scss     | 26 ++++++++++++++++++++
 res/css/views/elements/_Dropdown.scss        |  2 +-
 src/components/views/auth/CountryDropdown.js |  6 ++---
 4 files changed, 31 insertions(+), 4 deletions(-)
 create mode 100644 res/css/views/auth/_CountryDropdown.scss

diff --git a/res/css/_components.scss b/res/css/_components.scss
index 5e7e9abd05..8807d858a6 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -30,6 +30,7 @@
 @import "./views/auth/_AuthHeader.scss";
 @import "./views/auth/_AuthHeaderLogo.scss";
 @import "./views/auth/_AuthPage.scss";
+@import "./views/auth/_CountryDropdown.scss";
 @import "./views/auth/_InteractiveAuthEntryComponents.scss";
 @import "./views/auth/_LanguageSelector.scss";
 @import "./views/auth/_ServerConfig.scss";
diff --git a/res/css/views/auth/_CountryDropdown.scss b/res/css/views/auth/_CountryDropdown.scss
new file mode 100644
index 0000000000..b27ff54a96
--- /dev/null
+++ b/res/css/views/auth/_CountryDropdown.scss
@@ -0,0 +1,26 @@
+/*
+Copyright 2019 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_CountryDropdown_shortOption {
+    display: inline-flex;
+    align-items: center;
+    height: 100%;
+}
+
+.mx_CountryDropdown_option {
+    display: flex;
+    align-items: center;
+}
diff --git a/res/css/views/elements/_Dropdown.scss b/res/css/views/elements/_Dropdown.scss
index 69dd1703ee..98b99ffe57 100644
--- a/res/css/views/elements/_Dropdown.scss
+++ b/res/css/views/elements/_Dropdown.scss
@@ -81,7 +81,7 @@ limitations under the License.
 
 .mx_Dropdown_option img {
     margin: 5px;
-    width: 27px;
+    width: 16px;
     vertical-align: middle;
 }
 
diff --git a/src/components/views/auth/CountryDropdown.js b/src/components/views/auth/CountryDropdown.js
index 3a71d5d1c8..56900ab968 100644
--- a/src/components/views/auth/CountryDropdown.js
+++ b/src/components/views/auth/CountryDropdown.js
@@ -81,7 +81,7 @@ export default class CountryDropdown extends React.Component {
         if (this.props.showPrefix) {
             countryPrefix = '+' + COUNTRIES_BY_ISO2[iso2].prefix;
         }
-        return <span>
+        return <span className="mx_CountryDropdown_shortOption">
             { this._flagImgForIso2(iso2) }
             { countryPrefix }
         </span>;
@@ -111,7 +111,7 @@ export default class CountryDropdown extends React.Component {
         }
 
         const options = displayedCountries.map((country) => {
-            return <div key={country.iso2}>
+            return <div className="mx_CountryDropdown_option" key={country.iso2}>
                 { this._flagImgForIso2(country.iso2) }
                 { country.name } <span>(+{ country.prefix })</span>
             </div>;
@@ -121,7 +121,7 @@ export default class CountryDropdown extends React.Component {
         // values between mounting and the initial value propgating
         const value = this.props.value || COUNTRIES[0].iso2;
 
-        return <Dropdown className={this.props.className + " left_aligned"}
+        return <Dropdown className={this.props.className}
             onOptionChange={this._onOptionChange} onSearchChange={this._onSearchChange}
             menuWidth={298} getShortOption={this._getShortOption}
             value={value} searchEnabled={true} disabled={this.props.disabled}