Fixed: Legend and Colors on calendar

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

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>

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 {

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;
 }
 
-/*
- * Status
- */
-
-.downloaded {
-  composes: downloaded from '~Calendar/Events/CalendarEvent.css';
+.legendItemColor {
+  margin-right: 8px;
+  width: 30px;
+  height: 16px;
+  border-radius: 4px;
 }
 
-.downloading {
-  composes: downloading from '~Calendar/Events/CalendarEvent.css';
+.queue {
+  composes: legendItemColor;
+
+  background-color: $queueColor;
 }
 
-.unmonitored {
-  composes: unmonitored from '~Calendar/Events/CalendarEvent.css';
+.continuing {
+  composes: legendItemColor;
+
+  background-color: $primaryColor;
 }
 
-.missing {
-  composes: missing from '~Calendar/Events/CalendarEvent.css';
+.availNotMonitored {
+  composes: legendItemColor;
+
+  background-color: $darkGray;
 }
 
-.unreleased {
-  composes: unreleased 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);
+  }
+}
+
+.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,
-    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
 };