New: Added health check warning if SABnzbd sorting is enabled

(cherry picked from commit 61fa1e5e3f00072f0d5f59cc883fac74fe12ee9d)

.editorconfig

@@ -204,6 +204,9 @@ dotnet_diagnostic.CA2000.severity = suggestion
 dotnet_diagnostic.CA2002.severity = suggestion
 dotnet_diagnostic.CA2007.severity = suggestion
 dotnet_diagnostic.CA2008.severity = suggestion
+dotnet_diagnostic.CA2009.severity = suggestion
+dotnet_diagnostic.CA2010.severity = suggestion
+dotnet_diagnostic.CA2011.severity = suggestion
 dotnet_diagnostic.CA2012.severity = suggestion
 dotnet_diagnostic.CA2013.severity = suggestion
 dotnet_diagnostic.CA2100.severity = suggestion

.github/workflows/azuresync.yml

@@ -0,0 +1,41 @@
+name: Sync issue to Azure DevOps work item
+
+on:
+  issues:
+    types:
+      [opened, edited, deleted, closed, reopened, labeled, unlabeled, assigned]
+
+concurrency: azuresync-${{ github.event.issue.number }}
+
+jobs:
+  alert:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: danhellem/github-actions-issue-to-work-item@master
+        if: "${{ contains(github.event.issue.labels.*.name, 'Type: Bug') == true }}"
+        env:
+          ado_token: "${{ secrets.ADO_PERSONAL_ACCESS_TOKEN }}"
+          github_token: "${{ github.token }}"
+          ado_organization: "Servarr"
+          ado_project: "Servarr"
+          ado_area_path: "Servarr\\Readarr"
+          ado_wit: "Bug"
+          ado_new_state: "New"
+          ado_active_state: "Active"
+          ado_close_state: "Closed"
+          ado_bypassrules: true
+          log_level: 100
+      - uses: danhellem/github-actions-issue-to-work-item@master
+        if: "${{ contains(github.event.issue.labels.*.name, 'Type: Bug') == false }}"
+        env:
+          ado_token: "${{ secrets.ADO_PERSONAL_ACCESS_TOKEN }}"
+          github_token: "${{ github.token }}"
+          ado_organization: "Servarr"
+          ado_project: "Servarr"
+          ado_area_path: "Servarr\\Readarr"
+          ado_wit: "User Story"
+          ado_new_state: "New"
+          ado_active_state: "Active"
+          ado_close_state: "Closed"
+          ado_bypassrules: true
+          log_level: 100

azure-pipelines.yml

@@ -9,7 +9,7 @@ variables:
   testsFolder: './_tests'
   yarnCacheFolder: $(Pipeline.Workspace)/.yarn
   nugetCacheFolder: $(Pipeline.Workspace)/.nuget/packages
-  majorVersion: '0.1.5'
+  majorVersion: '0.1.1'
   minorVersion: $[counter('minorVersion', 1)]
   readarrVersion: '$(majorVersion).$(minorVersion)'
   buildName: '$(Build.SourceBranchName).$(readarrVersion)'

frontend/build/webpack.config.js

@@ -44,8 +44,7 @@ module.exports = (env) => {
         'node_modules'
       ],
       alias: {
-        jquery: 'jquery/src/jquery',
+        jquery: 'jquery/src/jquery'
-        'react-middle-truncate': 'react-middle-truncate/lib/react-middle-truncate'
       },
       fallback: {
         buffer: false,

frontend/postcss.config.js

@@ -1,6 +1,7 @@
 const reload = require('require-nocache')(module);
 
 const cssVarsFiles = [
+  './src/Styles/Variables/colors',
   './src/Styles/Variables/dimensions',
   './src/Styles/Variables/fonts',
   './src/Styles/Variables/animations',

frontend/src/Activity/Blocklist/Blocklist.js

@@ -61,33 +61,33 @@ class Blocklist extends Component {
 
   getSelectedIds = () => {
     return getSelectedIds(this.state.selectedState);
-  };
+  }
 
   //
   // Listeners
 
   onSelectAllChange = ({ value }) => {
     this.setState(selectAll(this.state.selectedState, value));
-  };
+  }
 
   onSelectedChange = ({ id, value, shiftKey = false }) => {
     this.setState((state) => {
       return toggleSelected(state, this.props.items, id, value, shiftKey);
     });
-  };
+  }
 
   onRemoveSelectedPress = () => {
     this.setState({ isConfirmRemoveModalOpen: true });
-  };
+  }
 
   onRemoveSelectedConfirmed = () => {
     this.props.onRemoveSelected(this.getSelectedIds());
     this.setState({ isConfirmRemoveModalOpen: false });
-  };
+  }
 
   onConfirmRemoveModalClose = () => {
     this.setState({ isConfirmRemoveModalOpen: false });
-  };
+  }
 
   //
   // Render

frontend/src/Activity/Blocklist/BlocklistConnector.js

@@ -68,37 +68,37 @@ class BlocklistConnector extends Component {
 
   repopulate = () => {
     this.props.fetchBlocklist();
-  };
+  }
   //
   // Listeners
 
   onFirstPagePress = () => {
     this.props.gotoBlocklistFirstPage();
-  };
+  }
 
   onPreviousPagePress = () => {
     this.props.gotoBlocklistPreviousPage();
-  };
+  }
 
   onNextPagePress = () => {
     this.props.gotoBlocklistNextPage();
-  };
+  }
 
   onLastPagePress = () => {
     this.props.gotoBlocklistLastPage();
-  };
+  }
 
   onPageSelect = (page) => {
     this.props.gotoBlocklistPage({ page });
-  };
+  }
 
   onRemoveSelected = (ids) => {
     this.props.removeBlocklistItems({ ids });
-  };
+  }
 
   onSortPress = (sortKey) => {
     this.props.setBlocklistSort({ sortKey });
-  };
+  }
 
   onTableOptionChange = (payload) => {
     this.props.setBlocklistTableOption(payload);
@@ -106,11 +106,11 @@ class BlocklistConnector extends Component {
     if (payload.pageSize) {
       this.props.gotoBlocklistFirstPage();
     }
-  };
+  }
 
   onClearBlocklistPress = () => {
     this.props.executeCommand({ name: commandNames.CLEAR_BLOCKLIST });
-  };
+  }
 
   //
   // Render

frontend/src/Activity/Blocklist/BlocklistRow.js

@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import AuthorNameLink from 'Author/AuthorNameLink';
-import BookFormats from 'Book/BookFormats';
 import BookQuality from 'Book/BookQuality';
 import IconButton from 'Components/Link/IconButton';
 import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
@@ -31,11 +30,11 @@ class BlocklistRow extends Component {
 
   onDetailsPress = () => {
     this.setState({ isDetailsModalOpen: true });
-  };
+  }
 
   onDetailsModalClose = () => {
     this.setState({ isDetailsModalOpen: false });
-  };
+  }
 
   //
   // Render
@@ -46,7 +45,6 @@ class BlocklistRow extends Component {
       author,
       sourceTitle,
       quality,
-      customFormats,
       date,
       protocol,
       indexer,
@@ -112,16 +110,6 @@ class BlocklistRow extends Component {
               );
             }
 
