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"