Replace home page image

src/components/RsvpButton/RsvpButton.css

@@ -71,9 +71,9 @@
 .invalidMsg {
   display: none;
   padding: 10px 16px;
-  border: 4px solid var(--colour-red);
+  border: 2px solid var(--colour-red);
   border-radius: 14px;
-  background: transparent;
+  background: var(--colour-nearblack);
   color: #fff;
   text-decoration: none;
   font-size: 18px;
@@ -83,6 +83,7 @@
 
 .invalidMsgVisible {
   display: inline-block;
+  opacity: 0.9;
 }
 
 .button {
@@ -95,7 +96,7 @@
   outline: 0;
   border: 4px solid #fff;
   border-radius: 14px;
-  background: transparent;
+  background: var(--colour-nearblack);
   color: #fff;
   text-align: center;
   text-decoration: none;
@@ -107,7 +108,7 @@
 
 .button:hover,
 .button:focus {
-  opacity: 1;
+  opacity: 0.9;
   box-shadow: 0 0 4px #fff;
 }
 

src/components/RsvpButton/RsvpButton.js

@@ -28,11 +28,16 @@ class RsvpButton extends React.Component {
   }
 
   handleRsvpBlur = () => {
+    this.setState({ inputInvalidMsg: null });
     if (this.props.focusCallback) {
       this.props.focusCallback(false);
     }
   }
 
+  handleRsvpChange = () => {
+    this.setState({ inputInvalidMsg: null });
+  }
+
   handleFormSubmit = (event) => {
     event.preventDefault();
     fetch(`rsvp/${this.rsvpInput.value}`)
@@ -90,6 +95,7 @@ class RsvpButton extends React.Component {
                 ref={(input) => { this.rsvpInput = input; }}
                 onFocus={this.handleRsvpFocus}
                 onBlur={this.handleRsvpBlur}
+                onChange={this.handleRsvpChange}
                 id="code"
                 type="text"
                 name="code"

src/components/variables.css

@@ -3,7 +3,7 @@
    * Typography
    * ======================================================================== */
 
-  --font-family-base: 'Poppins', 'Segoe UI', 'HelveticaNeue-Light', sans-serif;
+  --font-family-base: 'Palanquin Dark', 'Segoe UI', 'HelveticaNeue-Light', sans-serif;
   --font-family-cursive: 'Yesteryear', cursive;
 
   /*

src/routes/home/Home.css

@@ -5,21 +5,21 @@
   height: 100vh;
 }
 
-.churchImage {
+.bgImage {
   position: fixed;
   width: 100vw;
   height: 100vh;
-  background: url('/img/church_2500.jpg');
+  background: url('/img/prague_2560.jpg');
   background-size: cover;
-  background-position-x: 50%;
+  background-position-x: 54%;
   background-color: #c1c1c1;
-  filter: grayscale(1) brightness(0.4);
+  filter: grayscale(1) brightness(0.6);
   z-index: -1;
   transition: filter ease-in-out 0.5s;
 }
 
-.churchImageFocus {
+.bgImageFocus {
-  filter: grayscale(0.4) brightness(0.6);
+  filter: grayscale(0.4) brightness(1);
 }
 
 .container {

src/routes/home/Home.js

@@ -10,8 +10,8 @@ class Home extends React.Component {
     this.state = {};
   }
 
-  focusChurchImage = (focus) => {
+  focusBgImage = (focus) => {
-    this.setState({ focusChurch: focus });
+    this.setState({ focusBgImage: focus });
   }
 
   render() {
@@ -19,8 +19,8 @@ class Home extends React.Component {
       <div className={s.root}>
         <div
           className={[
-            s.churchImage,
+            s.bgImage,
-            this.state.focusChurch ? s.churchImageFocus : null,
+            this.state.focusBgImage ? s.bgImageFocus : null,
           ].join(' ')}
         />
         <div className={s.container}>
@@ -31,7 +31,7 @@ class Home extends React.Component {
           </div>
           <div className={s.rsvp}>
             <RsvpButton
-              focusCallback={this.focusChurchImage}
+              focusCallback={this.focusBgImage}
             />
           </div>
         </div>