-            if (name === 'customFormats') {
-              return (
-                <TableRowCell key={name}>
-                  <BookFormats
-                    formats={customFormats}
-                  />
-                </TableRowCell>
-              );
-            }
-
             if (name === 'date') {
               return (
                 <RelativeDateCellConnector
@@ -186,7 +174,6 @@ BlocklistRow.propTypes = {
   author: PropTypes.object.isRequired,
   sourceTitle: PropTypes.string.isRequired,
   quality: PropTypes.object.isRequired,
-  customFormats: PropTypes.arrayOf(PropTypes.object).isRequired,
   date: PropTypes.string.isRequired,
   protocol: PropTypes.string.isRequired,
   indexer: PropTypes.string,

frontend/src/Activity/History/Details/HistoryDetails.js

@@ -9,7 +9,6 @@ import Link from 'Components/Link/Link';
 import { icons } from 'Helpers/Props';
 import formatDateTime from 'Utilities/Date/formatDateTime';
 import formatAge from 'Utilities/Number/formatAge';
-import formatPreferredWordScore from 'Utilities/Number/formatPreferredWordScore';
 import translate from 'Utilities/String/translate';
 import styles from './HistoryDetails.css';
 
@@ -66,10 +65,8 @@ function HistoryDetails(props) {
     const {
       indexer,
       releaseGroup,
-      customFormatScore,
       nzbInfoUrl,
       downloadClient,
-      downloadClientName,
       downloadId,
       age,
       ageHours,
@@ -77,8 +74,6 @@ function HistoryDetails(props) {
       publishedDate
     } = data;
 
-    const downloadClientNameInfo = downloadClientName ?? downloadClient;
-
     return (
       <DescriptionList>
         <DescriptionListItem
@@ -105,16 +100,7 @@ function HistoryDetails(props) {
         }
 
         {
-          customFormatScore && customFormatScore !== '0' ?
+          !!nzbInfoUrl &&
-            <DescriptionListItem
-              title="Custom Format Score"
-              data={formatPreferredWordScore(customFormatScore)}
-            /> :
-            null
-        }
-
-        {
-          nzbInfoUrl ?
             <span>
               <DescriptionListItemTitle>
                 Info URL
@@ -123,17 +109,15 @@ function HistoryDetails(props) {
               <DescriptionListItemDescription>
                 <Link to={nzbInfoUrl}>{nzbInfoUrl}</Link>
               </DescriptionListItemDescription>
-            </span> :
+            </span>
-            null
         }
 
         {
-          downloadClientNameInfo ?
+          !!downloadClient &&
             <DescriptionListItem
               title={translate('DownloadClient')}
-              data={downloadClientNameInfo}
+              data={downloadClient}
-            /> :
+            />
-            null
         }
 
         {
@@ -189,7 +173,6 @@ function HistoryDetails(props) {
 
   if (eventType === 'bookFileImported') {
     const {
-      customFormatScore,
       droppedPath,
       importedPath
     } = data;
@@ -212,22 +195,12 @@ function HistoryDetails(props) {
         }
 
         {
-          importedPath ?
+          !!importedPath &&
             <DescriptionListItem
               descriptionClassName={styles.description}
               title={translate('ImportedTo')}
               data={importedPath}
-            /> :
+            />
-            null
-        }
-
-        {
-          customFormatScore && customFormatScore !== '0' ?
-            <DescriptionListItem
-              title="Custom Format Score"
-              data={formatPreferredWordScore(customFormatScore)}
-            /> :
-            null
         }
       </DescriptionList>
     );
@@ -235,8 +208,7 @@ function HistoryDetails(props) {
 
   if (eventType === 'bookFileDeleted') {
     const {
-      reason,
+      reason
-      customFormatScore
     } = data;
 
     let reasonMessage = '';
@@ -266,15 +238,6 @@ function HistoryDetails(props) {
           title={translate('Reason')}
           data={reasonMessage}
         />
-
-        {
-          customFormatScore && customFormatScore !== '0' ?
-            <DescriptionListItem
-              title="Custom Format Score"
-              data={formatPreferredWordScore(customFormatScore)}
-            /> :
-            null
-        }
       </DescriptionList>
     );
   }

frontend/src/Activity/History/HistoryConnector.js

@@ -60,38 +60,38 @@ class HistoryConnector extends Component {
 
   repopulate = () => {
     this.props.fetchHistory();
-  };
+  }
 
   //
   // Listeners
 
   onFirstPagePress = () => {
     this.props.gotoHistoryFirstPage();
-  };
+  }
 
   onPreviousPagePress = () => {
     this.props.gotoHistoryPreviousPage();
-  };
+  }
 
   onNextPagePress = () => {
     this.props.gotoHistoryNextPage();
-  };
+  }
 
   onLastPagePress = () => {
     this.props.gotoHistoryLastPage();
-  };
+  }
 
   onPageSelect = (page) => {
     this.props.gotoHistoryPage({ page });
-  };
+  }
 
   onSortPress = (sortKey) => {
     this.props.setHistorySort({ sortKey });
-  };
+  }
 
   onFilterSelect = (selectedFilterKey) => {
     this.props.setHistoryFilter({ selectedFilterKey });
-  };
+  }
 
   onTableOptionChange = (payload) => {
     this.props.setHistoryTableOption(payload);
@@ -99,7 +99,7 @@ class HistoryConnector extends Component {
     if (payload.pageSize) {
       this.props.gotoHistoryFirstPage();
     }
-  };
+  }
 
   //
   // Render

frontend/src/Activity/History/HistoryRow.css

@@ -10,12 +10,6 @@
   width: 80px;
 }
 
-.customFormatScore {
-  composes: cell from '~Components/Table/Cells/TableRowCell.css';
-
-  width: 55px;
-}
-
 .releaseGroup {
   composes: cell from '~Components/Table/Cells/TableRowCell.css';
 

frontend/src/Activity/History/HistoryRow.js

@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import AuthorNameLink from 'Author/AuthorNameLink';
-import BookFormats from 'Book/BookFormats';
 import BookQuality from 'Book/BookQuality';
 import BookTitleLink from 'Book/BookTitleLink';
 import IconButton from 'Components/Link/IconButton';
@@ -9,7 +8,6 @@ import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellCo
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableRow from 'Components/Table/TableRow';
 import { icons } from 'Helpers/Props';
-import formatPreferredWordScore from 'Utilities/Number/formatPreferredWordScore';
 import HistoryDetailsModal from './Details/HistoryDetailsModal';
 import HistoryEventTypeCell from './HistoryEventTypeCell';
 import styles from './HistoryRow.css';
@@ -42,11 +40,11 @@ class HistoryRow extends Component {
 
   onDetailsPress = () => {
     this.setState({ isDetailsModalOpen: true });
-  };
+  }
 
   onDetailsModalClose = () => {
     this.setState({ isDetailsModalOpen: false });
-  };
+  }
 
   //
   // Render
@@ -56,7 +54,6 @@ class HistoryRow extends Component {
       author,
       book,
       quality,
-      customFormats,
       qualityCutoffNotMet,
       eventType,
       sourceTitle,
@@ -130,16 +127,6 @@ class HistoryRow extends Component {
               );
             }
 
-            if (name === 'customFormats') {
-              return (
-                <TableRowCell key={name}>
-                  <BookFormats
-                    formats={customFormats}
-                  />
-                </TableRowCell>
-              );
-            }
-
             if (name === 'date') {
               return (
                 <RelativeDateCellConnector
@@ -171,17 +158,6 @@ class HistoryRow extends Component {
               );
             }
 
-            if (name === 'customFormatScore') {
-              return (
-                <TableRowCell
-                  key={name}
-                  className={styles.customFormatScore}
-                >
-                  {formatPreferredWordScore(data.customFormatScore)}
-                </TableRowCell>
-              );
-            }
-
             if (name === 'releaseGroup') {
               return (
                 <TableRowCell
@@ -243,7 +219,6 @@ HistoryRow.propTypes = {
   author: PropTypes.object.isRequired,
   book: PropTypes.object,
   quality: PropTypes.object.isRequired,
-  customFormats: PropTypes.arrayOf(PropTypes.object),
   qualityCutoffNotMet: PropTypes.bool.isRequired,
   eventType: PropTypes.string.isRequired,
   sourceTitle: PropTypes.string.isRequired,

frontend/src/Activity/History/HistoryRowConnector.js

@@ -49,7 +49,7 @@ class HistoryRowConnector extends Component {
 
   onMarkAsFailedPress = () => {
     this.props.markAsFailed({ id: this.props.id });
-  };
+  }
 
   //
   // Render

frontend/src/Activity/Queue/ProtocolLabel.css

@@ -1,13 +1,13 @@
 .torrent {
   composes: label from '~Components/Label.css';
 
-  border-color: var(--torrentColor);
+  border-color: $torrentColor;
-  background-color: var(--torrentColor);
+  background-color: $torrentColor;
 }
 
 .usenet {
   composes: label from '~Components/Label.css';
 
-  border-color: var(--usenetColor);
+  border-color: $usenetColor;
-  background-color: var(--usenetColor);
+  background-color: $usenetColor;
 }

frontend/src/Activity/Queue/Queue.js

@@ -75,23 +75,13 @@ class Queue extends Component {
       return;
     }
 
-    const nextState = {};
-
-    if (prevProps.items !== items) {
-      nextState.items = items;
-    }
-
     const selectedIds = this.getSelectedIds();
     const isPendingSelected = _.some(this.props.items, (item) => {
       return selectedIds.indexOf(item.id) > -1 && item.status === 'delay';
     });
 
     if (isPendingSelected !== this.state.isPendingSelected) {
-      nextState.isPendingSelected = isPendingSelected;
+      this.setState({ isPendingSelected });
-    }
-
-    if (!_.isEmpty(nextState)) {
-      this.setState(nextState);
     }
   }
 
@@ -100,45 +90,45 @@ class Queue extends Component {
 
   getSelectedIds = () => {
     return getSelectedIds(this.state.selectedState);
-  };
+  }
 
   //
   // Listeners
 
   onQueueRowModalOpenOrClose = (isOpen) => {
     this._shouldBlockRefresh = isOpen;
-  };
+  }
 
   onSelectAllChange = ({ value }) => {
     this.setState(selectAll(this.state.selectedState, value));
-  };
+  }
 
   onSelectedChange = ({ id, value, shiftKey = false }) => {
     this.setState((state) => {
       return toggleSelected(state, this.props.items, id, value, shiftKey);
     });
-  };
+  }
 
   onGrabSelectedPress = () => {
     this.props.onGrabSelectedPress(this.getSelectedIds());
-  };
+  }
 
   onRemoveSelectedPress = () => {
     this.setState({ isConfirmRemoveModalOpen: true }, () => {
       this._shouldBlockRefresh = true;
     });
-  };
+  }
 
   onRemoveSelectedConfirmed = (payload) => {
     this._shouldBlockRefresh = false;
     this.props.onRemoveSelectedPress({ ids: this.getSelectedIds(), ...payload });
     this.setState({ isConfirmRemoveModalOpen: false });
-  };
+  }
 
   onConfirmRemoveModalClose = () => {
     this._shouldBlockRefresh = false;
     this.setState({ isConfirmRemoveModalOpen: false });
-  };
+  }
 
   //
   // Render
@@ -226,29 +216,26 @@ class Queue extends Component {
 
         <PageContentBody>
           {
-            isRefreshing && !isAllPopulated ?
+            isRefreshing && !isAllPopulated &&
-              <LoadingIndicator /> :
+              <LoadingIndicator />
-              null
           }
 
           {
-            !isRefreshing && hasError ?
+            !isRefreshing && hasError &&
               <div>
                 {translate('FailedToLoadQueue')}
-              </div> :
+              </div>
-              null
           }
 
           {
-            isAllPopulated && !hasError && !items.length ?
+            isAllPopulated && !hasError && !items.length &&
               <div>
                 {translate('QueueIsEmpty')}
-              </div> :
+              </div>
-              null
           }
 
           {
-            isAllPopulated && !hasError && !!items.length ?
+            isAllPopulated && !hasError && !!items.length &&
               <div>
                 <Table
                   columns={columns}
@@ -283,8 +270,7 @@ class Queue extends Component {
                   isFetching={isRefreshing}
                   {...otherProps}
                 />
-              </div> :
+              </div>
-              null
           }
         </PageContentBody>
 

frontend/src/Activity/Queue/QueueConnector.js

@@ -79,34 +79,34 @@ class QueueConnector extends Component {
 
   repopulate = () => {
     this.props.fetchQueue();
-  };
+  }
 
   //
   // Listeners
 
   onFirstPagePress = () => {
     this.props.gotoQueueFirstPage();
-  };
+  }
 
   onPreviousPagePress = () => {
     this.props.gotoQueuePreviousPage();
-  };
+  }
 
   onNextPagePress = () => {
     this.props.gotoQueueNextPage();
-  };
+  }
 
   onLastPagePress = () => {
     this.props.gotoQueueLastPage();
-  };
+  }
 
   onPageSelect = (page) => {
     this.props.gotoQueuePage({ page });
-  };
+  }
 
   onSortPress = (sortKey) => {
     this.props.setQueueSort({ sortKey });
-  };
+  }
 
   onTableOptionChange = (payload) => {
     this.props.setQueueTableOption(payload);
@@ -114,21 +114,21 @@ class QueueConnector extends Component {
     if (payload.pageSize) {
       this.props.gotoQueueFirstPage();
     }
-  };
+  }
 
   onRefreshPress = () => {
     this.props.executeCommand({
       name: commandNames.REFRESH_MONITORED_DOWNLOADS
     });
-  };
+  }
 
   onGrabSelectedPress = (ids) => {
     this.props.grabQueueItems({ ids });
-  };
+  }
 
   onRemoveSelectedPress = (payload) => {
     this.props.removeQueueItems(payload);
-  };
+  }
 
   //
   // Render

frontend/src/Activity/Queue/QueueOptions.js

@@ -42,7 +42,7 @@ class QueueOptions extends Component {
         [name]: value
       });
     });
-  };
+  }
 
   //
   // Render

frontend/src/Activity/Queue/QueueRow.js

