refactor: separate Message component

1 files changed, 4 insertions, 20 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>
   );
 };