Initial attempt at a homepage design

src/components/Html.js

@@ -21,6 +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=Poppins:500|Yesteryear" />
           {style && <style id="css" dangerouslySetInnerHTML={{ __html: style }} />}
         </head>
         <body>

src/components/RsvpButton/RsvpButton.css

@@ -0,0 +1,91 @@
+@import '../variables.css';
+
+.root {
+  margin: 0 auto;
+  max-width: 420px;
+  position: relative;
+}
+
+.rsvp,
+.rsvpForm {
+  position: absolute;
+  width: 100%;
+  transition: opacity ease-in-out 0.25s;
+  display: none;
+  opacity: 0;
+}
+
+.rsvpVisible,
+.rsvpFormVisible {
+  display: block;
+  opacity: 1;
+}
+
+.formGroup {
+  margin-bottom: 15px;
+  display: inline-block;
+}
+
+.rsvpGroup {
+  width: 60%;
+}
+
+.rsvpButtonGroup {
+  width: 30%;
+  float: right;
+}
+
+.label {
+  display: inline-block;
+  position: fixed;
+  top: -1000px;
+  left: -1000px;
+}
+
+.input {
+  display: block;
+  box-sizing: border-box;
+  padding: 12px 16px;
+  width: 100%;
+  height: 50px;
+  opacity: 0.75;
+  outline: 0;
+  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;
+}
+
+.input:focus {
+  opacity: 1;
+  box-shadow: 0 0 4px #fff;
+}
+
+.button {
+  display: block;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 10px 16px;
+  width: 100%;
+  opacity: 0.75;
+  outline: 0;
+  border: 4px solid #fff;
+  border-radius: 14px;
+  background: transparent;
+  color: #fff;
+  text-align: center;
+  text-decoration: none;
+  font-size: 18px;
+  line-height: 1.3333333;
+  cursor: pointer;
+  transition: opacity ease-in-out 0.25s, box-shadow ease-in-out 0.25s;
+}
+
+.button:hover,
+.button:focus {
+  opacity: 1;
+  box-shadow: 0 0 4px #fff;
+}

src/components/RsvpButton/RsvpButton.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import withStyles from 'isomorphic-style-loader/lib/withStyles';
+import s from './RsvpButton.css';
+
+class RsvpButton extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  showRsvpForm = () => {
+    this.setState({ showRsvpForm: true });
+    setTimeout(() => {
+      this.rsvpInput.focus();
+    }, 250);
+  }
+
+  render() {
+    return (
+      <div className={s.root}>
+        <div
+          className={[
+            s.rsvp,
+            !this.state.showRsvpForm ? s.rsvpVisible : null,
+          ].join(' ')}
+        >
+          <button className={s.button} onClick={this.showRsvpForm}>
+            RSVP
+          </button>
+        </div>
+        <div
+          className={[
+            s.rsvpForm,
+            this.state.showRsvpForm ? s.rsvpFormVisible : null,
+          ].join(' ')}
+        >
+          <form method="post" action="/rsvp">
+            <div className={[s.formGroup, s.rsvpGroup].join(' ')}>
+              <label className={s.label} htmlFor="code">
+                Enter your RSVP code
+              </label>
+              <input
+                className={s.input}
+                ref={(input) => { this.rsvpInput = input; }}
+                id="code"
+                type="text"
+                name="code"
+                placeholder="Enter your RSVP code"
+              />
+            </div>
+            <div className={[s.formGroup, s.rsvpButtonGroup].join(' ')}>
+              <button className={s.button} type="submit">
+                RSVP
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default withStyles(s)(RsvpButton);

src/components/RsvpButton/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "RsvpButton",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./RsvpButton.js"
+}

src/components/RsvpCard/RsvpCard.js

@@ -22,13 +22,16 @@ class RsvpCard extends React.Component {
     }).isRequired,
   };
 
