Add "404" Page (#705)

* add error page

* address PR comments

common/Root.tsx

@@ -11,6 +11,7 @@ import Swap from 'containers/Tabs/Swap';
 import SignAndVerifyMessage from 'containers/Tabs/SignAndVerifyMessage';
 import BroadcastTx from 'containers/Tabs/BroadcastTx';
 import ErrorScreen from 'components/ErrorScreen';
+import PageNotFound from 'components/PageNotFound';
 import { Store } from 'redux';
 import { AppState } from 'reducers';
 
@@ -41,7 +42,7 @@ export default class Root extends Component<Props, State> {
 
     // key={Math.random()} = hack for HMR from https://github.com/webpack/webpack-dev-server/issues/395
     const routes = (
-      <div>
+      <Switch>
         <Route exact={true} path="/" component={GenerateWallet} />
         <Route path="/generate" component={GenerateWallet}>
           <Route path="keystore" component={GenerateWallet} />
@@ -58,8 +59,9 @@ export default class Root extends Component<Props, State> {
         <Route path="/ens" component={ENS} />
         <Route path="/sign-and-verify-message" component={SignAndVerifyMessage} />
         <Route path="/pushTx" component={BroadcastTx} />
+        <Route component={PageNotFound} />
         <LegacyRoutes />
-      </div>
+      </Switch>
     );
     return (
       <Provider store={store} key={Math.random()}>

common/components/PageNotFound/PageNotFound.scss

@@ -0,0 +1,9 @@
+.PageNotFound {
+  text-align: center;
+  &-content {
+    padding: 100px 0;
+    font-size: 30px;
+    max-width: 800px;
+    margin: 0 auto;
+  }
+}

common/components/PageNotFound/PageNotFound.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Link, RouteComponentProps } from 'react-router-dom';
+import TabSection from '../../containers/TabSection/index';
+import './PageNotFound.scss';
+
+const PageNotFound: React.SFC<RouteComponentProps<{}>> = () => (
+  <TabSection>
+    <section className="Tab-content PageNotFound">
+      <div className="Tab-content-pane">
+        <h1 className="PageNotFound-header">/ᐠ≗ᆽ≗ᐟ \</h1>
+        <main role="main">
+          <p className="PageNotFound-content">
+            Meow! Something went wrong and the page you were looking for doesn't yet exist. Try the{' '}
+            <Link to="/">home page</Link>.
+          </p>
+        </main>
+      </div>
+    </section>
+  </TabSection>
+);
+
+export default PageNotFound;

common/components/PageNotFound/index.ts

@@ -0,0 +1,3 @@
+import PageNotFound from './PageNotFound';
+
+export default PageNotFound;