Add a background image

public/index.html

@@ -7,6 +7,7 @@
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
     <title>Daniel and Hana's Wedding</title>
+    <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
   </head>
   <body>
     <noscript>

src/App.js

@@ -1,11 +1,12 @@
 import React, { Component } from 'react';
 import { BrowserRouter } from 'react-router-dom';
 
+import BackgroundImage from './components/BackgroundImage';
 import Menu from './components/Menu';
 import Login from './components/Login';
 import Admin from './routes/Admin';
 
-import { auth, db } from './rebase';
+import { auth, bucket, db } from './rebase';
 
 import './App.css';
 
@@ -20,6 +21,7 @@ class App extends Component {
   constructor(props) {
     super(props);
     this.state = {
+      bgImgUrl: null,
       user: {...emptyUser},
     }
     this.authStateEvents = {};
@@ -48,6 +50,11 @@ class App extends Component {
         });
       }
     });
+
+    // Get BG Image URL
+    bucket.ref('/public/images/IMG_1212.JPG').getDownloadURL().then(bgImgUrl => {
+      this.setState({ bgImgUrl });
+    });
   }
 
   render() {
@@ -65,7 +72,9 @@ class App extends Component {
             }
           </div>
         </BrowserRouter>
-        <Menu user={this.state.user} />
+        { this.state.user.uid
+          ? <Menu user={this.state.user} />
+          : <BackgroundImage url={this.state.bgImgUrl} /> }
       </div>
     );
   }

src/components/BackgroundImage.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from 'styled-components';
+
+class BackgroundImage extends React.Component {
+
+  render() {
+    return (
+      <BackgroundImg url={this.props.url} />
+    )
+  }
+}
+
+const BackgroundImg = styled.div`
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: ${props => props.url ? `url(${props.url}) no-repeat center center` : ''};
+  background-size: cover;
+  filter: blur(5px);
+`;
+
+export default BackgroundImage;

src/components/Login.js

@@ -1,8 +1,9 @@
 import React from 'react';
-import { auth } from '../rebase';
 import firebase from 'firebase';
 import axios from 'axios';
 import styled from 'styled-components';
+import { auth } from '../rebase';
+import Colours from '../Colours';
 
 class Login extends React.Component {
   state = {
@@ -136,22 +137,36 @@ class Login extends React.Component {
       state = 'password';
     }
     return (
-      <LoginContainer>
+      <div>
-        { state === 'intro' ? this.renderIntro() : '' }
+        <LoginOverlay />
-        { state === 'password' ? this.renderPasswordInput() : '' }
+        <LoginContainer>
-      </LoginContainer>
+          { state === 'intro' ? this.renderIntro() : '' }
+          { state === 'password' ? this.renderPasswordInput() : '' }
+        </LoginContainer>
+      </div>
     )
   }
 }
 
+const LoginOverlay = styled.div`
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index:24;
+  background-color: ${Colours.white};
+  opacity: .6;
+`;
 const LoginContainer = styled.div`
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
   padding: 5%;
-  border: 1px solid black;
   text-align: center;
+  z-index: 25;
+  background-color: ${Colours.white};
 `
 const Link = styled.a`
   text-decoration: none;

src/index.css

@@ -1,5 +1,5 @@
 body {
   margin: 0;
   padding: 0;
-  font-family: sans-serif;
+  font-family: 'Inconsolata', monospace;
 }