@@ -2,7 +2,6 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import ProtocolLabel from 'Activity/Queue/ProtocolLabel';
 import AuthorNameLink from 'Author/AuthorNameLink';
-import BookFormats from 'Book/BookFormats';
 import BookQuality from 'Book/BookQuality';
 import BookTitleLink from 'Book/BookTitleLink';
 import Icon from 'Components/Icon';
@@ -42,7 +41,7 @@ class QueueRow extends Component {
 
   onRemoveQueueItemPress = () => {
     this.setState({ isRemoveQueueItemModalOpen: true });
-  };
+  }
 
   onRemoveQueueItemModalConfirmed = (blocklist, skipredownload) => {
     const {
@@ -54,25 +53,25 @@ class QueueRow extends Component {
     onRemoveQueueItemPress(blocklist, skipredownload);
 
     this.setState({ isRemoveQueueItemModalOpen: false });
-  };
+  }
 
   onRemoveQueueItemModalClose = () => {
     this.props.onQueueRowModalOpenOrClose(false);
 
     this.setState({ isRemoveQueueItemModalOpen: false });
-  };
+  }
 
   onInteractiveImportPress = () => {
     this.props.onQueueRowModalOpenOrClose(true);
 
     this.setState({ isInteractiveImportModalOpen: true });
-  };
+  }
 
   onInteractiveImportModalClose = () => {
     this.props.onQueueRowModalOpenOrClose(false);
 
     this.setState({ isInteractiveImportModalOpen: false });
-  };
+  }
 
   //
   // Render
@@ -90,7 +89,6 @@ class QueueRow extends Component {
       author,
       book,
       quality,
-      customFormats,
       protocol,
       indexer,
       outputPath,
@@ -212,16 +210,6 @@ class QueueRow extends Component {
               );
             }
 
-            if (name === 'customFormats') {
-              return (
-                <TableRowCell key={name}>
-                  <BookFormats
-                    formats={customFormats}
-                  />
-                </TableRowCell>
-              );
-            }
-
             if (name === 'protocol') {
               return (
                 <TableRowCell key={name}>
@@ -391,7 +379,6 @@ QueueRow.propTypes = {
   author: PropTypes.object,
   book: PropTypes.object,
   quality: PropTypes.object.isRequired,
-  customFormats: PropTypes.arrayOf(PropTypes.object),
   protocol: PropTypes.string.isRequired,
   indexer: PropTypes.string,
   outputPath: PropTypes.string,

frontend/src/Activity/Queue/QueueRowConnector.js

@@ -41,11 +41,11 @@ class QueueRowConnector extends Component {
 
   onGrabPress = () => {
     this.props.grabQueueItem({ id: this.props.id });
-  };
+  }
 
   onRemoveQueueItemPress = (payload) => {
     this.props.removeQueueItem({ id: this.props.id, ...payload });
-  };
+  }
 
   //
   // Render

frontend/src/Activity/Queue/RemoveQueueItemModal.js

@@ -36,34 +36,34 @@ class RemoveQueueItemModal extends Component {
       blocklist: false,
       skipredownload: false
     });
-  };
+  }
 
   //
   // Listeners
 
   onRemoveChange = ({ value }) => {
     this.setState({ remove: value });
-  };
+  }
 
   onBlocklistChange = ({ value }) => {
     this.setState({ blocklist: value });
-  };
+  }
 
   onSkipReDownloadChange = ({ value }) => {
     this.setState({ skipredownload: value });
-  };
+  }
 
   onRemoveConfirmed = () => {
     const state = this.state;
 
     this.resetState();
     this.props.onRemovePress(state);
-  };
+  }
 
   onModalClose = () => {
     this.resetState();
     this.props.onModalClose();
-  };
+  }
 
   //
   // Render

frontend/src/Activity/Queue/RemoveQueueItemsModal.js

@@ -31,40 +31,40 @@ class RemoveQueueItemsModal extends Component {
   //
   // Control
 
-  resetState = function() {
+   resetState = function() {
-    this.setState({
+     this.setState({
-      remove: true,
+       remove: true,
-      blocklist: false,
+       blocklist: false,
-      skipredownload: false
+       skipredownload: false
-    });
+     });
-  };
+   }
 
-  //
+   //
-  // Listeners
+   // Listeners
 
-  onRemoveChange = ({ value }) => {
+   onRemoveChange = ({ value }) => {
-    this.setState({ remove: value });
+     this.setState({ remove: value });
-  };
+   }
 
   onBlocklistChange = ({ value }) => {
     this.setState({ blocklist: value });
-  };
+  }
 
   onSkipReDownloadChange = ({ value }) => {
     this.setState({ skipredownload: value });
-  };
+  }
 
   onRemoveConfirmed = () => {
     const state = this.state;
 
     this.resetState();
     this.props.onRemovePress(state);
-  };
+  }
 
   onModalClose = () => {
     this.resetState();
     this.props.onModalClose();
-  };
+  }
 
   //
   // Render

frontend/src/App/App.js

@@ -4,7 +4,6 @@ import React from 'react';
 import DocumentTitle from 'react-document-title';
 import { Provider } from 'react-redux';
 import PageConnector from 'Components/Page/PageConnector';
