From bf0b2ea101441cb961eef4b2881cbbef95615323 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Fri, 1 Feb 2019 12:10:55 -0600
Subject: [PATCH] Add glass effect

---
 src/components/views/auth/VectorAuthPage.js | 33 ++++++++++++++++++---
 1 file changed, 29 insertions(+), 4 deletions(-)

diff --git a/src/components/views/auth/VectorAuthPage.js b/src/components/views/auth/VectorAuthPage.js
index 53ef8019..dac1eae3 100644
--- a/src/components/views/auth/VectorAuthPage.js
+++ b/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>