Add glass effect

src/components/views/auth/VectorAuthPage.js

@@ -29,14 +29,39 @@ module.exports = React.createClass({
     render: function() {
         const AuthFooter = sdk.getComponent('auth.AuthFooter');
 
-        const style = {
+        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={style}>
-                <div className="mx_AuthPage_modal">
-                    { this.props.children }
+            <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>