Fixed: Fix NullRef in Subtitle Service due to #4924

(cherry picked from commit 89ee7d4452ae3b476e24aede89b668a3df2344fc)

.editorconfig

@@ -42,6 +42,7 @@ csharp_style_var_elsewhere = true:suggestion
 
 # Stylecop Rules
 dotnet_diagnostic.SA0001.severity = none
+dotnet_diagnostic.SA1005.severity = none
 dotnet_diagnostic.SA1025.severity = none
 dotnet_diagnostic.SA1101.severity = none
 dotnet_diagnostic.SA1116.severity = none

.github/FUNDING.yml

@@ -1,6 +1,6 @@
 # These are supported funding model platforms
 
-github: radarr
+github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
 patreon: # Replace with a single Patreon username
 open_collective: radarr
 ko_fi: # Replace with a single Ko-fi username

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -5,9 +5,9 @@ body:
 - type: checkboxes
   attributes:
     label: Is there an existing issue for this?
-    description: Please search to see if an open or closed issue already exists for the bug you encountered. If a bug exists and is closed note that it may only be fixed in an unstable branch. 
+    description: Please search to see if an issue already exists for the bug you encountered.
     options:
-    - label: I have searched the existing open and closed issues
+    - label: I have searched the existing issues
       required: true
 - type: textarea
   attributes:
@@ -42,14 +42,12 @@ body:
         - **Docker Install**: Yes
         - **Using Reverse Proxy**: No
         - **Browser**: Firefox 90 (If UI related)
-        - **Database**: Sqlite 3.36.0
     value: |
         - OS: 
-        - Radarr: 
-        - Docker Install: 
-        - Using Reverse Proxy: 
-        - Browser: 
-        - Database: 
+        - Radarr:
+        - Docker Install:
+        - Using Reverse Proxy:
+        - Browser:
     render: markdown
   validations:
     required: true

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -5,9 +5,9 @@ body:
 - type: checkboxes
   attributes:
     label: Is there an existing issue for this?
-    description: Please search to see if an open or closed issue already exists for the feature you are requesting. If a request exists and is closed note that it may only be fixed in an unstable branch.
+    description: Please search to see if an issue already exists for the feature you are requesting.
     options:
-    - label: I have searched the existing open and closed issues
+    - label: I have searched the existing issues
       required: true
 - type: textarea
   attributes:

.github/workflows/azuresync.yml

@@ -7,12 +7,8 @@ on:
 
 concurrency: azuresync-${{ github.event.issue.number }}
 
-permissions: {}
 jobs:
   alert:
-    permissions:
-      issues: write # to update issue body
-
     runs-on: ubuntu-latest
     steps:
       - uses: danhellem/github-actions-issue-to-work-item@master

.github/workflows/lock.yml

@@ -5,13 +5,8 @@ on:
   schedule:
     - cron: '0 0 * * *'
 
-permissions: {}
 jobs:
   lock:
-    permissions:
-      issues: write # to lock issues (dessant/lock-threads)
-      pull-requests: write # to lock PRs (dessant/lock-threads)
-
     runs-on: ubuntu-latest
     steps:
       - uses: dessant/lock-threads@v2

.github/workflows/support.yml

@@ -4,12 +4,8 @@ on:
   issues:
     types: [labeled, unlabeled, reopened]
 
-permissions: {}
 jobs:
   support:
-    permissions:
-      issues: write # to modify issues
-
     runs-on: ubuntu-latest
     steps:
       - uses: dessant/support-requests@v2

CODE_OF_CONDUCT.md

