Merge 4f531dd into 1e8dd63

client/src/modules/common/404/index.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import img from '../../../../public/resources/images/404-Logo.png';
+
+
+const ErrorPage = () => (
+  <div className="container">
+    <div className="row">
+      <div className="col s12 center-align m-15-auto" >
+        <img src={img} alt="404 error" className="responsive-img animate" width="400" height="150" />
+        <p className="flow-text valign-wrapper" >
+        Unfortunately the page you are looking for could not be found. It may have been removed,
+        had its name changed or is temporarily unavailable.
+        </p>
+        <p className="flow-text" >
+        Check the URL you entered for mistakes and try again.
+        </p>
+        <a href="/teams" className="top-margin bottom-margin waves-effect waves-light btn blue-btn">Go back to Home page</a>
+      </div>
+    </div>
+  </div>
+);
+
+export default ErrorPage;

client/src/routes/index.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { BrowserRouter, Route, Switch } from 'react-router-dom';
+import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import SignInContainer from '../modules/Auth/container';
@@ -11,6 +11,7 @@ import CreateTeam from '../modules/CreateTeam/container';
 import Teams from '../modules/Teams/container';
 import RequireAuth from './RequireAuth';
 import AuthRoute from './AuthRoute';
+import ErrorPage from '../modules/common/404';
 
 export default class Routes extends Component {
   componentDidMount() {
@@ -34,6 +35,8 @@ export default class Routes extends Component {
             <Route path="/teams/create" component={RequireAuth(CreateTeam)} />
             <AuthRoute path="/" exact component={SignInContainer} />
             <Route path="/teams/:id" exact component={RequireAuth(Teams)} />
+            <Route path="/404" exact component={ErrorPage} />
+            <Redirect from="*" to="/404" />
           </Switch>
         </React.Fragment>
       </BrowserRouter>

client/src/tests/modules/common/404/index.test.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import ErrorPage from '../../../../modules/common/404';
+
+describe('Render the error page', () => {
+  let wrapper = shallow(<ErrorPage />);
+  it('Should properly render the error page', () => {
+    expect(wrapper.length).toBe(1);
+  });
+});

client/styles/base/_util.scss

@@ -6,6 +6,10 @@
   margin-top: 2rem;
 }
 
+.m-15-auto {
+  margin: 15rem auto;
+}
+
 .mt-11 {
   margin-top: 1.1rem;
 }
@@ -186,4 +190,25 @@
 
 .text-blue {
   color: $blue
-}
+}
+
+.animate {
+  margin: 2rem auto;
+  animation-name: bounce;
+  animation-duration: 1.2s;
+  animation-timing-function: ease-out;
+  animation-delay: 0;
+  animation-direction: alternate;
+  animation-iteration-count: infinite;
+  animation-fill-mode: none;
+  animation-play-state: running;
+}
+
+@keyframes bounce {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(1.08);
+  }
+}