diff --git a/res/css/_components.scss b/res/css/_components.scss
index 6532fcd74c6..be36ea7a5fc 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 00000000000..97632c2e3f0
--- /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 0d9e59e7df2..6ad5b0a4595 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 426215dc62d..fb0b3e666b5 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 8dae4ca64e7..9e327507719 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 c9f62fbe6b3..1678c9b586a 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 dbab909f130..c03db239301 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 ab0f660be07..87e8c7d1310 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 c64223ba482..28bed9af051 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 }
-
-
- { _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 39f7964281f..fe6fb078e3b 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 00000000000..9a078efb520
--- /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 d5f82f7264a..8cb8cf7d539 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 }
+
);
},