-  state = {
+  constructor(props) {
-    detailsVisible: this.props.person.attending,
+    super(props);
-    saveAttending: this.props.person.attending ? 'saved' : null,
+    this.state = {
-    saveStarter: this.props.person.starter !== '-1' ? 'saved' : null,
+      detailsVisible: this.props.person.attending,
-    saveMain: this.props.person.main !== '-1' ? 'saved' : null,
+      saveAttending: this.props.person.attending ? 'saved' : null,
-    saveDietary: this.props.person.dietary ? 'saved' : null,
+      saveStarter: this.props.person.starter !== '-1' ? 'saved' : null,
-  };
+      saveMain: this.props.person.main !== '-1' ? 'saved' : null,
+      saveDietary: this.props.person.dietary ? 'saved' : null,
+    };
+  }
 
   isRSVPComplete(prop, value) {
     function isOK(str) {

src/components/variables.css

@@ -3,7 +3,8 @@
    * Typography
    * ======================================================================== */
 
-  --font-family-base: 'Segoe UI', 'HelveticaNeue-Light', sans-serif;
+  --font-family-base: 'Poppins', 'Segoe UI', 'HelveticaNeue-Light', sans-serif;
+  --font-family-cursive: 'Yesteryear', cursive;
 
   /*
    * Layout
@@ -15,20 +16,20 @@
    * Media queries breakpoints
    * ======================================================================== */
 
-/*  --screen-xs-min: 480px;  /* Extra small screen / phone */
-/*  --screen-sm-min: 768px;  /* Small screen / tablet */
-/*  --screen-md-min: 992px;  /* Medium screen / desktop */
-/*  --screen-lg-min: 1200px; /* Large screen / wide desktop */
-
   @custom-media --xs-viewport (min-width: 480px);
   @custom-media --sm-viewport (min-width: 768px);
   @custom-media --md-viewport (min-width: 992px);
   @custom-media --lg-viewport (min-width: 1200px);
 
-  --colour-primary: #6495ED;
+  /*
-  --colour-secondary: #2A6FEB;
+   * Colour palette
-  --colour-tertiary: #2A6FEB;
+   * ======================================================================== */
-  --colour-grey: #CCC;
+
-  --colour-green: #87EDA2;
+  --colour-nearblack: #282828;
-  --colour-red: #FA7575;
+  --colour-primary: #6495ed;
+  --colour-secondary: #2a6feb;
+  --colour-tertiary: #2a6feb;
+  --colour-grey: #ccc;
+  --colour-green: #87eda2;
+  --colour-red: #fa7575;
 }

src/routes/admin/index.js

@@ -11,17 +11,13 @@ export default {
 
   async action() {
     const resp = await fetchQL('{getAllPersons{key,firstname,lastname,email,password,completed,starter,main}}');
+    const { data } = await resp.json();
+    const people = data.getAllPersons || [];
 
     const food = {
       starters: starters.map(name => ({ name, total: 0 })),
       mains: mains.map(name => ({ name, total: 0 })),
     };
-    let people = await resp.json();
-    if (people.data && people.data.getAllPersons) {
-      people = people.data.getAllPersons;
-    } else {
-      people = [];
-    }
 
     const Admin = await new Promise((resolve) => {
       require.ensure([], (require) => resolve(require('./Admin').default), 'admin');

src/routes/home/Home.css

@@ -1,73 +1,43 @@
 @import '../../components/variables.css';
 
 .root {
-  padding-left: 20px;
+  width: 100vw;
-  padding-right: 20px;
+  height: 100vh;
 }
 
-.formContainer {
+.churchImage {
-  margin: 0 auto;
+  position: fixed;
-  max-width: 420px;
+  width: 100vw;
+  height: 100vh;
+  background-image: url('/img/church_2500.jpg');
+  background-size: cover;
+  background-position-x: 40%;
+  filter: grayscale(1) brightness(0.4);
+  z-index: -1;
 }
 
-.formGroup {
+.container {
-  margin-bottom: 15px;
+  padding-top: 5vh;
+  margin: 0 20px;
 }
 
-.label {
+.headings {
-  display: inline-block;
+  max-width: 640px;
-  margin-bottom: 5px;
+  margin: 0 auto 40px;
-  max-width: 100%;
-  font-weight: 700;
-}
-
-.input {
-  display: block;
-  box-sizing: border-box;
-  padding: 10px 16px;
-  width: 100%;
-  height: 46px;
-  outline: 0;
-  border: 1px solid var(--colour-grey);
-  border-radius: 0;
-  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, 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);
-}
-
-.button {
-  display: block;
-  box-sizing: border-box;
-  margin: 0;
-  padding: 10px 16px;
-  width: 100%;
-  outline: 0;
-  border: 1px solid var(--colour-secondary);
-  border-radius: 0;
-  background: var(--colour-primary);;
-  color: #fff;
   text-align: center;
-  text-decoration: none;
+  color: var(--colour-nearblack);
-  font-size: 18px;
-  line-height: 1.3333333;
-  cursor: pointer;
 }
 
-.button:hover {
+.headings > * {
-  background: var(--colour-secondary);
+  margin: 0 0 20px;
+  font-size: 2.5em;
 }
 
-.button:focus {
+.headings h3 {
-  border-color: var(--colour-tertiary);
+  margin-top: 40px;
-  box-shadow: 0 0 8px var(--colour-secondary);
+  font-family: var(--font-family-cursive);
 }
 
-
+.rsvp {
+  padding-top: 15vh;
+}

src/routes/home/Home.js

@@ -1,31 +1,22 @@
 import React from 'react';
 import withStyles from 'isomorphic-style-loader/lib/withStyles';
 import s from './Home.css';
+import RsvpButton from '../../components/RsvpButton';
 
 class Home extends React.Component {
   render() {
     return (
       <div className={s.root}>
-        <div className={s.formContainer}>
+        <div className={s.churchImage} />
-          <form method="post" action="/rsvp">
+        <div className={s.container}>
-            <div className={s.formGroup}>
+          <div className={s.headings}>
-              <label className={s.label} htmlFor="code">
+            <h1>Daniel and Hana</h1>
-                Enter your RSVP code:
+            <h2>are getting married</h2>
-              </label>
+            <h3>- 27th July 2017 -</h3>
-              <input
+          </div>
-                className={s.input}
+          <div className={s.rsvp}>
-                id="code"
+            <RsvpButton />
-                type="text"
+          </div>
-                name="code"
-                autoFocus
-              />
-            </div>
-            <div className={s.formGroup}>
-              <button className={s.button} type="submit">
-                RSVP
-              </button>
-            </div>
-          </form>
         </div>
       </div>
     );

src/routes/login/Login.css

@@ -11,10 +11,6 @@
   max-width: 380px;
 }
 
-.lead {
-  font-size: 1.25em;
-}
-
 .formGroup {
   margin-bottom: 15px;
 }

src/routes/login/Login.js

@@ -12,7 +12,6 @@ class Login extends React.Component {
       <div className={s.root}>
         <div className={s.container}>
           <h1>{this.props.title}</h1>
-          <p className={s.lead}>Log in with your username or company email address.</p>
           <div className={s.formGroup}>
             <a className={s.facebook} href="/login/facebook">
               <svg