aboutsummaryrefslogtreecommitdiff
path: root/src/components/EmptyState
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/EmptyState')
-rw-r--r--src/components/EmptyState/EmptyState.tsx24
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>
);
};