Fixed: Legend and Colors on calendar

Fixed: Streamline Legend in Index and Calendar
Fixed: Broken Translations

frontend/src/App/AppUpdatedModalContent.js

@@ -73,14 +73,14 @@ function AppUpdatedModalContent(props) {
         <Button
           onPress={onSeeChangesPress}
         >
-          translate('RecentChanges')
+          {translate('RecentChanges')}
         </Button>
 
         <Button
           kind={kinds.PRIMARY}
           onPress={onModalClose}
         >
-          translate('Reload')
+          {translate('Reload')}
         </Button>
       </ModalFooter>
     </ModalContent>

frontend/src/Calendar/Legend/Legend.js

@@ -29,32 +29,45 @@ function Legend(props) {
     <div className={styles.legend}>
       <div>
         <LegendItem
-          status={translate('Unreleased')}
+          style='ended'
-          tooltip={translate('MovieHasntReleasedYet')}
+          name={translate('DownloadedAndMonitored')}
           colorImpairedMode={colorImpairedMode}
         />
 
         <LegendItem
-          status={translate('Unmonitored')}
+          style='availNotMonitored'
-          tooltip={translate('MovieIsUnmonitored')}
+          name={translate('DownloadedButNotMonitored')}
           colorImpairedMode={colorImpairedMode}
         />
       </div>
 
       <div>
         <LegendItem
-          status={translate('Downloading')}
+          style='missingMonitored'
-          tooltip={translate('MovieIsDownloading')}
+          name={translate('MissingMonitoredAndConsideredAvailable')}
           colorImpairedMode={colorImpairedMode}
         />
 
         <LegendItem
-          status={translate('Downloaded')}
+          style='missingUnmonitored'
-          tooltip={translate('MovieWasDownloadedAndSorted')}
+          name={translate('MissingNotMonitored')}
           colorImpairedMode={colorImpairedMode}
         />
       </div>
 
+      <div>
+        <LegendItem
+          style='queue'
+          name={translate('Queued')}
+          colorImpairedMode={colorImpairedMode}
+        />
+
+        <LegendItem
+          style='continuing'
+          name={translate('Unreleased')}
+          colorImpairedMode={colorImpairedMode}
+        />
+      </div>
       {
         iconsToShow.length > 0 &&
           <div>

frontend/src/Calendar/Legend/LegendIconItem.css

@@ -1,8 +1,5 @@
 .legendIconItem {
-  margin: 3px 0;
+  margin-left: 6px;
-  margin-right: 6px;
-  width: 150px;
-  cursor: default;
 }
 
 .icon {

frontend/src/Calendar/Legend/LegendItem.css

@@ -1,33 +1,74 @@
+.legendItemContainer {
+  margin-right: 5px;
+  width: 220px;
+}
+
 .legendItem {
-  margin: 3px 0;
+  display: inline-flex;
-  margin-right: 6px;
+  margin-top: -1px;
-  padding-left: 5px;
+  vertical-align: middle;
-  width: 150px;
+  line-height: 16px;
-  border-left-width: 4px;
-  border-left-style: solid;
-  cursor: default;
 }
 
-/*
+.legendItemColor {
- * Status
+  margin-right: 8px;
- */
+  width: 30px;
-
+  height: 16px;
-.downloaded {
+  border-radius: 4px;
-  composes: downloaded from '~Calendar/Events/CalendarEvent.css';
 }
 
-.downloading {
+.queue {
-  composes: downloading from '~Calendar/Events/CalendarEvent.css';
+  composes: legendItemColor;
+
+  background-color: $queueColor;
 }
 
-.unmonitored {
+.continuing {
-  composes: unmonitored from '~Calendar/Events/CalendarEvent.css';
+  composes: legendItemColor;
+
+  background-color: $primaryColor;
 }
 
-.missing {
+.availNotMonitored {
-  composes: missing from '~Calendar/Events/CalendarEvent.css';
+  composes: legendItemColor;
+
+  background-color: $darkGray;
 }
 
-.unreleased {
+.ended {
-  composes: unreleased from '~Calendar/Events/CalendarEvent.css';
+  composes: legendItemColor;
+
+  background-color: $successColor;
+}
+
+.missingMonitored {
+  composes: legendItemColor;
+
+  background-color: $dangerColor;
+
+  &:global(.colorImpaired) {
+    background: repeating-linear-gradient(90deg, color($dangerColor shade(5%)), color($dangerColor shade(5%)) 5px, color($dangerColor shade(15%)) 5px, color($dangerColor shade(15%)) 10px);
+  }
+}
+
+.missingUnmonitored {
+  composes: legendItemColor;
+
+  background-color: $warningColor;
+
+  &:global(.colorImpaired) {
+    background: repeating-linear-gradient(45deg, $warningColor, $warningColor 5px, color($warningColor tint(15%)) 5px, color($warningColor tint(15%)) 10px);
+  }
+}
+
+.missingMonitoredColorImpaired {
+  background: repeating-linear-gradient(90deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
+}
+
+.missingUnmonitoredColorImpaired {
+  background: repeating-linear-gradient(45deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
+}
+
+.legendItemText {
+  display: inline-block;
 }

frontend/src/Calendar/Legend/LegendItem.js

@@ -1,35 +1,34 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-import titleCase from 'Utilities/String/titleCase';
 import styles from './LegendItem.css';
 
 function LegendItem(props) {
   const {
     name,
-    status,
+    style,
-    tooltip,
     colorImpairedMode
   } = props;
 
   return (
-    <div
+    <div className={styles.legendItemContainer}>
-      className={classNames(
+      <div
-        styles.legendItem,
+        className={classNames(
-        styles[status],
+          styles.legendItem,
-        colorImpairedMode && 'colorImpaired'
+          styles[style],
-      )}
+          colorImpairedMode && 'colorImpaired'
-      title={tooltip}
+        )}
-    >
+      />
-      {name ? name : titleCase(status)}
+      <div className={classNames(styles.legendItemText, colorImpairedMode && styles[`${style}ColorImpaired`])}>
+        {name}
+      </div>
     </div>
   );
 }
 
 LegendItem.propTypes = {
-  name: PropTypes.string,
+  name: PropTypes.string.isRequired,
-  status: PropTypes.string.isRequired,
+  style: PropTypes.string.isRequired,
-  tooltip: PropTypes.string.isRequired,
   colorImpairedMode: PropTypes.bool.isRequired
 };
 

src/NzbDrone.Core/Localization/Core/en.json

@@ -244,8 +244,8 @@
   "DownloadClientStatusCheckSingleClientMessage": "Download clients unavailable due to failures: {0}",
   "DownloadClientUnavailable": "Download client is unavailable",
   "Downloaded": "Downloaded",
-  "DownloadedAndMonitored": "Downloaded and Monitored",
+  "DownloadedAndMonitored": "Downloaded (Monitored)",
-  "DownloadedButNotMonitored": "Downloaded, but not Monitored",
+  "DownloadedButNotMonitored": "Downloaded (Unmonitored)",
   "DownloadFailed": "Download failed",
   "DownloadFailedCheckDownloadClientForMoreDetails": "Download failed: check download client for more details",
   "DownloadFailedInterp": "Download failed: {0}",
@@ -468,7 +468,7 @@
   "LookingForReleaseProfiles1": "Looking for Release Profiles? Try",
   "LookingForReleaseProfiles2": "instead.",
   "LowerCase": "Lower Case",
-  "MaintenanceRelease": "Maintenance release: bug fixes and other improvements. See Github Commmit History for more details",
+  "MaintenanceRelease": "Maintenance Release: bug fixes and other improvements. See Github Commit History for more details",
   "Manual": "Manual",
   "ManualImport": "Manual Import",
   "ManualImportSelectLanguage": "Manual Import - Select Language",
@@ -511,8 +511,8 @@
   "MinutesSixty": "60 Minutes: {0}",
   "Missing": "Missing",
   "MissingFromDisk": "Radarr was unable to find the file on disk so it was removed",
-  "MissingMonitoredAndConsideredAvailable": "Missing, Monitored and considered Available",
+  "MissingMonitoredAndConsideredAvailable": "Missing (Monitored)",
-  "MissingNotMonitored": "Missing, not Monitored",
+  "MissingNotMonitored": "Missing (Unmonitored)",
   "Mode": "Mode",
   "Monday": "Monday",
   "Monitor": "Monitor",
@@ -1006,7 +1006,7 @@
   "UnmappedFolders": "Unmapped Folders",
   "Unmonitored": "Unmonitored",
   "UnmonitoredHelpText": "Include unmonitored movies in the iCal feed",
-  "Unreleased": "Unreleased",
+  "Unreleased": "Unavailable",
   "UnsavedChanges": "Unsaved Changes",
   "UnselectAll": "Unselect All",
   "UpdateAll": "Update All",