Added editable descriptions

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "dotenv": "^6.0.0",
     "glamor": "^2.20.40",
     "react": "^15.6.1",
     "react-animated-number": "^0.4.3",

src/components/Content/Calendar/Calendar.js

@@ -1,11 +1,7 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import moment from 'moment';
-import {
-  getTasks,
-  getPursuances,
-  showTaskDetails,
-} from '../../../actions';
+import { getTasks, getPursuances, showTaskDetails } from '../../../actions';
 import BigCalendar from 'react-big-calendar';
 import 'react-big-calendar/lib/css/react-big-calendar.css';
 import './Calendar.css';
@@ -14,7 +10,6 @@ import '../Content.css';
 BigCalendar.momentLocalizer(moment);
 
 class Calendar extends Component {
-
   componentDidMount() {
     const {
       getPursuances,
@@ -25,9 +20,11 @@ class Calendar extends Component {
     } = this.props;
 
     // Fetch this pursuance's tasks if we haven't already
-    if (Object.keys(tasks.taskMap)
-        .filter(gid => gid.startsWith(currentPursuanceId + '_'))
-        .length === 0) {
+    if (
+      Object.keys(tasks.taskMap).filter(gid =>
+        gid.startsWith(currentPursuanceId + '_')
+      ).length === 0
+    ) {
       getTasks(currentPursuanceId);
     }
     if (Object.keys(pursuances).length === 0) {
@@ -36,33 +33,39 @@ class Calendar extends Component {
   }
 
   getEvents = () => {
-    const { currentPursuanceId, user, tasks: { taskMap } } = this.props;
+    const {
+      currentPursuanceId,
+      user,
+      tasks: { taskMap }
+    } = this.props;
     return Object.keys(taskMap)
-      .filter((gid) => {
+      .filter(gid => {
         const t = taskMap[gid];
-        return t &&
+        return (
+          t &&
           t.due_date &&
           t.status !== 'Done' &&
           t.assigned_to === user.username &&
           (t.pursuance_id === currentPursuanceId ||
-           t.assigned_to_pursuance_id === currentPursuanceId)
+            t.assigned_to_pursuance_id === currentPursuanceId)
+        );
       })
-      .map((gid) => {
+      .map(gid => {
         const t = taskMap[gid];
         return {
           id: t.gid,
           title: t.title,
           start: new Date(t.due_date),
           end: new Date(t.due_date),
           desc: t.deliverables,
-          allDay: true,
-        }
-      })
-  }
+          allDay: true
+        };
+      });
+  };
 
-  onSelectEvent = (event) => {
-    this.props.showTaskDetails({taskGid: event.id});
-  }
+  onSelectEvent = event => {
+    this.props.showTaskDetails({ taskGid: event.id });
+  };
 
   render() {
     const { pursuances, currentPursuanceId } = this.props;
@@ -74,9 +77,8 @@ class Calendar extends Component {
           <div id="task-hierarchy-title">
             <h2 id="calendar-title">Calendar:&nbsp;</h2>
             <h2 id="pursuance-title">
-              {
-                pursuances[currentPursuanceId] && pursuances[currentPursuanceId].name
-              }
+              {pursuances[currentPursuanceId] &&
+                pursuances[currentPursuanceId].name}
             </h2>
           </div>
           <div id="big-calendar">
@@ -95,9 +97,17 @@ class Calendar extends Component {
   }
 }
 
-export default connect(({ pursuances, currentPursuanceId, tasks, rightPanel, user }) =>
-  ({ pursuances, currentPursuanceId, tasks, rightPanel, user }), {
+export default connect(
+  ({ pursuances, currentPursuanceId, tasks, rightPanel, user }) => ({
+    pursuances,
+    currentPursuanceId,
+    tasks,
+    rightPanel,
+    user
+  }),
+  {
     getTasks,
     getPursuances,
-    showTaskDetails,
-})(Calendar);
+    showTaskDetails
+  }
+)(Calendar);

src/components/Content/RightPanel/TaskDetails/TaskDetails.css

@@ -75,6 +75,12 @@
   min-height: 64px;
 }
 
+.task-deliverables-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
 .task-deliverables-ctn a {
   color: #50b3fe;
 }
@@ -86,7 +92,7 @@
 
 .subtasks-list {
   list-style: none;
-  padding-left: 0
+  padding-left: 0;
 }
 
 .subtask-item {
@@ -106,3 +112,23 @@
   width: 100%;
   font-size: 36px;
 }
+
+.input {
+  color: black;
+}
+
+.editSubmit {
+  border-radius: 1px;
+  font-size: 17px;
+  font-weight: 400;
+  margin: 15px auto;
+  border-radius: 10px;
+  color: #fff;
+  background-color: #288bd6;
+  padding-top: 0;
+  margin: 0;
+}
+
+button {
+  margin: 0;
+}