Adding Message component

src/componets/App.js

@@ -1,20 +1,15 @@
 import React from 'react';
 
+import Message from './Message';
+
 import GithubIcon from 'feather-icons/dist/icons/github.svg';
 import DownloadIcon from 'feather-icons/dist/icons/download.svg';
 import LinkIcon from 'feather-icons/dist/icons/link.svg';
 import ChevronsDownIcon from 'feather-icons/dist/icons/chevrons-down.svg';
 import ErrorIcon from 'feather-icons/dist/icons/alert-octagon.svg';
 
-const App = () => <React.Fragment>
+const App = () => <Message icon={ ErrorIcon } heading="React App">
-  <h1>React App</h1>
+  <p>Placeholder app content</p>
-  <ul>
+</Message>;
-    <li><GithubIcon/>GitHub</li>
-    <li><DownloadIcon/>Download</li>
-    <li><LinkIcon/>Permalink</li>
-    <li><ChevronsDownIcon/>Open</li>
-    <li><ErrorIcon/>Error</li>
-  </ul>
-</React.Fragment>;
 
 export default App;

src/componets/Message/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import style from './style.css';
+
+const Message = ({ icon, heading, children }) => {
+  const IconComponent = icon;
+  return <div className={ style.message }>
+    <h2>{ IconComponent ? <IconComponent/> : '' }{ heading }</h2>
+    { children }
+  </div>;
+};
+
+export default Message;

src/componets/Message/style.css

@@ -0,0 +1,20 @@
+.message {
+  background: var(--color-tan);
+  padding: var(--spacing-margin);
+  margin: var(--spacing-margin) 0;
+}
+
+.message h2 {
+  margin: var(--spacing-margin) 0;
+}
+
+.message h2 svg {
+  margin-right: 0.5rem;
+  height: 3rem;
+  width: 3rem;
+  vertical-align: bottom;
+}
+
+.message p {
+  margin: var(--spacing-margin) 0;
+}

src/pages/404.js

@@ -1 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
 import '../style.css';
+
+import Message from '../componets/Message';
+import ErrorIcon from 'feather-icons/dist/icons/alert-octagon.svg';
+
+ReactDOM.render(
+  <Message icon={ ErrorIcon } heading="404 Page Not Found">
+    <p>The page you have requested could not be found</p>
+  </Message>,
+  document.getElementById('root'));

src/style.css

@@ -25,7 +25,7 @@ body {
   font-size: 1.6rem;
 }
 
-#main {
+:global(#main) {
   background: var(--color-green) linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%);
   box-shadow: 0 0 1rem var(--color-black);
   padding: 0 var(--content-margin);
@@ -33,7 +33,7 @@ body {
   position: relative;
 }
 
-#main h1 {
+:global(#main) h1 {
   font-family: 'Bangers', 'cursive';
   font-size: 4rem;
   font-weight: normal;
@@ -42,20 +42,20 @@ body {
   line-height: var(--header-height);
 }
 
-#main a {
+:global(#main) a {
   text-decoration: none;
   display: inline-block;
 }
 
-#main ul {
+:global(#main) ul {
   line-height: var(--header-height);
   position: absolute;
   top: 0;
   right: var(--content-margin);
 }
 
-#main li a:hover,
+:global(#main) li a:hover,
-#main li a:active {
+:global(#main) li a:active {
   text-decoration: underline;
 }
 
@@ -84,15 +84,15 @@ li {
   display: inline-block;
 }
 
-.inline-list li {
+:global(.inline-list) li {
   white-space: nowrap;
 }
 
-.inline-list li:after {
+:global(.inline-list) li:after {
   content: '//';
   padding: 0 0.5rem;
 }
 
-.inline-list li:last-child:after {
+:global(.inline-list) li:last-child:after {
   content: '';
 }

webpack.common.js

@@ -88,7 +88,8 @@ module.exports = {
               options: {
                 importLoaders: 1,
                 minimize: true,
-                sourceMap: true
+                sourceMap: true,
+                modules: true
               }
             },
             {