@@ -1,132 +0,0 @@
-# Contributor Covenant Code of Conduct
-
-## Our Pledge
-
-We as members, contributors, and leaders pledge to make participation in our
-community a harassment-free experience for everyone, regardless of age, body
-size, visible or invisible disability, ethnicity, sex characteristics, gender
-identity and expression, level of experience, education, socio-economic status,
-nationality, personal appearance, race, caste, color, religion, or sexual
-identity and orientation.
-
-We pledge to act and interact in ways that contribute to an open, welcoming,
-diverse, inclusive, and healthy community.
-
-## Our Standards
-
-Examples of behavior that contributes to a positive environment for our
-community include:
-
-* Demonstrating empathy and kindness toward other people
-* Being respectful of differing opinions, viewpoints, and experiences
-* Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes,
-  and learning from the experience
-* Focusing on what is best not just for us as individuals, but for the overall
-  community
-
-Examples of unacceptable behavior include:
-
-* The use of sexualized language or imagery, and sexual attention or advances of
-  any kind
-* Trolling, insulting or derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or email address,
-  without their explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
-  professional setting
-
-## Enforcement Responsibilities
-
-Community leaders are responsible for clarifying and enforcing our standards of
-acceptable behavior and will take appropriate and fair corrective action in
-response to any behavior that they deem inappropriate, threatening, offensive,
-or harmful.
-
-Community leaders have the right and responsibility to remove, edit, or reject
-comments, commits, code, wiki edits, issues, and other contributions that are
-not aligned to this Code of Conduct, and will communicate reasons for moderation
-decisions when appropriate.
-
-## Scope
-
-This Code of Conduct applies within all community spaces, and also applies when
-an individual is officially representing the community in public spaces.
-Examples of representing our community include using an official e-mail address,
-posting via an official social media account, or acting as an appointed
-representative at an online or offline event.
-
-## Enforcement
-
-Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported to the community leaders responsible for enforcement at
-<development@radarr.video>.
-All complaints will be reviewed and investigated promptly and fairly.
-
-All community leaders are obligated to respect the privacy and security of the
-reporter of any incident.
-
-## Enforcement Guidelines
-
-Community leaders will follow these Community Impact Guidelines in determining
-the consequences for any action they deem in violation of this Code of Conduct:
-
-### 1. Correction
-
-**Community Impact**: Use of inappropriate language or other behavior deemed
-unprofessional or unwelcome in the community.
-
-**Consequence**: A private, written warning from community leaders, providing
-clarity around the nature of the violation and an explanation of why the
-behavior was inappropriate. A public apology may be requested.
-
-### 2. Warning
-
-**Community Impact**: A violation through a single incident or series of
-actions.
-
-**Consequence**: A warning with consequences for continued behavior. No
-interaction with the people involved, including unsolicited interaction with
-those enforcing the Code of Conduct, for a specified period of time. This
-includes avoiding interactions in community spaces as well as external channels
-like social media. Violating these terms may lead to a temporary or permanent
-ban.
-
-### 3. Temporary Ban
-
-**Community Impact**: A serious violation of community standards, including
-sustained inappropriate behavior.
-
-**Consequence**: A temporary ban from any sort of interaction or public
-communication with the community for a specified period of time. No public or
-private interaction with the people involved, including unsolicited interaction
-with those enforcing the Code of Conduct, is allowed during this period.
-Violating these terms may lead to a permanent ban.
-
-### 4. Permanent Ban
-
-**Community Impact**: Demonstrating a pattern of violation of community
-standards, including sustained inappropriate behavior, harassment of an
-individual, or aggression toward or disparagement of classes of individuals.
-
-**Consequence**: A permanent ban from any sort of public interaction within the
-community.
-
-## Attribution
-
-This Code of Conduct is adapted from the [Contributor Covenant][homepage],
-version 2.1, available at
-[https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1].
-
-Community Impact Guidelines were inspired by
-[Mozilla's code of conduct enforcement ladder][Mozilla CoC].
-
-For answers to common questions about this code of conduct, see the FAQ at
-[https://www.contributor-covenant.org/faq][FAQ]. Translations are available at
-[https://www.contributor-covenant.org/translations][translations].
-
-[homepage]: https://www.contributor-covenant.org
-[v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html
-[Mozilla CoC]: https://github.com/mozilla/diversity
-[FAQ]: https://www.contributor-covenant.org/faq
-[translations]: https://www.contributor-covenant.org/translations

SECURITY.md

@@ -1,8 +0,0 @@
-# Security Policy
-
-## Reporting a Vulnerability
-
-Please report (suspected) security vulnerabilities on Discord (preferred) to
-any of the Servarr Dev role holders (red names) or via email: development@servarr.com. You will receive a response from
-us within 72 hours. If the issue is confirmed, we will release a patch as soon
-as possible depending on complexity/severity.

azure-pipelines.yml

@@ -9,7 +9,7 @@ variables:
   testsFolder: './_tests'
   yarnCacheFolder: $(Pipeline.Workspace)/.yarn
   nugetCacheFolder: $(Pipeline.Workspace)/.nuget/packages
-  majorVersion: '4.3.1'
+  majorVersion: '4.2.2'
   minorVersion: $[counter('minorVersion', 2000)]
   radarrVersion: '$(majorVersion).$(minorVersion)'
   buildName: '$(Build.SourceBranchName).$(radarrVersion)'
@@ -761,7 +761,7 @@ stages:
         inputs:
           buildType: 'current'
           artifactName: Packages
-          itemPattern: '**/$(pattern)'
+          itemPattern: '/$(pattern)'
           targetPath: $(Build.ArtifactStagingDirectory)
       - bash: |
           mkdir -p ${BUILD_ARTIFACTSTAGINGDIRECTORY}/bin
@@ -1143,5 +1143,4 @@ stages:
             SYSTEM_ACCESSTOKEN: $(System.AccessToken)
             DISCORDCHANNELID: $(discordChannelId)
             DISCORDWEBHOOKKEY: $(discordWebhookKey)
-            DISCORDTHREADID: $(discordThreadId)
 

frontend/.eslintrc.js

@@ -39,7 +39,6 @@ module.exports = {
   plugins: [
     'filenames',
     'react',
-    'react-hooks',
     'simple-import-sort',
     'import'
   ],
@@ -309,9 +308,7 @@ module.exports = {
     'react/react-in-jsx-scope': 2,
     'react/self-closing-comp': 2,
     'react/sort-comp': 2,
-    'react/jsx-wrap-multilines': 2,
-    'react-hooks/rules-of-hooks': 'error',
-    'react-hooks/exhaustive-deps': 'error'
+    'react/jsx-wrap-multilines': 2
   },
   overrides: [
     {

frontend/build/webpack.config.js

@@ -223,6 +223,7 @@ module.exports = (env) => {
             {
               loader: 'url-loader',
               options: {
+                limit: 24096,
                 mimetype: 'application/font-woff',
                 emitFile: false,
                 name: 'Content/Fonts/[name].[ext]'
@@ -232,11 +233,12 @@ module.exports = (env) => {
         },
 
         {
-          test: /\.(ttf|eot|eot?#iefix|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+          test: /\.(ttf|eot|eot?#iefix|gif|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
           use: [
             {
               loader: 'file-loader',
               options: {
+                limit: 24096,
                 emitFile: false,
                 name: 'Content/Fonts/[name].[ext]'
               }

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',
@@ -28,4 +29,4 @@ module.exports = {
     'postcss-color-function',
     'postcss-nested'
   ]
-};
+};

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

@@ -9,7 +9,6 @@ import MovieFormats from 'Movie/MovieFormats';
 import MovieLanguage from 'Movie/MovieLanguage';
 import MovieQuality from 'Movie/MovieQuality';
 import MovieTitleLink from 'Movie/MovieTitleLink';
-import formatCustomFormatScore from 'Utilities/Number/formatCustomFormatScore';
 import HistoryDetailsModal from './Details/HistoryDetailsModal';
 import HistoryEventTypeCell from './HistoryEventTypeCell';
 import styles from './HistoryRow.css';
@@ -169,17 +168,6 @@ class HistoryRow extends Component {
               );
             }
 
-            if (name === 'customFormatScore') {
-              return (
-                <TableRowCell
-                  key={name}
-                  className={styles.customFormatScore}
-                >
-                  {formatCustomFormatScore(data.customFormatScore)}
-                </TableRowCell>
-              );
-            }
-
             if (name === 'releaseGroup') {
               return (
                 <TableRowCell

frontend/src/Activity/Queue/ProtocolLabel.css

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

frontend/src/AddMovie/AddNewMovie/AddNewMovie.css

@@ -6,12 +6,12 @@
 .searchIconContainer {
   width: 58px;
   height: 46px;
-  border: 1px solid var(--inputBorderColor);
+  border: 1px solid $inputBorderColor;
   border-right: none;
   border-radius: 4px;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
-  background-color: var(--searchIconContainerBackgroundColor);
+  background-color: #edf1f2;
   text-align: center;
   line-height: 46px;
 }
@@ -25,7 +25,7 @@
 }
 
 .clearLookupButton {
-  border: 1px solid var(--inputBorderColor);
+  border: 1px solid $inputBorderColor;
   border-left: none;
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;

frontend/src/AddMovie/AddNewMovie/AddNewMovieModalContent.css

@@ -4,7 +4,7 @@
 
 .year {
   margin-left: 5px;
-  color: var(--disabledColor);
+  color: $disabledColor;
 }
 
 .poster {

frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.css

@@ -9,15 +9,13 @@
 .underlay {
   @add-mixin cover;
 
-  background-color: var(--addMovieBackgroundColor);
+  background-color: $white;
   transition: background 500ms;
 
   &:hover {
-    background-color: var(--pageBackground);
-    box-shadow: 0 0 12px var(--black);
+    background-color: #eaf2ff;
     color: inherit;
     text-decoration: none;
-    transition: all 200ms ease-in;
   }
 }
 
@@ -33,7 +31,7 @@
   display: block;
   margin-right: 20px;
   height: 250px;
-  background-color: var(--defaultColor);
+  background-color: $defaultColor;
 }
 
 .content {
@@ -58,7 +56,7 @@
 
 .year {
   margin-left: 10px;
-  color: var(--disabledColor);
+  color: $disabledColor;
 }
 
 .icons {
@@ -77,7 +75,7 @@
 
 .exclusionIcon {
   margin-left: 10px;
-  color: var(--dangerColor);
+  color: $dangerColor;
   pointer-events: all;
 }
 

frontend/src/AddMovie/ImportMovie/Import/SelectMovie/ImportMovieSearchResult.css

@@ -4,7 +4,7 @@
   width: 100%;
 
   &:hover {
-    background-color: var(--menuItemHoverBackgroundColor);
+    background-color: $menuItemHoverBackgroundColor;
   }
 }
 
@@ -17,7 +17,7 @@
   composes: link from '~Components/Link/Link.css';
 
   margin-left: auto;
-  color: var(--textColor);
+  color: $textColor;
 }
 
 .tmdbLinkIcon {

frontend/src/AddMovie/ImportMovie/Import/SelectMovie/ImportMovieSelectMovie.css

@@ -7,10 +7,10 @@
   padding: 6px 16px;
   width: 100%;
   height: 35px;
-  border: 1px solid var(--inputBorderColor);
+  border: 1px solid $inputBorderColor;
   border-radius: 4px;
-  background-color: var(--inputBackgroundColor);
-  box-shadow: inset 0 1px 1px var(--inputBoxShadowColor);
+  background-color: $white;
+  box-shadow: inset 0 1px 1px $inputBoxShadowColor;
 }
 
 .loading {
@@ -38,9 +38,9 @@
 
 .content {
   padding: 4px;
-  border: 1px solid var(--inputBorderColor);
+  border: 1px solid $inputBorderColor;
   border-radius: 4px;
-  background-color: var(--inputBackgroundColor);
+  background-color: $white;
 }
 
 .searchContainer {
@@ -49,12 +49,12 @@
 
 .searchIconContainer {
   width: 58px;
-  border: 1px solid var(--inputBorderColor);
+  border: 1px solid $inputBorderColor;
   border-right: none;
   border-radius: 4px;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
-  background-color: var(--searchIconContainerBackgroundColor);
+  background-color: #edf1f2;
   text-align: center;
   line-height: 33px;
 }

frontend/src/AddMovie/ImportMovie/Import/SelectMovie/ImportMovieTitle.css

@@ -9,7 +9,7 @@
 
 .year {
   margin-left: 5px;
-  color: var(--disabledColor);
+  color: $disabledColor;
 }
 
 .existing {

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.Radarr.instanceName}>
       <Provider store={store}>
         <ConnectedRouter history={history}>
-          <ApplyTheme>
-            <PageConnector>
-              <AppRoutes app={App} />
-            </PageConnector>
-          </ApplyTheme>
+          <PageConnector>
+            <AppRoutes app={App} />
+          </PageConnector>
         </ConnectedRouter>
       </Provider>
     </DocumentTitle>

frontend/src/App/AppRoutes.js

@@ -22,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';
@@ -143,7 +143,7 @@ function AppRoutes(props) {
 
       <Route
         path="/settings/quality"
-        component={QualityConnector}
+        component={Quality}
       />
 
       <Route

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.Radarr.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/Calendar/Agenda/AgendaEvent.css

@@ -2,11 +2,11 @@
   display: flex;
   overflow-x: hidden;
   padding: 5px;
-  border-bottom: 1px solid var(--borderColor);
+  border-bottom: 1px solid $borderColor;
   font-size: $defaultFontSize;
 
   &:hover {
-    background-color: var(--tableRowHoverBackgroundColor);
+    background-color: $tableRowHoverBackgroundColor;
   }
 }
 

frontend/src/Calendar/Day/CalendarDay.css

@@ -2,8 +2,8 @@
   flex: 1 0 14.28%;
   overflow: hidden;
   min-height: 70px;
-  border-bottom: 1px solid var(--calendarBorderColor);
-  border-left: 1px solid var(--calendarBorderColor);
+  border-bottom: 1px solid $calendarBorderColor;
+  border-left: 1px solid $calendarBorderColor;
 }
 
 .isSingleDay {
@@ -12,14 +12,14 @@
 
 .dayOfMonth {
   padding-right: 5px;
-  border-bottom: 1px solid var(--calendarBorderColor);
+  border-bottom: 1px solid $calendarBorderColor;
   text-align: right;
 }
 
 .isToday {
-  background-color: var(--calendarTodayBackgroundColor);
+  background-color: $calendarTodayBackgroundColor;
 }
 
 .isDifferentMonth {
-  color: var(--disabledColor);
+  color: $disabledColor;
 }

frontend/src/Calendar/Day/CalendarDays.css

@@ -1,6 +1,6 @@
 .days {
   display: flex;
-  border-right: 1px solid var(--calendarBorderColor);
+  border-right: 1px solid $calendarBorderColor;
 }
 
 .day,

frontend/src/Calendar/Day/DayOfWeek.css

@@ -1,6 +1,6 @@
 .dayOfWeek {
   flex: 1 0 14.28%;
-  background-color: var(--calendarBackgroudColor);
+  background-color: #e4eaec;
   text-align: center;
 }
 
@@ -9,5 +9,5 @@
 }
 
 .isToday {
-  background-color: var(--calendarTodayBackgroundColor);
+  background-color: $calendarTodayBackgroundColor;
 }

frontend/src/Calendar/Events/CalendarEvent.css

@@ -2,8 +2,8 @@
   overflow-x: hidden;
   margin: 4px 2px;
   padding: 5px;
-  border-bottom: 1px solid var(--calendarBorderColor);
-  border-left: 4px solid var(--calendarBorderColor);
+  border-bottom: 1px solid $borderColor;
+  border-left: 4px solid $borderColor;
   font-size: 12px;
 
   &:global(.colorImpaired) {
@@ -15,10 +15,10 @@
   composes: link from '~Components/Link/Link.css';
 
   display: block;
-  color: var(--defaultColor);
+  color: $defaultColor;
 
   &:hover {
-    color: var(--defaultColor);
+    color: $defaultColor;
     text-decoration: none;
   }
 }
@@ -29,7 +29,7 @@
 }
 
 .movieInfo {
-  color: var(--calendarTextDim);
+  color: $calendarTextDim;
 }
 
 .movieTitle,
@@ -40,7 +40,7 @@
 }
 
 .movieTitle {
-  color: var(--calendarTextDimAlternate);
+  color: #3a3f51;
   font-size: $defaultFontSize;
 }
 
@@ -53,37 +53,37 @@
  */
 
 .downloaded {
-  border-left-color: var(--successColor) !important;
+  border-left-color: $successColor !important;
 
   &:global(.colorImpaired) {
-    border-left-color: color(var(--successColor), saturation(+15%)) !important;
+    border-left-color: color($successColor, saturation(+15%)) !important;
   }
 }
 
 .queue {
-  border-left-color: var(--purple) !important;
+  border-left-color: $purple !important;
 }
 
 .unmonitored {
-  border-left-color: var(--gray) !important;
+  border-left-color: $gray !important;
 }
 
 .missingUnmonitored {
-  border-left-color: var(--warningColor) !important;
+  border-left-color: $warningColor !important;
 
   &:global(.colorImpaired) {
-    background: repeating-linear-gradient(45deg, var(--colorImpairedGradientDark), var(--colorImpairedGradientDark) 5px, var(--colorImpairedGradient) 5px, var(--colorImpairedGradient) 10px);
+    background: repeating-linear-gradient(45deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
   }
 }
 
 .missingMonitored {
-  border-left-color: var(--dangerColor) !important;
+  border-left-color: $dangerColor !important;
 
   &:global(.colorImpaired) {
-    background: repeating-linear-gradient(90deg, var(--colorImpairedGradientDark), var(--colorImpairedGradientDark) 5px, var(--colorImpairedGradient) 5px, var(--colorImpairedGradient) 10px);
+    background: repeating-linear-gradient(90deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
   }
 }
 
 .continuing {
-  border-left-color: var(--primaryColor) !important;
+  border-left-color: $primaryColor !important;
 }

frontend/src/Calendar/Events/CalendarEventQueueDetails.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import QueueDetails from 'Activity/Queue/QueueDetails';
 import CircularProgressBar from 'Components/CircularProgressBar';
+import colors from 'Styles/Variables/colors';
 import translate from 'Utilities/String/translate';
 
 function CalendarEventQueueDetails(props) {
@@ -34,7 +35,7 @@ function CalendarEventQueueDetails(props) {
             progress={progress}
             size={20}
             strokeWidth={2}
-            strokeColor={'#7a43b6'}
+            strokeColor={colors.purple}
           />
         </div>
       }

frontend/src/Calendar/Legend/LegendItem.css

@@ -20,53 +20,53 @@
 .queue {
   composes: legendItemColor;
 
-  background-color: var(--queueColor);
+  background-color: $queueColor;
 }
 
 .continuing {
   composes: legendItemColor;
 
-  background-color: var(--primaryColor);
+  background-color: $primaryColor;
 }
 
 .availNotMonitored {
   composes: legendItemColor;
 
-  background-color: var(--darkGray);
+  background-color: $darkGray;
 }
 
 .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(var(--dangerColor) shade(5%)), color(var(--dangerColor) shade(5%)) 5px, color(var(--dangerColor) shade(15%)) 5px, color(var(--dangerColor) 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, var(--warningColor), var(--warningColor) 5px, color(var(--warningColor) tint(15%)) 5px, color(var(--warningColor) tint(15%)) 10px);
+    background: repeating-linear-gradient(45deg, $warningColor, $warningColor 5px, color($warningColor tint(15%)) 5px, color($warningColor tint(15%)) 10px);
   }
 }
 
 .missingMonitoredColorImpaired {
-  background: repeating-linear-gradient(90deg, var(--colorImpairedGradientDark), var(--colorImpairedGradientDark) 5px, var(--colorImpairedGradient) 5px, var(--colorImpairedGradient) 10px);
+  background: repeating-linear-gradient(90deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
 }
 
 .missingUnmonitoredColorImpaired {
-  background: repeating-linear-gradient(45deg, var(--colorImpairedGradientDark), var(--colorImpairedGradientDark) 5px, var(--colorImpairedGradient) 5px, var(--colorImpairedGradient) 10px);
+  background: repeating-linear-gradient(45deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
 }
 
 .legendItemText {

frontend/src/Collection/AddNewCollectionMovieModalContent.css

@@ -4,7 +4,7 @@
 
 .year {
   margin-left: 5px;
-  color: var(--disabledColor);
+  color: $disabledColor;
 }
 
 .poster {

frontend/src/Collection/Edit/EditCollectionModalContent.js

@@ -115,7 +115,7 @@ class EditCollectionModalContent extends Component {
                 </FormGroup>
 
                 <FormGroup>
-                  <FormLabel>{translate('RootFolder')}</FormLabel>
+                  <FormLabel>{translate('Folder')}</FormLabel>
 
                   <FormInputGroup
                     type={inputTypes.ROOT_FOLDER_SELECT}

frontend/src/Collection/Overview/CollectionMovie.css

@@ -6,7 +6,7 @@ $hoverScale: 1.05;
 
   &:hover {
     z-index: 2;
-    box-shadow: 0 0 10px var(--black);
+    box-shadow: 0 0 10px $black;
     transition: all 200ms ease-in;
 
     .poster {
@@ -28,7 +28,7 @@ $hoverScale: 1.05;
 .poster {
   position: relative;
   display: block;
-  background-color: var(--defaultColor);
+  background-color: $defaultColor;
 }
 
 .overlay {
@@ -44,7 +44,7 @@ $hoverScale: 1.05;
 
 .overlayTitle {
   padding: 5px;
-  color: var(--offWhite);
+  color: $offWhite;
   text-align: left;
   font-weight: bold;
   font-size: 15px;
@@ -67,7 +67,7 @@ $hoverScale: 1.05;
   z-index: 3;
   border-radius: 4px;
   background-color: #707070;
-  color: var(--white);
+  color: $white;
   font-size: $smallFontSize;
   opacity: 0;
   transition: opacity 0;
@@ -77,7 +77,7 @@ $hoverScale: 1.05;
   composes: button from '~Components/Link/IconButton.css';
 
   &:hover {
-    color: var(--radarrYellow);
+    color: $radarrYellow;
   }
 }
 
@@ -102,16 +102,16 @@ $hoverScale: 1.05;
 
   position: relative;
   display: block;
-  background-color: var(--defaultColor);
+  background-color: $defaultColor;
 }
 
 .monitorToggleButton {
   composes: toggleButton from '~Components/MonitorToggleButton.css';
 
   width: 25px;
-  color: var(--white);
+  color: $white;
 
   &:hover {
-    color: var(--iconButtonHoverLightColor);
+    color: $iconButtonHoverLightColor;
   }
 }

frontend/src/Collection/Overview/CollectionMovieLabel.css

@@ -3,7 +3,7 @@
   align-items: stretch;
   overflow: hidden;
   margin: 2px 4px;
-  border: 1px solid var(--borderColor);
+  border: 1px solid $borderColor;
   border-radius: 4px;
   background-color: #eee;
   cursor: default;
@@ -17,34 +17,34 @@
   padding: 0 4px;
   border-left: 4px;
   border-left-style: solid;
-  background-color: var(--white);
-  color: var(--defaultColor);
+  background-color: $white;
+  color: $defaultColor;
 }
 
 .primary {
-  border-color: var(--primaryColor);
+  border-color: $primaryColor;
 }
 
 .danger {
-  border-color: var(--dangerColor);
+  border-color: $dangerColor;
 }
 
 .success {
-  border-color: var(--successColor);
+  border-color: $successColor;
 }
 
 .purple {
-  border-color: var(--purple);
+  border-color: $purple;
 }
 
 .warning {
-  border-color: var(--warningColor);
+  border-color: $warningColor;
 }
 
 .info {
-  border-color: var(--infoColor);
+  border-color: $infoColor;
 }
 
 .queue {
-  border-color: var(--queueColor);
+  border-color: $queueColor;
 }

frontend/src/Collection/Overview/CollectionOverview.css

@@ -104,7 +104,7 @@ $hoverScale: 1.05;
   width: 25px;
 
   &:hover {
-    color: var(--iconButtonHoverLightColor);
+    color: $iconButtonHoverLightColor;
   }
 }
 
@@ -131,7 +131,7 @@ $hoverScale: 1.05;
     width: 20px;
 
     &:hover {
-      color: var(--iconButtonHoverLightColor);
+      color: $iconButtonHoverLightColor;
     }
   }
 }

frontend/src/Collection/Overview/CollectionOverview.js

@@ -1,8 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Slider from 'react-slick';
 import TextTruncate from 'react-text-truncate';
-import { Navigation } from 'swiper';
-import { Swiper, SwiperSlide } from 'swiper/react';
 import EditCollectionModalConnector from 'Collection/Edit/EditCollectionModalConnector';
 import CheckInput from 'Components/Form/CheckInput';
 import Icon from 'Components/Icon';
@@ -18,9 +17,8 @@ import CollectionMovieConnector from './CollectionMovieConnector';
 import CollectionMovieLabelConnector from './CollectionMovieLabelConnector';
 import styles from './CollectionOverview.css';
 
-// Import Swiper styles
-import 'swiper/css';
-import 'swiper/css/navigation';
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
 
 const columnPadding = parseInt(dimensions.movieIndexColumnPadding);
 const columnPaddingSmallScreen = parseInt(dimensions.movieIndexColumnPaddingSmallScreen);
@@ -54,12 +52,8 @@ class CollectionOverview extends Component {
   //
   // Control
 
-  setSliderPrevRef = (ref) => {
-    this._swiperPrevRef = ref;
-  };
-
-  setSliderNextRef = (ref) => {
-    this._swiperNextRef = ref;
+  setSliderRef = (ref) => {
+    this.setState({ slider: ref });
   };
 
   //
@@ -126,6 +120,15 @@ class CollectionOverview extends Component {
     const contentHeight = getContentHeight(rowHeight, isSmallScreen);
     const overviewHeight = contentHeight - titleRowHeight - posterHeight;
 
+    const sliderSettings = {
+      arrows: false,
+      dots: false,
+      infinite: false,
+      slidesToShow: 1,
+      slidesToScroll: 1,
+      variableWidth: true
+    };
+
     return (
       <div className={styles.container}>
         <div className={styles.content}>
@@ -163,21 +166,19 @@ class CollectionOverview extends Component {
               {
                 showPosters &&
                   <div className={styles.navigationButtons}>
-                    <span ref={this.setSliderPrevRef}>
-                      <IconButton
-                        name={icons.ARROW_LEFT}
-                        title={translate('ScrollMovies')}
-                        size={20}
-                      />
-                    </span>
+                    <IconButton
+                      name={icons.ARROW_LEFT}
+                      title={translate('ScrollMovies')}
+                      onPress={this.state.slider?.slickPrev}
+                      size={20}
+                    />
 
-                    <span ref={this.setSliderNextRef}>
-                      <IconButton
-                        name={icons.ARROW_RIGHT}
-                        title={translate('ScrollMovies')}
-                        size={20}
-                      />
-                    </span>
+                    <IconButton
+                      name={icons.ARROW_RIGHT}
+                      title={translate('ScrollMovies')}
+                      onPress={this.state.slider?.slickNext}
+                      size={20}
+                    />
                   </div>
               }
 
@@ -269,23 +270,9 @@ class CollectionOverview extends Component {
             {
               showPosters ?
                 <div className={styles.sliderContainer}>
-                  <Swiper
-                    slidesPerView='auto'
-                    spaceBetween={10}
-                    slidesPerGroup={3}
-                    loop={false}
-                    loopFillGroupWithBlank={true}
-                    className="mySwiper"
-                    modules={[Navigation]}
-                    onInit={(swiper) => {
-                      swiper.params.navigation.prevEl = this._swiperPrevRef;
-                      swiper.params.navigation.nextEl = this._swiperNextRef;
-                      swiper.navigation.init();
-                      swiper.navigation.update();
-                    }}
-                  >
+                  <Slider ref={this.setSliderRef} {...sliderSettings}>
                     {movies.map((movie) => (
-                      <SwiperSlide key={movie.tmdbId} style={{ width: posterWidth }}>
+                      <div className={styles.movie} key={movie.tmdbId}>
                         <CollectionMovieConnector
                           key={movie.tmdbId}
                           posterWidth={posterWidth}
@@ -294,9 +281,9 @@ class CollectionOverview extends Component {
                           collectionId={id}
                           {...movie}
                         />
-                      </SwiperSlide>
+                      </div>
                     ))}
-                  </Swiper>
+                  </Slider>
                 </div> :
                 <div className={styles.labelsContainer}>
                   {movies.map((movie) => (

frontend/src/Collection/Overview/CollectionOverviews.css

@@ -5,7 +5,7 @@
 .container {
   &:hover {
     .content {
-      background-color: var(--tableRowHoverBackgroundColor);
+      background-color: $tableRowHoverBackgroundColor;
     }
   }
 }

frontend/src/Commands/commandNames.js

@@ -15,7 +15,6 @@ export const REFRESH_MOVIE = 'RefreshMovie';
 export const RENAME_FILES = 'RenameFiles';
 export const RENAME_MOVIE = 'RenameMovie';
 export const RESET_API_KEY = 'ResetApiKey';
-export const RESET_QUALITY_DEFINITIONS = 'ResetQualityDefinitions';
 export const RSS_SYNC = 'RssSync';
 export const MOVIE_SEARCH = 'MoviesSearch';
 export const IMPORT_LIST_SYNC = 'ImportListSync';

frontend/src/Components/Alert.css

@@ -7,25 +7,25 @@
 }
 
 .danger {
-  border-color: var(--alertDangerBorderColor);
-  background-color: var(--alertDangerBackgroundColor);
-  color: var(--alertDangerColor);
+  border-color: $alertDangerBorderColor;
+  background-color: $alertDangerBackgroundColor;
+  color: $alertDangerColor;
 }
 
 .info {
-  border-color: var(--alertInfoBorderColor);
-  background-color: var(--alertInfoBackgroundColor);
-  color: var(--alertInfoColor);
+  border-color: $alertInfoBorderColor;
+  background-color: $alertInfoBackgroundColor;
+  color: $alertInfoColor;
 }
 
 .success {
-  border-color: var(--alertSuccessBorderColor);
-  background-color: var(--alertSuccessBackgroundColor);
-  color: var(--alertSuccessColor);
+  border-color: $alertSuccessBorderColor;
+  background-color: $alertSuccessBackgroundColor;
+  color: $alertSuccessColor;
 }
 
 .warning {
-  border-color: var(--alertWarningBorderColor);
-  background-color: var(--alertWarningBackgroundColor);
-  color: var(--alertWarningColor);
+  border-color: $alertWarningBorderColor;
+  background-color: $alertWarningBackgroundColor;
+  color: $alertWarningColor;
 }

frontend/src/Components/Card.css

@@ -3,9 +3,9 @@
   margin: 10px;
   padding: 10px;
   border-radius: 3px;
-  background-color: var(--cardBackgroundColor);
-  box-shadow: 0 0 10px 1px var(--cardShadowColor);
-  color: var(--defaultColor);
+  background-color: $white;
+  box-shadow: 0 0 10px 1px $cardShadowColor;
+  color: $defaultColor;
 }
 
 .underlay {

frontend/src/Components/CircularProgressBar.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import colors from 'Styles/Variables/colors';
 import styles from './CircularProgressBar.css';
 
 class CircularProgressBar extends Component {
@@ -131,7 +132,7 @@ CircularProgressBar.defaultProps = {
   containerClassName: styles.circularProgressBarContainer,
   size: 60,
   strokeWidth: 5,
-  strokeColor: '#ffc230',
+  strokeColor: colors.radarrYellow,
   showProgressText: false
 };
 

frontend/src/Components/FieldSet.css

@@ -13,7 +13,7 @@
   width: 100%;
   border: 0;
   border-bottom: 1px solid #e5e5e5;
-  color: var(--textColor);
+  color: #3a3f51;
   font-size: 21px;
   line-height: inherit;
 

frontend/src/Components/FileBrowser/FileBrowserModalContent.css

@@ -13,7 +13,7 @@
 }
 
 .faqLink {
-  color: var(--alertWarningColor);
+  color: $alertWarningColor;
   font-weight: bold;
 }
 

frontend/src/Components/Filter/Builder/FilterBuilderRow.css

@@ -3,7 +3,7 @@
   margin-bottom: 5px;
 
   &:hover {
-    background-color: var(--tableRowHoverBackgroundColor);
+    background-color: $tableRowHoverBackgroundColor;
   }
 }
 

frontend/src/Components/Filter/Builder/FilterBuilderRowValueTag.css

@@ -17,5 +17,5 @@
 
 .or {
   margin: 0 3px;
-  color: var(--themeDarkColor);
+  color: $themeDarkColor;
 }

frontend/src/Components/Filter/CustomFilters/CustomFilter.css

@@ -4,7 +4,7 @@
   padding: 5px;
 
   &:hover {
-    background-color: var(--tableRowHoverBackgroundColor);
+    background-color: $tableRowHoverBackgroundColor;
   }
 }
 

frontend/src/Components/Form/AutoSuggestInput.css

@@ -27,10 +27,10 @@
     overflow-y: auto;
     max-height: 200px;
     width: 100%;
-    border: 1px solid var(--inputBorderColor);
+    border: 1px solid $inputBorderColor;
     border-radius: 4px;
-    background-color: var(--inputBackgroundColor);
-    box-shadow: inset 0 1px 1px var(--inputBoxShadowColor);
+    background-color: $white;
+    box-shadow: inset 0 1px 1px $inputBoxShadowColor;
   }
 }
 
@@ -46,5 +46,5 @@
 }
 
 .suggestionHighlighted {
-  background-color: var(--menuItemHoverBackgroundColor);
+  background-color: $menuItemHoverBackgroundColor;
 }

frontend/src/Components/Form/CheckInput.css

@@ -32,21 +32,21 @@
   height: 20px;
   border: 1px solid #ccc;
   border-radius: 2px;
-  background-color: var(--white);
-  color: var(--white);
+  background-color: $white;
+  color: $white;
   text-align: center;
   line-height: 20px;
 }
 
 .checkbox:focus + .input {
   outline: 0;
-  border-color: var(--inputFocusBorderColor);
-  box-shadow: inset 0 1px 1px var(--inputBoxShadowColor), 0 0 8px var(--inputFocusBoxShadowColor);
+  border-color: $inputFocusBorderColor;
+  box-shadow: inset 0 1px 1px $inputBoxShadowColor, 0 0 8px $inputFocusBoxShadowColor;
 }
 
 .dangerIsChecked {
-  border-color: var(--dangerColor);
-  background-color: var(--dangerColor);
+  border-color: $dangerColor;
+  background-color: $dangerColor;
 
   &.isDisabled {
     opacity: 0.7;
@@ -54,8 +54,8 @@
 }
 
 .primaryIsChecked {
-  border-color: var(--primaryColor);
-  background-color: var(--primaryColor);
+  border-color: $primaryColor;
+  background-color: $primaryColor;
 
   &.isDisabled {
     opacity: 0.7;
@@ -63,8 +63,8 @@
 }
 
 .successIsChecked {
-  border-color: var(--successColor);
-  background-color: var(--successColor);
+  border-color: $successColor;
+  background-color: $successColor;
 
   &.isDisabled {
     opacity: 0.7;
@@ -72,8 +72,8 @@
 }
 
 .warningIsChecked {
-  border-color: var(--warningColor);
-  background-color: var(--warningColor);
+  border-color: $warningColor;
+  background-color: $warningColor;
 
   &.isDisabled {
     opacity: 0.7;
@@ -82,15 +82,15 @@
 
 .isNotChecked {
   &.isDisabled {
-    border-color: var(--disabledCheckInputColor);
-    background-color: var(--disabledCheckInputColor);
+    border-color: $disabledCheckInputColor;
+    background-color: $disabledCheckInputColor;
     opacity: 0.7;
   }
 }
 
 .isIndeterminate {
-  border-color: var(--gray);
-  background-color: var(--gray);
+  border-color: $gray;
+  background-color: $gray;
 }
 
 .helpText {

frontend/src/Components/Form/EnhancedSelectInput.css

@@ -39,7 +39,7 @@
 .dropdownArrowContainerDisabled {
   composes: dropdownArrowContainer;
 
-  color: var(--disabledInputColor);
+  color: $disabledInputColor;
 }
 
 .optionsContainer {
@@ -50,9 +50,9 @@
 .options {
   composes: scroller from '~Components/Scroller/Scroller.css';
 
-  border: 1px solid var(--inputBorderColor);
+  border: 1px solid $inputBorderColor;
   border-radius: 4px;
-  background-color: var(--inputBackgroundColor);
+  background-color: $white;
 }
 
 .optionsModal {
@@ -76,9 +76,9 @@
 .optionsModalScroller {
   composes: scroller from '~Components/Scroller/Scroller.css';
 
-  border: 1px solid var(--inputBorderColor);
+  border: 1px solid $inputBorderColor;
   border-radius: 4px;
-  background-color: var(--inputBackgroundColor);
+  background-color: $white;
 }
 
 .loading {
@@ -90,7 +90,7 @@
   display: flex;
   justify-content: flex-end;
   height: 40px;
-  border-bottom: 1px solid var(--borderColor);
+  border-bottom: 1px solid $borderColor;
 }
 
 .mobileCloseButton {
@@ -100,6 +100,6 @@
   line-height: 40px;
 
   &:hover {
-    color: var(--modalCloseButtonHoverColor);
+    color: $modalCloseButtonHoverColor;
   }
 }

frontend/src/Components/Form/EnhancedSelectInputOption.css

@@ -7,7 +7,7 @@
   cursor: default;
 
   &:hover {
-    background-color: var(--inputHoverBackgroundColor);
+    background-color: #f8f8f8;
   }
 }
 
@@ -24,17 +24,17 @@
 }
 
 .isSelected {
-  background-color: var(--inputSelectedBackgroundColor);
+  background-color: #e2e2e2;
 
   &:hover {
-    background-color: var(--inputSelectedBackgroundColor);
+    background-color: #e2e2e2;
   }
 
   &.isMobile {
     background-color: inherit;
 
     .iconContainer {
-      color: var(--primaryColor);
+      color: $primaryColor;
     }
   }
 }
@@ -49,7 +49,7 @@
 
 .isMobile {
   height: 50px;
-  border-bottom: 1px solid var(--borderColor);
+  border-bottom: 1px solid $borderColor;
 
   &:last-child {
     border: none;

frontend/src/Components/Form/EnhancedSelectInputSelectedValue.css

@@ -3,5 +3,5 @@
 }
 
 .isDisabled {
-  color: var(--disabledInputColor);
+  color: $disabledInputColor;
 }

frontend/src/Components/Form/FormInputGroup.css

@@ -40,7 +40,7 @@
 }
 
 .pendingChangesIcon {
-  color: var(--warningColor);
+  color: $warningColor;
   font-size: 20px;
   line-height: 35px;
 }

frontend/src/Components/Form/FormInputHelpText.css

@@ -1,14 +1,14 @@
 .helpText {
   margin-top: 5px;
-  color: var(--helpTextColor);
+  color: $helpTextColor;
   line-height: 20px;
 }
 
 .isError {
-  color: var(--dangerColor);
+  color: $dangerColor;
 
   .link {
-    color: var(--dangerColor);
+    color: $dangerColor;
 
     &:hover {
       color: #e01313;
@@ -17,10 +17,10 @@
 }
 
 .isWarning {
-  color: var(--warningColor);
+  color: $warningColor;
 
   .link {
-    color: var(--warningColor);
+    color: $warningColor;
 
     &:hover {
       color: #e36c00;

frontend/src/Components/Form/FormLabel.css

@@ -7,11 +7,11 @@
 }
 
 .hasError {
-  color: var(--dangerColor);
+  color: $dangerColor;
 }
 
 .isAdvanced {
-  color: var(--advancedFormLabelColor);
+  color: $advancedFormLabelColor;
 }
 
 @media only screen and (max-width: $breakpointLarge) {

frontend/src/Components/Form/HintedSelectInputOption.css

@@ -18,11 +18,11 @@
   @add-mixin truncate;
 
   margin-left: 15px;
-  color: var(--darkGray);
+  color: $darkGray;
   font-size: $smallFontSize;
 }
 
 .divider {
   border: none;
-  border-bottom: 1px solid var(--lightGray);
+  border-bottom: 1px solid $lightGray;
 }

frontend/src/Components/Form/HintedSelectInputSelectedValue.css

@@ -18,7 +18,7 @@
 
   flex: 1 10 0;
   margin-left: 15px;
-  color: var(--gray);
+  color: $gray;
   text-align: right;
   font-size: $smallFontSize;
 }

frontend/src/Components/Form/Input.css

@@ -2,27 +2,26 @@
   padding: 6px 16px;
   width: 100%;
   height: 35px;
-  border: 1px solid var(--inputBorderColor);
+  border: 1px solid $inputBorderColor;
   border-radius: 4px;
-  background-color: var(--inputBackgroundColor);
-  box-shadow: inset 0 1px 1px var(--inputBoxShadowColor);
-  color: var(--textColor);
+  background-color: $white;
+  box-shadow: inset 0 1px 1px $inputBoxShadowColor;
 
   &:focus {
     outline: 0;
-    border-color: var(--inputFocusBorderColor);
-    box-shadow: inset 0 1px 1px var(--inputBoxShadowColor), 0 0 8px var(--inputFocusBoxShadowColor);
+    border-color: $inputFocusBorderColor;
+    box-shadow: inset 0 1px 1px $inputBoxShadowColor, 0 0 8px $inputFocusBoxShadowColor;
   }
 }
 
 .hasError {
-  border-color: var(--inputErrorBorderColor);
-  box-shadow: inset 0 1px 1px var(--inputBoxShadowColor), 0 0 8px var(--inputErrorBoxShadowColor);
+  border-color: $inputErrorBorderColor;
+  box-shadow: inset 0 1px 1px $inputBoxShadowColor, 0 0 8px $inputErrorBoxShadowColor;
 }
 
 .hasWarning {
-  border-color: var(--inputWarningBorderColor);
-  box-shadow: inset 0 1px 1px var(--inputBoxShadowColor), 0 0 8px var(--inputWarningBoxShadowColor);
+  border-color: $inputWarningBorderColor;
+  box-shadow: inset 0 1px 1px $inputBoxShadowColor, 0 0 8px $inputWarningBoxShadowColor;
 }
 
 .hasButton {

frontend/src/Components/Form/KeyValueListInput.css

@@ -7,8 +7,8 @@
 
   &.isFocused {
     outline: 0;
-    border-color: var(--inputFocusBorderColor);
-    box-shadow: inset 0 1px 1px var(--inputBoxShadowColor), 0 0 8px var(--inputFocusBoxShadowColor);
+    border-color: $inputFocusBorderColor;
+    box-shadow: inset 0 1px 1px $inputBoxShadowColor, 0 0 8px $inputFocusBoxShadowColor;
   }
 }
 

frontend/src/Components/Form/KeyValueListInputItem.css

@@ -1,7 +1,7 @@
 .itemContainer {
   display: flex;
   margin-bottom: 3px;
-  border-bottom: 1px solid var(--inputBorderColor);
+  border-bottom: 1px solid $inputBorderColor;
 
   &:last-child {
     margin-bottom: 0;

frontend/src/Components/Form/RootFolderSelectInputOption.css

@@ -21,17 +21,17 @@
 .movieFolder {
   @add-mixin truncate;
 
-  color: var(--disabledColor);
+  color: $disabledColor;
 }
 
 .freeSpace {
   margin-left: 15px;
-  color: var(--darkGray);
+  color: $darkGray;
   font-size: $smallFontSize;
 }
 
 .isMissing {
   margin-left: 15px;
-  color: var(--dangerColor);
+  color: $dangerColor;
   font-size: $smallFontSize;
 }

frontend/src/Components/Form/RootFolderSelectInputSelectedValue.css

@@ -20,13 +20,13 @@
 .movieFolder {
   @add-mixin truncate;
   flex: 0 1 auto;
-  color: var(--disabledColor);
+  color: $disabledColor;
 }
 
 .freeSpace {
   flex: 0 0 auto;
   margin-left: 15px;
-  color: var(--gray);
+  color: $gray;
   text-align: right;
   font-size: $smallFontSize;
 }

frontend/src/Components/Form/TagInput.css

@@ -7,8 +7,8 @@
 
   &.isFocused {
     outline: 0;
-    border-color: var(--inputFocusBorderColor);
-    box-shadow: inset 0 1px 1px var(--inputBoxShadowColor), 0 0 8px var(--inputFocusBoxShadowColor);
+    border-color: $inputFocusBorderColor;
+    box-shadow: inset 0 1px 1px $inputBoxShadowColor, 0 0 8px $inputFocusBoxShadowColor;
   }
 }
 
@@ -20,6 +20,4 @@
   width: 0%;
   height: 31px;
   border: none;
-  background-color: var(--inputBackground);
-  color: var(--textColor);
 }

frontend/src/Components/Form/TextInput.css

@@ -3,7 +3,7 @@
 }
 
 .readOnly {
-  background-color: var(--inputReadOnlyBackgroundColor);
+  background-color: #eee;
 }
 
 .hasError {

frontend/src/Components/Form/UMaskInput.css

@@ -49,5 +49,5 @@
 }
 
 .readOnly {
-  background-color: var(--inputReadOnlyBackgroundColor);
+  background-color: #eee;
 }

frontend/src/Components/Icon.css

@@ -1,5 +1,5 @@
 .danger {
-  color: var(--dangerColor);
+  color: $dangerColor;
 }
 
 .default {
@@ -7,25 +7,25 @@
 }
 
 .disabled {
-  color: var(--disabledColor);
+  color: $disabledColor;
 }
 
 .info {
-  color: var(--infoColor);
+  color: $infoColor;
 }
 
 .pink {
-  color: var(--pink);
+  color: $pink;
 }
 
 .success {
-  color: var(--successColor);
+  color: $successColor;
 }
 
 .warning {
-  color: var(--warningColor);
+  color: $warningColor;
 }
 
 .purple {
-  color: var(--purple);
+  color: $purple;
 }

frontend/src/Components/InfoLabel.css

@@ -1,7 +1,7 @@
 .label {
   display: inline-block;
   margin: 2px;
-  color: var(--white);
+  color: $white;
   /** text-align: center; **/
   white-space: nowrap;
   line-height: 1;
@@ -10,7 +10,7 @@
 
 .title {
   margin-bottom: 2px;
-  color: var(--helpTextColor);
+  color: $helpTextColor;
   font-size: 10px;
 }
 
@@ -36,5 +36,5 @@
 /** Outline **/
 
 .outline {
-  background-color: var(--white);
+  background-color: $white;
 }

frontend/src/Components/Label.css

@@ -3,7 +3,7 @@
   margin: 2px;
   border: 1px solid;
   border-radius: 2px;
-  color: var(--white);
+  color: $white;
   text-align: center;
   white-space: nowrap;
   line-height: 1;
@@ -13,95 +13,94 @@
 /** Kinds **/
 
 .danger {
-  border-color: var(--dangerColor);
-  background-color: var(--dangerColor);
+  border-color: $dangerColor;
+  background-color: $dangerColor;
 
   &.outline {
-    color: var(--dangerColor);
+    color: $dangerColor;
   }
 
   &:global(.colorImpaired) {
-    background: repeating-linear-gradient(90deg, color(var(--dangerColor) shade(5%)), color(var(--dangerColor) shade(5%)) 5px, color(var(--dangerColor) shade(15%)) 5px, color(var(--dangerColor) 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);
   }
 }
 
 .default {
-  border-color: var(--themeLightColor);
-  background-color: var(--themeLightColor);
+  border-color: $themeLightColor;
+  background-color: $themeLightColor;
 
   &.outline {
-    color: var(--themeLightColor);
+    color: $themeLightColor;
   }
 }
 
 .disabled {
-  border-color: var(--disabledColor);
-  background-color: var(--disabledColor);
+  border-color: $disabledColor;
+  background-color: $disabledColor;
 
   &.outline {
-    color: var(--offWhite);
+    color: $disabledColor;
   }
 }
 
 .info {
-  border-color: var(--infoColor);
-  background-color: var(--infoColor);
-  color: var(--infoTextColor);
+  border-color: $infoColor;
+  background-color: $infoColor;
 
   &.outline {
-    color: var(--infoColor);
+    color: $infoColor;
   }
 }
 
 .inverse {
-  border-color: var(--inverseLabelColor);
-  background-color: var(--inverseLabelColor);
-  color: var(--inverseLabelTextColor);
+  border-color: $lightGray;
+  background-color: $lightGray;
+  color: $defaultColor;
 
   &.outline {
-    background-color: var(--inverseLabelTextColor) !important;
-    color: var(--inverseLabelColor);
+    background-color: $defaultColor !important;
+    color: $lightGray;
   }
 }
 
 .primary {
-  border-color: var(--primaryColor);
-  background-color: var(--primaryColor);
+  border-color: $primaryColor;
+  background-color: $primaryColor;
 
   &.outline {
-    color: var(--primaryColor);
+    color: $primaryColor;
   }
 }
 
 .success {
-  border-color: var(--successColor);
-  background-color: var(--successColor);
+  border-color: $successColor;
+  background-color: $successColor;
   color: #eee;
 
   &.outline {
-    color: var(--successColor);
+    color: $successColor;
   }
 }
 
 .warning {
-  border-color: var(--warningColor);
-  background-color: var(--warningColor);
+  border-color: $warningColor;
+  background-color: $warningColor;
 
   &.outline {
-    color: var(--warningColor);
+    color: $warningColor;
   }
 
   &:global(.colorImpaired) {
-    background: repeating-linear-gradient(45deg, var(--warningColor), var(--warningColor) 5px, color(var(--warningColor) tint(15%)) 5px, color(var(--warningColor) tint(15%)) 10px);
+    background: repeating-linear-gradient(45deg, $warningColor, $warningColor 5px, color($warningColor tint(15%)) 5px, color($warningColor tint(15%)) 10px);
   }
 }
 
 .queue {
-  border-color: var(--queueColor);
-  background-color: var(--queueColor);
+  border-color: $queueColor;
+  background-color: $queueColor;
 
   &.outline {
-    color: var(--queueColor);
+    color: $queueColor;
   }
 }
 
@@ -126,5 +125,5 @@
 /** Outline **/
 
 .outline {
-  background-color: var(--disabledLabelColor);
+  background-color: $white;
 }

frontend/src/Components/Link/Button.css

@@ -19,62 +19,62 @@
 }
 
 .danger {
-  border-color: var(--dangerBorderColor);
-  background-color: var(--dangerBackgroundColor);
-  color: var(--white);
+  border-color: $dangerBorderColor;
+  background-color: $dangerBackgroundColor;
+  color: $white;
 
   &:hover {
-    border-color: var(--dangerHoverBorderColor);
-    background-color: var(--dangerHoverBackgroundColor);
-    color: var(--white);
+    border-color: $dangerHoverBorderColor;
+    background-color: $dangerHoverBackgroundColor;
+    color: $white;
   }
 }
 
 .default {
-  border-color: var(--defaultBorderColor);
-  background-color: var(--defaultBackgroundColor);
-  color: var(--defaultColor);
+  border-color: $defaultBorderColor;
+  background-color: $defaultBackgroundColor;
+  color: $defaultColor;
 
   &:hover {
-    border-color: var(--defaultHoverBorderColor);
-    background-color: var(--defaultHoverBackgroundColor);
-    color: var(--defaultColor);
+    border-color: $defaultHoverBorderColor;
+    background-color: $defaultHoverBackgroundColor;
+    color: $defaultColor;
   }
 }
 
 .primary {
-  border-color: var(--primaryBorderColor);
-  background-color: var(--primaryBackgroundColor);
-  color: var(--white);
+  border-color: $primaryBorderColor;
+  background-color: $primaryBackgroundColor;
+  color: $white;
 
   &:hover {
-    border-color: var(--primaryHoverBorderColor);
-    background-color: var(--primaryHoverBackgroundColor);
-    color: var(--white);
+    border-color: $primaryHoverBorderColor;
+    background-color: $primaryHoverBackgroundColor;
+    color: $white;
   }
 }
 
 .success {
-  border-color: var(--successBorderColor);
-  background-color: var(--successBackgroundColor);
-  color: var(--white);
+  border-color: $successBorderColor;
+  background-color: $successBackgroundColor;
+  color: $white;
 
   &:hover {
-    border-color: var(--successHoverBorderColor);
-    background-color: var(--successHoverBackgroundColor);
-    color: var(--white);
+    border-color: $successHoverBorderColor;
+    background-color: $successHoverBackgroundColor;
+    color: $white;
   }
 }
 
 .warning {
-  border-color: var(--warningBorderColor);
-  background-color: var(--warningBackgroundColor);
-  color: var(--white);
+  border-color: $warningBorderColor;
+  background-color: $warningBackgroundColor;
+  color: $white;
 
   &:hover {
-    border-color: var(--warningHoverBorderColor);
-    background-color: var(--warningHoverBackgroundColor);
-    color: var(--white);
+    border-color: $warningHoverBorderColor;
+    background-color: $warningHoverBackgroundColor;
+    color: $white;
   }
 }
 

frontend/src/Components/Link/IconButton.css

@@ -12,10 +12,10 @@
   &:hover {
     border: none;
     background-color: inherit;
-    color: var(--iconButtonHoverColor);
+    color: $iconButtonHoverColor;
   }
 
   &.isDisabled {
-    color: var(--iconButtonDisabledColor);
+    color: $iconButtonDisabledColor;
   }
 }

frontend/src/Components/Link/Link.css

@@ -15,10 +15,10 @@
 }
 
 .to {
-  color: var(--linkColor);
+  color: $linkColor;
 
   &:hover {
-    color: var(--linkHoverColor);
+    color: $linkHoverColor;
     text-decoration: underline;
   }
 }

frontend/src/Components/Loading/LoadingIndicator.css

@@ -26,7 +26,7 @@
 
 .ripple {
   position: absolute;
-  border: 2px solid var(--themeDarkColor);
+  border: 2px solid #3a3f51;
   border-radius: 100%;
   animation: rippleContainer 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
   animation-fill-mode: both;

frontend/src/Components/Menu/MenuButton.css

@@ -10,12 +10,12 @@
   }
 
   &:hover {
-    color: var(--toobarButtonHoverColor);
+    color: $toobarButtonHoverColor;
   }
 }
 
 .isDisabled {
-  color: var(--disabledColor);
+  color: $disabledColor;
 
   pointer-events: none;
 }

frontend/src/Components/Menu/MenuContent.css

@@ -2,7 +2,7 @@
   z-index: $popperZIndex;
   display: flex;
   flex-direction: column;
-  background-color: var(--toolbarMenuItemBackgroundColor);
+  background-color: $toolbarMenuItemBackgroundColor;
   line-height: 20px;
 }
 

frontend/src/Components/Menu/MenuItem.css

@@ -5,19 +5,19 @@
   padding: 10px 20px;
   min-width: 150px;
   max-width: 250px;
-  background-color: var(--toolbarMenuItemBackgroundColor);
-  color: var(--menuItemColor);
+  background-color: $toolbarMenuItemBackgroundColor;
+  color: $menuItemColor;
   line-height: 20px;
 
   &:hover,
   &:focus {
-    background-color: var(--toolbarMenuItemHoverBackgroundColor);
-    color: var(--menuItemHoverColor);
+    background-color: $toolbarMenuItemHoverBackgroundColor;
+    color: $menuItemHoverColor;
     text-decoration: none;
   }
 }
 
 .isDisabled {
-  color: var(--disabledColor);
+  color: $disabledColor;
   pointer-events: none;
 }

frontend/src/Components/Menu/MenuItemSeparator.css

@@ -2,5 +2,5 @@
   overflow: hidden;
   min-height: 1px;
   height: 1px;
-  background-color: var(--themeDarkColor);
+  background-color: $themeDarkColor;
 }

frontend/src/Components/Modal/ConfirmModal.js

@@ -33,7 +33,7 @@ function ConfirmModal(props) {
 
       return () => unbindShortcut('enter', onConfirm);
     }
-  }, [bindShortcut, unbindShortcut, isOpen, onConfirm]);
+  }, [isOpen, onConfirm]);
 
   return (
     <Modal

frontend/src/Components/Modal/Modal.css

@@ -12,7 +12,7 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-  background-color: var(--modalBackdropBackgroundColor);
+  background-color: $modalBackdropBackgroundColor;
   opacity: 1;
 }
 

frontend/src/Components/Modal/ModalContent.css

@@ -4,7 +4,7 @@
   flex-direction: column;
   flex-grow: 1;
   width: 100%;
-  background-color: var(--modalBackgroundColor);
+  background-color: $modalBackgroundColor;
 }
 
 .closeButton {
@@ -18,6 +18,6 @@
   line-height: 60px;
 
   &:hover {
-    color: var(--modalCloseButtonHoverColor);
+    color: $modalCloseButtonHoverColor;
   }
 }

frontend/src/Components/Modal/ModalFooter.css

@@ -4,7 +4,7 @@
   justify-content: flex-end;
   flex-shrink: 0;
   padding: 15px 30px;
-  border-top: 1px solid var(--borderColor);
+  border-top: 1px solid $borderColor;
 
   a,
   button {

frontend/src/Components/Modal/ModalHeader.css

@@ -3,6 +3,6 @@
 
   flex-shrink: 0;
   padding: 15px 50px 15px 30px;
-  border-bottom: 1px solid var(--borderColor);
+  border-bottom: 1px solid $borderColor;
   font-size: 18px;
 }

frontend/src/Components/MonitorToggleButton.css

@@ -6,6 +6,6 @@
 }
 
 .isDisabled {
-  color: var(--disabledColor);
+  color: $disabledColor;
   cursor: not-allowed;
 }

frontend/src/Components/Page/Header/KeyboardShortcutsModalContent.css

@@ -8,8 +8,8 @@
 .key {
   padding: 2px 4px;
   border-radius: 3px;
-  background-color: var(--defaultColor);
+  background-color: $defaultColor;
   box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
-  color: var(--white);
+  color: $white;
   font-size: 16px;
 }

frontend/src/Components/Page/Header/MovieSearchInput.css

@@ -12,22 +12,22 @@
 .ripple {
   composes: ripple from '~Components/Loading/LoadingIndicator.css';
 
-  border: 1px solid var(--toolbarColor);
+  border: 1px solid $toolbarColor;
 }
 
 .input {
   margin-left: 8px;
   width: 200px;
   border: none;
-  border-bottom: solid 1px var(--white);
+  border-bottom: solid 1px $white;
   border-radius: 0;
   background-color: transparent;
   box-shadow: none;
-  color: var(--white);
+  color: $white;
   transition: border 0.3s ease-out;
 
   &::placeholder {
-    color: var(--white);
+    color: $white;
     transition: color 0.3s ease-out;
   }
 
@@ -60,13 +60,13 @@
     overflow-y: auto;
     min-width: 100%;
     max-height: 230px;
-    border: 1px solid var(--themeDarkColor);
+    border: 1px solid $themeDarkColor;
     border-radius: 4px;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
-    background-color: var(--themeDarkColor);
-    box-shadow: inset 0 1px 1px var(--inputBoxShadowColor);
-    color: var(--menuItemColor);
+    background-color: $themeDarkColor;
+    box-shadow: inset 0 1px 1px $inputBoxShadowColor;
+    color: $menuItemColor;
   }
 }
 
@@ -82,12 +82,12 @@
 }
 
 .highlighted {
-  background-color: var(--themeLightColor);
+  background-color: $themeLightColor;
 }
 
 .sectionTitle {
   padding: 5px 8px;
-  color: var(--disabledColor);
+  color: $disabledColor;
 }
 
 .addNewMovieSuggestion {

frontend/src/Components/Page/Header/MovieSearchResult.css

@@ -21,7 +21,7 @@
 .alternateTitle {
   composes: title;
 
-  color: var(--disabledColor);
+  color: $disabledColor;
   font-size: $smallFontSize;
 }
 

frontend/src/Components/Page/Header/PageHeader.css

@@ -4,8 +4,8 @@
   align-items: center;
   flex: 0 0 auto;
   height: $headerHeight;
-  background-color: var(--pageHeaderBackgroundColor);
-  color: var(--white);
+  background-color: #464b51;
+  color: $white;
 }
 
 .logoContainer {
@@ -56,7 +56,7 @@
   line-height: 60px;
 
   &:hover {
-    color: var(--toobarButtonHoverColor);
+    color: $toobarButtonHoverColor;
   }
 }
 
@@ -67,7 +67,7 @@
   align-items: center;
   justify-content: center;
   width: 30px;
-  color: var(--themeRed);
+  color: $themeRed;
   text-align: center;
   line-height: 60px;
 

frontend/src/Components/Page/Header/PageHeaderActionsMenu.css

@@ -5,7 +5,7 @@
   text-align: center;
 
   &:hover {
-    color: var(--toobarButtonHoverColor);
+    color: $toobarButtonHoverColor;
   }
 }
 

frontend/src/Components/Page/LoadingPage.css

@@ -1,7 +1,5 @@
 .page {
   composes: page from '~./Page.css';
-
-  background-color: var(--pageBackground);
 }
 
 .logoFull {

frontend/src/Components/Page/PageContentBody.js

@@ -1,12 +1,24 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import OverlayScroller from 'Components/Scroller/OverlayScroller';
 import Scroller from 'Components/Scroller/Scroller';
 import { scrollDirections } from 'Helpers/Props';
+import { isFirefox, isMobile } from 'Utilities/browser';
 import { isLocked } from 'Utilities/scrollLock';
 import styles from './PageContentBody.css';
 
 class PageContentBody extends Component {
 
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this._isMobile = isMobile();
+    this._isSmallScreenFirefox = isFirefox && window.innerWidth < 768;
+  }
+
   //
   // Listeners
 
@@ -30,8 +42,12 @@ class PageContentBody extends Component {
       ...otherProps
     } = this.props;
 
+    const ScrollerComponent = this._isMobile || this._isSmallScreenFirefox ?
+      Scroller :
+      OverlayScroller;
+
     return (
-      <Scroller
+      <ScrollerComponent
         className={className}
         scrollDirection={scrollDirections.VERTICAL}
         {...otherProps}
@@ -40,7 +56,7 @@ class PageContentBody extends Component {
         <div className={innerClassName}>
           {children}
         </div>
-      </Scroller>
+      </ScrollerComponent>
     );
   }
 }

frontend/src/Components/Page/PageContentFooter.css

@@ -2,7 +2,7 @@
   display: flex;
   flex: 0 0 auto;
   padding: 20px;
-  background-color: var(--pageFooterBackground);
+  background-color: #f1f1f1;
 }
 
 @media only screen and (max-width: $breakpointSmall) {

frontend/src/Components/Page/PageJumpBar.css

@@ -1,5 +1,4 @@
 .jumpBar {
-  z-index: $pageJumpBarZIndex;
   display: flex;
   align-content: stretch;
   align-items: stretch;

frontend/src/Components/Page/PageJumpBarItem.css

@@ -1,6 +1,6 @@
 .jumpBarItem {
   flex: 1 1 $jumpBarItemHeight;
-  border-bottom: 1px solid var(--borderColor);
+  border-bottom: 1px solid $borderColor;
   text-align: center;
   font-weight: bold;
 

frontend/src/Components/Page/Sidebar/Messages/Message.css

@@ -1,6 +1,6 @@
 .message {
   display: flex;
-  border-left: 3px solid var(--infoColor);
+  border-left: 3px solid $infoColor;
 }
 
 .iconContainer,
@@ -9,7 +9,7 @@
   justify-content: center;
   flex-direction: column;
   padding: 2px 0;
-  color: var(--sidebarColor);
+  color: $sidebarColor;
 }
 
 .iconContainer {
@@ -26,17 +26,17 @@
 /* Types */
 
 .error {
-  border-left-color: var(--dangerColor);
+  border-left-color: $dangerColor;
 }
 
 .info {
-  border-left-color: var(--infoColor);
+  border-left-color: $infoColor;
 }
 
 .success {
-  border-left-color: var(--successColor);
+  border-left-color: $successColor;
 }
 
 .warning {
-  border-left-color: var(--warningColor);
+  border-left-color: $warningColor;
 }

frontend/src/Components/Page/Sidebar/PageSidebar.css

@@ -2,7 +2,7 @@
   flex: 0 0 $sidebarWidth;
   overflow: hidden;
   width: $sidebarWidth;
-  background-color: var(--sidebarBackgroundColor);
+  background-color: $sidebarBackgroundColor;
   transition: transform 300ms ease-in-out;
   transform: translateX(0);
 }
@@ -11,8 +11,8 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  background-color: var(--sidebarBackgroundColor);
-  color: var(--white);
+  background-color: $sidebarBackgroundColor;
+  color: $white;
 }
 
 @media only screen and (max-width: $breakpointSmall) {

frontend/src/Components/Page/Sidebar/PageSidebarItem.css

@@ -1,21 +1,21 @@
 .item {
   border-left: 3px solid transparent;
-  color: var(--sidebarColor);
+  color: $sidebarColor;
   transition: border-left 0.3s ease-in-out;
 }
 
 .isActiveItem {
-  border-left: 3px solid var(--themeBlue);
+  border-left: 3px solid $themeBlue;
 }
 
 .link {
   display: block;
   padding: 12px 24px;
-  color: var(--sidebarColor);
+  color: $sidebarColor;
 
   &:hover,
   &:focus {
-    color: var(--themeBlue);
+    color: $themeBlue;
     text-decoration: none;
   }
 }
@@ -27,11 +27,11 @@
 }
 
 .isActiveLink {
-  color: var(--themeBlue);
+  color: $themeBlue;
 }
 
 .isActiveParentLink {
-  background-color: var(--sidebarActiveBackgroundColor);
+  background-color: $sidebarActiveBackgroundColor;
 }
 
 .iconContainer {

frontend/src/Components/Page/Toolbar/PageToolbar.css

@@ -4,8 +4,8 @@
   flex: 0 0 auto;
   padding: 0 20px;
   height: $toolbarHeight;
-  background-color: var(--toolbarBackgroundColor);
-  color: var(--toolbarColor);
+  background-color: $toolbarBackgroundColor;
+  color: $toolbarColor;
   line-height: 60px;
 }
 

frontend/src/Components/Page/Toolbar/PageToolbarButton.css

@@ -2,21 +2,20 @@
   composes: link from '~Components/Link/Link.css';
 
   padding-top: 4px;
-  min-width: $toolbarButtonWidth;
-  width: min-content;
+  width: $toolbarButtonWidth;
   text-align: center;
 
   &:hover {
-    color: var(--toobarButtonHoverColor);
+    color: $toobarButtonHoverColor;
   }
 
   &.isDisabled {
-    color: var(--disabledColor);
+    color: $disabledColor;
   }
 }
 
 .isDisabled {
-  color: var(--disabledColor);
+  color: $disabledColor;
 }
 
 .labelContainer {
@@ -28,7 +27,7 @@
 
 .label {
   padding: 0 3px;
-  color: var(--toolbarLabelColor);
+  color: $toolbarLabelColor;
   font-size: $extraSmallFontSize;
   line-height: calc($extraSmallFontSize + 1px);
 }

frontend/src/Components/ProgressBar.css

@@ -3,7 +3,7 @@
   overflow: hidden;
   width: 100%;
   border-radius: 4px;
-  background-color: var(--progressBarBackgroundColor);
+  background-color: #f5f5f5;
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
 }
 
@@ -14,13 +14,13 @@
   width: 0;
   height: 100%;
   box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-  color: var(--white);
+  color: $white;
   transition: width 0.6s ease;
 }
 
 .frontTextContainer {
   z-index: 1;
-  color: var(--white);
+  color: $white;
 }
 
 .backTextContainer,
@@ -42,39 +42,39 @@
 }
 
 .primary {
-  background-color: var(--primaryColor);
+  background-color: $primaryColor;
 }
 
 .danger {
-  background-color: var(--dangerColor);
+  background-color: $dangerColor;
 
   &:global(.colorImpaired) {
-    background: repeating-linear-gradient(90deg, var(--dangerColor), var(--dangerColor) 5px, var(--dangerColor) 5px, var(--dimColor) 10px);
+    background: repeating-linear-gradient(90deg, $dangerColor, $dangerColor 5px, $dangerColor 5px, $dimColor 10px);
   }
 }
 
 .success {
-  background-color: var(--successColor);
+  background-color: $successColor;
 }
 
 .purple {
-  background-color: var(--purple);
+  background-color: $purple;
 }
 
 .warning {
-  background-color: var(--warningColor);
+  background-color: $warningColor;
 
   &:global(.colorImpaired) {
-    background: repeating-linear-gradient(45deg, var(--warningColor), var(--warningColor) 5px, var(--warningColor) 5px, var(--dimColor) 10px);
+    background: repeating-linear-gradient(45deg, $warningColor, $warningColor 5px, $warningColor 5px, $dimColor 10px);
   }
 }
 
 .info {
-  background-color: var(--infoColor);
+  background-color: $infoColor;
 }
 
 .queue {
-  background-color: var(--queueColor);
+  background-color: $queueColor;
 }
 
 .small {

frontend/src/Components/Scroller/OverlayScroller.css

@@ -10,10 +10,10 @@
   min-height: 100px;
   border: 1px solid transparent;
   border-radius: 5px;
-  background-color: var(--scrollbarBackgroundColor);
+  background-color: $scrollbarBackgroundColor;
   background-clip: padding-box;
 
   &:hover {
-    background-color: var(--scrollbarHoverBackgroundColor);
+    background-color: $scrollbarHoverBackgroundColor;
   }
 }