1 files changed, 34 insertions, 2 deletions
diff --git a/src/components/EventCard/EventCard.tsx b/src/components/EventCard/EventCard.tsx
index 2658fd6..08b67bb 100644
--- a/src/components/EventCard/EventCard.tsx
+++ b/src/components/EventCard/EventCard.tsx
@@ -7,6 +7,12 @@ import {
   CardActions,
   Button
 } from '@material-ui/core';
+import {
+  FiberManualRecord as RunningIcon,
+  Close as FailedIcon,
+  Done as CompleteIcon,
+  Timer as NotStartedIcon
+} from '@material-ui/icons';
 import { Event } from '../../types';
 import requests from '../../requests';
 import { useAuth } from '../../hooks/useAuth';
@@ -20,13 +26,29 @@ const useStyles = makeStyles(theme => ({
   actions: {
     display: 'flex',
     justifyContent: 'space-between'
-  }
+  },
+  title: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    '& svg': {
+      marginLeft: theme.spacing(1)
+    }
+  },
+  running: {
+    color: theme.palette.warning.main
+  },
+  complete: {
+    color: theme.palette.success.main
+  },
 }));
 
+
 const EventCard: React.FC<PropTypes> = ({ event, mutate }) => {
   const classes = useStyles();
   const { user } = useAuth();
   const {
+    status,
     data: {
       name,
       date,
@@ -53,9 +75,19 @@ const EventCard: React.FC<PropTypes> = ({ event, mutate }) => {
       .then(() => mutate());
   };
 
+  const title = (
+    <div className={classes.title}>
+      {name}
+      {status === 'running' && <RunningIcon className={classes.running}/>}
+      {status === 'complete' && <CompleteIcon className={classes.complete} />}
+      {status === 'failed' && <FailedIcon color="error" />}
+      {!status && <NotStartedIcon color="disabled" />}
+    </div>
+  );
+
   return (
     <Card variant="outlined">
-      <CardHeader title={name || `Event #${event._id.slice(-4)}`} subheader={date}  />
+      <CardHeader title={title} subheader={date} />
       <CardContent>
         {conferenceId && <div> ConferenceID: {conferenceId} </div>}
         {attendanceId && <div> AttendanceID: {attendanceId} </div>}