Improved 404 User Interface (UI) (#171)

stanleyowen · May 20, 2021 · b8b8a2f · b8b8a2f
1 parent 64cdc40
commit b8b8a2f
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 32 deletions.
diff --git a/client/src/App.css b/client/src/App.css
@@ -81,7 +81,7 @@ body.dark .otp input {
 }
 body.dark .main__title,
 body.dark .projects__viewMore,
-body.dark .link { color: #79c3ff !important; }
+body.dark .link, body.dark .blue-text { color: #79c3ff !important; }
 body.dark .link:focus { color: #5cb5ff !important; }
 body.dark .otp input { border-color: rgb(59, 57, 57); }
 body.dark .navbar { box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14),0 1px 10px 0 rgba(0,0,0,0.12),0 2px 4px -1px rgba(0,0,0,0.2); }
@@ -92,7 +92,7 @@ body.dark .btn-config .MuiButtonBase-root { color: #e7e7e7; }
 body.dark ::-webkit-calendar-picker-indicator { filter: invert(1); }
 body.dark .main__button { box-shadow: 2px 1000px 1px #212121 inset; }
 body.dark .projects__viewMore:hover { background-color: #79c3ff; color: #212121; }
-body.dark .footer__socialBtn a:hover svg { color: #212121 !important; }
+body.dark .footer__socialBtn a:hover svg { color: #FFF !important; }
 body.dark .footer__socialBtn a svg { color: rgb(66 133 244) !important }
 body.dark .main__divider { background-image: linear-gradient(315deg, #0cbaba 0%, #f400eb 74%); }
 body.dark .loader { background-color: rgba(114, 114, 114, 0.61); }
@@ -114,6 +114,10 @@ body.dark .MuiInput-underline:hover:not(.Mui-disabled):before { border-bottom: 1
 .MuiSvgIcon-root { color: #212121; }
 button, a { user-select: none; cursor: pointer; }
 label { user-select: none; }
+.monospace {
+    font-weight: lighter;
+    font-family: 'Roboto Mono', monospace;
+}
 .privacy-policy {
     font-family: 'Noto Sans JP', sans-serif;
     margin: auto 150px;
@@ -185,6 +189,7 @@ label { user-select: none; }
 .m-5 { margin: 5px !important; }
 .m-10 { margin: 10px !important; }
 .p-12 { padding: 12px !important; }
+.pt-180 { padding-top: 180px !important; }
 .ml-10 { margin-left: 10px !important; }
 .mr-10 { margin-right: 10px !important; }
 .mt-10 { margin-top: 10px !important; }
@@ -614,7 +619,7 @@ select {
 .contact__btn:hover { background-color: #FFFFFF; color: #212121; }
 .get_in_touch { text-align: center; }
 img {
-    max-width: 100%;
+    max-width: 100% !important;
     object-fit: cover !important;
     transition: all .4s;
 }
@@ -681,6 +686,7 @@ img {
     width: 0;
     z-index: -1;
 }
+.blue-text { color: #1a73e8; }
 .notification-success { background-color: #55b559; }
 .notification-warning { background-color: #ffcc00; color: black; }
 .notification-danger { background-color: #f55145; }
@@ -893,6 +899,8 @@ blockquote em {font-style: italic;}
     outline: 0;
     transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
 }
+.large { font-size: 60px; }
+.center-object { margin: auto; max-width: 70%; }
 .justify-center { justify-content: center; }
 @keyframes octocat-wave {
     0%,100%{transform:rotate(0)}

diff --git a/client/src/App.js b/client/src/App.js
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { BrowserRouter as Router, Route } from 'react-router-dom'
+import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
 import axios from 'axios'
 
 import { setNotification, NOTIFICATION_TYPES } from './libraries/setNotification'
@@ -18,6 +18,7 @@ import EditTodo from './components/edit.component'
 import ResetPassword from './components/reset-password.component'
 import ReqResetPassword from './components/forgot-password.component'
 import VerifyAccount from './components/verify-account.component'
+import PageNotFound from './components/404.component'
 import PrivacyPolicy from './components/privacy-policy.component'
 import TermsAndConditions from './components/terms-and-condition.component'
 
@@ -70,20 +71,23 @@ export default function App() {
   return (
     <Router>
       <Navbar userData={userData} />
-      <Route path='/' exact component={() => <Home userData={userData} />} />
-      <Route path='/welcome' component={Welcome} />
-      <Route path='/get-started' component={() => <Register userData={userData} />} />
-      <Route path='/login' component={() => <Login userData={userData} />} />
-      <Route path='/logout' component={() => <Logout userData={userData} />} />
-      <Route path='/edit/:id' component={() => <EditTodo userData={userData} />} />
-      <Route path='/oauth' component={() => <ReqOAuth userData={userData} />} />
-      <Route path='/auth/:service/:email' component={OAuth} />
-      <Route path='/account' component={() => <Account userData={userData} />} />
-      <Route path='/reset-password' exact component={() => <ReqResetPassword userData={userData} />} />
-      <Route path='/reset-password/:id/:token' component={ResetPassword} />
-      <Route path='/verify/:id/:token' component={VerifyAccount} />
-      <Route path='/privacy-policy' component={PrivacyPolicy} />
-      <Route path='/terms-and-conditions' component={TermsAndConditions} />
+      <Switch>
+        <Route path='*' component={() => <PageNotFound userData={userData} />} />
+        <Route path='/' exact component={() => <Home userData={userData} />} />
+        <Route path='/welcome' component={Welcome} />
+        <Route path='/get-started' component={() => <Register userData={userData} />} />
+        <Route path='/login' component={() => <Login userData={userData} />} />
+        <Route path='/logout' component={() => <Logout userData={userData} />} />
+        <Route path='/edit/:id' component={() => <EditTodo userData={userData} />} />
+        <Route path='/oauth' component={() => <ReqOAuth userData={userData} />} />
+        <Route path='/auth/:service/:email' component={OAuth} />
+        <Route path='/account' component={() => <Account userData={userData} />} />
+        <Route path='/reset-password' exact component={() => <ReqResetPassword userData={userData} />} />
+        <Route path='/reset-password/:id/:token' component={ResetPassword} />
+        <Route path='/verify/:id/:token' component={VerifyAccount} />
+        <Route path='/privacy-policy' component={PrivacyPolicy} />
+        <Route path='/terms-and-conditions' component={TermsAndConditions} />
+      </Switch>
     </Router>
   )
 }