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

@@ -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
 // -------------------------
 

common/app/Flash/flash.less

@@ -13,3 +13,8 @@
   flex: 1 0 0px;
   color: #37474f;
 }
+
+#@{ns}-board {
+  margin-top: 50px;
+}
+

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>
   );
 }