-import ApplyTheme from './ApplyTheme';
 import AppRoutes from './AppRoutes';
 
 function App({ store, history }) {
@@ -12,11 +11,9 @@ function App({ store, history }) {
     <DocumentTitle title={window.Readarr.instanceName}>
       <Provider store={store}>
         <ConnectedRouter history={history}>
-          <ApplyTheme>
+          <PageConnector>
-            <PageConnector>
+            <AppRoutes app={App} />
-              <AppRoutes app={App} />
+          </PageConnector>
-            </PageConnector>
-          </ApplyTheme>
         </ConnectedRouter>
       </Provider>
     </DocumentTitle>

frontend/src/App/AppRoutes.js

@@ -13,7 +13,6 @@ import CalendarPageConnector from 'Calendar/CalendarPageConnector';
 import NotFound from 'Components/NotFound';
 import Switch from 'Components/Router/Switch';
 import AddNewItemConnector from 'Search/AddNewItemConnector';
-import CustomFormatSettingsConnector from 'Settings/CustomFormats/CustomFormatSettingsConnector';
 import DevelopmentSettingsConnector from 'Settings/Development/DevelopmentSettingsConnector';
 import DownloadClientSettingsConnector from 'Settings/DownloadClients/DownloadClientSettingsConnector';
 import GeneralSettingsConnector from 'Settings/General/GeneralSettingsConnector';
@@ -23,7 +22,7 @@ import MediaManagementConnector from 'Settings/MediaManagement/MediaManagementCo
 import MetadataSettings from 'Settings/Metadata/MetadataSettings';
 import NotificationSettings from 'Settings/Notifications/NotificationSettings';
 import Profiles from 'Settings/Profiles/Profiles';
-import QualityConnector from 'Settings/Quality/QualityConnector';
+import Quality from 'Settings/Quality/Quality';
 import Settings from 'Settings/Settings';
 import TagSettings from 'Settings/Tags/TagSettings';
 import UISettingsConnector from 'Settings/UI/UISettingsConnector';
@@ -173,12 +172,7 @@ function AppRoutes(props) {
 
       <Route
         path="/settings/quality"
-        component={QualityConnector}
+        component={Quality}
-      />
-
-      <Route
-        path="/settings/customformats"
-        component={CustomFormatSettingsConnector}
       />
 
       <Route

frontend/src/App/AppUpdatedModalContent.js

@@ -11,47 +11,9 @@ import UpdateChanges from 'System/Updates/UpdateChanges';
 import translate from 'Utilities/String/translate';
 import styles from './AppUpdatedModalContent.css';
 
-function mergeUpdates(items, version, prevVersion) {
-  let installedIndex = items.findIndex((u) => u.version === version);
-  let installedPreviouslyIndex = items.findIndex((u) => u.version === prevVersion);
-
-  if (installedIndex === -1) {
-    installedIndex = 0;
-  }
-
-  if (installedPreviouslyIndex === -1) {
-    installedPreviouslyIndex = items.length;
-  } else if (installedPreviouslyIndex === installedIndex && items.length) {
-    installedPreviouslyIndex += 1;
-  }
-
-  const appliedUpdates = items.slice(installedIndex, installedPreviouslyIndex);
-
-  if (!appliedUpdates.length) {
-    return null;
-  }
-
-  const appliedChanges = { new: [], fixed: [] };
-  appliedUpdates.forEach((u) => {
-    if (u.changes) {
-      appliedChanges.new.push(... u.changes.new);
-      appliedChanges.fixed.push(... u.changes.fixed);
-    }
-  });
-
-  const mergedUpdate = Object.assign({}, appliedUpdates[0], { changes: appliedChanges });
-
-  if (!appliedChanges.new.length && !appliedChanges.fixed.length) {
-    mergedUpdate.changes = null;
-  }
-
-  return mergedUpdate;
-}
-
 function AppUpdatedModalContent(props) {
   const {
     version,
-    prevVersion,
     isPopulated,
     error,
     items,
@@ -59,7 +21,7 @@ function AppUpdatedModalContent(props) {
     onModalClose
   } = props;
 
-  const update = mergeUpdates(items, version, prevVersion);
+  const update = items[0];
 
   return (
     <ModalContent onModalClose={onModalClose}>
@@ -129,7 +91,6 @@ function AppUpdatedModalContent(props) {
 
 AppUpdatedModalContent.propTypes = {
   version: PropTypes.string.isRequired,
-  prevVersion: PropTypes.string,
   isPopulated: PropTypes.bool.isRequired,
   error: PropTypes.object,
   items: PropTypes.arrayOf(PropTypes.object).isRequired,

frontend/src/App/AppUpdatedModalContentConnector.js

@@ -8,9 +8,8 @@ import AppUpdatedModalContent from './AppUpdatedModalContent';
 function createMapStateToProps() {
   return createSelector(
     (state) => state.app.version,
-    (state) => state.app.prevVersion,
     (state) => state.system.updates,
-    (version, prevVersion, updates) => {
+    (version, updates) => {
       const {
         isPopulated,
         error,
@@ -19,7 +18,6 @@ function createMapStateToProps() {
 
       return {
         version,
-        prevVersion,
         isPopulated,
         error,
         items

frontend/src/App/ApplyTheme.js

@@ -1,49 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Fragment, useCallback, useEffect } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import themes from 'Styles/Themes';
-
-function createMapStateToProps() {
-  return createSelector(
-    (state) => state.settings.ui.item.theme || window.Readarr.theme,
-    (
-      theme
-    ) => {
-      return {
-        theme
-      };
-    }
-  );
-}
-
-function ApplyTheme({ theme, children }) {
-  // Update the CSS Variables
-  const updateCSSVariables = useCallback(() => {
-    const arrayOfVariableKeys = Object.keys(themes[theme]);
-    const arrayOfVariableValues = Object.values(themes[theme]);
-
-    // Loop through each array key and set the CSS Variables
-    arrayOfVariableKeys.forEach((cssVariableKey, index) => {
-      // Based on our snippet from MDN
-      document.documentElement.style.setProperty(
-        `--${cssVariableKey}`,
-        arrayOfVariableValues[index]
-      );
-    });
-  }, [theme]);
-
-  // On Component Mount and Component Update
-  useEffect(() => {
-    updateCSSVariables(theme);
-  }, [updateCSSVariables, theme]);
-
-  return <Fragment>{children}</Fragment>;
-}
-
-ApplyTheme.propTypes = {
-  theme: PropTypes.string.isRequired,
-  children: PropTypes.object.isRequired
-};
-
-export default connect(createMapStateToProps)(ApplyTheme);

frontend/src/Author/AuthorImage.js

@@ -99,7 +99,7 @@ class AuthorImage extends Component {
     if (this.props.onError) {
       this.props.onError();
     }
-  };
+  }
 
   onLoad = () => {
     this.setState({
@@ -110,7 +110,7 @@ class AuthorImage extends Component {
     if (this.props.onLoad) {
       this.props.onLoad();
     }
-  };
+  }
 
   //
   // Render

frontend/src/Author/Delete/DeleteAuthorModalContent.css

@@ -8,5 +8,5 @@
 
 .deleteFilesMessage {
   margin-top: 20px;
-  color: var(--dangerColor);
+  color: $dangerColor;
 }

frontend/src/Author/Delete/DeleteAuthorModalContent.js

@@ -33,11 +33,11 @@ class DeleteAuthorModalContent extends Component {
 
   onDeleteFilesChange = ({ value }) => {
     this.setState({ deleteFiles: value });
-  };
+  }
 
   onAddImportListExclusionChange = ({ value }) => {
     this.setState({ addImportListExclusion: value });
-  };
+  }
 
   onDeleteAuthorConfirmed = () => {
     const deleteFiles = this.state.deleteFiles;
@@ -46,7 +46,7 @@ class DeleteAuthorModalContent extends Component {
     this.setState({ deleteFiles: false });
     this.setState({ addImportListExclusion: false });
     this.props.onDeletePress(deleteFiles, addImportListExclusion);
-  };
+  }
 
   //
   // Render

frontend/src/Author/Delete/DeleteAuthorModalContentConnector.js

@@ -32,7 +32,7 @@ class DeleteAuthorModalContentConnector extends Component {
     });
 
     this.props.onModalClose(true);
-  };
+  }
 
   //
   // Render

frontend/src/Author/Details/AuthorDetails.css

@@ -9,7 +9,7 @@
 }
 
 .metadataMessage {
-  color: var(--helpTextColor);
+  color: $helpTextColor;
   text-align: center;
   font-weight: 300;
   font-size: 20px;
@@ -22,7 +22,7 @@
 .tabList {
   margin: 0;
   padding: 0;
-  border-bottom: 1px solid var(--lightGray);
+  border-bottom: 1px solid $lightGray;
 }
 
 .tab {
@@ -37,7 +37,7 @@
 }
 
 .selectedTab {
-  border-bottom: 4px solid var(--linkColor);
+  border-bottom: 4px solid $linkColor;
 }
 
 .tabContent {
@@ -63,7 +63,7 @@
   white-space: nowrap;
 
   &:hover {
-    color: var(--iconButtonHoverLightColor);
+    color: $iconButtonHoverLightColor;
   }
 }
 

frontend/src/Author/Details/AuthorDetails.js

@@ -99,69 +99,69 @@ class AuthorDetails extends Component {
     }
 
     this.setState({ selectedState: newSelectedState, allSelected: isAllSelected, allUnselected: isAllUnselected });
-  };
+  }
 
   getSelectedIds = () => {
     return getSelectedIds(this.state.selectedState);
-  };
+  }
 
   //
   // Listeners
 
   onOrganizePress = () => {
     this.setState({ isOrganizeModalOpen: true });
-  };
+  }
 
   onOrganizeModalClose = () => {
     this.setState({ isOrganizeModalOpen: false });
-  };
+  }
 
   onRetagPress = () => {
     this.setState({ isRetagModalOpen: true });
-  };
+  }
 
   onRetagModalClose = () => {
     this.setState({ isRetagModalOpen: false });
-  };
+  }
 
   onInteractiveImportPress = () => {
     this.setState({ isInteractiveImportModalOpen: true });
-  };
+  }
 
   onInteractiveImportModalClose = () => {
     this.setState({ isInteractiveImportModalOpen: false });
-  };
+  }
 
   onEditAuthorPress = () => {
     this.setState({ isEditAuthorModalOpen: true });
-  };
+  }
 
   onEditAuthorModalClose = () => {
     this.setState({ isEditAuthorModalOpen: false });
-  };
+  }
 
   onDeleteAuthorPress = () => {
     this.setState({
       isEditAuthorModalOpen: false,
       isDeleteAuthorModalOpen: true
     });
-  };
+  }
 
   onDeleteAuthorModalClose = () => {
     this.setState({ isDeleteAuthorModalOpen: false });
-  };
+  }
 
   onMonitorOptionsPress = () => {
     this.setState({ isMonitorOptionsModalOpen: true });
-  };
+  }
 
   onMonitorOptionsClose = () => {
     this.setState({ isMonitorOptionsModalOpen: false });
-  };
+  }
 
   onBookEditorTogglePress = () => {
     this.setState({ isEditorActive: !this.state.isEditorActive });
-  };
+  }
 
   onExpandAllPress = () => {
     const {
@@ -170,7 +170,7 @@ class AuthorDetails extends Component {
     } = this.state;
 
     this.setState(getExpandedState(selectAll(expandedState, !allExpanded)));
-  };
+  }
 
   onExpandPress = (bookId, isExpanded) => {
     this.setState((state) => {
@@ -184,32 +184,32 @@ class AuthorDetails extends Component {
 
       return getExpandedState(newState);
     });
-  };
+  }
 
   onSelectAllChange = ({ value }) => {
     this.setState(selectAll(this.state.selectedState, value));
-  };
+  }
 
   onSelectAllPress = () => {
     this.onSelectAllChange({ value: !this.state.allSelected });
-  };
+  }
 
   onSelectedChange = (items, id, value, shiftKey = false) => {
     this.setState((state) => {
       return toggleSelected(state, items, id, value, shiftKey);
     });
-  };
+  }
 
   onSaveSelected = (changes) => {
     this.props.onSaveSelected({
       bookIds: this.getSelectedIds(),
       ...changes
     });
-  };
+  }
 
   onTabSelect = (index, lastIndex) => {
     this.setState({ selectedTabIndex: index });
-  };
+  }
 
   //
   // Render

frontend/src/Author/Details/AuthorDetailsConnector.js

@@ -270,7 +270,7 @@ class AuthorDetailsConnector extends Component {
     this.props.fetchSeries({ authorId });
     this.props.fetchBookFiles({ authorId });
     this.props.fetchQueueDetails({ authorId });
-  };
+  }
 
   unpopulate = () => {
     this.props.cancelFetchReleases();
@@ -278,7 +278,7 @@ class AuthorDetailsConnector extends Component {
     this.props.clearBookFiles();
     this.props.clearQueueDetails();
     this.props.clearReleases();
-  };
+  }
 
   //
   // Listeners
@@ -288,25 +288,25 @@ class AuthorDetailsConnector extends Component {
       authorId: this.props.id,
       monitored
     });
-  };
+  }
 
   onRefreshPress = () => {
     this.props.executeCommand({
       name: commandNames.REFRESH_AUTHOR,
       authorId: this.props.id
     });
-  };
+  }
 
   onSearchPress = () => {
     this.props.executeCommand({
       name: commandNames.AUTHOR_SEARCH,
       authorId: this.props.id
     });
-  };
+  }
 
   onSaveSelected = (payload) => {
     this.props.saveBookEditor(payload);
-  };
+  }
 
   //
   // Render

frontend/src/Author/Details/AuthorDetailsHeader.css

@@ -16,7 +16,7 @@
   position: absolute;
   width: 100%;
   height: 100%;
-  background: var(--black);
+  background: $black;
   opacity: 0.7;
 }
 
@@ -25,7 +25,7 @@
   padding: 30px;
   width: 100%;
   height: 100%;
-  color: var(--white);
+  color: $white;
 }
 
 .poster {
@@ -69,7 +69,7 @@
   width: 40px;
 
   &:hover {
-    color: var(--iconButtonHoverLightColor);
+    color: $iconButtonHoverLightColor;
   }
 }
 
@@ -97,7 +97,7 @@
   white-space: nowrap;
 
   &:hover {
-    color: var(--iconButtonHoverLightColor);
+    color: $iconButtonHoverLightColor;
   }
 }
 

frontend/src/Author/Details/AuthorDetailsHeader.js

@@ -52,11 +52,11 @@ class AuthorDetailsHeader extends Component {
 
   onOverviewMeasure = ({ height }) => {
     this.setState({ overviewHeight: height });
-  };
+  }
 
   onTitleMeasure = ({ width }) => {
     this.setState({ titleWidth: width });
-  };
+  }
 
   //
   // Render

frontend/src/Author/Details/AuthorDetailsHeaderConnector.js

@@ -48,7 +48,7 @@ class AuthorDetailsHeaderConnector extends Component {
       authorId: this.props.authorId,
       monitored
     });
-  };
+  }
 
   //
   // Render

frontend/src/Author/Details/AuthorDetailsSeason.css

@@ -1,8 +1,8 @@
 .bookType {
   margin-bottom: 20px;
-  border: 1px solid var(--borderColor);
+  border: 1px solid $borderColor;
   border-radius: 4px;
-  background-color: var(--cardBackgroundColor);
+  background-color: $white;
 
   &:last-of-type {
     margin-bottom: 0;
@@ -77,7 +77,7 @@
 
 .books {
   padding-top: 15px;
-  border-top: 1px solid var(--borderColor);
+  border-top: 1px solid $borderColor;
 }
 
 .collapseButtonContainer {
@@ -86,10 +86,10 @@
   justify-content: center;
   padding: 10px 15px;
   width: 100%;
-  border-top: 1px solid var(--borderColor);
+  border-top: 1px solid $borderColor;
   border-bottom-right-radius: 4px;
   border-bottom-left-radius: 4px;
-  background-color: var(--collapseButtonBackgroundColor);
+  background-color: #fafafa;
 }
 
 .collapseButtonIcon {

frontend/src/Author/Details/AuthorDetailsSeason.js

@@ -61,7 +61,7 @@ class AuthorDetailsSeason extends Component {
     this.setState({ lastToggledBook: bookId });
 
     this.props.onMonitorBookPress(_.uniq(bookIds), monitored);
-  };
+  }
 
   onSelectedChange = ({ id, value, shiftKey = false }) => {
     const {
@@ -70,7 +70,7 @@ class AuthorDetailsSeason extends Component {
     } = this.props;
 
     return onSelectedChange(items, id, value, shiftKey);
-  };
+  }
 
   //
   // Render

frontend/src/Author/Details/AuthorDetailsSeasonConnector.js

@@ -66,18 +66,18 @@ class AuthorDetailsSeasonConnector extends Component {
 
   onTableOptionChange = (payload) => {
     this.props.setBooksTableOption(payload);
-  };
+  }
 
   onSortPress = (sortKey) => {
     this.props.setAuthorDetailsSort({ sortKey });
-  };
+  }
 
   onMonitorBookPress = (bookIds, monitored) => {
     this.props.toggleBooksMonitored({
       bookIds,
       monitored
     });
-  };
+  }
 
   //
   // Render

