404 & 500 Error pages (#780)

* Adding in favicons

* Helps if i add the images

* Updating apple icon names

* 404 Page

* 500 Page

* Cleaning up linting issues

frontend/components/FlashMessage/_styles.scss

@@ -1,7 +1,11 @@
-.wrapper > div.flash-message {
-  height: 50px;
-  min-height: 50px;
-  max-height: 50px;
+.wrapper {
+  > div {
+    &.flash-message {
+      height: 50px;
+      min-height: 50px;
+      max-height: 50px;
+    }
+  }
 }
 
 .flash-message {

frontend/components/packs/EditPackFormWrapper/_styles.scss

@@ -19,7 +19,7 @@
   &__description {
     font-size: 15px;
     font-weight: $normal;
-    line-height: 2.0;
+    line-height: 2;
     color: $text-medium;
     max-width: 800px;
   }

frontend/components/side_panels/SiteNavHeader/_styles.scss

@@ -177,14 +177,18 @@
     &:first-child {
       border-bottom: solid 1px rgba(73, 143, 226, 0.4);
 
-      a:hover {
-        background-color: $link;
+      a {
+        &:hover {
+          background-color: $link;
+        }
       }
     }
 
     &:last-child {
-      a:hover {
-        background-color: #3c3655;
+      a {
+        &:hover {
+          background-color: #3c3655;
+        }
       }
     }
   }

frontend/pages/Admin/UserManagementPage/_styles.scss

@@ -1,5 +1,4 @@
 .user-management {
-  min-height: 100px;
   padding: 30px 30px 30px 0;
   min-height: 90vh;
 

frontend/pages/Kolide404/Kolide404.jsx

@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+
+import kolideLogo from '../../../assets/images/kolide-logo-condensed.svg';
+import gopher from '../../../assets/images/404.svg';
+
+const baseClass = 'kolide-404';
+
+class Kolide404 extends Component {
+
+  render () {
+    return (
+      <div className={baseClass}>
+        <header className="primary-header">
+          <a href="/">
+            <img className="primary-header__logo" src={kolideLogo} alt="Kolide" />
+          </a>
+        </header>
+        <main>
+          <h1>I have no memory of this place...</h1>
+          <h2>Error 404</h2>
+          <p>You seem to have lost your way.</p>
+          <p>Might we recommend going back on your browser or visiting the <a href="/">home page?</a></p>
+          <div className="gopher-container">
+            <img src={gopher} role="presentation" />
+            <p>Need immediate assistance? <br />Contact <a href="mailto:support@kolide.co">support@kolide.co</a></p>
+          </div>
+        </main>
+      </div>
+    );
+  }
+}
+
+export default Kolide404;

frontend/pages/Kolide404/_styles.scss

@@ -0,0 +1,53 @@
+.kolide-404 {
+  p {
+    color: #666;
+  }
+
+  a {
+    color: #4a90e2;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  .primary-header {
+    height: 90px;
+    width: 100%;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
+
+    &__logo {
+      height: 48px;
+      width: 174px;
+      position: absolute;
+      top: 25px;
+      left: 40px;
+    }
+  }
+
+  .gopher-container {
+    margin: -20px auto 0;
+    max-width: 340px;
+
+    img {
+      height: 470px;
+    }
+  }
+
+  main {
+    text-align: center;
+
+    > h1 {
+      font-size: 56px;
+      max-width: 479px;
+      margin: 34px auto 0;
+    }
+
+    > h2 {
+      font-size: 36px;
+      margin: 13px 0 30px;
+    }
+  }
+
+}

frontend/pages/Kolide404/index.js

@@ -0,0 +1 @@
+export default from './Kolide404';

frontend/pages/Kolide500/Kolide500.jsx

@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+
+import kolideLogo from '../../../assets/images/kolide-logo-condensed.svg';
+import gopher from '../../../assets/images/500.svg';
+
+const baseClass = 'kolide-500';
+
+class Kolide404 extends Component {
+
+  render () {
+    return (
+      <div className={baseClass}>
+        <header className="primary-header">
+          <a href="/">
+            <img className="primary-header__logo" src={kolideLogo} alt="Kolide" />
+          </a>
+        </header>
+        <main>
+          <h1>Uh oh!</h1>
+          <h2>Error 500</h2>
+          <p>Something went wrong on our end.</p>
+          <p>We have alerted the engineers and they are working on a solution.</p>
+          <div className="gopher-container">
+            <img src={gopher} role="presentation" />
+            <p>Need immediate assistance? Contact <a href="mailto:support@kolide.co">support@kolide.co</a></p>
+          </div>
+        </main>
+      </div>
+    );
+  }
+}
+
+export default Kolide404;

frontend/pages/Kolide500/_styles.scss

@@ -0,0 +1,53 @@
+.kolide-500 {
+  p {
+    color: #666;
+  }
+
+  a {
+    color: #4a90e2;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  .primary-header {
+    height: 90px;
+    width: 100%;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
+
+    &__logo {
+      height: 48px;
+      width: 174px;
+      position: absolute;
+      top: 25px;
+      left: 40px;
+    }
+  }
+
+  .gopher-container {
+    margin: 40px auto 0;
+    max-width: 800px;
+    text-align: center;
+
+    img {
+      height: 340px;
+    }
+  }
+
+  main {
+    text-align: center;
+
+    > h1 {
+      font-size: 56px;
+      min-width: 479px;
+      margin: 34px auto 0;
+    }
+
+    > h2 {
+      font-size: 36px;
+      margin: 13px 0 30px;
+    }
+  }
+}

frontend/pages/Kolide500/index.js

@@ -0,0 +1 @@
+export default from './Kolide500';

frontend/router/index.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { browserHistory, IndexRedirect, IndexRoute, Route, Router } from 'react-router';
+import { browserHistory, IndexRedirect, IndexRoute, Redirect, Route, Router } from 'react-router';
 import { Provider } from 'react-redux';
 import { syncHistoryWithStore } from 'react-router-redux';
 
@@ -21,6 +21,8 @@ import PackComposerPage from 'pages/packs/PackComposerPage';
 import QueryPage from 'pages/queries/QueryPage';
 import QueryPageWrapper from 'components/queries/QueryPageWrapper';
 import RegistrationPage from 'pages/RegistrationPage';
+import Kolide404 from 'pages/Kolide404';
+import Kolide500 from 'pages/Kolide500';
 import store from 'redux/store';
 import UserSettingsPage from 'pages/UserSettingsPage';
 
@@ -68,6 +70,9 @@ const routes = (
           </Route>
         </Route>
       </Route>
+      <Route path="/500" component={Kolide500} />
+      <Route path="/404" component={Kolide404} />
+      <Redirect from="*" to="/404" />
     </Router>
   </Provider>
 );