From 9884f6f282560ff2a0ea193e9306c6284cf8672c Mon Sep 17 00:00:00 2001
From: Mark McDowall <mark@mcdowall.ca>
Date: Thu, 18 Jan 2024 21:43:51 -0800
Subject: [PATCH] Fixed: Icons on full color calendar events

Closes #6331
---
 .../src/Calendar/Events/CalendarEvent.css     |  4 +
 frontend/src/Calendar/Events/CalendarEvent.js | 18 +++--
 .../Calendar/Events/CalendarEventGroup.css    |  9 +++
 .../Events/CalendarEventGroup.css.d.ts        |  1 +
 .../src/Calendar/Events/CalendarEventGroup.js | 78 ++++++++++---------
 frontend/src/Calendar/Legend/Legend.js        | 38 ++++++---
 .../src/Calendar/Legend/LegendIconItem.css    |  4 +
 .../src/Calendar/Legend/LegendIconItem.js     | 15 ++--
 frontend/src/Components/Icon.css              |  8 --
 frontend/src/Components/Icon.js               |  6 +-
 frontend/src/Helpers/Props/icons.js           |  6 ++
 frontend/src/Styles/Themes/dark.js            |  2 +
 frontend/src/Styles/Themes/light.js           |  2 +
 frontend/src/typings/UiSettings.ts            |  1 +
 14 files changed, 118 insertions(+), 74 deletions(-)

diff --git a/frontend/src/Calendar/Events/CalendarEvent.css b/frontend/src/Calendar/Events/CalendarEvent.css
index 0cf3900bf31..679b4cc515b 100644
--- a/frontend/src/Calendar/Events/CalendarEvent.css
+++ b/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 {
diff --git a/frontend/src/Calendar/Events/CalendarEvent.js b/frontend/src/Calendar/Events/CalendarEvent.js
index 122022773fb..1f9d59b2b9a 100644
--- a/frontend/src/Calendar/Events/CalendarEvent.js
+++ b/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}
-                    kind={fullColorEvents ? kinds.DEFAULT : kinds.WARNING}
+                    name={finaleType === 'series' ? icons.FINALE_SERIES : icons.FINALE_SEASON}
+                    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
diff --git a/frontend/src/Calendar/Events/CalendarEventGroup.css b/frontend/src/Calendar/Events/CalendarEventGroup.css
index 68a12851d96..c52e0192d44 100644
--- a/frontend/src/Calendar/Events/CalendarEventGroup.css
+++ b/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;
 }
