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
new file mode 100644
index 0000000000..e73dd4ac64
--- /dev/null
+++ b/res/css/structures/auth/_LanguageSelector.scss
@@ -0,0 +1,46 @@
+/*
+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_Auth_language {
+ width: 100%;
+}
+
+.mx_Auth_language .mx_Dropdown_input {
+ border: none;
+ font-size: 14px;
+ font-weight: 600;
+ color: $authpage-lang-color;
+}
+
+/* TODO: Consider using this new arrow for all dropdowns */
+.mx_Auth_language .mx_Dropdown_arrow {
+ width: 10px;
+ height: 6px;
+ border: none;
+ right: 6px;
+}
+
+.mx_Auth_language .mx_Dropdown_arrow::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ mask: url('$(res)/img/feather-icons/dropdown-arrow.svg');
+ mask-repeat: no-repeat;
+ background: $authpage-lang-color;
+}
diff --git a/res/css/structures/auth/_Login.scss b/res/css/structures/auth/_Login.scss
index c4eebc48a1..09af69183b 100644
--- a/res/css/structures/auth/_Login.scss
+++ b/res/css/structures/auth/_Login.scss
@@ -233,16 +233,3 @@ limitations under the License.
margin: 3px;
vertical-align: top;
}
-
-.mx_Login_language {
- margin-left: auto;
- margin-right: auto;
- min-width: 60%;
-}
-
-.mx_Login_language_div {
- display: flex;
- margin-top: 12px;
- margin-bottom: 12px;
-}
-
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/img/feather-icons/dropdown-arrow.svg b/res/img/feather-icons/dropdown-arrow.svg
new file mode 100644
index 0000000000..a1d46fa61a
--- /dev/null
+++ b/res/img/feather-icons/dropdown-arrow.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6">
+ <g fill="none" fill-rule="evenodd" stroke="#4e5054" stroke-linecap="round" stroke-width="1.3" transform="translate(1 1)">
+ <path d="m.5.5 3.85868526 3.25422271"/>
+ <path d="m8.13193273.56042139-3.77324747 3.19380132"/>
+ </g>
+</svg>
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/ForgotPassword.js b/src/components/structures/auth/ForgotPassword.js
index 87e8c7d131..b2dc2a47eb 100644
--- a/src/components/structures/auth/ForgotPassword.js
+++ b/src/components/structures/auth/ForgotPassword.js
@@ -234,8 +234,6 @@ module.exports = React.createClass({
errorText = <div className="mx_Login_error">{ err }</div>;
}
- const LanguageSelector = sdk.getComponent('structures.auth.LanguageSelector');
-
resetPasswordJsx = (
<div>
<div className="mx_Login_prompt">
@@ -271,7 +269,6 @@ module.exports = React.createClass({
<a className="mx_Login_create" onClick={this.onRegisterClick} href="#">
{ _t('Create an account') }
</a>
- <LanguageSelector />
</div>
</div>
);
diff --git a/src/components/structures/auth/LanguageSelector.js b/src/components/structures/auth/LanguageSelector.js
index 965d8334d9..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_Login_language_div">
- <LanguageDropdown onOptionChange={onChange} className="mx_Login_language" value={getCurrentLanguage()} />
- </div>;
+ return <LanguageDropdown className="mx_Auth_language"
+ onOptionChange={onChange}
+ value={getCurrentLanguage()}
+ />;
}
diff --git a/src/components/structures/auth/Login.js b/src/components/structures/auth/Login.js
index 28bed9af05..28c4a3e960 100644
--- a/src/components/structures/auth/Login.js
+++ b/src/components/structures/auth/Login.js
@@ -555,8 +555,6 @@ module.exports = React.createClass({
);
}
- const LanguageSelector = sdk.getComponent('structures.auth.LanguageSelector');
-
return (
<AuthPage>
<AuthHeader />
@@ -569,7 +567,6 @@ module.exports = React.createClass({
{ _t('Create an account') }
</a>
{ loginAsGuestJsx }
- <LanguageSelector />
</AuthBody>
</AuthPage>
);
diff --git a/src/components/structures/auth/Registration.js b/src/components/structures/auth/Registration.js
index fe6fb078e3..fb913b22e1 100644
--- a/src/components/structures/auth/Registration.js
+++ b/src/components/structures/auth/Registration.js
@@ -471,8 +471,6 @@ module.exports = React.createClass({
);
}
- const LanguageSelector = sdk.getComponent('structures.auth.LanguageSelector');
-
return (
<AuthPage>
<AuthHeader
@@ -486,7 +484,6 @@ module.exports = React.createClass({
{ registerBody }
{ signIn }
{ errorText }
- <LanguageSelector />
</AuthBody>
</AuthPage>
);
diff --git a/src/components/views/auth/AuthHeader.js b/src/components/views/auth/AuthHeader.js
index c1d831a70a..cc70d126e8 100644
--- a/src/components/views/auth/AuthHeader.js
+++ b/src/components/views/auth/AuthHeader.js
@@ -25,10 +25,12 @@ module.exports = React.createClass({
render: function() {
const AuthHeaderLogo = sdk.getComponent('auth.AuthHeaderLogo');
+ const LanguageSelector = sdk.getComponent('structures.auth.LanguageSelector');
return (
<div className="mx_AuthHeader">
<AuthHeaderLogo />
+ <LanguageSelector />
</div>
);
},