Merge pull request #8364 from jryans/auth-bg
Add auth background image and update Riot logopull/8365/head
After Width: | Height: | Size: 530 KiB |
Before Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 8.3 KiB |
Before Width: | Height: | Size: 9.3 KiB |
Before Width: | Height: | Size: 7.9 KiB |
Before Width: | Height: | Size: 8.1 KiB |
Before Width: | Height: | Size: 5.6 KiB |
After Width: | Height: | Size: 21 KiB |
After Width: | Height: | Size: 8.8 KiB |
After Width: | Height: | Size: 21 KiB |
After Width: | Height: | Size: 8.8 KiB |
Before Width: | Height: | Size: 2.2 KiB |
Before Width: | Height: | Size: 3.0 KiB |
Before Width: | Height: | Size: 2.4 KiB |
Before Width: | Height: | Size: 2.4 KiB |
Before Width: | Height: | Size: 1.3 KiB |
Before Width: | Height: | Size: 2.0 KiB |
Before Width: | Height: | Size: 2.2 KiB |
Before Width: | Height: | Size: 8.7 KiB |
@ -0,0 +1,70 @@ |
||||
/* |
||||
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'; |
||||
|
||||
const React = require('react'); |
||||
import sdk from 'matrix-react-sdk/lib/index'; |
||||
|
||||
module.exports = React.createClass({ |
||||
displayName: 'VectorAuthPage', |
||||
|
||||
statics: { |
||||
replaces: 'AuthPage', |
||||
}, |
||||
|
||||
render: function() { |
||||
const AuthFooter = sdk.getComponent('auth.AuthFooter'); |
||||
|
||||
const pageStyle = { |
||||
background: 'center/cover fixed url(../../themes/riot/img/backgrounds/valley.jpg)', |
||||
}; |
||||
|
||||
const modalStyle = { |
||||
position: 'relative', |
||||
background: 'initial', |
||||
}; |
||||
|
||||
const blurStyle = { |
||||
position: 'absolute', |
||||
top: 0, |
||||
right: 0, |
||||
bottom: 0, |
||||
left: 0, |
||||
filter: 'blur(10px)', |
||||
background: pageStyle.background, |
||||
}; |
||||
|
||||
const modalContentStyle = { |
||||
display: 'flex', |
||||
zIndex: 1, |
||||
background: 'rgba(255, 255, 255, 0.59)', |
||||
borderRadius: '4px', |
||||
}; |
||||
|
||||
return ( |
||||
<div className="mx_AuthPage" style={pageStyle}> |
||||
<div className="mx_AuthPage_modal" style={modalStyle}> |
||||
<div className="mx_AuthPage_modalBlur" style={blurStyle}></div> |
||||
<div className="mx_AuthPage_modalContent" style={modalContentStyle}> |
||||
{ this.props.children } |
||||
</div> |
||||
</div> |
||||
<AuthFooter /> |
||||
</div> |
||||
); |
||||
}, |
||||
}); |