fix: show item descriptions

closes #170

src/components/phase/PhaseItemDescription.css

@@ -0,0 +1,4 @@
+.PhaseItemDescriptionText p {
+  font-size: small;
+  text-align: center;
+}

src/components/phase/PhaseItemDescription.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import InfoIcon from '@material-ui/icons/Info';
+import Text from '../common/Text';
+import './PhaseItemDescription.css';
+
+const style = {
+  marginTop: '1rem',
+  marginBottom: '1rem',
+  flexDirection: 'row',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+};
+
+const PhaseItemDescription = ({ description }) => {
+  if (description && description !== '') {
+    return (
+      <div style={style}>
+        <InfoIcon color="primary" />
+        <Text content={description} className="PhaseItemDescriptionText" />
+      </div>
+    );
+  }
+  return null;
+};
+
+PhaseItemDescription.propTypes = {
+  description: PropTypes.string,
+};
+
+PhaseItemDescription.defaultProps = {
+  description: '',
+};
+
+export default PhaseItemDescription;

src/components/phase/PhaseItems.js

@@ -1,14 +1,26 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import PhaseItem from './PhaseItem';
+import PhaseItemDescription from './PhaseItemDescription';
 
 const PhaseItems = ({ items, phaseId, spaceId }) => {
   if (!items) {
     return null;
   }
-  return items.map(item => (
-    <PhaseItem key={item.id} phaseId={phaseId} spaceId={spaceId} item={item} />
-  ));
+  return items.map(item => {
+    const { description } = item;
+    return (
+      <>
+        <PhaseItemDescription description={description} />
+        <PhaseItem
+          key={item.id}
+          phaseId={phaseId}
+          spaceId={spaceId}
+          item={item}
+        />
+      </>
+    );
+  });
 };
 
 PhaseItems.propTypes = {