[component] restyle components

client/components/404/404.js

@@ -1,19 +1,50 @@
+/* eslint-disable react/require-default-props */
 import "./index.css";
 
+import PropTypes from "prop-types";
 import React from "react";
+import {Link} from "react-router-dom";
+
+import getText from "../../utils/get-text";
 
 export default class DoesNotExist extends React.Component {
   render() {
+    const {orgSlug, language, page} = this.props;
     return (
       <React.Fragment>
         <div className="owisp-404-container">
-          <div className="owisp-404-row-1">Oops!</div>
-          <div className="owisp-404-row-2">404 Not Found</div>
+          <div className="owisp-404-row-1">
+            {page && page.heading ? getText(page.heading, language) : "Oops!"}
+          </div>
+          <div className="owisp-404-row-2">
+            {page && page.sub_heading
+              ? getText(page.sub_heading, language)
+              : "404 Not Found"}
+          </div>
           <div className="owisp-404-row-3">
-            Sorry, an error has occurred, Requested page not found!
+            {page && page.message
+              ? getText(page.message, language)
+              : "Sorry, an error has occurred, Requested page not found!"}
           </div>
+          {page && page.homepage_link ? (
+            <div className="owisp-404-row-4">
+              <Link to={`/${orgSlug}`}>
+                {getText(page.homepage_link.text, language)}
+              </Link>
+            </div>
+          ) : null}
         </div>
       </React.Fragment>
     );
   }
 }
+DoesNotExist.propTypes = {
+  page: PropTypes.shape({
+    heading: PropTypes.object,
+    sub_heading: PropTypes.object,
+    message: PropTypes.object,
+    homepage_link: PropTypes.object,
+  }),
+  language: PropTypes.string,
+  orgSlug: PropTypes.string,
+};

client/components/404/index.css

@@ -3,25 +3,38 @@
   color: #333;
   width: 100%;
   height: 100%;
-  min-height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-weight: 500;
   line-height: 1.1;
+  flex-grow: 1;
+  box-sizing: border-box;
+  padding: 20px;
 }
 .owisp-404-row-1 {
   font-size: 36px;
 }
 .owisp-404-row-2 {
-  font-size: 30px;
-  margin-top: 20px;
+  font-size: 24px;
+  margin-top: 4px;
   margin-bottom: 10px;
 }
 .owisp-404-row-3 {
   font-size: 14px;
   font-weight: normal;
   line-height: 1.4;
 }
+.owisp-404-row-4 {
+  font-size: 14px;
+
+  line-height: 1.4;
+}
+.owisp-404-row-4 > a {
+  color: #333;
+}
+.owisp-404-row-4 > a:hover {
+  text-decoration: none;
+}

client/components/404/index.js

@@ -2,7 +2,15 @@ import {connect} from "react-redux";
 
 import Component from "./404";
 
+const mapStateToProps = state => {
+  return {
+    page: state.organization.configuration.components["404_page"],
+    language: state.language,
+    orgSlug: state.organization.configuration.slug,
+  };
+};
+
 export default connect(
-  null,
+  mapStateToProps,
   null,
 )(Component);

client/components/footer/index.css

@@ -5,8 +5,8 @@
   align-items: center;
   flex-wrap: nowrap;
   font-family: sans-serif;
-  background: #2b3a42;
-  padding: 10px 0;
+  background: #282828;
+  padding: 20px 0;
 }
 .owisp-footer-row-1 {
   width: 100%;
@@ -20,24 +20,27 @@
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
+  flex-grow: 1;
+  max-width: 1000px;
 }
 .owisp-footer-link {
   color: #ffffff;
   padding: 0 2px;
-  margin-right: 5px;
-  text-decoration: none;
+  margin-right: 10px;
   text-transform: capitalize;
 }
 .owisp-footer-link:hover {
-  color: #8dd6f9;
+  text-decoration: none;
 }
 .owisp-footer-row-2 {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   flex-wrap: nowrap;
-  width: 100%;
+  flex-grow: 1;
+  max-width: 1000px;
+  margin-top: 4px;
 }
 .owisp-footer-row-2-inner {
   display: flex;