Created NotFound component and add it to admin and content type builder

packages/strapi-admin/admin/src/containers/NotFoundPage/index.js

@@ -11,40 +11,18 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { defineMessages, FormattedMessage } from 'react-intl';
 
-import Button from 'components/Button';
+import NotFound from 'components/NotFound';
 
-import styles from './styles.scss';
+export default class NotFoundPage extends React.Component { // eslint-disable-line react/prefer-stateless-function
-import messages from './messages.json';
-
-defineMessages(messages);
-
-export default class NotFound extends React.Component { // eslint-disable-line react/prefer-stateless-function
   render() {
     return (
-      <div className={styles.notFound}>
+      <NotFound {...this.props} />
-        <h1 className={styles.notFoundTitle}>
-          404
-        </h1>
-        <h2 className={styles.notFoundDescription}>
-          <FormattedMessage {...messages.description} />
-        </h2>
-        <Button
-          label="app.components.NotFoundPage.back"
-          kind="back"
-          onClick={(e) => {
-            e.stopPropagation();
-
-            this.props.history.goBack();
-          }}
-        />
-      </div>
     );
   }
 }
 
-NotFound.propTypes = {
+NotFoundPage.propTypes = {
   history: PropTypes.shape({
     goBack: PropTypes.func.isRequired,
   }).isRequired,

packages/strapi-helper-plugin/lib/src/components/NotFound/index.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import Button from 'components/Button';
+
+import styles from './styles.scss';
+
+function NotFound({ history }) {
+  return (
+    <div className={styles.notFound}>
+      <h1 className={styles.notFoundTitle}>
+        404
+      </h1>
+      <h2 className={styles.notFoundDescription}>
+        <FormattedMessage id="app.components.NotFoundPage.description" />
+      </h2>
+      <Button
+        label="app.components.NotFoundPage.back"
+        kind="back"
+        onClick={(e) => {
+          e.stopPropagation();
+
+          history.goBack();
+        }}
+      />
+    </div>
+  );
+}
+
+NotFound.propTypes = {
+  history: PropTypes.shape({
+    goBack: PropTypes.func,
+  }).isRequired,
+}
+
+export default NotFound;

packages/strapi-helper-plugin/lib/src/components/NotFound/styles.scss

@@ -0,0 +1,27 @@
+.notFound { /* stylelint-ignore */
+  display: -webkit-flex;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding-top: 114px;
+
+  h1{
+    margin-bottom: 12px;
+    text-shadow: 0 1rem 4rem rgba(255, 255, 255, 0.8);
+    color: #2C3138;
+    font-size: 6.4rem;
+    letter-spacing: 2px;
+  }
+
+  h2{
+    color: #2C3138;
+    font-size: 1.4rem;
+    font-weight: 400;
+    margin-bottom: 50px;
+  }
+
+  button{
+    margin: 0;
+  }
+}

packages/strapi-plugin-content-type-builder/admin/src/containers/App/index.js

@@ -16,6 +16,7 @@ import { pluginId } from 'app';
 
 import HomePage from 'containers/HomePage';
 import ModelPage from 'containers/ModelPage';
+import NotFoundPage from 'containers/NotFoundPage';
 import formSaga from 'containers/Form/sagas';
 import formReducer from 'containers/Form/reducer';
 
@@ -54,6 +55,7 @@ class App extends React.Component {
         <Switch>
           <Route exact path="/plugins/content-type-builder" component={HomePage} />
           <Route exact path="/plugins/content-type-builder/models/:modelName" component={ModelPage} />
+          <Route path="" component={NotFoundPage} />
         </Switch>
       </div>
     );

packages/strapi-plugin-content-type-builder/admin/src/containers/NotFoundPage/index.js

@@ -10,20 +10,11 @@
  */
 
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
 
-import messages from './messages';
+import NotFound from 'components/NotFound';
 
-export default class NotFound extends React.Component {
+export default class NotFoundPage extends React.Component {
   render() {
-    return (
+    return <NotFound {...this.props} />;
-      <div>
-        <div className="container">
-          <h1>
-            <FormattedMessage {...messages.pageNotFound} />
-          </h1>
-        </div>
-      </div>
-    );
   }
 }

packages/strapi-plugin-content-type-builder/admin/src/containers/NotFoundPage/messages.js

@@ -1,13 +0,0 @@
-/*
- * NotFoundPage Messages
- *
- * This contains all the text for the NotFoundPage component.
- */
-import { defineMessages } from 'react-intl';
-
-export default defineMessages({
-  pageNotFound: {
-    id: 'app.components.NotFoundPage.pageNotFound',
-    defaultMessage: 'Page not found.',
-  },
-});