Bit of visual TLC for the RSVP page

src/components/RsvpCard/RsvpCard.css

@@ -5,8 +5,12 @@
   flex-flow: row wrap;
   flex-direction: column;
   width: 100%;
-  margin: 0;
+  margin: 0 0 40px;
   padding: 20px;
+  border: 3px solid #fff;
+  border-radius: 14px;
+  background-color: rgba(0, 0, 0, 0.4);
+  color: #fff;
 }
 
 @media (--sm-viewport) {
@@ -30,25 +34,23 @@
 .input {
   display: block;
   box-sizing: border-box;
-  padding: 10px 16px;
+  padding: 12px 16px;
   width: 100%;
-  height: 46px;
+  height: 50px;
+  opacity: 0.75;
   outline: 0;
-  border: 1px solid var(--colour-grey);
+  border: 3px solid #fff;
-  border-radius: 0;
+  border-radius: 14px;
-  background-color: #fff;
+  background: #fff;
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
   color: #616161;
   font-size: 18px;
   line-height: 1.3333333;
-  transition: border-color ease-in-out 0.15s,
+  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-              box-shadow ease-in-out 0.15s,
-              background-color ease-in-out 0.15s;
 }
 
 .input:focus {
-  border-color: var(--colour-tertiary);
+  opacity: 1;
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 116, 194, 0.6);
+  box-shadow: 0 0 4px #fff;
 }
 
 .inputSuccess {
@@ -75,24 +77,11 @@
 }
 
 .rsvpSummary {
-  position: fixed;
-  right: 10px;
-  bottom: 10px;
-  left: 10px;
-  padding: 10px;
-  text-align: center;
   opacity: 0;
-  border-radius: 0;
-  background-color: #fff;
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-  color: #616161;
   font-size: 18px;
-  pointer-events: none;
+  transition: opacity ease-in-out 0.4s;
-  transition: opacity ease-in-out .4s;
 }
 
 .rsvpSummarySuccess {
   opacity: 1;
-  background-color: var(--colour-green);
 }
-

src/components/RsvpCard/RsvpCard.js

@@ -7,6 +7,7 @@ import { starters, mains } from '../../config';
 
 class RsvpCard extends React.Component {
   static propTypes = {
+    focusCallback: PropTypes.func,
     className: PropTypes.string,
     person: PropTypes.shape({
       key: PropTypes.string,
@@ -140,6 +141,7 @@ class RsvpCard extends React.Component {
                 name="attending"
                 defaultValue="-1"
                 onChange={this.handleAttendingChange}
+                onFocus={this.props.focusCallback}
               >
                 <option value="-1" disabled>Will you be attending?</option>
                 <option value="true">
@@ -160,6 +162,7 @@ class RsvpCard extends React.Component {
                 name="attending"
                 defaultValue={this.props.person.attending === true ? 'true' : 'false'}
                 onChange={this.handleAttendingChange}
+                onFocus={this.props.focusCallback}
               >
                 <option value="true">
                   Yes
@@ -189,6 +192,7 @@ class RsvpCard extends React.Component {
                 name="starter"
                 defaultValue={this.props.person.starter}
                 onChange={this.handleStarterChange}
+                onFocus={this.props.focusCallback}
               >
                 {this.props.person.starter === '-1' ? <option value="-1" disabled>Please select a starter</option> : null}
                 {starters.map((starter, index) => (
@@ -214,6 +218,7 @@ class RsvpCard extends React.Component {
                 name="main"
                 defaultValue={this.props.person.main}
                 onChange={this.handleMainChange}
+                onFocus={this.props.focusCallback}
               >
                 {this.props.person.main === '-1' ? <option value="-1" disabled>Please select a main course</option> : null}
                 {mains.map((main, index) => (
@@ -238,8 +243,10 @@ class RsvpCard extends React.Component {
                 id="dietary"
                 type="text"
                 name="dietary"
+                autoComplete="off"
                 defaultValue={this.props.person.dietary}
                 onBlur={this.handleDietaryBlur}
+                onFocus={this.props.focusCallback}
               />
               <div className={s.iconContainer}>
                 {this.state.saveDietary === 'saved' ? <MdCheck size={30} color="green" /> : null}

src/routes/rsvp/Rsvp.css

@@ -1,14 +1,36 @@
 @import '../../components/variables.css';
 
 .root {
-  padding-left: 20px;
+  width: 100vw;
-  padding-right: 20px;
+  height: 100vh;
+}
+
+.bgImage {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  background: url('/img/cervenalhota_2560.jpg');
+  background-size: cover;
+  background-position-x: 30%;
+  background-color: #c1c1c1;
+  filter: grayscale(1) brightness(0.6);
+  z-index: -1;
+  transition: filter ease-in-out 0.5s;
+}
+
+.bgImageFocus {
+  filter: grayscale(0.4) brightness(1);
 }
 
 .container {
-  margin: 0 auto;
+  padding-top: 5vh;
-  padding: 0 0 40px;
+  margin: 0 20px;
-  max-width: var(--max-content-width);
+}
+
+.heading {
+  font-family: var(--font-family-cursive);
+  color: var(--colour-nearblack);
+  text-align: center;
 }
 
 .flexContainer {

src/routes/rsvp/Rsvp.js

@@ -16,13 +16,30 @@ class Rsvp extends React.Component {
     })).isRequired,
   };
 
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  focusCallback = () => {
+    this.setState({ focusBgImage: focus });
+  }
+
   render() {
     return (
       <div className={s.root}>
+        <div
+          className={[
+            s.bgImage,
+            this.state.focusBgImage ? s.bgImageFocus : null,
+          ].join(' ')}
+        />
         <div className={s.container}>
-          <h1>{this.props.title}</h1>
+          <h1 className={s.heading}>Répondez, s&#39;il vous plaît</h1>
           <div className={s.flexContainer}>
-            {this.props.people.map(person => <RsvpCard key={person.key} person={person} />)}
+            {this.props.people.map(person => (
+              <RsvpCard key={person.key} person={person} focusCallback={this.focusCallback} />
+            ))}
           </div>
         </div>
       </div>