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

src/routes/home/Home.css

@@ -32,6 +32,7 @@
   margin: 0 auto 40px;
   text-align: center;
   color: #fff;
+  text-shadow: 3px 3px 8px var(--colour-nearblack);
   font-size: 1.3em;
 }
 

src/routes/rsvp/Rsvp.css

@@ -19,28 +19,36 @@
 }
 
 .bgImageFocus {
-  filter: grayscale(0.4) brightness(1);
+  filter: grayscale(0.4) brightness(0.8);
 }
 
 .container {
   padding-top: 5vh;
   margin: 0 20px;
+  text-align: center;
 }
 
 .heading {
   font-family: var(--font-family-cursive);
-  color: var(--colour-nearblack);
   text-align: center;
+  margin-top: 0;
+  font-size: 4em;
+  color: #fff;
+  text-shadow: 2px 2px 6px var(--colour-nearblack);
 }
 
 .flexContainer {
   display: flex;
-  flex-direction: row;
   flex-flow: row wrap;
+  justify-content: space-around;
 }
 
-@media (--sm-viewport) {
-  .flexContainer {
-    flex-flow: row nowrap;
-  }
+.notes {
+  display: inline-block;
+  margin: 0 auto 40px;
+  padding: 0 15px;
+  border: 3px solid #fff;
+  border-radius: 14px;
+  background-color: rgba(0, 0, 0, 0.4);
+  color: #fff;
 }

src/routes/rsvp/Rsvp.js

@@ -35,12 +35,15 @@ class Rsvp extends React.Component {
           ].join(' ')}
         />
         <div className={s.container}>
-          <h1 className={s.heading}>Répondez, s&#39;il vous plaît</h1>
+          <h1 className={s.heading}>Odpovezte prosím</h1>
           <div className={s.flexContainer}>
             {this.props.people.map(person => (
               <RsvpCard key={person.key} person={person} focusCallback={this.focusCallback} />
             ))}
           </div>
+          <div className={s.notes}>
+            <p>You can modify the above details up until XX/XX/XXXX</p>
+          </div>
         </div>
       </div>
     );

src/server.js

@@ -120,7 +120,12 @@ app.post('/rsvp/save', (req, res) => {
         where: { key: req.body.key },
       }).then(data => {
         if (data.completed) {
-          sendSlackMsgWithDebounce(`${data.firstname} ${data.lastname} has saved their RSVP:\n${data.firstname} ${data.attending ? 'is' : 'is not'} coming.${data.attending ? `\nStarter: ${starters[data.starter]}\nMain: ${mains[data.main]}\nDietary requirements: ${data.dietary ? data.dietary : 'None'}` : ''}`, req.body.key);
+          const attending = `\nAttending: ${data.attending ? 'Yes' : 'No'}`;
+          const starter = (data.attending && data.starter !== -1) ? `\nStarter: ${starters[data.starter]}` : '';
+          const main = (data.attending && data.main !== -1) ? `\nMain: ${mains[data.main]}` : '';
+          const dietary = (data.attending && data.dietary) ? `\nDietary requirements: ${data.dietary}` : '';
+
+          sendSlackMsgWithDebounce(`${data.firstname} ${data.lastname} has saved their RSVP:${attending}${starter}${main}${dietary}`, req.body.key);
         }
         res.json({
           success: true,