Queue status/timeleft improvements

Closes #1424

frontend/src/Activity/Queue/QueueStatusCell.css

@@ -3,3 +3,7 @@
 
   width: 30px;
 }
+
+.noMessages {
+  margin-bottom: 10px;
+}

frontend/src/Activity/Queue/QueueStatusCell.js

@@ -13,7 +13,10 @@ function getDetailedPopoverBody(statusMessages) {
       {
         statusMessages.map(({ title, messages }) => {
           return (
-            <div key={title}>
+            <div
+              key={title}
+              className={messages.length ? undefined: styles.noMessages}
+            >
               {title}
               <ul>
                 {
@@ -52,10 +55,6 @@ function QueueStatusCell(props) {
   let iconKind = kinds.DEFAULT;
   let title = translate('Downloading');
 
-  if (hasWarning) {
-    iconKind = kinds.WARNING;
-  }
-
   if (status === 'paused') {
     iconName = icons.PAUSED;
     title = 'Paused';
@@ -72,17 +71,24 @@ function QueueStatusCell(props) {
 
     if (trackedDownloadState === 'importPending') {
       title += ' - Waiting to Import';
+      iconKind = kinds.PURPLE;
     }
 
     if (trackedDownloadState === 'importing') {
       title += ' - Importing';
+      iconKind = kinds.PURPLE;
     }
 
     if (trackedDownloadState === 'failedPending') {
       title += ' - Waiting to Process';
+      iconKind = kinds.DANGER;
     }
   }
 
+  if (hasWarning) {
+    iconKind = kinds.WARNING;
+  }
+
   if (status === 'delay') {
     iconName = icons.PENDING;
     title = 'Pending';
@@ -146,8 +152,8 @@ QueueStatusCell.propTypes = {
 };
 
 QueueStatusCell.defaultProps = {
-  trackedDownloadStatus: 'ok',
+  trackedDownloadStatus: 'Ok',
-  trackedDownloadState: 'downloading'
+  trackedDownloadState: 'Downloading'
 };
 
 export default QueueStatusCell;

frontend/src/Activity/Queue/TimeleftCell.js

@@ -20,7 +20,7 @@ function TimeleftCell(props) {
     timeFormat
   } = props;
 
-  if (status === 'Delay') {
+  if (status === 'delay') {
     const date = getRelativeDate(estimatedCompletionTime, shortDateFormat, showRelativeDates);
     const time = formatTime(estimatedCompletionTime, timeFormat, { includeMinuteZero: true });
 
@@ -34,7 +34,7 @@ function TimeleftCell(props) {
     );
   }
 
-  if (status === 'DownloadClientUnavailable') {
+  if (status === 'downloadClientUnavailable') {
     const date = getRelativeDate(estimatedCompletionTime, shortDateFormat, showRelativeDates);
     const time = formatTime(estimatedCompletionTime, timeFormat, { includeMinuteZero: true });
 
@@ -48,7 +48,7 @@ function TimeleftCell(props) {
     );
   }
 
-  if (!timeleft) {
+  if (!timeleft || status === 'completed' || status === 'failed') {
     return (
       <TableRowCell className={styles.timeleft}>
         -

frontend/src/Components/Icon.css

@@ -25,3 +25,7 @@
 .warning {
   color: $warningColor;
 }
+
+.purple {
+  color: $purple;
+}