New: Alternate styling for progress bars when color impaired mode is enabled

frontend/.eslintrc

@@ -209,7 +209,6 @@
     "lines-around-comment": ["error", { "beforeBlockComment": true, "afterBlockComment": false }],
     "max-depth": ["error", {"maximum": 5}],
     "max-nested-callbacks": ["error", 4],
-    "max-params": ["error", 6],
     "max-statements": "off",
     "max-statements-per-line": ["error", { "max": 1 }],
     "new-cap": ["error", {"capIsNewExceptions": ["$.Deferred", "DragDropContext", "DragLayer", "DragSource", "DropTarget"]}],

frontend/src/App/ColorImpairedContext.js

@@ -0,0 +1,6 @@
+import React from 'react';
+
+const ColorImpairedContext = React.createContext(false);
+export const ColorImpairedConsumer = ColorImpairedContext.Consumer;
+
+export default ColorImpairedContext;

frontend/src/Calendar/Legend/Legend.js

@@ -63,6 +63,21 @@ function Legend(props) {
         />
       </div>
 
+      <div>
+        <LegendItem
+          status="onAir"
+          name="On Air"
+          tooltip="Episode is currently airing"
+          colorImpairedMode={colorImpairedMode}
+        />
+
+        <LegendItem
+          status="missing"
+          tooltip="Episode has aired and is missing from disk"
+          colorImpairedMode={colorImpairedMode}
+        />
+      </div>
+
       <div>
         <LegendItem
           status="downloading"

frontend/src/Components/Page/Page.js

@@ -2,8 +2,9 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import locationShape from 'Helpers/Props/Shapes/locationShape';
 import SignalRConnector from 'Components/SignalRConnector';
-import AppUpdatedModalConnector from 'App/AppUpdatedModalConnector';
+import ColorImpairedContext from 'App/ColorImpairedContext';
 import ConnectionLostModalConnector from 'App/ConnectionLostModalConnector';
+import AppUpdatedModalConnector from 'App/AppUpdatedModalConnector';
 import PageHeader from './Header/PageHeader';
 import PageSidebar from './Sidebar/PageSidebar';
 import styles from './Page.css';
@@ -73,11 +74,13 @@ class Page extends Component {
       children,
       isSmallScreen,
       isSidebarVisible,
+      enableColorImpairedMode,
       onSidebarToggle,
       onSidebarVisibleChange
     } = this.props;
 
     return (
+      <ColorImpairedContext.Provider value={enableColorImpairedMode}>
         <div className={className}>
           <SignalRConnector />
 
@@ -106,6 +109,7 @@ class Page extends Component {
             onModalClose={this.onConnectionLostModalClose}
           />
         </div>
+      </ColorImpairedContext.Provider>
     );
   }
 }