frontend/src/Author/Details/AuthorDetailsSeries.css

@@ -1,8 +1,8 @@
 .bookType {
   margin-bottom: 20px;
-  border: 1px solid var(--borderColor);
+  border: 1px solid $borderColor;
   border-radius: 4px;
-  background-color: var(--cardBackgroundColor);
+  background-color: $white;
 
   &:last-of-type {
     margin-bottom: 0;
@@ -77,7 +77,7 @@
 
 .books {
   padding-top: 15px;
-  border-top: 1px solid var(--borderColor);
+  border-top: 1px solid $borderColor;
 }
 
 .collapseButtonContainer {
@@ -86,10 +86,10 @@
   justify-content: center;
   padding: 10px 15px;
   width: 100%;
-  border-top: 1px solid var(--borderColor);
+  border-top: 1px solid $borderColor;
   border-bottom-right-radius: 4px;
   border-bottom-left-radius: 4px;
-  background-color: var(--cardBackgroundColor);
+  background-color: #fafafa;
 }
 
 .collapseButtonIcon {

frontend/src/Author/Details/AuthorDetailsSeries.js

@@ -73,7 +73,7 @@ class AuthorDetailsSeries extends Component {
     } = this.props;
 
     this.props.onExpandPress(id, !isExpanded);
-  };
+  }
 
   onMonitorBookPress = (bookId, monitored, { shiftKey }) => {
     const lastToggled = this.state.lastToggledBook;
@@ -91,13 +91,13 @@ class AuthorDetailsSeries extends Component {
     this.setState({ lastToggledBook: bookId });
 
     this.props.onMonitorBookPress(_.uniq(bookIds), monitored);
-  };
+  }
 
   onMonitorSeriesPress = (monitored, { shiftKey }) => {
     const bookIds = this.props.items.map((book) => book.id);
 
     this.props.onMonitorBookPress(_.uniq(bookIds), monitored);
-  };
+  }
 
   //
   // Render

frontend/src/Author/Details/AuthorDetailsSeriesConnector.js

@@ -81,18 +81,18 @@ class AuthorDetailsSeasonConnector extends Component {
 
   onTableOptionChange = (payload) => {
     this.props.setSeriesTableOption(payload);
-  };
+  }
 
   onSortPress = (sortKey) => {
     this.props.dispatchSetSeriesSort({ sortKey });
-  };
+  }
 
   onMonitorBookPress = (bookIds, monitored) => {
     this.props.toggleBooksMonitored({
       bookIds,
       monitored
     });
-  };
+  }
 
   //
   // Render

frontend/src/Author/Details/BookRow.js

@@ -30,23 +30,23 @@ class BookRow extends Component {
 
   onManualSearchPress = () => {
     this.setState({ isDetailsModalOpen: true });
-  };
+  }
 
   onDetailsModalClose = () => {
     this.setState({ isDetailsModalOpen: false });
-  };
+  }
 
   onEditBookPress = () => {
     this.setState({ isEditBookModalOpen: true });
-  };
+  }
 
   onEditBookModalClose = () => {
     this.setState({ isEditBookModalOpen: false });
-  };
+  }
 
   onMonitorBookPress = (monitored, options) => {
     this.props.onMonitorBookPress(this.props.id, monitored, options);
-  };
+  }
 
   //
   // Render

frontend/src/Author/Edit/EditAuthorModalConnector.js

@@ -16,7 +16,7 @@ class EditAuthorModalConnector extends Component {
   onModalClose = () => {
     this.props.clearPendingChanges({ section: 'author' });
     this.props.onModalClose();
-  };
+  }
 
   //
   // Render

frontend/src/Author/Edit/EditAuthorModalContent.js

@@ -48,13 +48,13 @@ class EditAuthorModalContent extends Component {
 
       onSavePress(false);
     }
-  };
+  }
 
   onMoveAuthorPress = () => {
     this.setState({ isConfirmMoveModalOpen: false });
 
     this.props.onSavePress(true);
-  };
+  }
 
   //
   // Render

frontend/src/Author/Edit/EditAuthorModalContentConnector.js

@@ -83,14 +83,14 @@ class EditAuthorModalContentConnector extends Component {
 
   onInputChange = ({ name, value }) => {
     this.props.dispatchSetAuthorValue({ name, value });
-  };
+  }
 
   onSavePress = (moveFiles) => {
     this.props.dispatchSaveAuthor({
       id: this.props.authorId,
       moveFiles
     });
-  };
+  }
 
   //
   // Render

frontend/src/Author/Editor/AudioTags/RetagAuthorModalContent.js

@@ -30,11 +30,11 @@ class RetagAuthorModalContent extends Component {
 
   onCheckInputChange = ({ name, value }) => {
     this.setState({ [name]: value });
-  };
+  }
 
   onRetagAuthorPress = () => {
     this.props.onRetagAuthorPress(this.state.updateCovers, this.state.embedMetadata);
-  };
+  }
 
   //
   // Render

frontend/src/Author/Editor/AudioTags/RetagAuthorModalContentConnector.js

@@ -45,7 +45,7 @@ class RetagAuthorModalContentConnector extends Component {
     });
 
     this.props.onModalClose(true);
-  };
+  }
 
   //
   // Render

frontend/src/Author/Editor/AuthorEditorFooter.js

@@ -80,7 +80,7 @@ class AuthorEditorFooter extends Component {
       default:
         this.props.onSaveSelected({ [name]: value });
     }
-  };
+  }
 
   onApplyTagsPress = (tags, applyTags) => {
     this.setState({
@@ -92,23 +92,23 @@ class AuthorEditorFooter extends Component {
       tags,
       applyTags
     });
-  };
+  }
 
   onDeleteSelectedPress = () => {
     this.setState({ isDeleteAuthorModalOpen: true });
-  };
+  }
 
   onDeleteAuthorModalClose = () => {
     this.setState({ isDeleteAuthorModalOpen: false });
-  };
+  }
 
   onTagsPress = () => {
     this.setState({ isTagsModalOpen: true });
-  };
+  }
 
   onTagsModalClose = () => {
     this.setState({ isTagsModalOpen: false });
-  };
+  }
 
   onSaveRootFolderPress = () => {
     this.setState({
@@ -117,7 +117,7 @@ class AuthorEditorFooter extends Component {
     });
 
     this.props.onSaveSelected({ rootFolderPath: this.state.destinationRootFolder });
-  };
+  }
 
   onMoveAuthorPress = () => {
     this.setState({
@@ -129,7 +129,7 @@ class AuthorEditorFooter extends Component {
       rootFolderPath: this.state.destinationRootFolder,
       moveFiles: true
     });
-  };
+  }
 
   //
   // Render

frontend/src/Author/Editor/AuthorEditorRow.js

@@ -16,7 +16,7 @@ class AuthorEditorRow extends Component {
   onBookFolderChange = () => {
     // Mock handler to satisfy `onChange` being required for `CheckInput`.
     //
-  };
+  }
 
   //
   // Render

frontend/src/Author/Editor/Delete/DeleteAuthorModalContent.css

@@ -9,5 +9,5 @@
 
 .path {
   margin-left: 5px;
-  color: var(--dangerColor);
+  color: $dangerColor;
 }

frontend/src/Author/Editor/Delete/DeleteAuthorModalContent.js

@@ -29,14 +29,14 @@ class DeleteAuthorModalContent extends Component {
 
   onDeleteFilesChange = ({ value }) => {
     this.setState({ deleteFiles: value });
-  };
+  }
 
   onDeleteAuthorConfirmed = () => {
     const deleteFiles = this.state.deleteFiles;
 
     this.setState({ deleteFiles: false });
     this.props.onDeleteSelectedPress(deleteFiles);
-  };
+  }
 
   //
   // Render

frontend/src/Author/Editor/Organize/OrganizeAuthorModalContentConnector.js

@@ -43,7 +43,7 @@ class OrganizeAuthorModalContentConnector extends Component {
     });
 
     this.props.onModalClose(true);
-  };
+  }
 
   //
   // Render

frontend/src/Author/Editor/Tags/TagsModalContent.js

@@ -34,7 +34,7 @@ class TagsModalContent extends Component {
 
   onInputChange = ({ name, value }) => {
     this.setState({ [name]: value });
-  };
+  }
 
   onApplyTagsPress = () => {
     const {
@@ -43,7 +43,7 @@ class TagsModalContent extends Component {
     } = this.state;
 
     this.props.onApplyTagsPress(tags, applyTags);
-  };
+  }
 
   //
   // Render

frontend/src/Author/History/AuthorHistoryContentConnector.js

@@ -54,7 +54,7 @@ class AuthorHistoryContentConnector extends Component {
       authorId,
       bookId
     });
-  };
+  }
 
   //
   // Render

frontend/src/Author/History/AuthorHistoryRow.js

@@ -55,16 +55,16 @@ class AuthorHistoryRow extends Component {
 
   onMarkAsFailedPress = () => {
     this.setState({ isMarkAsFailedModalOpen: true });
-  };
+  }
 
   onConfirmMarkAsFailed = () => {
     this.props.onMarkAsFailedPress(this.props.id);
     this.setState({ isMarkAsFailedModalOpen: false });
-  };
+  }
 
   onMarkAsFailedModalClose = () => {
     this.setState({ isMarkAsFailedModalOpen: false });
-  };
+  }
 
   //
   // Render

frontend/src/Author/Index/AuthorIndex.js

