From 4c5ffb30fcb67dc78abdbc1bb2f5997d36a88740 Mon Sep 17 00:00:00 2001
From: Vivek Agrawal <vivekmittalagrawal@gmail.com>
Date: Tue, 20 Mar 2018 10:19:55 +0530
Subject: [PATCH] fix(alerts): Fix page not found alert & UI adjustments
 (#16864)

* fix(alerts): Fix page not found alert & UI adjustments

- Added adequate margins to flash alerts.
- Page not found alert link fix & UI adjustments.

Closes #16857
Closes #16860

* fix(404): Changed the UX of 404 page

- This makes the 404 page UX consistent.
---
 client/less/main.less             | 10 ++++++++++
 common/app/Flash/flash.less       |  5 +++++
 common/app/NotFound/Not-Found.jsx | 30 +++++++++++++++++++-----------
 3 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/client/less/main.less b/client/less/main.less
index 2b2b1151cbf..f68d33a66dd 100644
--- a/client/less/main.less
+++ b/client/less/main.less
@@ -77,6 +77,16 @@ h1, h2, h3, h4, h5, h6, p, li {
   margin-top: 20px;
 }
 
+.not-found, .not-found .btn-primary {
+  display: grid;
+  margin: auto;
+  a:hover,
+  a:focus,
+  a:active {
+    text-decoration: none;
+  }
+}
+
 // Thumbnails
 // -------------------------
 
diff --git a/common/app/Flash/flash.less b/common/app/Flash/flash.less
index c8d87c1eebb..edf583f1d4d 100644
--- a/common/app/Flash/flash.less
+++ b/common/app/Flash/flash.less
@@ -13,3 +13,8 @@
   flex: 1 0 0px;
   color: #37474f;
 }
+
+#@{ns}-board {
+  margin-top: 50px;
+}
+
diff --git a/common/app/NotFound/Not-Found.jsx b/common/app/NotFound/Not-Found.jsx
index 62be6c0f689..a439c75d904 100644
--- a/common/app/NotFound/Not-Found.jsx
+++ b/common/app/NotFound/Not-Found.jsx
@@ -1,21 +1,29 @@
 import React from 'react';
 // import PropTypes from 'prop-types';
-import { Alert } from 'react-bootstrap';
+import {
+  Alert,
+  Button
+} from 'react-bootstrap';
 
 const propTypes = {};
 
 export default function NotFound() {
   return (
-    <Alert bsStyle='danger'>
-      <h4>We couldn't find a page for that address.</h4>
-      <p>
-        Head back to &thinsp;
-        <a href='/challenges/current-challenge'>
-            your current challenge
-        </a>
-        .
-      </p>
-    </Alert>
+    <div className='not-found'>
+      <Alert bsStyle='info'>
+        <p>
+          { 'Sorry, we couldn\'t find a page for that address.' }
+        </p>
+      </Alert>
+      <a href={'/map'}>
+        <Button
+          bsSize='lg'
+          bsStyle='primary'
+          >
+          Take me to the Challenges
+        </Button>
+      </a>
+    </div>
   );
 }