3 files changed, 55 insertions, 34 deletions
diff --git a/src/components/EmptyState/EmptyState.tsx b/src/components/EmptyState/EmptyState.tsx
index 214bb56..f79a391 100644
--- a/src/components/EmptyState/EmptyState.tsx
+++ b/src/components/EmptyState/EmptyState.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
-import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
+
+import Message from '../Message/Message';
 import noContentIcon from '../../assets/noContent.svg';
 import constructionIcon from '../../assets/construction.svg';
 
@@ -11,17 +12,9 @@ interface PropTypes {
 }
 
 const useStyles = makeStyles(theme => ({
-  root: {
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
   img: {
-    margin: theme.spacing(2),
     width: theme.spacing(24)
   }
-
 }));
 
 const CONTEXT = {
@@ -37,21 +30,12 @@ const CONTEXT = {
 
 const EmptyState: React.FC<PropTypes> = ({ variant = 'default', message }) => {
   const classes = useStyles();
-
   const { icon, tagline } = CONTEXT[variant];
 
   return (
-    <div className={classes.root}>
+    <Message tagline={tagline} message={message}>
       <img src={icon} className={classes.img} alt="No content" />
-      <Typography variant="h5">
-        {tagline}
-      </Typography>
-      <Typography color="textSecondary">
-        <p>
-          {message}
-        </p>
-      </Typography>
-    </div>
+    </Message>
   );
 };
 
diff --git a/src/components/Loading/Loading.tsx b/src/components/Loading/Loading.tsx
index 34d436b..fac0049 100644
--- a/src/components/Loading/Loading.tsx
+++ b/src/components/Loading/Loading.tsx
@@ -1,22 +1,17 @@
 import React from 'react';
 import CircularProgress from '@material-ui/core/CircularProgress';
-import { makeStyles } from '@material-ui/core';
+import Message from '../Message/Message';
 
-const useStyles = makeStyles(theme => ({
-  loader: {
-    width: '100%',
-    textAlign: 'center',
-    marginTop: theme.spacing(10)
-  }
-}));
-
-const Loading: React.FC = React.memo(() => {
-  const classes = useStyles();
+interface PropTypes {
+  tagline?: string;
+  message?: string;
+}
 
+const Loading: React.FC<PropTypes> = React.memo(({ tagline, message }) => {
   return (
-    <div className={classes.loader}>
-      <CircularProgress color="primary" style={{ margin: '0 auto' }} />
-    </div>
+    <Message tagline={tagline} message={message}>
+      <CircularProgress color="primary" />
+    </Message>
   );
 });
 
diff --git a/src/components/Message/Message.tsx b/src/components/Message/Message.tsx
new file mode 100644
index 0000000..f568552
--- /dev/null
+++ b/src/components/Message/Message.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
+
+
+interface PropTypes {
+  tagline?: string;
+  message?: string;
+}
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: theme.spacing(6)
+  },
+  content: {
+    margin: theme.spacing(2)
+  }
+}));
+
+const Message: React.FC<PropTypes> = React.memo(({ tagline, message, children }) => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.content}>
+        {children}
+      </div>
+      <Typography variant="h5">
+        {tagline}
+      </Typography>
+      <Typography color="textSecondary">
+        {message}
+      </Typography>
+    </div>
+  );
+});
+
+export default Message;