From 05254f0e8284bfed770c8422c3f2e317ee88029e Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Wed, 23 Jan 2019 09:57:31 -0600
Subject: [PATCH] Tweak language selector to match design

---
 res/css/_components.scss                           |  1 +
 res/css/structures/auth/_LanguageSelector.scss     | 13 ++++++-------
 res/css/views/auth/_AuthHeader.scss                |  2 ++
 res/css/views/auth/_AuthHeaderLogo.scss            |  1 +
 res/themes/dharma/css/_dharma.scss                 |  1 +
 res/themes/light/css/_base.scss                    |  1 +
 src/components/structures/auth/LanguageSelector.js |  7 ++++---
 7 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/res/css/_components.scss b/res/css/_components.scss
index 2617cd7c4c..133324529b 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -23,6 +23,7 @@
 @import "./structures/_UploadBar.scss";
 @import "./structures/_UserSettings.scss";
 @import "./structures/_ViewSource.scss";
+@import "./structures/auth/_LanguageSelector.scss";
 @import "./structures/auth/_Login.scss";
 @import "./views/auth/_AuthBody.scss";
 @import "./views/auth/_AuthButtons.scss";
diff --git a/res/css/structures/auth/_LanguageSelector.scss b/res/css/structures/auth/_LanguageSelector.scss
index 26a8207b20..5193fa98ed 100644
--- a/res/css/structures/auth/_LanguageSelector.scss
+++ b/res/css/structures/auth/_LanguageSelector.scss
@@ -15,13 +15,12 @@ limitations under the License.
 */
 
 .mx_Auth_language {
-    margin-left: auto;
-    margin-right: auto;
-    min-width: 60%;
+    width: 100%;
 }
 
-.mx_Auth_language_div {
-    display: flex;
-    margin-top: 12px;
-    margin-bottom: 12px;
+.mx_Auth_language .mx_Dropdown_input {
+    border: none;
+    font-size: 14px;
+    font-weight: 600;
+    color: $authpage-lang-color;
 }
diff --git a/res/css/views/auth/_AuthHeader.scss b/res/css/views/auth/_AuthHeader.scss
index 376864d268..e1e8802437 100644
--- a/res/css/views/auth/_AuthHeader.scss
+++ b/res/css/views/auth/_AuthHeader.scss
@@ -15,6 +15,8 @@ limitations under the License.
 */
 
 .mx_AuthHeader {
+    display: flex;
+    flex-direction: column;
     width: 206px;
     padding: 25px 50px;
     box-sizing: border-box;
diff --git a/res/css/views/auth/_AuthHeaderLogo.scss b/res/css/views/auth/_AuthHeaderLogo.scss
index 3d8ab29325..b6f107d9c4 100644
--- a/res/css/views/auth/_AuthHeaderLogo.scss
+++ b/res/css/views/auth/_AuthHeaderLogo.scss
@@ -16,6 +16,7 @@ limitations under the License.
 
 .mx_AuthHeaderLogo {
     margin-top: 15px;
+    flex: 1;
 }
 
 .mx_AuthHeaderLogo img {
diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss
index 235eb02e3c..22aa018b5e 100644
--- a/res/themes/dharma/css/_dharma.scss
+++ b/res/themes/dharma/css/_dharma.scss
@@ -216,6 +216,7 @@ $memberstatus-placeholder-color: $roomtile-name-color;
 $authpage-bg-color: #2e3649;
 $authpage-modal-bg-color: rgba(255, 255, 255, 0.59);
 $authpage-body-bg-color: #ffffff;
+$authpage-lang-color: #4e5054;
 
 /*** form elements ***/
 
diff --git a/res/themes/light/css/_base.scss b/res/themes/light/css/_base.scss
index 1522ee82a0..438ab69856 100644
--- a/res/themes/light/css/_base.scss
+++ b/res/themes/light/css/_base.scss
@@ -212,6 +212,7 @@ $memberstatus-placeholder-color: $roomtile-name-color;
 $authpage-bg-color: #2e3649;
 $authpage-modal-bg-color: rgba(255, 255, 255, 0.59);
 $authpage-body-bg-color: #ffffff;
+$authpage-lang-color: #4e5054;
 
 // ***** Mixins! *****
 
diff --git a/src/components/structures/auth/LanguageSelector.js b/src/components/structures/auth/LanguageSelector.js
index 60b369c303..d964af184c 100644
--- a/src/components/structures/auth/LanguageSelector.js
+++ b/src/components/structures/auth/LanguageSelector.js
@@ -32,7 +32,8 @@ export default function LanguageSelector() {
     if (SdkConfig.get()['disable_login_language_selector']) return <div />;
 
     const LanguageDropdown = sdk.getComponent('views.elements.LanguageDropdown');
-    return <div className="mx_Auth_language_div">
-        <LanguageDropdown onOptionChange={onChange} className="mx_Auth_language" value={getCurrentLanguage()} />
-    </div>;
+    return <LanguageDropdown className="mx_Auth_language"
+        onOptionChange={onChange}
+        value={getCurrentLanguage()}
+    />;
 }