Fixed: Icons on full color calendar events

Closes #6331

frontend/src/Calendar/Events/CalendarEvent.css

@@ -52,6 +52,10 @@ $fullColorGradient: rgba(244, 245, 246, 0.2);
 .statusContainer {
   display: flex;
   align-items: center;
+
+  &:global(.fullColor) {
+    filter: var(--calendarFullColorFilter)
+  }
 }
 
 .statusIcon {

frontend/src/Calendar/Events/CalendarEvent.js

@@ -102,7 +102,12 @@ class CalendarEvent extends Component {
               {series.title}
             </div>
 
-            <div className={styles.statusContainer}>
+            <div
+              className={classNames(
+                styles.statusContainer,
+                fullColorEvents && 'fullColor'
+              )}
+            >
               {
                 missingAbsoluteNumber ?
                   <Icon
@@ -128,6 +133,7 @@ class CalendarEvent extends Component {
                   <span className={styles.statusIcon}>
                     <CalendarEventQueueDetails
                       {...queueItem}
+                      fullColorEvents={fullColorEvents}
                     />
                   </span> :
                   null
@@ -150,7 +156,7 @@ class CalendarEvent extends Component {
                   <Icon
                     className={styles.statusIcon}
                     name={icons.EPISODE_FILE}
-                    kind={fullColorEvents ? kinds.DEFAULT : kinds.WARNING}
+                    kind={kinds.WARNING}
                     title={translate('QualityCutoffNotMet')}
                   /> :
                   null
@@ -160,9 +166,8 @@ class CalendarEvent extends Component {
                 episodeNumber === 1 && seasonNumber > 0 ?
                   <Icon
                     className={styles.statusIcon}
-                    name={icons.INFO}
+                    name={icons.PREMIERE}
                     kind={kinds.INFO}
-                    darken={fullColorEvents}
                     title={seasonNumber === 1 ? translate('SeriesPremiere') : translate('SeasonPremiere')}
                   /> :
                   null
@@ -173,8 +178,8 @@ class CalendarEvent extends Component {
                 finaleType ?
                   <Icon
                     className={styles.statusIcon}
-                    name={icons.INFO}
+                    name={finaleType === 'series' ? icons.FINALE_SERIES : icons.FINALE_SEASON}
-                    kind={fullColorEvents ? kinds.DEFAULT : kinds.WARNING}
+                    kind={finaleType === 'series' ? kinds.DANGER : kinds.WARNING}
                     title={getFinaleTypeName(finaleType)}
                   /> :
                   null
@@ -187,7 +192,6 @@ class CalendarEvent extends Component {
                     className={styles.statusIcon}
                     name={icons.INFO}
                     kind={kinds.PINK}
-                    darken={fullColorEvents}
                     title={translate('Special')}
                   /> :
                   null

frontend/src/Calendar/Events/CalendarEventGroup.css

@@ -50,6 +50,15 @@
   margin-bottom: 5px;
 }
 
+.statusContainer {
+  display: flex;
+  align-items: center;
+
+   &:global(.fullColor) {
+    filter: var(--calendarFullColorFilter)
+  }
+}
+
 .statusIcon {
   margin-left: 3px;
 }

frontend/src/Calendar/Events/CalendarEventGroup.css.d.ts

@@ -16,6 +16,7 @@ interface CssExports {
   'onAir': string;
   'premiere': string;
   'seriesTitle': string;
+  'statusContainer': string;
   'statusIcon': string;
   'unaired': string;
   'unmonitored': string;

frontend/src/Calendar/Events/CalendarEventGroup.js

@@ -145,45 +145,51 @@ class CalendarEventGroup extends Component {
             {series.title}
           </div>
 
-          {
+          <div
-            isMissingAbsoluteNumber &&
+            className={classNames(
-              <Icon
+              styles.statusContainer,
-                containerClassName={styles.statusIcon}
+              fullColorEvents && 'fullColor'
-                name={icons.WARNING}
+            )}
-                title={translate('EpisodeMissingAbsoluteNumber')}
+          >
-              />
+            {
-          }
+              isMissingAbsoluteNumber &&
+                <Icon
+                  containerClassName={styles.statusIcon}
+                  name={icons.WARNING}
+                  title={translate('EpisodeMissingAbsoluteNumber')}
+                />
+            }
 
-          {
+            {
-            anyDownloading &&
+              anyDownloading &&
-              <Icon
+                <Icon
-                containerClassName={styles.statusIcon}
+                  containerClassName={styles.statusIcon}
-                name={icons.DOWNLOADING}
+                  name={icons.DOWNLOADING}
-                title={translate('AnEpisodeIsDownloading')}
+                  title={translate('AnEpisodeIsDownloading')}
-              />
+                />
-          }
+            }
 
-          {
+            {
-            firstEpisode.episodeNumber === 1 && seasonNumber > 0 &&
+              firstEpisode.episodeNumber === 1 && seasonNumber > 0 &&
-              <Icon
+                <Icon
-                containerClassName={styles.statusIcon}
+                  containerClassName={styles.statusIcon}
-                name={icons.INFO}
+                  name={icons.PREMIERE}
-                kind={kinds.INFO}
+                  kind={kinds.INFO}
-                darken={fullColorEvents}
+                  title={seasonNumber === 1 ? translate('SeriesPremiere') : translate('SeasonPremiere')}
-                title={seasonNumber === 1 ? translate('SeriesPremiere') : translate('SeasonPremiere')}
+                />
-              />
+            }
-          }
 
-          {
+            {
-            showFinaleIcon &&
+              showFinaleIcon &&
-            lastEpisode.finaleType ?
+              lastEpisode.finaleType ?
-              <Icon
+                <Icon
-                containerClassName={styles.statusIcon}
+                  containerClassName={styles.statusIcon}
-                name={icons.INFO}
+                  name={lastEpisode.finaleType === 'series' ? icons.FINALE_SERIES : icons.FINALE_SEASON}
-                kind={fullColorEvents ? kinds.DEFAULT : kinds.WARNING}
+                  kind={lastEpisode.finaleType === 'series' ? kinds.DANGER : kinds.WARNING}
-                title={getFinaleTypeName(lastEpisode.finaleType)}
+                  title={getFinaleTypeName(lastEpisode.finaleType)}
-              /> : null
+                /> : null
-          }
+            }
+          </div>
         </div>
 
         <div className={styles.airingInfo}>

frontend/src/Calendar/Legend/Legend.js

@@ -22,9 +22,20 @@ function Legend(props) {
   if (showFinaleIcon) {
     iconsToShow.push(
       <LegendIconItem
-        name="Finale"
+        name={translate('SeasonFinale')}
-        icon={icons.INFO}
+        icon={icons.FINALE_SEASON}
-        kind={fullColorEvents ? kinds.DEFAULT : kinds.WARNING}
+        kind={kinds.WARNING}
+        fullColorEvents={fullColorEvents}
+        tooltip={translate('CalendarLegendSeriesFinaleTooltip')}
+      />
+    );
+
+    iconsToShow.push(
+      <LegendIconItem
+        name={translate('SeriesFinale')}
+        icon={icons.FINALE_SERIES}
+        kind={kinds.DANGER}
+        fullColorEvents={fullColorEvents}
         tooltip={translate('CalendarLegendSeriesFinaleTooltip')}
       />
     );
@@ -33,10 +44,10 @@ function Legend(props) {
   if (showSpecialIcon) {
     iconsToShow.push(
       <LegendIconItem
-        name="Special"
+        name={translate('Special')}
         icon={icons.INFO}
         kind={kinds.PINK}
-        darken={fullColorEvents}
+        fullColorEvents={fullColorEvents}
         tooltip={translate('SpecialEpisode')}
       />
     );
@@ -45,9 +56,10 @@ function Legend(props) {
   if (showCutoffUnmetIcon) {
     iconsToShow.push(
       <LegendIconItem
-        name="Cutoff Not Met"
+        name={translate('Cutoff Not Met')}
         icon={icons.EPISODE_FILE}
-        kind={fullColorEvents ? kinds.DEFAULT : kinds.WARNING}
+        kind={kinds.WARNING}
+        fullColorEvents={fullColorEvents}
         tooltip={translate('QualityCutoffNotMet')}
       />
     );
@@ -112,10 +124,10 @@ function Legend(props) {
 
       <div>
         <LegendIconItem
-          name="Premiere"
+          name={translate('Premiere')}
-          icon={icons.INFO}
+          icon={icons.PREMIERE}
           kind={kinds.INFO}
-          darken={true}
+          fullColorEvents={fullColorEvents}
           tooltip={translate('CalendarLegendSeriesPremiereTooltip')}
         />
 
@@ -129,6 +141,12 @@ function Legend(props) {
             {iconsToShow[2]}
           </div>
       }
+      {
+        iconsToShow.length > 3 &&
+          <div>
+            {iconsToShow[3]}
+          </div>
+      }
     </div>
   );
 }

frontend/src/Calendar/Legend/LegendIconItem.css

@@ -7,4 +7,8 @@
 
 .icon {
   margin-right: 5px;
+
+  &:global(.fullColorEvents) {
+    filter: var(--calendarFullColorFilter)
+  }
 }

frontend/src/Calendar/Legend/LegendIconItem.js

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import Icon from 'Components/Icon';
@@ -6,9 +7,9 @@ import styles from './LegendIconItem.css';
 function LegendIconItem(props) {
   const {
     name,
+    fullColorEvents,
     icon,
     kind,
-    darken,
     tooltip
   } = props;
 
@@ -18,9 +19,11 @@ function LegendIconItem(props) {
       title={tooltip}
     >
       <Icon
-        className={styles.icon}
+        className={classNames(
+          styles.icon,
+          fullColorEvents && 'fullColorEvents'
+        )}
         name={icon}
-        darken={darken}
         kind={kind}
       />
 
@@ -31,14 +34,10 @@ function LegendIconItem(props) {
 
 LegendIconItem.propTypes = {
   name: PropTypes.string.isRequired,
+  fullColorEvents: PropTypes.bool.isRequired,
   icon: PropTypes.object.isRequired,
   kind: PropTypes.string.isRequired,
-  darken: PropTypes.bool.isRequired,
   tooltip: PropTypes.string.isRequired
 };
 
-LegendIconItem.defaultProps = {
-  darken: false
-};
-
 export default LegendIconItem;

frontend/src/Components/Icon.css

@@ -12,18 +12,10 @@
 
 .info {
   color: var(--infoColor);
-
-  &:global(.darken) {
-    color: color(var(--infoColor) shade(30%));
-  }
 }
 
 .pink {
   color: var(--pink);
-
-  &:global(.darken) {
-    color: color(var(--pink) shade(30%));
-  }
 }
 
 .success {

frontend/src/Components/Icon.js

@@ -18,7 +18,6 @@ class Icon extends PureComponent {
       kind,
       size,
       title,
-      darken,
       isSpinning,
       ...otherProps
     } = this.props;
@@ -27,8 +26,7 @@ class Icon extends PureComponent {
       <FontAwesomeIcon
         className={classNames(
           className,
-          styles[kind],
+          styles[kind]
-          darken && 'darken'
         )}
         icon={name}
         spin={isSpinning}
@@ -61,7 +59,6 @@ Icon.propTypes = {
   kind: PropTypes.string.isRequired,
   size: PropTypes.number.isRequired,
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-  darken: PropTypes.bool.isRequired,
   isSpinning: PropTypes.bool.isRequired,
   fixedWidth: PropTypes.bool.isRequired
 };
@@ -69,7 +66,6 @@ Icon.propTypes = {
 Icon.defaultProps = {
   kind: kinds.DEFAULT,
   size: 14,
-  darken: false,
   isSpinning: false,
   fixedWidth: false
 };

frontend/src/Helpers/Props/icons.js

@@ -41,6 +41,9 @@ import {
   faChevronCircleUp as fasChevronCircleUp,
   faCircle as fasCircle,
   faCircleDown as fasCircleDown,
+  faCirclePause as fasCirclePause,
+  faCirclePlay as fasCirclePlay,
+  faCircleStop as fasCircleStop,
   faCloud as fasCloud,
   faCloudDownloadAlt as fasCloudDownloadAlt,
   faCog as fasCog,
@@ -149,6 +152,8 @@ export const FATAL = fasTimesCircle;
 export const FILE = farFile;
 export const FILE_MISSING = fasFileCircleQuestion;
 export const FILTER = fasFilter;
+export const FINALE_SEASON = fasCirclePause;
+export const FINALE_SERIES = fasCircleStop;
 export const FOOTNOTE = fasAsterisk;
 export const FOLDER = farFolder;
 export const FOLDER_OPEN = fasFolderOpen;
@@ -180,6 +185,7 @@ export const PARENT = fasLevelUpAlt;
 export const PARSE = fasCalculator;
 export const PAUSED = fasPause;
 export const PENDING = farClock;
+export const PREMIERE = fasCirclePlay;
 export const PROFILE = fasUser;
 export const POSTER = fasTh;
 export const QUEUED = fasCloud;

frontend/src/Styles/Themes/dark.js

@@ -213,6 +213,8 @@ module.exports = {
   calendarTextDim: '#eee',
   calendarTextDimAlternate: '#fff',
 
+  calendarFullColorFilter: 'grayscale(90%) contrast(200%) saturate(50%)',
+
   //
   // Table
 

frontend/src/Styles/Themes/light.js

@@ -215,6 +215,8 @@ module.exports = {
   calendarTextDim: '#666',
   calendarTextDimAlternate: '#242424',
 
+  calendarFullColorFilter: 'brightness(30%)',
+
   //
   // Table
 

frontend/src/typings/UiSettings.ts

@@ -1,4 +1,5 @@
 export interface UiSettings {
+  theme: string;
   showRelativeDates: boolean;
   shortDateFormat: string;
   longDateFormat: string;