More updates to the RSVP page

Slack message improvements
Font changes

src/components/Html.js

@@ -21,7 +21,7 @@ class Html extends React.Component {
           <meta name="description" content={description} />
           <meta name="viewport" content="width=device-width, initial-scale=1" />
           <link rel="apple-touch-icon" href="apple-touch-icon.png" />
-          <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Palanquin+Dark|Yesteryear" />
+          <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Palanquin+Dark|Niconne" />
           {style && <style id="css" dangerouslySetInnerHTML={{ __html: style }} />}
         </head>
         <body>

src/components/RsvpCard/RsvpCard.css

@@ -1,9 +1,6 @@
 @import '../variables.css';
 
 .root {
-  display: flex;
-  flex-flow: row wrap;
-  flex-direction: column;
   width: 100%;
   margin: 0 0 40px;
   padding: 20px;
@@ -11,11 +8,13 @@
   border-radius: 14px;
   background-color: rgba(0, 0, 0, 0.4);
   color: #fff;
+  text-align: left;
 }
 
 @media (--sm-viewport) {
   .root {
-    width: 50%;
+    width: 40%;
+    max-width: 400px;
   }
 }
 
@@ -41,11 +40,14 @@
   outline: 0;
   border: 3px solid #fff;
   border-radius: 14px;
-  background: #fff;
+  background-color: #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;
+  transition:
+    border-color ease-in-out 0.3s,
+    box-shadow ease-in-out 0.3s,
+    background-color ease-in-out 0.3s;
 }
 
 .input:focus {

src/components/RsvpCard/RsvpCard.js

@@ -73,22 +73,15 @@ class RsvpCard extends React.Component {
           });
 
           if (!this.state.saveCompleted) {
-            this.setState({ saveSompleted: true });
+            this.setState({ saveCompleted: true });
             this.saveData('completed', true);
           }
-
-          setTimeout(() => {
-            this.setState({
-              summaryState: null,
-              summary: null,
-            });
-          }, 5000);
         }
 
         state[stateKey] = data.success ? 'saved' : 'error';
         setTimeout(() => {
           this.setState(state);
-        }, 500);
+        }, 1000);
       }).catch(() => {
         state[stateKey] = 'error';
       });
@@ -106,6 +99,14 @@ class RsvpCard extends React.Component {
     this.saveData('dietary', event.target.value);
   };
 
+  handleDietaryChange = (event) => {
+    const value = event.target.value;
+    clearTimeout(this.dietaryChangeTimer);
+    this.dietaryChangeTimer = setTimeout(() => {
+      this.saveData('dietary', value);
+    }, 5000);
+  }
+
   handleStarterChange = (event) => {
     this.saveData('starter', event.target.value);
   };
@@ -245,8 +246,10 @@ class RsvpCard extends React.Component {
                 name="dietary"
                 autoComplete="off"
                 defaultValue={this.props.person.dietary}
+                onChange={this.handleDietaryChange}
                 onBlur={this.handleDietaryBlur}
                 onFocus={this.props.focusCallback}
+                placeholder="None"
               />
               <div className={s.iconContainer}>
                 {this.state.saveDietary === 'saved' ? <MdCheck size={30} color="green" /> : null}

src/components/variables.css

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