Fix: Movie index legend not respecting color blind setting

#4616

frontend/src/Movie/Index/MovieIndexFooter.css

@@ -40,12 +40,20 @@
   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);
+  }
 }
 
 .statistics {

frontend/src/Movie/Index/MovieIndexFooter.js

@@ -4,12 +4,14 @@ import formatBytes from 'Utilities/Number/formatBytes';
 import DescriptionList from 'Components/DescriptionList/DescriptionList';
 import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
 import styles from './MovieIndexFooter.css';
+import classNames from 'classnames';
 
 class MovieIndexFooter extends PureComponent {
 
   render() {
     const {
-      movies
+      movies,
+      colorImpairedMode
     } = this.props;
 
     const count = movies.length;
@@ -50,12 +52,20 @@ class MovieIndexFooter extends PureComponent {
           </div>
 
           <div className={styles.legendItem}>
-            <div className={styles.missingMonitored} />
+            <div className={classNames(
+              styles.missingMonitored,
+              colorImpairedMode && 'colorImpaired'
+            )}
+            />
             <div>Missing, Monitored and considered Available</div>
           </div>
 
           <div className={styles.legendItem}>
-            <div className={styles.missingUnmonitored} />
+            <div className={classNames(
+              styles.missingUnmonitored,
+              colorImpairedMode && 'colorImpaired'
+            )}
+            />
             <div>Missing, not Monitored</div>
           </div>
 
@@ -103,7 +113,8 @@ class MovieIndexFooter extends PureComponent {
 }
 
 MovieIndexFooter.propTypes = {
-  movies: PropTypes.arrayOf(PropTypes.object).isRequired
+  movies: PropTypes.arrayOf(PropTypes.object).isRequired,
+  colorImpairedMode: PropTypes.bool.isRequired
 };
 
 export default MovieIndexFooter;

frontend/src/Movie/Index/MovieIndexFooterConnector.js

@@ -2,6 +2,7 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import createDeepEqualSelector from 'Store/Selectors/createDeepEqualSelector';
 import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
 import MovieIndexFooter from './MovieIndexFooter';
 
 function createUnoptimizedSelector() {
@@ -39,9 +40,11 @@ function createMoviesSelector() {
 function createMapStateToProps() {
   return createSelector(
     createMoviesSelector(),
-    (movies) => {
+    createUISettingsSelector(),
+    (movies, uiSettings) => {
       return {
-        movies
+        movies,
+        colorImpairedMode: uiSettings.enableColorImpairedMode
       };
     }
   );