@@ -99,14 +99,14 @@ class AuthorIndex extends Component {
 
   setScrollerRef = (ref) => {
     this.setState({ scroller: ref });
-  };
+  }
 
   getSelectedIds = () => {
     if (this.state.allUnselected) {
       return [];
     }
     return getSelectedIds(this.state.selectedState);
-  };
+  }
 
   setSelectedState() {
     const {
@@ -192,19 +192,19 @@ class AuthorIndex extends Component {
 
   onPosterOptionsPress = () => {
     this.setState({ isPosterOptionsModalOpen: true });
-  };
+  }
 
   onPosterOptionsModalClose = () => {
     this.setState({ isPosterOptionsModalOpen: false });
-  };
+  }
 
   onOverviewOptionsPress = () => {
     this.setState({ isOverviewOptionsModalOpen: true });
-  };
+  }
 
   onOverviewOptionsModalClose = () => {
     this.setState({ isOverviewOptionsModalOpen: false });
-  };
+  }
 
   onEditorTogglePress = () => {
     if (this.state.isEditorActive) {
@@ -214,36 +214,36 @@ class AuthorIndex extends Component {
       newState.isEditorActive = true;
       this.setState(newState);
     }
-  };
+  }
 
   onJumpBarItemPress = (jumpToCharacter) => {
     this.setState({ jumpToCharacter });
-  };
+  }
 
   onSelectAllChange = ({ value }) => {
     this.setState(selectAll(this.state.selectedState, value));
-  };
+  }
 
   onSelectAllPress = () => {
     this.onSelectAllChange({ value: !this.state.allSelected });
-  };
+  }
 
   onSelectedChange = ({ id, value, shiftKey = false }) => {
     this.setState((state) => {
       return toggleSelected(state, this.props.items, id, value, shiftKey);
     });
-  };
+  }
 
   onSaveSelected = (changes) => {
     this.props.onSaveSelected({
       authorIds: this.getSelectedIds(),
       ...changes
     });
-  };
+  }
 
   onOrganizeAuthorPress = () => {
     this.setState({ isOrganizingAuthorModalOpen: true });
-  };
+  }
 
   onOrganizeAuthorModalClose = (organized) => {
     this.setState({ isOrganizingAuthorModalOpen: false });
@@ -251,11 +251,11 @@ class AuthorIndex extends Component {
     if (organized === true) {
       this.onSelectAllChange({ value: false });
     }
-  };
+  }
 
   onRetagAuthorPress = () => {
     this.setState({ isRetaggingAuthorModalOpen: true });
-  };
+  }
 
   onRetagAuthorModalClose = (organized) => {
     this.setState({ isRetaggingAuthorModalOpen: false });
@@ -263,14 +263,14 @@ class AuthorIndex extends Component {
     if (organized === true) {
       this.onSelectAllChange({ value: false });
     }
-  };
+  }
 
   onRefreshAuthorPress = () => {
     const selectedIds = this.getSelectedIds();
     const refreshIds = this.state.isEditorActive && selectedIds.length > 0 ? selectedIds : [];
 
     this.props.onRefreshAuthorPress(refreshIds);
-  };
+  }
 
   //
   // Render

frontend/src/Author/Index/AuthorIndexConnector.js

@@ -85,15 +85,15 @@ class AuthorIndexConnector extends Component {
 
   onViewSelect = (view) => {
     this.props.dispatchSetAuthorView(view);
-  };
+  }
 
   onSaveSelected = (payload) => {
     this.props.dispatchSaveAuthorEditor(payload);
-  };
+  }
 
   onScroll = ({ scrollTop }) => {
     scrollPositions.authorIndex = scrollTop;
-  };
+  }
 
   //
   // Render

frontend/src/Author/Index/AuthorIndexFooter.css

@@ -21,32 +21,32 @@
 .continuing {
   composes: legendItemColor;
 
-  background-color: var(--primaryColor);
+  background-color: $primaryColor;
 }
 
 .ended {
   composes: legendItemColor;
 
-  background-color: var(--successColor);
+  background-color: $successColor;
 }
 
 .missingMonitored {
   composes: legendItemColor;
 
-  background-color: var(--dangerColor);
+  background-color: $dangerColor;
 
   &:global(.colorImpaired) {
-    background: repeating-linear-gradient(90deg, color(#f05050 shade(5%)), color(#f05050 shade(5%)) 5px, color(#f05050 shade(15%)) 5px, color(#f05050 shade(15%)) 10px);
+    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: var(--warningColor);
+  background-color: $warningColor;
 
   &:global(.colorImpaired) {
-    background: repeating-linear-gradient(45deg, #ffa500, #ffa500 5px, color(#ffa500 tint(15%)) 5px, color(#ffa500 tint(15%)) 10px);
+    background: repeating-linear-gradient(45deg, $warningColor, $warningColor 5px, color($warningColor tint(15%)) 5px, color($warningColor tint(15%)) 10px);
   }
 }
 

frontend/src/Author/Index/AuthorIndexItemConnector.js

@@ -98,14 +98,14 @@ class AuthorIndexItemConnector extends Component {
       name: commandNames.REFRESH_AUTHOR,
       authorId: this.props.id
     });
-  };
+  }
 
   onSearchPress = () => {
     this.props.dispatchExecuteCommand({
       name: commandNames.AUTHOR_SEARCH,
       authorId: this.props.id
     });
-  };
+  }
 
   //
   // Render

frontend/src/Author/Index/Overview/AuthorIndexOverview.css

@@ -3,7 +3,7 @@ $hoverScale: 1.05;
 .container {
   &:hover {
     .content {
-      background-color: var(--tableRowHoverBackgroundColor);
+      background-color: $tableRowHoverBackgroundColor;
     }
   }
 }
@@ -35,10 +35,10 @@ $hoverScale: 1.05;
   composes: link from '~Components/Link/Link.css';
 
   display: block;
-  color: var(--defaultColor);
+  color: $defaultColor;
 
   &:hover {
-    color: var(--defaultColor);
+    color: $defaultColor;
     text-decoration: none;
   }
 }
@@ -52,8 +52,8 @@ $hoverScale: 1.05;
   height: 0;
   border-width: 0 25px 25px 0;
   border-style: solid;
-  border-color: transparent var(--dangerColor) transparent transparent;
+  border-color: transparent $dangerColor transparent transparent;
-  color: var(--white);
+  color: $white;
 }
 
 .info {

frontend/src/Author/Index/Overview/AuthorIndexOverview.js

@@ -51,22 +51,22 @@ class AuthorIndexOverview extends Component {
 
   onEditAuthorPress = () => {
     this.setState({ isEditAuthorModalOpen: true });
-  };
+  }
 
   onEditAuthorModalClose = () => {
     this.setState({ isEditAuthorModalOpen: false });
-  };
+  }
 
   onDeleteAuthorPress = () => {
     this.setState({
       isEditAuthorModalOpen: false,
       isDeleteAuthorModalOpen: true
     });
-  };
+  }
 
   onDeleteAuthorModalClose = () => {
     this.setState({ isDeleteAuthorModalOpen: false });
-  };
+  }
 
   onChange = ({ value, shiftKey }) => {
     const {
@@ -75,7 +75,7 @@ class AuthorIndexOverview extends Component {
     } = this.props;
 
     onSelectedChange({ id, value, shiftKey });
-  };
+  }
 
   //
   // Render

frontend/src/Author/Index/Overview/AuthorIndexOverviews.js

@@ -123,7 +123,7 @@ class AuthorIndexOverviews extends Component {
 
   setGridRef = (ref) => {
     this._grid = ref;
-  };
+  }
 
   calculateGrid = (width = this.state.width, isSmallScreen) => {
     const {
@@ -141,7 +141,7 @@ class AuthorIndexOverviews extends Component {
       posterHeight,
       rowHeight
     });
-  };
+  }
 
   cellRenderer = ({ key, rowIndex, style }) => {
     const {
@@ -197,14 +197,14 @@ class AuthorIndexOverviews extends Component {
         />
       </div>
     );
-  };
+  }
 
   //
   // Listeners
 
   onMeasure = ({ width }) => {
     this.calculateGrid(width, this.props.isSmallScreen);
-  };
+  }
 
   //
   // Render

frontend/src/Author/Index/Overview/Options/AuthorIndexOverviewOptionsModalContent.js

@@ -122,7 +122,7 @@ class AuthorIndexOverviewOptionsModalContent extends Component {
     }, () => {
       this.props.onChangeOverviewOption({ [name]: value });
     });
-  };
+  }
 
   //
   // Render

frontend/src/Author/Index/Posters/AuthorIndexPoster.css

@@ -5,7 +5,7 @@ $hoverScale: 1.05;
 
   &:hover {
     z-index: 2;
-    box-shadow: 0 0 12px var(--black);
+    box-shadow: 0 0 12px $black;
     transition: all 200ms ease-in;
 
     .controls {
@@ -32,7 +32,7 @@ $hoverScale: 1.05;
   position: relative;
   display: block;
   height: 70px;
-  background-color: var(--defaultColor);
+  background-color: $defaultColor;
 }
 
 .overlayTitle {
@@ -45,13 +45,13 @@ $hoverScale: 1.05;
   padding: 5px;
   width: 100%;
   height: 100%;
-  color: var(--offWhite);
+  color: $offWhite;
   text-align: center;
   font-size: 20px;
 }
 
 .nextAiring {
-  background-color: var(--seriesBackgroundColor);
+  background-color: #fafbfc;
   text-align: center;
   font-size: $smallFontSize;
 }
@@ -59,7 +59,8 @@ $hoverScale: 1.05;
 .title {
   @add-mixin truncate;
 
-  background-color: var(--seriesBackgroundColor);
+  background-color: $defaultColor;
+  color: $white;
   text-align: center;
   font-size: $smallFontSize;
 }
@@ -73,8 +74,8 @@ $hoverScale: 1.05;
   height: 0;
   border-width: 0 25px 25px 0;
   border-style: solid;
-  border-color: transparent var(--dangerColor) transparent transparent;
+  border-color: transparent $dangerColor transparent transparent;
-  color: var(--white);
+  color: $white;
 }
 
 .editorSelect {
@@ -90,8 +91,8 @@ $hoverScale: 1.05;
   left: 10px;
   z-index: 3;
   border-radius: 4px;
-  background-color: var(--readarrRed);
+  background-color: $themeLightColor;
-  color: var(--white);
+  color: $white;
   font-size: $smallFontSize;
   opacity: 0;
   transition: opacity 0;

frontend/src/Author/Index/Posters/AuthorIndexPoster.js

@@ -35,34 +35,34 @@ class AuthorIndexPoster extends Component {
 
   onEditAuthorPress = () => {
     this.setState({ isEditAuthorModalOpen: true });
-  };
+  }
 
   onEditAuthorModalClose = () => {
     this.setState({ isEditAuthorModalOpen: false });
-  };
+  }
 
   onDeleteAuthorPress = () => {
     this.setState({
       isEditAuthorModalOpen: false,
       isDeleteAuthorModalOpen: true
     });
-  };
+  }
 
   onDeleteAuthorModalClose = () => {
     this.setState({ isDeleteAuthorModalOpen: false });
-  };
+  }
 
   onPosterLoad = () => {
     if (this.state.hasPosterError) {
       this.setState({ hasPosterError: false });
     }
-  };
+  }
 
   onPosterLoadError = () => {
     if (!this.state.hasPosterError) {
       this.setState({ hasPosterError: true });
     }
-  };
+  }
 
   onChange = ({ value, shiftKey }) => {
     const {
@@ -71,7 +71,7 @@ class AuthorIndexPoster extends Component {
     } = this.props;
 
     onSelectedChange({ id, value, shiftKey });
-  };
+  }
 
   //
   // Render

