feat: add message to EmptyState

3 files changed, 14 insertions, 4 deletions

diff --git a/src/components/EmptyState/EmptyState.tsx b/src/components/EmptyState/EmptyState.tsx
index b103e3c..f6a6363 100644
--- a/src/components/EmptyState/EmptyState.tsx
+++ b/src/components/EmptyState/EmptyState.tsx
@@ -3,6 +3,10 @@ import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
 import noContentIcon from '../../assets/noContent.svg';
 
+interface PropTypes {
+  message?: string;
+}
+
 const useStyles = makeStyles(theme => ({
   root: {
     display: 'flex',
@@ -17,7 +21,7 @@ const useStyles = makeStyles(theme => ({
 
 }));
 
-const EmptyState: React.FC = () => {
+const EmptyState: React.FC<PropTypes> = ({ message }) => {
   const classes = useStyles();
 
   return (
@@ -26,6 +30,11 @@ const EmptyState: React.FC = () => {
       <Typography variant="h5">
         No content
       </Typography>
+      <Typography color="textSecondary">
+        <p>
+          {message}
+        </p>
+      </Typography>
     </div>
   );
 };
diff --git a/src/containers/Profile/Profile.tsx b/src/containers/Profile/Profile.tsx
index fe77ff2..701aa06 100644
--- a/src/containers/Profile/Profile.tsx
+++ b/src/containers/Profile/Profile.tsx
@@ -27,6 +27,7 @@ const Profile: React.FC = () => {
     }
   }, [username, history, user]);
 
+  const isOwnProfile = useMemo(() => user?.username === username, [user, username]);
 
   const totalVotes = useMemo(() => polls?.reduce(
     (total: number, current: Poll) => {
@@ -47,10 +48,10 @@ const Profile: React.FC = () => {
         polls
           ? polls.length
             ? <PollsList polls={polls} mutate={mutatePolls} />
-            : <EmptyState />
+            : <EmptyState message={isOwnProfile ? 'Create a poll and it will show up here.' : ''} />
           : isValidating && <Loading />
       }
-      {user?.username === username && <Fab />}
+      {isOwnProfile && <Fab />}
     </Container>
   );
 };
diff --git a/src/containers/Profile/ProfileInfo.tsx b/src/containers/Profile/ProfileInfo.tsx
index c5c5454..c9831f3 100644
--- a/src/containers/Profile/ProfileInfo.tsx
+++ b/src/containers/Profile/ProfileInfo.tsx
@@ -22,7 +22,7 @@ interface PropTypes {
 const useStyles = makeStyles(theme => ({
   root: {
     position: 'relative',
-    marginBottom: theme.spacing(2)
+    marginBottom: theme.spacing(4)
   },
   avatar: {
     width: 150,