@@ -118,6 +122,7 @@ Page.propTypes = {
   isSidebarVisible: PropTypes.bool.isRequired,
   isUpdated: PropTypes.bool.isRequired,
   isDisconnected: PropTypes.bool.isRequired,
+  enableColorImpairedMode: PropTypes.bool.isRequired,
   onResize: PropTypes.func.isRequired,
   onSidebarToggle: PropTypes.func.isRequired,
   onSidebarVisibleChange: PropTypes.func.isRequired

frontend/src/Components/Page/PageConnector.js

@@ -32,25 +32,37 @@ function createMapStateToProps() {
     (state) => state.series,
     (state) => state.customFilters,
     (state) => state.tags,
-    (state) => state.settings,
+    (state) => state.settings.ui,
+    (state) => state.settings.qualityProfiles,
+    (state) => state.settings.languageProfiles,
     (state) => state.app,
     createDimensionsSelector(),
-    (series, customFilters, tags, settings, app, dimensions) => {
+    (
+      series,
+      customFilters,
+      tags,
+      uiSettings,
+      qualityProfiles,
+      languageProfiles,
+      app,
+      dimensions
+    ) => {
       const isPopulated = (
         series.isPopulated &&
         customFilters.isPopulated &&
         tags.isPopulated &&
-        settings.qualityProfiles.isPopulated &&
+        qualityProfiles.isPopulated &&
-        settings.ui.isPopulated
+        languageProfiles.isPopulated &&
+        uiSettings.isPopulated
       );
 
       const hasError = !!(
         series.error ||
         customFilters.error ||
         tags.error ||
-        settings.qualityProfiles.error ||
+        qualityProfiles.error ||
-        settings.languageProfiles.error ||
+        languageProfiles.error ||
-        settings.ui.error
+        uiSettings.error
       );
 
       return {
@@ -59,10 +71,12 @@ function createMapStateToProps() {
         seriesError: series.error,
         customFiltersError: tags.error,
         tagsError: tags.error,
-        qualityProfilesError: settings.qualityProfiles.error,
+        qualityProfilesError: qualityProfiles.error,
-        uiSettingsError: settings.ui.error,
+        languageProfilesError: languageProfiles.error,
+        uiSettingsError: uiSettings.error,
         isSmallScreen: dimensions.isSmallScreen,
         isSidebarVisible: app.isSidebarVisible,
+        enableColorImpairedMode: uiSettings.item.enableColorImpairedMode,
         version: app.version,
         isUpdated: app.isUpdated,
         isDisconnected: app.isDisconnected

frontend/src/Components/ProgressBar.css

@@ -43,10 +43,18 @@
 
 .primary {
   background-color: $primaryColor;
+
+  &:global(.colorImpaired) {
+    background: repeating-linear-gradient(90deg, $primaryColor, $primaryColor 10px, $colorImpairedAlternateGradient 10px, $colorImpairedAlternateGradient 20px);
+  }
 }
 
 .danger {
   background-color: $dangerColor;
+
+  &:global(.colorImpaired) {
+    background: repeating-linear-gradient(90deg, $dangerColor, $dangerColor 10px, $colorImpairedAlternateGradient 10px, $colorImpairedAlternateGradient 20px);
+  }
 }
 
 .success {
@@ -59,6 +67,10 @@
 
 .warning {
   background-color: $warningColor;
+
+  &:global(.colorImpaired) {
+    background: repeating-linear-gradient(90deg, $warningColor, $warningColor 10px, $colorImpairedAlternateGradient 10px, $colorImpairedAlternateGradient 20px);
+  }
 }
 
 .info {

frontend/src/Components/ProgressBar.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 import { kinds, sizes } from 'Helpers/Props';
+import { ColorImpairedConsumer } from 'App/ColorImpairedContext';
 import styles from './ProgressBar.css';
 
 function ProgressBar(props) {
@@ -22,6 +23,9 @@ function ProgressBar(props) {
   const progressText = text || progressPercent;
   const actualWidth = width ? `${width}px` : '100%';
 
+  return (
+    <ColorImpairedConsumer>
+      {(enableColorImpairedMode) => {
         return (
           <div
             className={classNames(
@@ -32,7 +36,7 @@ function ProgressBar(props) {
             style={{ width: actualWidth }}
           >
             {
-        showText && !!width &&
+              showText && width ?
                 <div
                   className={styles.backTextContainer}
                   style={{ width: actualWidth }}
@@ -42,21 +46,24 @@ function ProgressBar(props) {
                       {progressText}
                     </div>
                   </div>
-          </div>
+                </div> :
+                null
             }
 
             <div
               className={classNames(
                 className,
-          styles[kind]
+                styles[kind],
+                enableColorImpairedMode && 'colorImpaired'
               )}
               aria-valuenow={progress}
               aria-valuemin="0"
               aria-valuemax="100"
               style={{ width: progressPercent }}
             />
+
             {
-        showText &&
+              showText ?
                 <div
                   className={styles.frontTextContainer}
                   style={{ width: progressPercent }}
@@ -69,10 +76,14 @@ function ProgressBar(props) {
                       {progressText}
                     </div>
                   </div>
-        </div>
+                </div> :
+                null
             }
           </div>
         );
+      }}
+    </ColorImpairedConsumer>
+  );
 }
 
 ProgressBar.propTypes = {

frontend/src/Series/Index/SeriesIndexFooter.css

@@ -22,6 +22,10 @@
   composes: legendItemColor;
 
   background-color: $primaryColor;
+
+  &:global(.colorImpaired) {
+    background: repeating-linear-gradient(90deg, $primaryColor, $primaryColor 10px, $colorImpairedAlternateGradient 10px, $colorImpairedAlternateGradient 20px);
+  }
 }
 
 .ended {
@@ -34,12 +38,20 @@
   composes: legendItemColor;
 
   background-color: $dangerColor;
+
+  &:global(.colorImpaired) {
+    background: repeating-linear-gradient(90deg, $dangerColor, $dangerColor 10px, $colorImpairedAlternateGradient 10px, $colorImpairedAlternateGradient 20px);
+  }
 }
 
 .missingUnmonitored {
   composes: legendItemColor;
 
   background-color: $warningColor;
+
+  &:global(.colorImpaired) {
+    background: repeating-linear-gradient(90deg, $warningColor, $warningColor 10px, $colorImpairedAlternateGradient 10px, $colorImpairedAlternateGradient 20px);
+  }
 }
 
 .statistics {

frontend/src/Series/Index/SeriesIndexFooter.js

@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import classNames from 'classnames';
 import formatBytes from 'Utilities/Number/formatBytes';
+import { ColorImpairedConsumer } from 'App/ColorImpairedContext';
 import DescriptionList from 'Components/DescriptionList/DescriptionList';
 import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
 import styles from './SeriesIndexFooter.css';
@@ -39,26 +41,49 @@ function SeriesIndexFooter({ series }) {
     totalFileSize += sizeOnDisk;
   });
 
+  return (
+    <ColorImpairedConsumer>
+      {(enableColorImpairedMode) => {
         return (
           <div className={styles.footer}>
             <div>
               <div className={styles.legendItem}>
-          <div className={styles.continuing} />
+                <div
+                  className={classNames(
+                    styles.continuing,
+                    enableColorImpairedMode && 'colorImpaired'
+                  )}
+                />
                 <div>Continuing (All episodes downloaded)</div>
               </div>
 
               <div className={styles.legendItem}>
-          <div className={styles.ended} />
+                <div
+                  className={classNames(
+                    styles.ended,
+                    enableColorImpairedMode && 'colorImpaired'
+                  )}
+                />
                 <div>Ended (All episodes downloaded)</div>
               </div>
 
               <div className={styles.legendItem}>
-          <div className={styles.missingMonitored} />
+                <div
+                  className={classNames(
+                    styles.missingMonitored,
+                    enableColorImpairedMode && 'colorImpaired'
+                  )}
+                />
                 <div>Missing Episodes (Series monitored)</div>
               </div>
 
               <div className={styles.legendItem}>
-          <div className={styles.missingUnmonitored} />
+                <div
+                  className={classNames(
+                    styles.missingUnmonitored,
+                    enableColorImpairedMode && 'colorImpaired'
+                  )}
+                />
                 <div>Missing Episodes (Series not monitored)</div>
               </div>
             </div>
@@ -114,6 +139,9 @@ function SeriesIndexFooter({ series }) {
             </div>
           </div>
         );
+      }}
+    </ColorImpairedConsumer>
+  );
 }
 
 SeriesIndexFooter.propTypes = {

frontend/src/Styles/Variables/colors.js

@@ -62,6 +62,7 @@ module.exports = {
   inputWarningBorderColor: '#ffa500',
   inputWarningBoxShadowColor: 'rgba(255, 165, 0, 0.6)',
   colorImpairedGradient: '#fcfcfc',
+  colorImpairedAlternateGradient: '#b0b0b0',
 
   //
   // Buttons