frontend/src/Author/Index/Posters/AuthorIndexPosterInfo.css

@@ -1,5 +1,5 @@
 .info {
-  background-color: var(--seriesBackgroundColor);
+  background-color: #fafbfc;
   text-align: center;
   font-size: $smallFontSize;
 }

frontend/src/Author/Index/Posters/AuthorIndexPosters.js

@@ -171,7 +171,7 @@ class AuthorIndexPosters extends Component {
 
   setGridRef = (ref) => {
     this._grid = ref;
-  };
+  }
 
   calculateGrid = (width = this.state.width, isSmallScreen) => {
     const {
@@ -193,7 +193,7 @@ class AuthorIndexPosters extends Component {
       posterHeight,
       rowHeight
     });
-  };
+  }
 
   cellRenderer = ({ key, rowIndex, columnIndex, style }) => {
     const {
@@ -259,14 +259,14 @@ class AuthorIndexPosters extends Component {
         />
       </div>
     );
-  };
+  }
 
   //
   // Listeners
 
   onMeasure = ({ width }) => {
     this.calculateGrid(width, this.props.isSmallScreen);
-  };
+  }
 
   //
   // Render

frontend/src/Author/Index/Posters/Options/AuthorIndexPosterOptionsModalContent.js

@@ -93,7 +93,7 @@ class AuthorIndexPosterOptionsModalContent extends Component {
     }, () => {
       this.props.onChangePosterOption({ [name]: value });
     });
-  };
+  }
 
   //
   // Render

frontend/src/Author/Index/ProgressBar/AuthorIndexProgressBar.css

@@ -3,7 +3,7 @@
 
   border-radius: 0;
   background-color: #5b5b5b;
-  color: var(--white);
+  color: $white;
   transition: width 200ms ease;
 }
 

frontend/src/Author/Index/Table/AuthorIndexActionsCell.js

@@ -27,22 +27,22 @@ class AuthorIndexActionsCell extends Component {
 
   onEditAuthorPress = () => {
     this.setState({ isEditAuthorModalOpen: true });
-  };
+  }
 
   onEditAuthorModalClose = () => {
     this.setState({ isEditAuthorModalOpen: false });
-  };
+  }
 
   onDeleteAuthorPress = () => {
     this.setState({
       isEditAuthorModalOpen: false,
       isDeleteAuthorModalOpen: true
     });
-  };
+  }
 
   onDeleteAuthorModalClose = () => {
     this.setState({ isDeleteAuthorModalOpen: false });
-  };
+  }
 
   //
   // Render

frontend/src/Author/Index/Table/AuthorIndexRow.css

@@ -31,7 +31,7 @@
   position: relative;
   display: block;
   height: 70px;
-  background-color: var(--defaultColor);
+  background-color: $defaultColor;
 }
 
 .bannerImage {
@@ -49,7 +49,7 @@
   padding: 5px;
   width: 100%;
   height: 100%;
-  color: var(--offWhite);
+  color: $offWhite;
   text-align: center;
   font-size: 20px;
 }
@@ -92,7 +92,7 @@
 }
 
 .ratings {
-  composes: cell from '~Components/Table/Cells/VirtualTableRowCell.css';
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
 
   flex: 0 0 80px;
 }

frontend/src/Author/Index/Table/AuthorIndexRow.js

@@ -40,39 +40,39 @@ class AuthorIndexRow extends Component {
 
   onEditAuthorPress = () => {
     this.setState({ isEditAuthorModalOpen: true });
-  };
+  }
 
   onEditAuthorModalClose = () => {
     this.setState({ isEditAuthorModalOpen: false });
-  };
+  }
 
   onDeleteAuthorPress = () => {
     this.setState({
       isEditAuthorModalOpen: false,
       isDeleteAuthorModalOpen: true
     });
-  };
+  }
 
   onDeleteAuthorModalClose = () => {
     this.setState({ isDeleteAuthorModalOpen: false });
-  };
+  }
 
   onUseSceneNumberingChange = () => {
     // Mock handler to satisfy `onChange` being required for `CheckInput`.
     //
-  };
+  }
 
   onBannerLoad = () => {
     if (this.state.hasBannerError) {
       this.setState({ hasBannerError: false });
     }
-  };
+  }
 
   onBannerLoadError = () => {
     if (!this.state.hasBannerError) {
       this.setState({ hasBannerError: true });
     }
-  };
+  }
 
   //
   // Render

frontend/src/Author/Index/Table/AuthorIndexTable.js

@@ -78,7 +78,7 @@ class AuthorIndexTable extends Component {
         />
       </VirtualTableRow>
     );
-  };
+  }
 
   //
   // Render

frontend/src/Author/Index/Table/AuthorIndexTableOptions.js

@@ -60,7 +60,7 @@ class AuthorIndexTableOptions extends Component {
         }
       });
     });
-  };
+  }
 
   //
   // Render

frontend/src/Author/MonitoringOptions/MonitoringOptionModalConnector.js

@@ -16,7 +16,7 @@ class MonitoringOptionsModalConnector extends Component {
   onModalClose = () => {
     this.props.clearPendingChanges({ section: 'authors' });
     this.props.onModalClose();
-  };
+  }
 
   //
   // Render

frontend/src/Author/MonitoringOptions/MonitoringOptionsModalContent.js

@@ -44,7 +44,7 @@ class MonitoringOptionsModalContent extends Component {
 
   onInputChange = ({ name, value }) => {
     this.setState({ [name]: value });
-  };
+  }
 
   //
   // Listeners
@@ -65,11 +65,11 @@ class MonitoringOptionsModalContent extends Component {
     if (!isSaving) {
       this.onModalClose();
     }
-  };
+  }
 
   onModalClose = () => {
     this.props.onModalClose();
-  };
+  }
 
   //
   // Render

frontend/src/Author/MonitoringOptions/MonitoringOptionsModalContentConnector.js

@@ -42,14 +42,14 @@ class MonitoringOptionsModalContentConnector extends Component {
 
   onInputChange = ({ name, value }) => {
     this.setState({ name, value });
-  };
+  }
 
   onSavePress = ({ monitor }) => {
     this.props.dispatchUpdateMonitoringOptions({
       id: this.props.authorId,
       monitor
     });
-  };
+  }
 
   //
   // Render

frontend/src/Book/BookFormats.js

@@ -1,33 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import Label from 'Components/Label';
-import { kinds } from 'Helpers/Props';
-
-function BookFormats({ formats }) {
-  return (
-    <div>
-      {
-        formats.map((format) => {
-          return (
-            <Label
-              key={format.id}
-              kind={kinds.INFO}
-            >
-              {format.name}
-            </Label>
-          );
-        })
-      }
-    </div>
-  );
-}
-
-BookFormats.propTypes = {
-  formats: PropTypes.arrayOf(PropTypes.object).isRequired
-};
-
-BookFormats.defaultProps = {
-  formats: []
-};
-
-export default BookFormats;

frontend/src/Book/BookSearchCell.js

@@ -25,11 +25,11 @@ class BookSearchCell extends Component {
 
   onManualSearchPress = () => {
     this.setState({ isDetailsModalOpen: true });
-  };
+  }
 
   onDetailsModalClose = () => {
     this.setState({ isDetailsModalOpen: false });
-  };
+  }
 
   //
   // Render

frontend/src/Book/BookTitleLink.css

@@ -2,7 +2,7 @@
   composes: link from '~Components/Link/Link.css';
 
   &:hover {
-    color: var(--linkHoverColor);
+    color: $linkHoverColor;
     text-decoration: underline;
   }
 }

frontend/src/Book/Delete/DeleteBookModalContent.css

@@ -8,5 +8,5 @@
 
 .deleteFilesMessage {
   margin-top: 20px;
-  color: var(--dangerColor);
+  color: $dangerColor;
 }

frontend/src/Book/Delete/DeleteBookModalContent.js

@@ -32,11 +32,11 @@ class DeleteBookModalContent extends Component {
 
   onDeleteFilesChange = ({ value }) => {
     this.setState({ deleteFiles: value });
-  };
+  }
 
   onAddImportListExclusionChange = ({ value }) => {
     this.setState({ addImportListExclusion: value });
-  };
+  }
 
   onDeleteBookConfirmed = () => {
     const deleteFiles = this.state.deleteFiles;
@@ -45,7 +45,7 @@ class DeleteBookModalContent extends Component {
     this.setState({ deleteFiles: false });
     this.setState({ addImportListExclusion: false });
     this.props.onDeletePress(deleteFiles, addImportListExclusion);
-  };
+  }
 
   //
   // Render

frontend/src/Book/Delete/DeleteBookModalContentConnector.js

@@ -36,7 +36,7 @@ class DeleteBookModalContentConnector extends Component {
     this.props.onModalClose(true);
 
     this.props.push(`${window.Readarr.urlBase}/author/${this.props.authorSlug}`);
-  };
+  }
 
   //
   // Render

frontend/src/Book/Details/BookDetails.css

@@ -9,7 +9,7 @@
 .tabList {
   margin: 0;
   padding: 0;
-  border-bottom: 1px solid var(--lightGray);
+  border-bottom: 1px solid $lightGray;
 }
 
 .tab {
@@ -24,7 +24,7 @@
 }
 
 .selectedTab {
-  border-bottom: 4px solid var(--linkColor);
+  border-bottom: 4px solid $linkColor;
 }
 
 .tabContent {
@@ -54,7 +54,7 @@
   white-space: nowrap;
 
   &:hover {
-    color: var(--iconButtonHoverLightColor);
+    color: $iconButtonHoverLightColor;
   }
 }
 

frontend/src/Book/Details/BookDetails.js

