Merge pull request #2488 from jryans/auth-lang

Restyle auth page language selector

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";

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;
+}

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;
-}
-

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;

res/css/views/auth/_AuthHeaderLogo.scss

@@ -16,6 +16,7 @@ limitations under the License.
 
 .mx_AuthHeaderLogo {
     margin-top: 15px;
+    flex: 1;
 }
 
 .mx_AuthHeaderLogo img {

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>

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 ***/
 

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! *****
 

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>
             );

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">
+    return <LanguageDropdown className="mx_Auth_language"
-        <LanguageDropdown onOptionChange={onChange} className="mx_Login_language" value={getCurrentLanguage()} />
+        onOptionChange={onChange}
-    </div>;
+        value={getCurrentLanguage()}
+    />;
 }

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>
         );

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>
         );

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>
         );
     },