Merge pull request #3930 from OneCommunityGlobal/peterson-implement-404-page-improvements

Peterson implemented two improvements on the 404 page.

Author: one-community

src/components/Logout/Logout.jsx

@@ -1,4 +1,4 @@
-import { Redirect } from 'react-router-dom';
+import { Redirect, useHistory } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import { boxStyle, boxStyleDark } from '~/styles';
@@ -8,6 +8,7 @@ import { logoutUser } from '../../actions/authActions';
 function Logout({ setLogoutPopup, open }) {
   const darkMode = useSelector(state => state.theme.darkMode);
   const dispatch = useDispatch();
+  const redirect = useHistory();
 
   const closePopup = () => {
     setLogoutPopup(false);
@@ -22,7 +23,8 @@ function Logout({ setLogoutPopup, open }) {
 
     closePopup();
     dispatch(logoutUser());
-    return <Redirect to="/login" auth={false} />;
+    <Redirect to="/login" auth={false} />;
+    return redirect.push('/login');
   };
 
   return (

src/components/NotFound/NotFoundPage.jsx

@@ -12,23 +12,29 @@ function NotFoundPage() {
   const darkMode = useSelector(state => state.theme.darkMode);
 
   return (
-    <div
-      className={cn(styles.notFoundContainer, darkMode ? cn(styles.darkMode, styles.bgBlack) : '')}
-    >
-      <img
-        className={styles.notFoundImage}
-        src={darkMode ? NotFoundDarkImage : NotFoundImage}
-        alt="Page Not Found"
-      />
-      <div className={styles.notFoundText}>
-        <h1>PAGE NOT FOUND</h1>
-        <p>The rabbits have been nibbling the cables again...</p>
-        <p>
-          Maybe this will help{' '}
-          <Link to="/" className={styles.backHomeLink}>
-            Home
-          </Link>
-        </p>
+    <div className={cn(styles.notFoundContainer, darkMode ? cn(styles.darkMode) : '')}>
+      <div
+        className={styles.notFoundContent}
+        //prettier-ignore
+        style={{border: `2px solid ${darkMode ? `#f1f1f1` : `#333`}`}}
+      >
+        <img
+          className={styles.notFoundImage}
+          src={darkMode ? NotFoundDarkImage : NotFoundImage}
+          alt="Page Not Found"
+        />
+        <div className={styles.notFoundText}>
+          <h1 className={darkMode ? `text-light` : `text-dark`}>PAGE NOT FOUND</h1>
+          <p className={darkMode ? `text-light` : `text-dark`}>
+            The rabbits have been nibbling the cables again...
+          </p>
+          <p className={darkMode ? `text-light` : `text-dark`}>
+            Maybe this will help{' '}
+            <Link to="/" className={styles.backHomeLink}>
+              Home
+            </Link>
+          </p>
+        </div>
       </div>
     </div>
   );

src/components/NotFound/NotFoundPage.module.css

@@ -3,10 +3,21 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  height: 100vh;
+  height: 100%;
   text-align: center;
-  color: #333;
-  background-color: #fff;
+  width: 100%;
+  position: absolute;
+  top: 0;
+}
+
+body,
+html {
+  overflow: hidden;
+}
+.notFoundContent {
+  padding: 5px;
+  border-radius: 20px;
+  width: 60%;
 }
 
 .notFoundImage {
@@ -42,18 +53,26 @@
 
 .darkMode {
   color: #f1f1f1;
+  background-color: #121212;
+}
 
-  .notFoundImage {
-    height: 38%;
-    width: auto;
+@media (max-width: 1039px) {
+  .notFoundContent {
+    margin-top: 20rem;
   }
 }
 
-.bgBlack {
-  background-color: #121212;
+@media (max-width: 1200px) {
+  .notFoundContent {
+    width: 92%;
+  }
 }
 
 @media (max-width: 768px) {
+  .notFoundContent {
+    margin-top: 0rem;
+  }
+
   .notFoundText h1 {
     font-size: 1.5em;
   }