diff --git a/frontend/src/Calendar/Events/CalendarEventGroup.css.d.ts b/frontend/src/Calendar/Events/CalendarEventGroup.css.d.ts
index 94f0d11ce13..c527feff1f8 100644
--- a/frontend/src/Calendar/Events/CalendarEventGroup.css.d.ts
+++ b/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;
diff --git a/frontend/src/Calendar/Events/CalendarEventGroup.js b/frontend/src/Calendar/Events/CalendarEventGroup.js
index ea54c8237ce..2130c11f9ba 100644
--- a/frontend/src/Calendar/Events/CalendarEventGroup.js
+++ b/frontend/src/Calendar/Events/CalendarEventGroup.js
@@ -145,45 +145,51 @@ class CalendarEventGroup extends Component {
             {series.title}
           </div>
 
-          {
-            isMissingAbsoluteNumber &&
-              <Icon
-                containerClassName={styles.statusIcon}
-                name={icons.WARNING}
-                title={translate('EpisodeMissingAbsoluteNumber')}
-              />
-          }
+          <div
+            className={classNames(
+              styles.statusContainer,
+              fullColorEvents && 'fullColor'
+            )}
+          >
+            {
+              isMissingAbsoluteNumber &&
+                <Icon
+                  containerClassName={styles.statusIcon}
+                  name={icons.WARNING}
+                  title={translate('EpisodeMissingAbsoluteNumber')}
+                />
+            }
 
-          {
-            anyDownloading &&
-              <Icon
-                containerClassName={styles.statusIcon}
-                name={icons.DOWNLOADING}
-                title={translate('AnEpisodeIsDownloading')}
-              />
-          }
+            {
+              anyDownloading &&
+                <Icon
+                  containerClassName={styles.statusIcon}
+                  name={icons.DOWNLOADING}
+                  title={translate('AnEpisodeIsDownloading')}
+                />
+            }
 
-          {
-            firstEpisode.episodeNumber === 1 && seasonNumber > 0 &&
-              <Icon
-                containerClassName={styles.statusIcon}
-                name={icons.INFO}
-                kind={kinds.INFO}
-                darken={fullColorEvents}
-                title={seasonNumber === 1 ? translate('SeriesPremiere') : translate('SeasonPremiere')}
-              />
-          }
+            {
+              firstEpisode.episodeNumber === 1 && seasonNumber > 0 &&
+                <Icon
+                  containerClassName={styles.statusIcon}
+                  name={icons.PREMIERE}
+                  kind={kinds.INFO}
+                  title={seasonNumber === 1 ? translate('SeriesPremiere') : translate('SeasonPremiere')}
+                />
+            }
 
-          {
-            showFinaleIcon &&
-            lastEpisode.finaleType ?
-              <Icon
-                containerClassName={styles.statusIcon}
-                name={icons.INFO}
-                kind={fullColorEvents ? kinds.DEFAULT : kinds.WARNING}
-                title={getFinaleTypeName(lastEpisode.finaleType)}
-              /> : null
-          }
+            {
+              showFinaleIcon &&
+              lastEpisode.finaleType ?
+                <Icon
+                  containerClassName={styles.statusIcon}
+                  name={lastEpisode.finaleType === 'series' ? icons.FINALE_SERIES : icons.FINALE_SEASON}
+                  kind={lastEpisode.finaleType === 'series' ? kinds.DANGER : kinds.WARNING}
+                  title={getFinaleTypeName(lastEpisode.finaleType)}
+                /> : null
+            }
+          </div>
         </div>
 
         <div className={styles.airingInfo}>
diff --git a/frontend/src/Calendar/Legend/Legend.js b/frontend/src/Calendar/Legend/Legend.js
index 5fc84234fb4..f6e970e8b94 100644
--- a/frontend/src/Calendar/Legend/Legend.js
+++ b/frontend/src/Calendar/Legend/Legend.js
@@ -22,9 +22,20 @@ function Legend(props) {
   if (showFinaleIcon) {
     iconsToShow.push(
       <LegendIconItem
-        name="Finale"
-        icon={icons.INFO}
-        kind={fullColorEvents ? kinds.DEFAULT : kinds.WARNING}
+        name={translate('SeasonFinale')}
+        icon={icons.FINALE_SEASON}
+        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"
-          icon={icons.INFO}
+          name={translate('Premiere')}
+          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>
   );
 }
diff --git a/frontend/src/Calendar/Legend/LegendIconItem.css b/frontend/src/Calendar/Legend/LegendIconItem.css
index 01db0ba5a06..c6c12027d67 100644
--- a/frontend/src/Calendar/Legend/LegendIconItem.css
+++ b/frontend/src/Calendar/Legend/LegendIconItem.css
@@ -7,4 +7,8 @@
 
 .icon {
   margin-right: 5px;
+
+  &:global(.fullColorEvents) {
+    filter: var(--calendarFullColorFilter)
+  }
 }
diff --git a/frontend/src/Calendar/Legend/LegendIconItem.js b/frontend/src/Calendar/Legend/LegendIconItem.js
index 5ce5f725be0..b6bdeeff78a 100644
--- a/frontend/src/Calendar/Legend/LegendIconItem.js
+++ b/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;
diff --git a/frontend/src/Components/Icon.css b/frontend/src/Components/Icon.css
index 69ffc40f5fd..51c09226b89 100644
--- a/frontend/src/Components/Icon.css
+++ b/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 {
diff --git a/frontend/src/Components/Icon.js b/frontend/src/Components/Icon.js
index 90842b039d2..d200b8c0887 100644
--- a/frontend/src/Components/Icon.js
+++ b/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],
-          darken && 'darken'
+          styles[kind]
         )}
         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
 };
diff --git a/frontend/src/Helpers/Props/icons.js b/frontend/src/Helpers/Props/icons.js
index 0d60c30e8d4..ee3fea80251 100644
--- a/frontend/src/Helpers/Props/icons.js
+++ b/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;
diff --git a/frontend/src/Styles/Themes/dark.js b/frontend/src/Styles/Themes/dark.js
index 7563871442b..c27dd036cd0 100644
--- a/frontend/src/Styles/Themes/dark.js
+++ b/frontend/src/Styles/Themes/dark.js
@@ -213,6 +213,8 @@ module.exports = {
   calendarTextDim: '#eee',
   calendarTextDimAlternate: '#fff',
 
+  calendarFullColorFilter: 'grayscale(90%) contrast(200%) saturate(50%)',
+
   //
   // Table
 
diff --git a/frontend/src/Styles/Themes/light.js b/frontend/src/Styles/Themes/light.js
index bfe2c5674c4..e40daadbe44 100644
--- a/frontend/src/Styles/Themes/light.js
+++ b/frontend/src/Styles/Themes/light.js
@@ -215,6 +215,8 @@ module.exports = {
   calendarTextDim: '#666',
   calendarTextDimAlternate: '#242424',
 
+  calendarFullColorFilter: 'brightness(30%)',
+
   //
   // Table
 
diff --git a/frontend/src/typings/UiSettings.ts b/frontend/src/typings/UiSettings.ts
index 79cb0f33347..785ca0c8e04 100644
--- a/frontend/src/typings/UiSettings.ts
+++ b/frontend/src/typings/UiSettings.ts
@@ -1,4 +1,5 @@
 export interface UiSettings {
+  theme: string;
   showRelativeDates: boolean;
   shortDateFormat: string;
   longDateFormat: string;