From 575cd1e37b73e47487726a038e85f4967a6c5e0a Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Tue, 22 Jan 2019 19:28:23 -0600 Subject: [PATCH] Add modal look to authentication flows This changes the auth screens to use the modal-like style of the redesign. This does not attempt to style the actual body content of each screen. Instead, it covers the header area with logo, footer links, and overall modal container only. --- res/css/_components.scss | 1 + res/css/views/auth/_AuthBody.scss | 23 ++++++++++++++++ res/css/views/auth/_AuthFooter.scss | 12 ++++----- res/css/views/auth/_AuthHeader.scss | 12 ++++++--- res/css/views/auth/_AuthPage.scss | 18 ++++++------- res/themes/dharma/css/_dharma.scss | 4 +++ res/themes/light/css/_base.scss | 4 +++ .../structures/auth/ForgotPassword.js | 7 ++--- src/components/structures/auth/Login.js | 7 +++-- .../structures/auth/PostRegistration.js | 21 ++++++++------- .../structures/auth/Registration.js | 15 ++++++----- src/components/views/auth/AuthBody.js | 27 +++++++++++++++++++ src/components/views/auth/AuthPage.js | 4 +++ 13 files changed, 113 insertions(+), 42 deletions(-) create mode 100644 res/css/views/auth/_AuthBody.scss create mode 100644 src/components/views/auth/AuthBody.js diff --git a/res/css/_components.scss b/res/css/_components.scss index 6532fcd74c..be36ea7a5f 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -23,6 +23,7 @@ @import "./structures/_UserSettings.scss"; @import "./structures/_ViewSource.scss"; @import "./structures/auth/_Login.scss"; +@import "./views/auth/_AuthBody.scss"; @import "./views/auth/_AuthButtons.scss"; @import "./views/auth/_AuthFooter.scss"; @import "./views/auth/_AuthHeader.scss"; diff --git a/res/css/views/auth/_AuthBody.scss b/res/css/views/auth/_AuthBody.scss new file mode 100644 index 0000000000..97632c2e3f --- /dev/null +++ b/res/css/views/auth/_AuthBody.scss @@ -0,0 +1,23 @@ +/* +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_AuthBody { + width: 500px; + background-color: $authpage-body-bg-color; + border-radius: 0 4px 4px 0; + padding: 25px 60px; + box-sizing: border-box; +} diff --git a/res/css/views/auth/_AuthFooter.scss b/res/css/views/auth/_AuthFooter.scss index 0d9e59e7df..6ad5b0a459 100644 --- a/res/css/views/auth/_AuthFooter.scss +++ b/res/css/views/auth/_AuthFooter.scss @@ -15,14 +15,14 @@ limitations under the License. */ .mx_AuthFooter { - display: block; text-align: center; - margin-top: 15px; width: 100%; - font-size: 13px; - opacity: 0.8; + font-size: 14px; + opacity: 0.72; + margin: 20px 0; } -.mx_AuthFooter a:link { - color: $primary-fg-color; +.mx_AuthFooter a:link, a:hover, a:visited { + color: $accent-fg-color; + margin: 0 22px; } diff --git a/res/css/views/auth/_AuthHeader.scss b/res/css/views/auth/_AuthHeader.scss index 426215dc62..fb0b3e666b 100644 --- a/res/css/views/auth/_AuthHeader.scss +++ b/res/css/views/auth/_AuthHeader.scss @@ -14,12 +14,16 @@ See the License for the specific language governing permissions and limitations under the License. */ +.mx_AuthHeader { + width: 206px; + padding: 25px 50px; + box-sizing: border-box; +} + .mx_AuthHeader_logo { - text-align: center; - height: 150px; - margin-bottom: 45px; + margin-top: 15px; } .mx_AuthHeader_logo img { - max-height: 100% + width: 100%; } diff --git a/res/css/views/auth/_AuthPage.scss b/res/css/views/auth/_AuthPage.scss index 8dae4ca64e..9e32750771 100644 --- a/res/css/views/auth/_AuthPage.scss +++ b/res/css/views/auth/_AuthPage.scss @@ -17,12 +17,10 @@ limitations under the License. .mx_AuthPage { width: 100%; height: 100%; - display: flex; - align-items: center; - justify-content: center; - + flex-direction: column; overflow: auto; + background-color: $authpage-bg-color; } .mx_AuthPage h2 { @@ -32,9 +30,11 @@ limitations under the License. } .mx_AuthPage_modal { - width: 300px; - min-height: 450px; - padding-top: 50px; - padding-bottom: 50px; - margin: auto; + display: flex; + margin: 100px auto auto; + border-radius: 4px; + // Not currently supported in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1178765 + backdrop-filter: blur(10px); + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.33); + background-color: $authpage-modal-bg-color; } diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss index c9f62fbe6b..1678c9b586 100644 --- a/res/themes/dharma/css/_dharma.scss +++ b/res/themes/dharma/css/_dharma.scss @@ -193,6 +193,10 @@ $room-warning-bg-color: #fff8e3; $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; + /*** form elements ***/ // .mx_textinput is a container for a text input diff --git a/res/themes/light/css/_base.scss b/res/themes/light/css/_base.scss index dbab909f13..c03db23930 100644 --- a/res/themes/light/css/_base.scss +++ b/res/themes/light/css/_base.scss @@ -188,6 +188,10 @@ $room-warning-bg-color: #fff8e3; $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; + // ***** Mixins! ***** @define-mixin mx_DialogButton { diff --git a/src/components/structures/auth/ForgotPassword.js b/src/components/structures/auth/ForgotPassword.js index ab0f660be0..87e8c7d131 100644 --- a/src/components/structures/auth/ForgotPassword.js +++ b/src/components/structures/auth/ForgotPassword.js @@ -185,7 +185,7 @@ module.exports = React.createClass({ render: function() { const AuthPage = sdk.getComponent("auth.AuthPage"); const AuthHeader = sdk.getComponent("auth.AuthHeader"); - const AuthFooter = sdk.getComponent("auth.AuthFooter"); + const AuthBody = sdk.getComponent("auth.AuthBody"); const ServerConfig = sdk.getComponent("auth.ServerConfig"); const Spinner = sdk.getComponent("elements.Spinner"); @@ -272,7 +272,6 @@ module.exports = React.createClass({ { _t('Create an account') } - ); @@ -282,7 +281,9 @@ module.exports = React.createClass({ return ( - { resetPasswordJsx } + + {resetPasswordJsx} + ); }, diff --git a/src/components/structures/auth/Login.js b/src/components/structures/auth/Login.js index c64223ba48..28bed9af05 100644 --- a/src/components/structures/auth/Login.js +++ b/src/components/structures/auth/Login.js @@ -517,7 +517,7 @@ module.exports = React.createClass({ const Loader = sdk.getComponent("elements.Spinner"); const AuthPage = sdk.getComponent("auth.AuthPage"); const AuthHeader = sdk.getComponent("auth.AuthHeader"); - const AuthFooter = sdk.getComponent("auth.AuthFooter"); + const AuthBody = sdk.getComponent("auth.AuthBody"); const ServerConfig = sdk.getComponent("auth.ServerConfig"); const loader = this.state.busy ?
: null; @@ -560,7 +560,7 @@ module.exports = React.createClass({ return ( -
+ { header } { errorTextSection } { this.componentForStep(this.state.currentFlow) } @@ -570,8 +570,7 @@ module.exports = React.createClass({ { loginAsGuestJsx } - -
+ ); }, diff --git a/src/components/structures/auth/PostRegistration.js b/src/components/structures/auth/PostRegistration.js index fff326f6ac..1e24d0920a 100644 --- a/src/components/structures/auth/PostRegistration.js +++ b/src/components/structures/auth/PostRegistration.js @@ -62,18 +62,21 @@ module.exports = React.createClass({ const ChangeAvatar = sdk.getComponent('settings.ChangeAvatar'); const AuthPage = sdk.getComponent('auth.AuthPage'); const AuthHeader = sdk.getComponent('auth.AuthHeader'); + const AuthBody = sdk.getComponent("auth.AuthBody"); return ( -
- { _t('Set a display name:') } - - { _t('Upload an avatar:') } - - - { this.state.errorString } -
+ +
+ { _t('Set a display name:') } + + { _t('Upload an avatar:') } + + + { this.state.errorString } +
+ ); }, diff --git a/src/components/structures/auth/Registration.js b/src/components/structures/auth/Registration.js index 39f7964281..fe6fb078e3 100644 --- a/src/components/structures/auth/Registration.js +++ b/src/components/structures/auth/Registration.js @@ -397,7 +397,7 @@ module.exports = React.createClass({ render: function() { const AuthHeader = sdk.getComponent('auth.AuthHeader'); - const AuthFooter = sdk.getComponent('auth.AuthFooter'); + const AuthBody = sdk.getComponent("auth.AuthBody"); const AuthPage = sdk.getComponent('auth.AuthPage'); const InteractiveAuth = sdk.getComponent('structures.InteractiveAuth'); const Spinner = sdk.getComponent("elements.Spinner"); @@ -481,12 +481,13 @@ module.exports = React.createClass({ this.state.teamSelected.domain + "/icon.png" : null} /> - { header } - { registerBody } - { signIn } - { errorText } - - + + { header } + { registerBody } + { signIn } + { errorText } + + ); }, diff --git a/src/components/views/auth/AuthBody.js b/src/components/views/auth/AuthBody.js new file mode 100644 index 0000000000..9a078efb52 --- /dev/null +++ b/src/components/views/auth/AuthBody.js @@ -0,0 +1,27 @@ +/* +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. +*/ + +'use strict'; + +import React from 'react'; + +export default class AuthBody extends React.PureComponent { + render() { + return
+ { this.props.children } +
; + } +} diff --git a/src/components/views/auth/AuthPage.js b/src/components/views/auth/AuthPage.js index d5f82f7264..8cb8cf7d53 100644 --- a/src/components/views/auth/AuthPage.js +++ b/src/components/views/auth/AuthPage.js @@ -18,16 +18,20 @@ limitations under the License. 'use strict'; const React = require('react'); +import sdk from '../../../index'; module.exports = React.createClass({ displayName: 'AuthPage', render: function() { + const AuthFooter = sdk.getComponent('auth.AuthFooter'); + return (
{ this.props.children }
+
); },