From 0366029269c6e2ed723bb5b1d7ca51010b9cba0d Mon Sep 17 00:00:00 2001
From: bakerboy448 <55419169+bakerboy448@users.noreply.github.com>
Date: Wed, 25 Nov 2020 08:32:39 -0600
Subject: [PATCH] Fixed: Legend and Colors on calendar

Fixed: Streamline Legend in Index and Calendar
Fixed: Broken Translations
---
 frontend/src/App/AppUpdatedModalContent.js    |  4 +-
 frontend/src/Calendar/Legend/Legend.js        | 29 +++++--
 .../src/Calendar/Legend/LegendIconItem.css    |  5 +-
 frontend/src/Calendar/Legend/LegendItem.css   | 81 ++++++++++++++-----
 frontend/src/Calendar/Legend/LegendItem.js    | 29 ++++---
 src/NzbDrone.Core/Localization/Core/en.json   | 12 +--
 6 files changed, 105 insertions(+), 55 deletions(-)

diff --git a/frontend/src/App/AppUpdatedModalContent.js b/frontend/src/App/AppUpdatedModalContent.js
index 7b732a45a..72bf59ec6 100644
--- a/frontend/src/App/AppUpdatedModalContent.js
+++ b/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>
diff --git a/frontend/src/Calendar/Legend/Legend.js b/frontend/src/Calendar/Legend/Legend.js
index 16102f8ca..143363dc5 100644
--- a/frontend/src/Calendar/Legend/Legend.js
+++ b/frontend/src/Calendar/Legend/Legend.js
@@ -29,32 +29,45 @@ function Legend(props) {
     <div className={styles.legend}>
       <div>
         <LegendItem
-          status={translate('Unreleased')}
-          tooltip={translate('MovieHasntReleasedYet')}
+          style='ended'
+          name={translate('DownloadedAndMonitored')}
           colorImpairedMode={colorImpairedMode}
         />
 
         <LegendItem
-          status={translate('Unmonitored')}
-          tooltip={translate('MovieIsUnmonitored')}
+          style='availNotMonitored'
+          name={translate('DownloadedButNotMonitored')}
           colorImpairedMode={colorImpairedMode}
         />
       </div>
 
       <div>
         <LegendItem
-          status={translate('Downloading')}
-          tooltip={translate('MovieIsDownloading')}
+          style='missingMonitored'
+          name={translate('MissingMonitoredAndConsideredAvailable')}
           colorImpairedMode={colorImpairedMode}
         />
 
         <LegendItem
-          status={translate('Downloaded')}
-          tooltip={translate('MovieWasDownloadedAndSorted')}
+          style='missingUnmonitored'
+          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>
diff --git a/frontend/src/Calendar/Legend/LegendIconItem.css b/frontend/src/Calendar/Legend/LegendIconItem.css
index 01db0ba5a..d4b07f247 100644
--- a/frontend/src/Calendar/Legend/LegendIconItem.css
+++ b/frontend/src/Calendar/Legend/LegendIconItem.css
@@ -1,8 +1,5 @@
 .legendIconItem {
-  margin: 3px 0;
-  margin-right: 6px;
-  width: 150px;
-  cursor: default;
+  margin-left: 6px;
 }
 
 .icon {
diff --git a/frontend/src/Calendar/Legend/LegendItem.css b/frontend/src/Calendar/Legend/LegendItem.css
index ddf3e6a61..98634ff74 100644
--- a/frontend/src/Calendar/Legend/LegendItem.css
+++ b/frontend/src/Calendar/Legend/LegendItem.css
@@ -1,33 +1,74 @@
+.legendItemContainer {
+  margin-right: 5px;
+  width: 220px;
+}
+
 .legendItem {
-  margin: 3px 0;
-  margin-right: 6px;
-  padding-left: 5px;
-  width: 150px;
-  border-left-width: 4px;
-  border-left-style: solid;
-  cursor: default;
+  display: inline-flex;
+  margin-top: -1px;
+  vertical-align: middle;
+  line-height: 16px;
+}
+
+.legendItemColor {
+  margin-right: 8px;
+  width: 30px;
+  height: 16px;
+  border-radius: 4px;
+}
+
+.queue {
+  composes: legendItemColor;
+
+  background-color: $queueColor;
+}
+
+.continuing {
+  composes: legendItemColor;
+
+  background-color: $primaryColor;
 }
 
-/*
- * Status
- */
+.availNotMonitored {
+  composes: legendItemColor;
 
-.downloaded {
-  composes: downloaded from '~Calendar/Events/CalendarEvent.css';
+  background-color: $darkGray;
 }
 
-.downloading {
-  composes: downloading from '~Calendar/Events/CalendarEvent.css';
+.ended {
+  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);
+  }
 }
 
-.unmonitored {
-  composes: unmonitored from '~Calendar/Events/CalendarEvent.css';
+.missingMonitoredColorImpaired {
+  background: repeating-linear-gradient(90deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
 }
 
-.missing {
-  composes: missing from '~Calendar/Events/CalendarEvent.css';
+.missingUnmonitoredColorImpaired {
+  background: repeating-linear-gradient(45deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
 }
 
-.unreleased {
-  composes: unreleased from '~Calendar/Events/CalendarEvent.css';
+.legendItemText {
+  display: inline-block;
 }
diff --git a/frontend/src/Calendar/Legend/LegendItem.js b/frontend/src/Calendar/Legend/LegendItem.js
index 5da15baba..264704ace 100644
--- a/frontend/src/Calendar/Legend/LegendItem.js
+++ b/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,
-    tooltip,
+    style,
     colorImpairedMode
   } = props;
 
   return (
-    <div
-      className={classNames(
-        styles.legendItem,
-        styles[status],
-        colorImpairedMode && 'colorImpaired'
-      )}
-      title={tooltip}
-    >
-      {name ? name : titleCase(status)}
+    <div className={styles.legendItemContainer}>
+      <div
+        className={classNames(
+          styles.legendItem,
+          styles[style],
+          colorImpairedMode && 'colorImpaired'
+        )}
+      />
+      <div className={classNames(styles.legendItemText, colorImpairedMode && styles[`${style}ColorImpaired`])}>
+        {name}
+      </div>
     </div>
   );
 }
 
 LegendItem.propTypes = {
-  name: PropTypes.string,
-  status: PropTypes.string.isRequired,
-  tooltip: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  style: PropTypes.string.isRequired,
   colorImpairedMode: PropTypes.bool.isRequired
 };
 
diff --git a/src/NzbDrone.Core/Localization/Core/en.json b/src/NzbDrone.Core/Localization/Core/en.json
index 0c7a9b056..493265486 100644
--- a/src/NzbDrone.Core/Localization/Core/en.json
+++ b/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",
-  "DownloadedButNotMonitored": "Downloaded, but not Monitored",
+  "DownloadedAndMonitored": "Downloaded (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",
-  "MissingNotMonitored": "Missing, not Monitored",
+  "MissingMonitoredAndConsideredAvailable": "Missing (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",