@@ -45,42 +45,42 @@ class BookDetails extends Component {
 
   onOrganizePress = () => {
     this.setState({ isOrganizeModalOpen: true });
-  };
+  }
 
   onOrganizeModalClose = () => {
     this.setState({ isOrganizeModalOpen: false });
-  };
+  }
 
   onRetagPress = () => {
     this.setState({ isRetagModalOpen: true });
-  };
+  }
 
   onRetagModalClose = () => {
     this.setState({ isRetagModalOpen: false });
-  };
+  }
 
   onEditBookPress = () => {
     this.setState({ isEditBookModalOpen: true });
-  };
+  }
 
   onEditBookModalClose = () => {
     this.setState({ isEditBookModalOpen: false });
-  };
+  }
 
   onDeleteBookPress = () => {
     this.setState({
       isEditBookModalOpen: false,
       isDeleteBookModalOpen: true
     });
-  };
+  }
 
   onDeleteBookModalClose = () => {
     this.setState({ isDeleteBookModalOpen: false });
-  };
+  }
 
   onTabSelect = (index, lastIndex) => {
     this.setState({ selectedTabIndex: index });
-  };
+  }
 
   //
   // Render

frontend/src/Book/Details/BookDetailsConnector.js

@@ -146,14 +146,14 @@ class BookDetailsConnector extends Component {
 
     this.props.fetchBookFiles({ bookId });
     this.props.fetchEditions({ bookId });
-  };
+  }
 
   unpopulate = () => {
     this.props.cancelFetchReleases();
     this.props.clearReleases();
     this.props.clearBookFiles();
     this.props.clearEditions();
-  };
+  }
 
   //
   // Listeners
@@ -163,21 +163,21 @@ class BookDetailsConnector extends Component {
       bookIds: [this.props.id],
       monitored
     });
-  };
+  }
 
   onRefreshPress = () => {
     this.props.executeCommand({
       name: commandNames.REFRESH_BOOK,
       bookId: this.props.id
     });
-  };
+  }
 
   onSearchPress = () => {
     this.props.executeCommand({
       name: commandNames.BOOK_SEARCH,
       bookIds: [this.props.id]
     });
-  };
+  }
 
   //
   // Render

frontend/src/Book/Details/BookDetailsHeader.css

@@ -16,7 +16,7 @@
   position: absolute;
   width: 100%;
   height: 100%;
-  background: var(--black);
+  background: $black;
   opacity: 0.7;
 }
 
@@ -25,7 +25,7 @@
   padding: 30px;
   width: 100%;
   height: 100%;
-  color: var(--white);
+  color: $white;
 }
 
 .cover {
@@ -69,7 +69,7 @@
   width: 40px;
 
   &:hover {
-    color: var(--iconButtonHoverLightColor);
+    color: $iconButtonHoverLightColor;
   }
 }
 

frontend/src/Book/Details/BookDetailsHeader.js

@@ -48,11 +48,11 @@ class BookDetailsHeader extends Component {
 
   onOverviewMeasure = ({ height }) => {
     this.setState({ overviewHeight: height });
-  };
+  }
 
   onTitleMeasure = ({ width }) => {
     this.setState({ titleWidth: width });
-  };
+  }
 
   //
   // Render

frontend/src/Book/Details/BookDetailsHeaderConnector.js

@@ -48,7 +48,7 @@ class BookDetailsHeaderConnector extends Component {
       bookIds: [this.props.bookId],
       monitored
     });
-  };
+  }
 
   //
   // Render

frontend/src/Book/Details/BookDetailsPageConnector.js

@@ -64,7 +64,7 @@ class BookDetailsPageConnector extends Component {
 
   populate = () => {
     this.setState({ hasMounted: true });
-  };
+  }
 
   //
   // Render

frontend/src/Book/Edit/EditBookModalConnector.js

@@ -16,7 +16,7 @@ class EditBookModalConnector extends Component {
   onModalClose = () => {
     this.props.clearPendingChanges({ section: 'books' });
     this.props.onModalClose();
-  };
+  }
 
   //
   // Render

frontend/src/Book/Edit/EditBookModalContent.js

@@ -27,7 +27,7 @@ class EditBookModalContent extends Component {
 
     onSavePress(false);
 
-  };
+  }
 
   //
   // Render

frontend/src/Book/Edit/EditBookModalContentConnector.js

@@ -76,7 +76,7 @@ class EditBookModalContentConnector extends Component {
 
   onInputChange = ({ name, value }) => {
     this.props.dispatchSetBookValue({ name, value });
-  };
+  }
 
   onSavePress = () => {
     this.props.dispatchSaveBook({
@@ -85,7 +85,7 @@ class EditBookModalContentConnector extends Component {
     this.props.dispatchSaveEditions({
       id: this.props.bookId
     });
-  };
+  }
 
   //
   // Render

frontend/src/Book/Editor/BookEditorFooter.js

@@ -62,15 +62,15 @@ class BookEditorFooter extends Component {
       default:
         this.props.onSaveSelected({ [name]: value });
     }
-  };
+  }
 
   onDeleteSelectedPress = () => {
     this.setState({ isDeleteBookModalOpen: true });
-  };
+  }
 
   onDeleteBookModalClose = () => {
     this.setState({ isDeleteBookModalOpen: false });
-  };
+  }
 
   //
   // Render

frontend/src/Book/Editor/Delete/DeleteBookModalContent.css

@@ -5,5 +5,5 @@
 
 .deleteFilesMessage {
   margin-top: 20px;
-  color: var(--dangerColor);
+  color: $dangerColor;
 }

frontend/src/Book/Editor/Delete/DeleteBookModalContent.js

@@ -31,11 +31,11 @@ class DeleteBookModalContent extends Component {
 
   onDeleteFilesChange = ({ value }) => {
     this.setState({ deleteFiles: value });
-  };
+  }
 
   onAddImportListExclusionChange = ({ value }) => {
     this.setState({ addImportListExclusion: value });
-  };
+  }
 
   onDeleteBookConfirmed = () => {
     const {
@@ -45,7 +45,7 @@ class DeleteBookModalContent extends Component {
 
     this.setState({ deleteFiles: false });
     this.props.onDeleteSelectedPress(deleteFiles, addImportListExclusion);
-  };
+  }
 
   //
   // Render

frontend/src/Book/Index/BookIndex.js

@@ -97,14 +97,14 @@ class BookIndex extends Component {
 
   setScrollerRef = (ref) => {
     this.setState({ scroller: ref });
-  };
+  }
 
   getSelectedIds = () => {
     if (this.state.allUnselected) {
       return [];
     }
     return getSelectedIds(this.state.selectedState);
-  };
+  }
 
   setSelectedState() {
     const {
@@ -191,19 +191,19 @@ class BookIndex extends Component {
 
   onPosterOptionsPress = () => {
     this.setState({ isPosterOptionsModalOpen: true });
-  };
+  }
 
   onPosterOptionsModalClose = () => {
     this.setState({ isPosterOptionsModalOpen: false });
-  };
+  }
 
   onOverviewOptionsPress = () => {
     this.setState({ isOverviewOptionsModalOpen: true });
-  };
+  }
 
   onOverviewOptionsModalClose = () => {
     this.setState({ isOverviewOptionsModalOpen: false });
-  };
+  }
 
   onEditorTogglePress = () => {
     if (this.state.isEditorActive) {
@@ -213,55 +213,55 @@ class BookIndex extends Component {
       newState.isEditorActive = true;
       this.setState(newState);
     }
-  };
+  }
 
   onJumpBarItemPress = (jumpToCharacter) => {
     this.setState({ jumpToCharacter });
-  };
+  }
 
   onSelectAllChange = ({ value }) => {
     this.setState(selectAll(this.state.selectedState, value));
-  };
+  }
 
   onSelectAllPress = () => {
     this.onSelectAllChange({ value: !this.state.allSelected });
-  };
+  }
 
   onSelectedChange = ({ id, value, shiftKey = false }) => {
     this.setState((state) => {
       return toggleSelected(state, this.props.items, id, value, shiftKey);
     });
-  };
+  }
 
   onSaveSelected = (changes) => {
     this.props.onSaveSelected({
       bookIds: this.getSelectedIds(),
       ...changes
     });
-  };
+  }
 
   onSearchPress = () => {
     this.setState({ isConfirmSearchModalOpen: true });
-  };
+  }
 
   onRefreshBookPress = () => {
     const selectedIds = this.getSelectedIds();
     const refreshIds = this.state.isEditorActive && selectedIds.length > 0 ? selectedIds : [];
 
     this.props.onRefreshBookPress(refreshIds);
-  };
+  }
 
   onSearchConfirmed = () => {
-    const selectedBookIds = this.getSelectedIds();
+    const selectedMovieIds = this.getSelectedIds();
-    const searchIds = this.state.isEditorActive && selectedBookIds.length > 0 ? selectedBookIds : this.props.items.map((m) => m.id);
+    const searchIds = this.state.isMovieEditorActive && selectedMovieIds.length > 0 ? selectedMovieIds : this.props.items.map((m) => m.id);
 
     this.props.onSearchPress(searchIds);
     this.setState({ isConfirmSearchModalOpen: false });
-  };
+  }
 
   onConfirmSearchModalClose = () => {
     this.setState({ isConfirmSearchModalOpen: false });
-  };
+  }
 
   //
   // Render

frontend/src/Book/Index/BookIndexConnector.js

@@ -94,15 +94,15 @@ class BookIndexConnector extends Component {
 
   onViewSelect = (view) => {
     this.props.dispatchSetBookView(view);
-  };
+  }
 
   onSaveSelected = (payload) => {
     this.props.dispatchSaveBookEditor(payload);
-  };
+  }
 
   onScroll = ({ scrollTop }) => {
     scrollPositions.bookIndex = scrollTop;
-  };
+  }
 
   //
   // Render

frontend/src/Book/Index/BookIndexFooter.css

@@ -21,32 +21,32 @@
 .continuing {
   composes: legendItemColor;
 
-  background-color: var(--primaryColor);
+  background-color: $primaryColor;
 }
 
 .ended {
   composes: legendItemColor;
 
-  background-color: var(--successColor);
+  background-color: $successColor;
 }
 
 .missingMonitored {
   composes: legendItemColor;
 
-  background-color: var(--dangerColor);
+  background-color: $dangerColor;
 
   &:global(.colorImpaired) {
-    background: repeating-linear-gradient(90deg, color(#f05050 shade(5%)), color(#f05050 shade(5%)) 5px, color(#f05050 shade(15%)) 5px, color(#f05050 shade(15%)) 10px);
+    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: var(--warningColor);
+  background-color: $warningColor;
 
   &:global(.colorImpaired) {
-    background: repeating-linear-gradient(45deg, #ffa500, #ffa500 5px, color(#ffa500 tint(15%)) 5px, color(#ffa500 tint(15%)) 10px);
+    background: repeating-linear-gradient(45deg, $warningColor, $warningColor 5px, color($warningColor tint(15%)) 5px, color($warningColor tint(15%)) 10px);
   }
 }