Improve status labels for deleted movies

frontend/src/Movie/Index/Overview/MovieIndexOverview.css

@@ -32,7 +32,7 @@ $hoverScale: 1.05;
   }
 }
 
-.ended {
+.deleted {
   position: absolute;
   top: 0;
   right: 0;
@@ -41,7 +41,7 @@ $hoverScale: 1.05;
   height: 0;
   border-width: 0 25px 25px 0;
   border-style: solid;
-  border-color: transparent var(--dangerColor) transparent transparent;
+  border-color: transparent var(--gray) transparent transparent;
   color: var(--white);
 }
 

frontend/src/Movie/Index/Overview/MovieIndexOverview.css.d.ts

@@ -3,9 +3,9 @@
 interface CssExports {
   'actions': string;
   'content': string;
+  'deleted': string;
   'details': string;
   'editorSelect': string;
-  'ended': string;
   'externalLinks': string;
   'info': string;
   'link': string;

frontend/src/Movie/Index/Overview/MovieIndexOverview.tsx

@@ -142,6 +142,11 @@ function MovieIndexOverview(props: MovieIndexOverviewProps) {
         <div className={styles.poster}>
           <div className={styles.posterContainer}>
             {isSelectMode ? <MovieIndexPosterSelect movieId={movieId} /> : null}
+
+            {status === 'deleted' ? (
+              <div className={styles.deleted} title={translate('Deleted')} />
+            ) : null}
+
             <Link className={styles.link} style={elementStyle} to={link}>
               <MoviePoster
                 className={styles.poster}

frontend/src/Movie/Index/Posters/MovieIndexPoster.css

@@ -89,7 +89,7 @@ $hoverScale: 1.05;
   overflow: hidden;
 }
 
-.ended {
+.deleted {
   position: absolute;
   top: 0;
   right: 0;
@@ -98,7 +98,7 @@ $hoverScale: 1.05;
   height: 0;
   border-width: 0 25px 25px 0;
   border-style: solid;
-  border-color: transparent var(--dangerColor) transparent transparent;
+  border-color: transparent var(--gray) transparent transparent;
   color: var(--white);
 }
 

frontend/src/Movie/Index/Posters/MovieIndexPoster.css.d.ts

@@ -5,8 +5,8 @@ interface CssExports {
   'container': string;
   'content': string;
   'controls': string;
+  'deleted': string;
   'editorSelect': string;
-  'ended': string;
   'externalLinks': string;
   'link': string;
   'nextAiring': string;

frontend/src/Movie/Index/Posters/MovieIndexPoster.tsx

@@ -200,6 +200,10 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
           </span>
         </Label>
 
+        {status === 'deleted' ? (
+          <div className={styles.deleted} title={translate('Deleted')} />
+        ) : null}
+
         <Link className={styles.link} style={elementStyle} to={link}>
           <MoviePoster
             style={elementStyle}

frontend/src/Movie/Index/Table/MovieStatusCell.tsx

@@ -5,6 +5,7 @@ import MonitorToggleButton from 'Components/MonitorToggleButton';
 import VirtualTableRowCell from 'Components/Table/Cells/TableRowCell';
 import { icons } from 'Helpers/Props';
 import getMovieStatusDetails from 'Movie/getMovieStatusDetails';
+import { MovieStatus } from 'Movie/Movie';
 import { toggleMovieMonitored } from 'Store/Actions/movieActions';
 import translate from 'Utilities/String/translate';
 import styles from './MovieStatusCell.css';
@@ -13,7 +14,7 @@ interface MovieStatusCellProps {
   className: string;
   movieId: number;
   monitored: boolean;
-  status: string;
+  status: MovieStatus;
   isSelectMode: boolean;
   isSaving: boolean;
   component?: React.ElementType;