Fix: Addressed issue with status color not showing on Movie > Details (only purple was working)

frontend/src/Movie/Details/MovieStatusLabel.css

@@ -8,7 +8,7 @@
   border-left: 4px solid $successColor;
 }
 
-.unreleased {
+.notAvailable {
   padding-left: 2px;
   border-left: 4px solid $primaryColor;
 }

frontend/src/Movie/Details/MovieStatusLabel.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import getQueueStatusText from 'Utilities/Movie/getQueueStatusText';
+import firstCharToUpper from 'Utilities/String/firstCharToUpper';
 import translate from 'Utilities/String/translate';
 import styles from './MovieStatusLabel.css';
 
@@ -10,22 +11,25 @@ function getMovieStatus(hasFile, isMonitored, isAvailable, queueDetails = false)
     const queueStatus = queueDetails.items[0].status;
     const queueState = queueDetails.items[0].trackedDownloadStatus;
     const queueStatusText = getQueueStatusText(queueStatus, queueState);
-    return queueStatusText.longText;
+
+    if (queueStatusText) {
+      return queueStatusText;
+    }
   }
 
   if (hasFile) {
-    return translate('Downloaded');
+    return 'downloaded';
   }
 
   if (!isMonitored) {
-    return translate('Unmonitored');
+    return 'unmonitored';
   }
 
   if (isAvailable && !hasFile) {
-    return translate('Missing');
+    return 'missing';
   }
 
-  return translate('NotAvailable');
+  return 'notAvailable';
 }
 
 function MovieStatusLabel(props) {
@@ -38,6 +42,7 @@ function MovieStatusLabel(props) {
 
   const status = getMovieStatus(hasMovieFiles, monitored, isAvailable, queueDetails);
   let statusClass = status;
+
   if (queueDetails.items.length) {
     statusClass = 'queue';
   }
@@ -46,7 +51,7 @@ function MovieStatusLabel(props) {
     <span
       className={styles[statusClass]}
     >
-      {status}
+      {translate(firstCharToUpper(status))}
     </span>
   );
 }

frontend/src/Movie/Index/ProgressBar/MovieIndexProgressBar.js

@@ -46,7 +46,7 @@ function MovieIndexProgressBar(props) {
       size={detailedProgressBar ? sizes.MEDIUM : sizes.SMALL}
       showText={detailedProgressBar}
       width={posterWidth}
-      text={(queueStatusText) ? queueStatusText.shortText : translate(movieStatus)}
+      text={(queueStatusText) ? queueStatusText : translate(movieStatus)}
     />
   );
 }

frontend/src/Movie/MovieFileStatus.js

@@ -25,10 +25,10 @@ function MovieFileStatus(props) {
     return (
       <div className={styles.center}>
         <Label
-          title={queueStatusText.longText}
+          title={queueStatusText}
           kind={kinds.QUEUE}
         >
-          {queueStatusText.shortText}
+          {queueStatusText}
         </Label>
       </div>
     );

frontend/src/Utilities/Movie/getQueueStatusText.js

@@ -6,8 +6,7 @@ export default function getQueueStatusText(queueStatus, queueState) {
     return;
   }
 
-  let statusLong = translate('Downloading');
-  let statusShort = translate('Downloading');
+  let status = translate('Downloading');
 
   switch (true) {
     case queueStatus !== 'completed':
@@ -15,21 +14,15 @@ export default function getQueueStatusText(queueStatus, queueState) {
         case 'queue':
         case 'paused':
         case 'failed':
-          statusLong = `${translate('Downloading')}: ${translate(titleCase(queueStatus))}`;
-          statusShort = titleCase(queueStatus);
+        case 'downloading':
+          status = titleCase(queueStatus);
           break;
         case 'delay':
-          statusLong = `${translate('Downloading')}: ${translate('Pending')}`;
-          statusShort = translate('Pending');
+          status = translate('Pending');
           break;
         case 'DownloadClientUnavailable':
         case 'warning':
-          statusLong = `${translate('Downloading')}: ${translate('Error')}`;
-          statusShort = translate('Error');
-          break;
-        case 'downloading':
-          statusLong = titleCase(queueStatus);
-          statusShort = titleCase(queueStatus);
+          status = translate('Error');
           break;
         default:
       }
@@ -38,16 +31,13 @@ export default function getQueueStatusText(queueStatus, queueState) {
     case queueStatus === 'completed':
       switch (queueState) {
         case 'importPending':
-          statusLong = `${translate('Downloaded')}: ${translate('Pending')}`;
-          statusShort = translate('Downloaded');
+          status = translate('Pending');
           break;
         case 'importing':
-          statusLong = `${translate('Downloaded')}: ${translate('Importing')}`;
-          statusShort = translate('Downloaded');
+          status = translate('Importing');
           break;
         case 'failedPending':
-          statusLong = `${translate('Downloaded')}: ${translate('Waiting')}`;
-          statusShort = translate('Downloaded');
+          status = translate('Waiting');
           break;
         default:
       }
@@ -56,6 +46,5 @@ export default function getQueueStatusText(queueStatus, queueState) {
     default:
   }
 
-  const result = { longText: statusLong, shortText: statusShort };
-  return result;
+  return status;
 }

frontend/src/Utilities/String/firstCharToUpper.js

@@ -0,0 +1,9 @@
+function firstCharToUpper(input) {
+  if (!input) {
+    return '';
+  }
+
+  return [].map.call(input, (char, i) => (i ? char : char.toUpperCase())).join('');
+}
+
+export default firstCharToUpper;