Update appearance of task list items

src/components/TaskList/TaskListItem.css

@@ -0,0 +1,7 @@
+.TaskListItem {
+    background: var(--col-maxContrast);
+    padding: var(--spc-small);
+    border-radius: var(--rad-small);
+    margin: var(--spc-small) 0;
+    box-shadow: 0 2px 4px rgba(var(--rgb-primary), 0.06);
+}

src/components/TaskList/TaskListItem.tsx

@@ -2,26 +2,45 @@ import * as React from 'react';
 import { HTMLAttributes } from 'react';
 import { Link } from 'react-router-dom';
 
+import './TaskListItem.css';
+
 interface Props extends HTMLAttributes<HTMLElement> {
     task: Task;
     linkBaseUrl?: string;
 }
 
-export default ({ task, linkBaseUrl }: Props) => (
-    <div className="u-flexH u-stretchH">
-        <div>
-            <h2 className={ task.openStatus ? '' : 'u-strikethrough'}>
-                • { linkBaseUrl
-                    ? (
-                        <Link
-                            to={`${linkBaseUrl}/tasks/${task.id}`}
-                            data-testid='taskListItem_titleLink'>
-                            { task.title }
-                        </Link>
-                    )
-                    : task.title
-                }
-            </h2>
+const buildDate = (timestamp: any) => {
+    const d = new Date(timestamp);
+    return `${d.getDate()}/${d.getMonth()}/${d.getFullYear()}`
+}
+
+export default ({ task, linkBaseUrl }: Props) => {
+    const renderTitle = () => linkBaseUrl
+        ? <Link
+                to={`${linkBaseUrl}/tasks/${task.id}`}
+                data-testid='taskListItem_titleLink'
+                style={{ color: 'var(--clr-primary)'}}
+            >
+            { task.title }
+        </Link>
+        : task.title
+
+    return (
+        <div className='TaskListItem u-flexV'>
+                <h3
+                    className={ task.openStatus ? '' : 'u-strikethrough'}
+                    style={{ color: 'var(--clr-primary)'}}
+                >
+                    { renderTitle() }
+                </h3>
+
+                <div
+                    className='u-flexH u-fullWidth u-spaceBetween'
+                    style={{ color: 'rgba(var(--rgb-primary), 0.4)'}}
+                >
+                    <h4>{ task.creator.username }</h4>
+                    <h4 title='D/M/Y'>{ buildDate(task.dateUpdated) }</h4>
+                </div>
         </div>
-    </div>
-);
+    );
+}

src/styles/index.css

@@ -61,7 +61,6 @@ h2 {
 h3 {
     /* font-size: 0.8rem; */
     color: rgba(var(--rgb-primary), 0.5);
-    font-weight: bold;
 }
 
 h4 {

src/util/graphql/queries.ts

@@ -105,6 +105,7 @@ export const getTasksForIssue = gql(`
             title
             body
             openStatus
+            dateUpdated
         }
     }
 `);
@@ -117,6 +118,7 @@ export const getTask = gql(`
             creator { id username }
             openStatus
             body
+            dateUpdated
             userPermissions { userID level }
         }
     }

src/views/IssueView/index.tsx

@@ -90,13 +90,15 @@ const IssueView = ({
 
             <div className="IssueView-sidebar">
                 <h2>Tasks</h2>
-                <hr />
-                <section className='u-marginBottomMed u-marginTopMed'>
+
+                <section className='u-marginBottomLarge u-marginTopMed'>
                     <PermittedRender requiredLevel={PermissionLevel.Create} resource={issue}>
                         <h3>New Task</h3>
                         <TaskCreate parentID={match.params.issueID} />
                     </PermittedRender>
+                </section>
 
+                <section>
                     <Query query={getTasksForIssue} variables={{ parent: match.params.issueID }}>
                         {({ loading, error, data }: QueryResult) => {
                             if (loading) return <LoadingSpinner message='Loading tasks...' />