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-radius: 0;
-  background-color: #fff;
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  border: 3px solid #fff;
+  border-radius: 14px;
+  background: #fff;
   color: #616161;
   font-size: 18px;
   line-height: 1.3333333;
-  transition: border-color ease-in-out 0.15s,
-              box-shadow ease-in-out 0.15s,
-              background-color ease-in-out 0.15s;
+  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
 }
 
 .input:focus {
-  border-color: var(--colour-tertiary);
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 116, 194, 0.6);
+  opacity: 1;
+  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 .4s;
+  transition: opacity ease-in-out 0.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}