Tasks: make overdue secondary text red

Also add some logic to display tasks due today as "Due today"
Tasks: fixes

src/components/Tasks/TaskListItem.tsx

@@ -58,6 +58,7 @@ export default React.memo(function TaskListItem(props: PropsType) {
     <ListItem
       primaryText={title}
       secondaryText={task.dueDate && `Due ${moment().to(task.dueDate.toJSDate())}`}
+      secondaryTextColor={task.overdue ? 'error' : 'textSecondary'}
       onClick={() => onClick(task)}
       leftIcon={
         <Checkbox

src/pim-types.ts

@@ -230,6 +230,16 @@ export class TaskType extends EventType {
     return this.dueDate && moment(this.dueDate.toJSDate()).isSameOrBefore(moment(), 'day');
   }
 
+  get overdue() {
+    if (!this.dueDate) {
+      return false;
+    }
+
+    const dueDate = moment(this.dueDate.toJSDate());
+    const now = moment();
+    return (this.dueDate.isDate) ? dueDate.isBefore(now, 'day') : dueDate.isBefore(now);
+  }
+
   public clone() {
     const ret = new TaskType(new ICAL.Component(this.component.toJSON()));
     ret.color = this.color;

src/widgets/List.tsx

@@ -46,6 +46,7 @@ interface ListItemPropsType {
   insetChildren?: boolean;
   nestedItems?: React.ReactNode[];
   selected?: boolean;
+  secondaryTextColor?: 'initial' | 'inherit' | 'primary' | 'secondary' | 'textPrimary' | 'textSecondary' | 'error';
 }
 
 export const ListItem = React.memo(function ListItem(_props: ListItemPropsType) {
@@ -62,6 +63,7 @@ export const ListItem = React.memo(function ListItem(_props: ListItemPropsType)
     insetChildren,
     nestedItems,
     selected,
+    secondaryTextColor,
   } = _props;
 
   const extraProps = (onClick || href) ? {
@@ -84,7 +86,7 @@ export const ListItem = React.memo(function ListItem(_props: ListItemPropsType)
             {leftIcon}
           </ListItemIcon>
         )}
-        <ListItemText inset={insetChildren} primary={primaryText} secondary={secondaryText}>
+        <ListItemText inset={insetChildren} primary={primaryText} secondary={secondaryText} secondaryTypographyProps={{ color: secondaryTextColor }}>
           {children}
         </ListItemText>
         {rightIcon && (