Hide RSVP button on blur

darken bg images
update copy
change URLs for routes

src/components/Navigation/Navigation.js

@@ -16,9 +16,9 @@ class Navigation extends React.Component {
       <div className={s.root} role="navigation">
         <div className={s.container}>
           <Link className={[s.link, this.props.current === 'home' ? s.active : null].join(' ')} to="/">RSVP</Link>
-          <Link className={[s.link, this.props.current === 'ceremony' ? s.active : null].join(' ')} to="/ceremony">Church</Link>
+          <Link className={[s.link, this.props.current === 'ceremony' ? s.active : null].join(' ')} to="/church">Church</Link>
-          <Link className={[s.link, this.props.current === 'reception' ? s.active : null].join(' ')} to="/reception">Venue</Link>
+          <Link className={[s.link, this.props.current === 'reception' ? s.active : null].join(' ')} to="/venue">Venue</Link>
-          <Link className={[s.link, this.props.current === 'accomodation' ? s.active : null].join(' ')} to="/accomodation">Hotels</Link>
+          <Link className={[s.link, this.props.current === 'accomodation' ? s.active : null].join(' ')} to="/hotels">Hotels</Link>
           <Link className={[s.link, this.props.current === 'transport' ? s.active : null].join(' ')} to="/transport">Transport</Link>
         </div>
       </div>

src/components/RsvpButton/RsvpButton.js

@@ -32,6 +32,7 @@ class RsvpButton extends React.Component {
     if (this.props.focusCallback) {
       this.props.focusCallback(false);
     }
+    this.setState({ showRsvpForm: false });
   }
 
   handleRsvpChange = () => {

src/routes/accomodation/Accomodation.css

@@ -13,7 +13,7 @@
   background-size: cover;
   background-position-x: 54%;
   background-color: #c1c1c1;
-  filter: grayscale(1) brightness(0.6);
+  filter: grayscale(1) brightness(0.4);
   z-index: -1;
   transition: filter ease-in-out 0.5s;
 }

src/routes/accomodation/Accomodation.js

@@ -49,7 +49,7 @@ class Accomodation extends React.Component {
             <h1>Local hotels</h1>
           </div>
           <div className={s.content}>
-            <h3>The following hotels are near Offley Place</h3>
+            <h3>The following hotels are near Offley Place:</h3>
             <ul>
               {hotels.map((hotel, index) => (
                 <li key={index}><a className={s.hotelLink} href={hotel.url}>{hotel.title}</a></li>

src/routes/accomodation/index.js

@@ -4,11 +4,11 @@ import Layout from '../../components/Layout';
 
 export default {
 
-  path: '/accomodation',
+  path: '/hotels',
 
   action() {
     return {
-      title: 'Accomodation',
+      title: 'Hotels',
       component: <Layout current="accomodation"><Accomodation /></Layout>,
     };
   },

src/routes/ceremony/Ceremony.css

@@ -13,7 +13,7 @@
   background-size: cover;
   background-position-x: 54%;
   background-color: #c1c1c1;
-  filter: grayscale(1) brightness(0.6);
+  filter: grayscale(1) brightness(0.4);
   z-index: -1;
   transition: filter ease-in-out 0.5s;
 }

src/routes/ceremony/Ceremony.js

@@ -25,11 +25,10 @@ class Ceremony extends React.Component {
           </div>
           <div className={s.content}>
             <h3>When</h3>
-            <p>The Ceremony begins at 1pm</p>
+            <p>The ceremony begins at 1pm</p>
             <h3>Where</h3>
-            <p>The Church is located at the southern end of Kings Langley high street.
+            <p>The church is located at the southern end of Kings Langley high street.
-              Parking is available across the road at the Rose and Crown pub
+              Parking is available across the road at the Rose and Crown pub.</p>
-              (Dan may be there before 1pm 😉).</p>
             <Map
               defaultZoom={14}
               lat={markers[0].lat}
@@ -38,7 +37,7 @@ class Ceremony extends React.Component {
             />
             <h3>About the church</h3>
             <p>All Saints Church is a medieval church with parts dating from the 13th century.
-              The main features of the body of the Church are the beautiful reredos, depicting
+              The main features of the church are the beautiful reredos, depicting
               The Last Supper, and the fine Jacobean pulpit with its intricate carvings.
               The Tower has a peal of 8 bells that are regularly rung before Services.</p>
             <p>The church was chosen because it is Dan&#8217;s family church.</p>

src/routes/ceremony/index.js

@@ -4,11 +4,11 @@ import Layout from '../../components/Layout';
 
 export default {
 
-  path: '/ceremony',
+  path: '/church',
 
   action() {
     return {
-      title: 'Ceremony',
+      title: 'All Saints\' Church',
       component: <Layout current="ceremony"><Ceremony /></Layout>,
     };
   },

src/routes/reception/Reception.css

@@ -13,7 +13,7 @@
   background-size: cover;
   background-position-x: 54%;
   background-color: #c1c1c1;
-  filter: grayscale(1) brightness(0.6);
+  filter: grayscale(1) brightness(0.4);
   z-index: -1;
   transition: filter ease-in-out 0.5s;
 }

src/routes/reception/Reception.js

@@ -29,10 +29,10 @@ class Reception extends React.Component {
           </div>
           <div className={s.content}>
             <h3>When</h3>
-            <p>The Reception will begin at 3pm, Wedding breakfast at 5pm
+            <p>The Reception will begin at 3pm, Wedding Breakfast at 5pm
               followed by music until late.</p>
             <h3>Where</h3>
-            <p>The venue is approximately 30 minute drive from the Church.</p>
+            <p>The venue is approximately a 30 minute drive from the Church.</p>
             <Map
               defaultZoom={12}
               lat={offley[0].lat}

src/routes/reception/index.js

@@ -4,11 +4,11 @@ import Layout from '../../components/Layout';
 
 export default {
 
-  path: '/reception',
+  path: '/venue',
 
   action() {
     return {
-      title: 'Reception',
+      title: 'Offley Place',
       component: <Layout current="reception"><Reception /></Layout>,
     };
   },

src/routes/transport/Transport.css

@@ -13,7 +13,7 @@
   background-size: cover;
   background-position-x: 54%;
   background-color: #c1c1c1;
-  filter: grayscale(1) brightness(0.6);
+  filter: grayscale(1) brightness(0.4);
   z-index: -1;
   transition: filter ease-in-out 0.5s;
 }

src/routes/transport/Transport.js

@@ -41,7 +41,7 @@ class Transport extends React.Component {
           </div>
           <div className={s.content}>
             <h3>Train</h3>
-            <p>There are 3 stations nearby, Hitchin, Luton and Luton Parkway (airport).
+            <p>There are 3 stations nearby, Hitchin, Luton and Luton Parkway (Airport).
               All trains terminate at London St Pancras or London Kings Cross</p>
             <Map
               defaultZoom={11}
@@ -51,6 +51,7 @@ class Transport extends React.Component {
             />
             <h3>Car</h3>
             <p>Offley Place has secure parking facilities.</p>
+            <h3>Taxi</h3>
             <p>The following taxi companies are recommended:</p>
             <ul>
               <li>