Sliding expiration for auth cookie and a little clean up

(cherry picked from commit 05ee4e644907b7f1e84589465ac9ab1848f5a766)
2026-03-05 13:21:25 -05:00 · 2022-08-19 06:29:45 +00:00
1501 changed files with 19807 additions and 29445 deletions
--- a/.editorconfig
+++ b/.editorconfig
@@ -19,10 +19,10 @@ indent_size = 4
 dotnet_sort_system_directives_first = true

 # Avoid "this." and "Me." if not necessary
-dotnet_style_qualification_for_field = false:refactoring
-dotnet_style_qualification_for_property = false:refactoring
-dotnet_style_qualification_for_method = false:refactoring
-dotnet_style_qualification_for_event = false:refactoring
+dotnet_style_qualification_for_field = false:warning
+dotnet_style_qualification_for_property = false:warning
+dotnet_style_qualification_for_method = false:warning
+dotnet_style_qualification_for_event = false:warning

 # Indentation preferences
 csharp_indent_block_contents = true
@@ -32,10 +32,6 @@ csharp_indent_case_contents_when_block = true
 csharp_indent_switch_labels = true
 csharp_indent_labels = flush_left

-dotnet_style_qualification_for_field = false:suggestion
-dotnet_style_qualification_for_property = false:suggestion
-dotnet_style_qualification_for_method = false:suggestion
-dotnet_style_qualification_for_event = false:suggestion
 dotnet_naming_style.instance_field_style.capitalization = camel_case
 dotnet_naming_style.instance_field_style.required_prefix = _

@@ -46,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
@@ -68,7 +65,6 @@ dotnet_diagnostic.SA1406.severity = suggestion
 dotnet_diagnostic.SA1410.severity = suggestion
 dotnet_diagnostic.SA1411.severity = suggestion
 dotnet_diagnostic.SA1413.severity = none
-dotnet_diagnostic.SA1512.severity = none
 dotnet_diagnostic.SA1516.severity = none
 dotnet_diagnostic.SA1600.severity = none
 dotnet_diagnostic.SA1601.severity = none
@@ -167,7 +163,6 @@ dotnet_diagnostic.CA1309.severity = suggestion
 dotnet_diagnostic.CA1310.severity = suggestion
 dotnet_diagnostic.CA1401.severity = suggestion
 dotnet_diagnostic.CA1416.severity = suggestion
-dotnet_diagnostic.CA1419.severity = suggestion
 dotnet_diagnostic.CA1507.severity = suggestion
 dotnet_diagnostic.CA1508.severity = suggestion
 dotnet_diagnostic.CA1707.severity = suggestion
@@ -183,6 +178,9 @@ dotnet_diagnostic.CA1720.severity = suggestion
 dotnet_diagnostic.CA1721.severity = suggestion
 dotnet_diagnostic.CA1724.severity = suggestion
 dotnet_diagnostic.CA1725.severity = suggestion
+dotnet_diagnostic.CA1801.severity = suggestion
+dotnet_diagnostic.CA1802.severity = suggestion
+dotnet_diagnostic.CA1805.severity = suggestion
 dotnet_diagnostic.CA1806.severity = suggestion
 dotnet_diagnostic.CA1810.severity = suggestion
 dotnet_diagnostic.CA1812.severity = suggestion
@@ -194,11 +192,13 @@ dotnet_diagnostic.CA1819.severity = suggestion
 dotnet_diagnostic.CA1822.severity = suggestion
 dotnet_diagnostic.CA1823.severity = suggestion
 dotnet_diagnostic.CA1824.severity = suggestion
-dotnet_diagnostic.CA1848.severity = suggestion
 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
@@ -229,9 +229,6 @@ dotnet_diagnostic.CA2243.severity = suggestion
 dotnet_diagnostic.CA2244.severity = suggestion
 dotnet_diagnostic.CA2245.severity = suggestion
 dotnet_diagnostic.CA2246.severity = suggestion
-dotnet_diagnostic.CA2249.severity = suggestion
-dotnet_diagnostic.CA2251.severity = suggestion
-dotnet_diagnostic.CA2254.severity = suggestion
 dotnet_diagnostic.CA3061.severity = suggestion
 dotnet_diagnostic.CA3075.severity = suggestion
 dotnet_diagnostic.CA3076.severity = suggestion
@@ -259,7 +256,7 @@ dotnet_diagnostic.CA5392.severity = suggestion
 dotnet_diagnostic.CA5394.severity = suggestion
 dotnet_diagnostic.CA5397.severity = suggestion

-dotnet_diagnostic.SYSLIB0006.severity = none
+

 [*.{js,html,js,hbs,less,css}]
 charset = utf-8
--- a/.esprintrc
+++ b/.esprintrc
@@ -0,0 +1,9 @@
+{
+  "paths": [
+    "frontend/src/**/*.js"
+  ],
+  "ignored": [
+    "**/node_modules/**/*"
+  ],
+  "port": 5004
+}
--- a/.github/FUNDING.yml
+++ b/.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
--- a/.github/ISSUE_TEMPLATE/bug_report.yml
+++ b/.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
@@ -73,10 +71,3 @@ body:
      Additionally, any additional info? Screenshots? References? Anything that will give us more context about the issue you are encountering!
  validations:
    required: true
- type: checkboxes
-  attributes:
-    label: Trace Logs have been provided as applicable. Reports may be closed if the required logs are not provided.
-    description: Trace logs are generally required for all bug reports
-    options:
-    - label: I have followed the steps in the wiki link above and provided the required trace logs that are relevant and show this issue.
-      required: true
--- a/.github/ISSUE_TEMPLATE/feature_request.yml
+++ b/.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:
--- a/.github/labeler.yml
+++ b/.github/labeler.yml
@@ -1,28 +0,0 @@
-'Area: API':
-  - src/Radarr.Api.V3/**/*
-
-'Area: Db-migration':
-  - src/NzbDrone.Core/Datastore/Migration/*
-
-'Area: Download Clients':
-  - src/NzbDrone.Core/Download/Clients/**/*
-
-'Area: Import Lists':
-  - src/NzbDrone.Core/ImportLists/**/*
-
-'Area: Indexer':
-  - src/NzbDrone.Core/Indexers/**/*
-
-'Area: Notifications':
-  - src/NzbDrone.Core/Notifications/**/*
-
-'Area: Organizer':
-  - src/NzbDrone.Core/Organizer/**/*
-
-'Area: Parser':
-  - src/NzbDrone.Core/Parser/**/*
-
-'Area: UI':
-  - frontend/**/*
-  - package.json
-  - yarn.lock
--- a/.github/workflows/azuresync.yml
+++ b/.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\\Radarr"
+          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\\Radarr"
+          ado_wit: "User Story"
+          ado_new_state: "New"
+          ado_active_state: "Active"
+          ado_close_state: "Closed"
+          ado_bypassrules: true
+          log_level: 100
--- a/.github/workflows/labeler.yml
+++ b/.github/workflows/labeler.yml
@@ -1,12 +0,0 @@
-name: "Pull Request Labeler"
-on:
-  - pull_request_target
-
-jobs:
-  triage:
-    permissions:
-      contents: read
-      pull-requests: write
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/labeler@v4
--- a/.github/workflows/lock.yml
+++ b/.github/workflows/lock.yml
@@ -5,22 +5,17 @@ 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@v4
+      - uses: dessant/lock-threads@v2
        with:
          github-token: ${{ github.token }}
-          issue-inactive-days: '90'
-          exclude-issue-created-before: ''
-          exclude-any-issue-labels: ''
-          add-issue-labels: ''
-          issue-comment: ''
+          issue-lock-inactive-days: '90'
+          issue-exclude-created-before: ''
+          issue-exclude-labels: ''
+          issue-lock-labels: ''
+          issue-lock-comment: ''
          issue-lock-reason: 'resolved'
          process-only: ''
--- a/.github/workflows/support.yml
+++ b/.github/workflows/support.yml
@@ -4,15 +4,11 @@ on:
  issues:
    types: [labeled, unlabeled, reopened]

-permissions: {}
 jobs:
  support:
-    permissions:
-      issues: write # to modify issues
-
    runs-on: ubuntu-latest
    steps:
-      - uses: dessant/support-requests@v3
+      - uses: dessant/support-requests@v2
        with:
          github-token: ${{ github.token }}
          support-label: 'Type: Support'
@@ -22,15 +18,4 @@ jobs:
            to be a support request. Please hop over onto our [Discord](https://radarr.video/discord) 
            or [Subreddit](https://reddit.com/r/radarr)
          close-issue: true
-          lock-issue: false
-      - uses: dessant/support-requests@v3
-        with:
-          github-token: ${{ github.token }}
-          support-label: 'Status: Logs Needed'
-          issue-comment: >
-            :wave: @{issue-author}, In order to help you further we'll need to see logs. 
-            You'll need to enable trace logging and replicate the problem that you encountered. 
-            Guidance on how to enable trace logging can be found in 
-            our [troubleshooting guide](https://wiki.servarr.com/radarr/troubleshooting#logging-and-log-files).
-          close-issue: false
-          lock-issue: false
+          lock-issue: false
--- a/.gitignore
+++ b/.gitignore
@@ -166,8 +166,27 @@ packages.config.md5sum

 # Common IntelliJ Platform excludes

-# Ignore Rider projects completely for now
-.idea/
+# User specific
+**/.idea/**/workspace.xml
+**/.idea/**/tasks.xml
+**/.idea/shelf/*
+**/.idea/dictionaries
+**/.idea/.idea.Radarr.Posix
+**/.idea/.idea.Radarr.Windows
+
+# Sensitive or high-churn files
+**/.idea/**/dataSources/
+**/.idea/**/dataSources.ids
+**/.idea/**/dataSources.xml
+**/.idea/**/dataSources.local.xml
+**/.idea/**/sqlDataSources.xml
+**/.idea/**/dynamic.xml
+
+# Rider
+# Rider auto-generates .iml files, and contentModel.xml
+**/.idea/**/*.iml
+**/.idea/**/contentModel.xml
+**/.idea/**/modules.xml

 # ignore node_modules symlink
 node_modules
--- a/CODE_OF_CONDUCT.md
+++ b/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
--- a/README.md
+++ b/README.md
@@ -76,15 +76,6 @@ Thank you to [<img src="/Logo/jetbrains.svg" alt="JetBrains" width="32"> JetBrai
 * [<img src="/Logo/rider.svg" alt="Rider" width="32"> Rider](http://www.jetbrains.com/rider/)
 * [<img src="/Logo/dottrace.svg" alt="dotTrace" width="32"> dotTrace](http://www.jetbrains.com/dottrace/)

-## DigitalOcean
-
-This project is also supported by DigitalOcean
-<p>
-  <a href="https://www.digitalocean.com/">
-    <img src="https://opensource.nyc3.cdn.digitaloceanspaces.com/attribution/assets/SVG/DO_Logo_horizontal_blue.svg" width="201px">
-  </a>
-</p>
-
 ### License

 * [GNU GPL v3](http://www.gnu.org/licenses/gpl.html)
--- a/SECURITY.md
+++ b/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.
--- a/azure-pipelines.yml
+++ b/azure-pipelines.yml
@@ -9,13 +9,13 @@ variables:
  testsFolder: './_tests'
  yarnCacheFolder: $(Pipeline.Workspace)/.yarn
  nugetCacheFolder: $(Pipeline.Workspace)/.nuget/packages
-  majorVersion: '4.5.1'
+  majorVersion: '4.2.2'
  minorVersion: $[counter('minorVersion', 2000)]
  radarrVersion: '$(majorVersion).$(minorVersion)'
  buildName: '$(Build.SourceBranchName).$(radarrVersion)'
  sentryOrg: 'servarr'
  sentryUrl: 'https://sentry.servarr.com'
-  dotnetVersion: '6.0.408'
+  dotnetVersion: '6.0.400'
  nodeVersion: '16.X'
  innoVersion: '6.2.0'
  windowsImage: 'windows-2022'
@@ -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)

--- a/docs.sh
+++ b/docs.sh
@@ -3,9 +3,9 @@ PLATFORM=$1
 if [ "$PLATFORM" = "Windows" ]; then
  RUNTIME="win-x64"
 elif [ "$PLATFORM" = "Linux" ]; then
-  RUNTIME="linux-x64"
+  WHERE="linux-x64"
 elif [ "$PLATFORM" = "Mac" ]; then
-  RUNTIME="osx-x64"
+  WHERE="osx-x64"
 else
  echo "Platform must be provided as first arguement: Windows, Linux or Mac"
  exit 1
@@ -27,7 +27,7 @@ dotnet clean $slnFile -c Release
 dotnet msbuild -restore $slnFile -p:Configuration=Debug -p:Platform=$platform -p:RuntimeIdentifiers=$RUNTIME -t:PublishAllRids

 dotnet new tool-manifest
-dotnet tool install --version 6.5.0 Swashbuckle.AspNetCore.Cli
+dotnet tool install --version 6.3.0 Swashbuckle.AspNetCore.Cli

 dotnet tool run swagger tofile --output ./src/Radarr.Api.V3/openapi.json "$outputFolder/net6.0/$RUNTIME/radarr.console.dll" v3 &

@@ -35,4 +35,4 @@ sleep 45

 kill %1

-exit 0
+exit 0
--- a/frontend/.csscomb.json
+++ b/frontend/.csscomb.json
@@ -0,0 +1,25 @@
+{
+  "remove-empty-rulesets": true,
+  "always-semicolon": true,
+  "color-case": "lower",
+  "block-indent": "  ",
+  "color-shorthand": false,
+  "element-case": "lower",
+  "eof-newline": true,
+  "leading-zero": true,
+  "quotes": "double",
+  "sort-order-fallback": "abc",
+  "space-before-colon": "",
+  "space-after-colon": " ",
+  "space-before-combinator": " ",
+  "space-after-combinator": " ",
+  "space-between-declarations": "\n",
+  "space-before-opening-brace": " ",
+  "space-after-opening-brace": "\n",
+  "space-after-selector-delimiter": " ",
+  "space-before-selector-delimiter": "",
+  "space-before-closing-brace": "\n",
+  "strip-spaces": true,
+  "tab-size": true,
+  "unitless-zero": false
+}
--- a/frontend/.esformatter
+++ b/frontend/.esformatter
@@ -0,0 +1,335 @@
+{
+  "indent": {
+    "value": "  ",
+    "FunctionExpression": 1,
+    "ArrayExpression": 1,
+    "ObjectExpression": 1
+  },
+  "lineBreak": {
+    "value": "\n",
+
+    "before": {
+      "ArrayPatternClosing": 0,
+      "ArrayPatternComma": 0,
+      "ArrayPatternOpening": 0,
+      "ArrowFunctionExpressionArrow": 0,
+      "ArrowFunctionExpressionClosingBrace": ">=1",
+      "ArrowFunctionExpressionOpeningBrace": 0,
+      "AssignmentExpression": ">=1",
+      "AssignmentOperator": 0,
+      "BlockStatement": 0,
+      "BreakKeyword": ">=1",
+      "CallExpression": -1,
+      "CallExpressionClosingParentheses": -1,
+      "CallExpressionOpeningParentheses": 0,
+      "CatchClosingBrace": ">=1",
+      "CatchKeyword": 0,
+      "CatchOpeningBrace": 0,
+      "ClassDeclaration": ">=1",
+      "ClassDeclarationClosingBrace": ">=1",
+      "ClassDeclarationOpeningBrace": 0,
+      "ConditionalExpression": ">=1",
+      "DeleteOperator": ">=1",
+      "DoWhileStatement": ">=1",
+      "DoWhileStatementClosingBrace": ">=1",
+      "DoWhileStatementOpeningBrace": 0,
+      "ElseIfStatement": 0,
+      "ElseIfStatementClosingBrace": ">=1",
+      "ElseIfStatementOpeningBrace": 0,
+      "ElseStatement": 0,
+      "ElseStatementClosingBrace": ">=1",
+      "ElseStatementOpeningBrace": 0,
+      "EmptyStatement": -1,
+      "EndOfFile": -1,
+      "FinallyClosingBrace": ">=1",
+      "FinallyKeyword": -1,
+      "FinallyOpeningBrace": 0,
+      "ForInStatement": ">=1",
+      "ForInStatementClosingBrace": ">=1",
+      "ForInStatementExpressionClosing": 0,
+      "ForInStatementExpressionOpening": 0,
+      "ForInStatementOpeningBrace": 0,
+      "ForStatement": ">=1",
+      "ForStatementClosingBrace": ">=1",
+      "ForStatementExpressionClosing": "<2",
+      "ForStatementExpressionOpening": 0,
+      "ForStatementOpeningBrace": 0,
+      "FunctionDeclaration": ">=1",
+      "FunctionDeclarationClosingBrace": ">=1",
+      "FunctionDeclarationOpeningBrace": 0,
+      "FunctionExpression": 0,
+      "FunctionExpressionClosingBrace": 1,
+      "FunctionExpressionOpeningBrace":0,
+      "IIFEClosingParentheses": 0,
+      "IfStatement": ">=1",
+      "IfStatementClosingBrace": ">=1",
+      "IfStatementOpeningBrace": 0,
+      "LogicalExpression": -1,
+      "MemberExpressionClosing": 0,
+      "MemberExpressionOpening": 0,
+      "MemberExpressionPeriod": -1,
+      "MethodDefinition": ">=1",
+      "ObjectExpressionClosingBrace": "<=1",
+      "ObjectPatternClosingBrace": 0,
+      "ObjectPatternComma": 0,
+      "ObjectPatternOpeningBrace": 0,
+      "ParameterDefault": 0,
+      "Property": "<=2",
+      "PropertyValue": 0,
+      "ReturnStatement": -1,
+      "SwitchClosingBrace": ">=1",
+      "SwitchOpeningBrace": 0,
+      "ThisExpression": -1,
+      "ThrowStatement": ">=1",
+      "TryClosingBrace": ">=1",
+      "TryKeyword": -1,
+      "TryOpeningBrace": 0,
+      "VariableDeclaration": ">=1",
+      "VariableDeclarationSemiColon": 0,
+      "VariableDeclarationWithoutInit": ">=1",
+      "VariableName": ">=1",
+      "VariableValue": 0,
+      "WhileStatement": ">=1",
+      "WhileStatementClosingBrace": ">=1",
+      "WhileStatementOpeningBrace": 0
+    },
+
+    "after": {
+      "ArrayPatternClosing": 0,
+      "ArrayPatternComma": 0,
+      "ArrayPatternOpening": 0,
+      "ArrowFunctionExpressionArrow": 0,
+      "ArrowFunctionExpressionClosingBrace": -1,
+      "ArrowFunctionExpressionOpeningBrace": ">=1",
+      "AssignmentExpression": ">=1",
+      "AssignmentOperator": 0,
+      "BlockStatement": 0,
+      "BreakKeyword": -1,
+      "CallExpression": -1,
+      "CallExpressionClosingParentheses": -1,
+      "CallExpressionOpeningParentheses": -1,
+      "CatchClosingBrace": ">=0",
+      "CatchKeyword": 0,
+      "CatchOpeningBrace": ">=1",
+      "ClassDeclaration": ">=1",
+      "ClassDeclarationClosingBrace": ">=1",
+      "ClassDeclarationOpeningBrace": ">=1",
+      "ConditionalExpression": ">=1",
+      "DeleteOperator": ">=1",
+      "DoWhileStatement": ">=1",
+      "DoWhileStatementClosingBrace": 0,
+      "DoWhileStatementOpeningBrace": ">=1",
+      "ElseIfStatement": ">=1",
+      "ElseIfStatementClosingBrace": ">=1",
+      "ElseIfStatementOpeningBrace": ">=1",
+      "ElseStatement": ">=1",
+      "ElseStatementClosingBrace": ">=1",
+      "ElseStatementOpeningBrace": ">=1",
+      "EmptyStatement": -1,
+      "FinallyClosingBrace": ">=1",
+      "FinallyKeyword": -1,
+      "FinallyOpeningBrace": ">=1",
+      "ForInStatement": ">=1",
+      "ForInStatementClosingBrace": ">=1",
+      "ForInStatementExpressionClosing": -1,
+      "ForInStatementExpressionOpening": "<2",
+      "ForInStatementOpeningBrace": ">=1",
+      "ForStatement": ">=1",
+      "ForStatementClosingBrace": ">=1",
+      "ForStatementExpressionClosing": -1,
+      "ForStatementExpressionOpening": "<2",
+      "ForStatementOpeningBrace": ">=1",
+      "FunctionDeclaration": ">=1",
+      "FunctionDeclarationClosingBrace": ">=1",
+      "FunctionDeclarationOpeningBrace": ">=1",
+      "FunctionExpression": 0,
+      "FunctionExpressionClosingBrace": -1,
+      "FunctionExpressionOpeningBrace": 1,
+      "IIFEOpeningParentheses": 0,
+      "IfStatement": ">=1",
+      "IfStatementClosingBrace": ">=1",
+      "IfStatementOpeningBrace": ">=1",
+      "LogicalExpression": -1,
+      "MemberExpressionClosing": 0,
+      "MemberExpressionOpening": 0,
+      "MemberExpressionPeriod": 0,
+      "MethodDefinition": ">=1",
+      "ObjectExpressionOpeningBrace": "<=1",
+      "ObjectPatternClosingBrace": 0,
+      "ObjectPatternComma": 0,
+      "ObjectPatternOpeningBrace": 0,
+      "ParameterDefault": 0,
+      "Property": -1,
+      "PropertyName": 0,
+      "ReturnStatement": -1,
+      "SwitchCaseColon": ">=1",
+      "SwitchClosingBrace": ">=1",
+      "SwitchOpeningBrace": ">=1",
+      "ThisExpression": 0,
+      "ThrowStatement": ">=1",
+      "TryClosingBrace": 0,
+      "TryKeyword": -1,
+      "TryOpeningBrace": ">=1",
+      "VariableDeclaration": ">=1",
+      "VariableDeclarationSemiColon": ">=1",
+      "VariableValue": -1,
+      "WhileStatement": ">=1",
+      "WhileStatementClosingBrace": ">=1",
+      "WhileStatementOpeningBrace": ">=1"
+    }
+  },
+  "whiteSpace": {
+    "value": " ",
+    "removeTrailing": 1,
+    "before": {
+      "ArgumentComma": 0,
+      "ArgumentList": 0,
+      "ArgumentListArrayExpression": 0,
+      "ArgumentListFunctionExpression": 1,
+      "ArgumentListObjectExpression": 0,
+      "ArrayExpressionClosing": 0,
+      "ArrayExpressionComma": 0,
+      "ArrayExpressionOpening": 1,
+      "AssignmentOperator": 1,
+      "BinaryExpression": 0,
+      "BinaryExpressionOperator": 1,
+      "BlockComment": 1,
+      "CallExpression": 1,
+      "CatchClosingBrace": 1,
+      "CatchKeyword": 1,
+      "CatchOpeningBrace": 1,
+      "CatchParameterList": 0,
+      "CommaOperator": 0,
+      "ConditionalExpressionAlternate": 1,
+      "ConditionalExpressionConsequent": 1,
+      "DoWhileStatementClosingBrace": 1,
+      "DoWhileStatementConditional": 1,
+      "DoWhileStatementOpeningBrace": 1,
+      "ElseIfStatementClosingBrace": 1,
+      "ElseIfStatementOpeningBrace": 1,
+      "ElseStatementClosingBrace": 1,
+      "ElseStatementOpeningBrace": 1,
+      "EmptyStatement": 0,
+      "ExpressionClosingParentheses": 0,
+      "FinallyClosingBrace": 1,
+      "FinallyKeyword": -1,
+      "FinallyOpeningBrace": 1,
+      "ForInStatement": 1,
+      "ForInStatementClosingBrace": 1,
+      "ForInStatementExpressionClosing": 0,
+      "ForInStatementExpressionOpening": 1,
+      "ForInStatementOpeningBrace": 1,
+      "ForStatement": 1,
+      "ForStatementClosingBrace": 1,
+      "ForStatementExpressionClosing": 0,
+      "ForStatementExpressionOpening": 1,
+      "ForStatementOpeningBrace": 1,
+      "ForStatementSemicolon": 0,
+      "FunctionDeclarationClosingBrace": 1,
+      "FunctionDeclarationOpeningBrace": 1,
+      "FunctionExpressionClosingBrace": 1,
+      "FunctionExpressionOpeningBrace": 1,
+      "IfStatementClosingBrace": 1,
+      "IfStatementConditionalClosing": 0,
+      "IfStatementConditionalOpening": 1,
+      "IfStatementOpeningBrace": 1,
+      "LineComment": 1,
+      "LogicalExpressionOperator": 1,
+      "MemberExpressionClosing": 0,
+      "ObjectExpressionClosingBrace": 1,
+      "ParameterComma": 0,
+      "ParameterList": 0,
+      "Property": 1,
+      "PropertyName": 1,
+      "PropertyValue": 1,
+      "SwitchDiscriminantClosing": 0,
+      "SwitchDiscriminantOpening": 1,
+      "ThrowKeyword": 1,
+      "TryClosingBrace": 1,
+      "TryKeyword": -1,
+      "TryOpeningBrace": 1,
+      "UnaryExpressionOperator": 0,
+      "VariableName": 1,
+      "VariableValue": 1,
+      "WhileStatementClosingBrace": 1,
+      "WhileStatementConditionalClosing": 0,
+      "WhileStatementConditionalOpening": 1,
+      "WhileStatementOpeningBrace": 1
+    },
+    "after": {
+      "ArgumentComma": 1,
+      "ArgumentList": 0,
+      "ArgumentListArrayExpression": 1,
+      "ArgumentListFunctionExpression": 1,
+      "ArgumentListObjectExpression": 0,
+      "ArrayExpressionClosing": 0,
+      "ArrayExpressionComma": 1,
+      "ArrayExpressionOpening": 0,
+      "AssignmentOperator": 1,
+      "BinaryExpression": 0,
+      "BinaryExpressionOperator": 1,
+      "BlockComment": 1,
+      "CallExpression": 0,
+      "CatchClosingBrace": 1,
+      "CatchKeyword": 1,
+      "CatchOpeningBrace": 1,
+      "CatchParameterList": 0,
+      "CommaOperator": 1,
+      "ConditionalExpressionConsequent": 1,
+      "ConditionalExpressionTest": 1,
+      "DoWhileStatementBody": 1,
+      "DoWhileStatementClosingBrace": 1,
+      "DoWhileStatementOpeningBrace": 1,
+      "ElseIfStatementClosingBrace": 1,
+      "ElseIfStatementOpeningBrace": 1,
+      "ElseStatementClosingBrace": 1,
+      "ElseStatementOpeningBrace": 1,
+      "EmptyStatement": 0,
+      "ExpressionOpeningParentheses": 0,
+      "FinallyClosingBrace": 1,
+      "FinallyKeyword": -1,
+      "FinallyOpeningBrace": 1,
+      "ForInStatement": 1,
+      "ForInStatementClosingBrace": 1,
+      "ForInStatementExpressionClosing": 1,
+      "ForInStatementExpressionOpening": 0,
+      "ForInStatementOpeningBrace": 1,
+      "ForStatement": 1,
+      "ForStatementClosingBrace": 1,
+      "ForStatementExpressionClosing": 1,
+      "ForStatementExpressionOpening": 0,
+      "ForStatementOpeningBrace": 1,
+      "ForStatementSemicolon": 1,
+      "FunctionDeclarationClosingBrace": 0,
+      "FunctionDeclarationOpeningBrace": 0,
+      "FunctionExpressionClosingBrace": 0,
+      "FunctionExpressionOpeningBrace": 0,
+      "FunctionName": 0,
+      "FunctionReservedWord": 0,
+      "IfStatementClosingBrace": 1,
+      "IfStatementConditionalClosing": 0,
+      "IfStatementConditionalOpening": 0,
+      "IfStatementOpeningBrace": 1,
+      "LogicalExpressionOperator": 1,
+      "MemberExpressionOpening": 0,
+      "ObjectExpressionClosingBrace": 0,
+      "ObjectExpressionOpeningBrace": 1,
+      "ParameterComma": 1,
+      "ParameterList": 0,
+      "PropertyName": 0,
+      "PropertyValue": 0,
+      "SwitchDiscriminantClosing": 1,
+      "SwitchDiscriminantOpening": 0,
+      "ThrowKeyword": 1,
+      "TryClosingBrace": 1,
+      "TryKeyword": -1,
+      "TryOpeningBrace": 1,
+      "UnaryExpressionOperator": 0,
+      "VariableName": 1,
+      "WhileStatementClosingBrace": 1,
+      "WhileStatementConditionalClosing": 1,
+      "WhileStatementConditionalOpening": 0,
+      "WhileStatementOpeningBrace": 1
+    }
+  }
+}
--- a/frontend/.eslintignore
+++ b/frontend/.eslintignore
@@ -1,2 +1 @@
 **/JsLibraries/**
-**/*.css.d.ts
--- a/frontend/.eslintrc.js
+++ b/frontend/.eslintrc.js
@@ -1,21 +1,14 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
 const fs = require('fs');
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const path = require('path');
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const typescriptEslintRecommended = require('@typescript-eslint/eslint-plugin').configs.recommended;
-
-const frontendFolder = __dirname;

 const dirs = fs
-  .readdirSync(path.join(frontendFolder, 'src'), { withFileTypes: true })
+  .readdirSync('frontend/src', { withFileTypes: true })
  .filter((dirent) => dirent.isDirectory())
  .map((dirent) => dirent.name)
  .join('|');

-module.exports = {
-  root: true,
+const frontendFolder = __dirname;

+module.exports = {
  parser: '@babel/eslint-parser',

  env: {
@@ -28,8 +21,7 @@ module.exports = {
  globals: {
    expect: false,
    chai: false,
-    sinon: false,
-    JSX: true
+    sinon: false
  },

  parserOptions: {
@@ -47,11 +39,8 @@ module.exports = {
  plugins: [
    'filenames',
    'react',
-    'react-hooks',
    'simple-import-sort',
-    'import',
-    '@typescript-eslint',
-    'prettier'
+    'import'
  ],

  settings: {
@@ -234,7 +223,7 @@ module.exports = {
    'consistent-this': ['error', 'self'],
    'eol-last': 'error',
    'func-names': 'off',
-    'func-style': ['error', 'declaration', { allowArrowFunctions: true }],
+    'func-style': ['error', 'declaration'],
    indent: ['error', 2, { SwitchCase: 1 }],
    'key-spacing': ['error', { beforeColon: false, afterColon: true }],
    'keyword-spacing': ['error', { before: true, after: true }],
@@ -319,15 +308,11 @@ 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: [
    {
-      files: [
-        '*.js'
-      ],
+      files: ['*.js'],
      rules: {
        'simple-import-sort/imports': [
          'error',
@@ -342,52 +327,6 @@ module.exports = {
          }
        ]
      }
-    },
-    {
-      files: [
-        '*.ts',
-        '*.tsx'
-      ],
-
-      parser: '@typescript-eslint/parser',
-      parserOptions: {
-        project: './tsconfig.json'
-      },
-
-      extends: [
-        'prettier'
-      ],
-
-      rules: Object.assign(typescriptEslintRecommended.rules, {
-        'no-shadow': 'off',
-        // These should be enabled after cleaning things up
-        '@typescript-eslint/no-unused-vars': 'warn',
-        '@typescript-eslint/explicit-function-return-type': 'off',
-        'react/prop-types': 'off',
-        'prettier/prettier': 'error',
-        'simple-import-sort/imports': [
-          'error',
-          {
-            groups: [
-              // Packages
-              // Absolute Paths
-              // Relative Paths
-              // Css
-              ['^@?\\w', `^(${dirs})(/.*|$)`, '^\\.', '^\\..*css$']
-            ]
-          }
-        ]
-      })
-    },
-    {
-      files: [
-        '*.css.d.ts'
-      ],
-      rules: {
-        'filenames/match-exported': 'off',
-        'init-declarations': 'off',
-        'prettier/prettier': 'off'
-      }
    }
  ]
 };
--- a/frontend/.jsbeautifyrc
+++ b/frontend/.jsbeautifyrc
@@ -0,0 +1,12 @@
+{
+  "js": {
+    "indent_size": 2,
+    "indent_char": " ",
+    "indent_level": 2,
+    "indent_with_tabs": false,
+    "preserve_newlines": true,
+    "brace_style": "collapse",
+    "max_preserve_newlines": 2,
+    "jslint_happy": true
+  }
+}
--- a/frontend/.prettierignore
+++ b/frontend/.prettierignore
@@ -1,10 +0,0 @@
-# Ignore everything recursively
-*
-
-# But not the .ts files
-!*.ts*
-
-*css.d.ts
-
-# Check subdirectories too
-!*/
--- a/frontend/.prettierrc.json
+++ b/frontend/.prettierrc.json
@@ -1,6 +0,0 @@
-{
-  "arrowParens": "always",
-  "endOfLine": "auto",
-  "singleQuote": true,
-  "trailingComma": "es5"
-}
--- a/frontend/.stylelintrc
+++ b/frontend/.stylelintrc
@@ -1,12 +1,12 @@
 {
-  "plugins": [
-    "stylelint-order"
-  ],
-  "ignoreFiles": [
-    "frontend/src/Styles/scaffolding.css",
-    "**/*.js"
-  ],
-  "rules": {
+"plugins": [
+  "stylelint-order"
+],
+"ignoreFiles": [
+  "frontend/src/Styles/scaffolding.css",
+  "**/*.js"
+],
+"rules": {
    "at-rule-empty-line-before": [
      "always",
      {
@@ -15,6 +15,9 @@
        ]
      }
    ],
+    "at-rule-name-case": "lower",
+    "at-rule-name-newline-after": "always-multi-line",
+    "at-rule-name-space-after": "always",
    "at-rule-no-unknown": [
      true,
      {
@@ -25,36 +28,83 @@
      }
    ],
    "at-rule-no-vendor-prefix": true,
+    "at-rule-semicolon-newline-after": "always",
+    "at-rule-semicolon-space-before": "never",
+    "block-closing-brace-empty-line-before": "never",
+    "block-closing-brace-newline-after": "always",
+    "block-closing-brace-newline-before": "always",
+    "block-closing-brace-space-after": "always-single-line",
+    "block-closing-brace-space-before": "always-single-line",
    "block-no-empty": true,
+    "block-opening-brace-newline-after": "always",
+    "block-opening-brace-newline-before": "never-single-line",
+    "block-opening-brace-space-after": "always-single-line",
+    "block-opening-brace-space-before": "always",
+    "color-hex-case": "lower",
    "color-hex-length": "short",
    "color-named": "never",
    "color-no-invalid-hex": true,
    "comment-whitespace-inside": "always",
+    "declaration-bang-space-after": "never",
+    "declaration-bang-space-before": "always",
    "declaration-block-no-duplicate-properties": [
      true,
      {
        "ignoreProperties": [
-          "composes"
+            "composes"
        ]
      }
    ],
    "declaration-block-no-redundant-longhand-properties": true,
    "declaration-block-no-shorthand-property-overrides": true,
+    "declaration-block-semicolon-newline-after": "always",
+    "declaration-block-semicolon-newline-before": "never-multi-line",
+    "declaration-block-semicolon-space-before": "never",
    "declaration-block-single-line-max-declarations": 1,
+    "declaration-block-trailing-semicolon": "always",
+    "declaration-colon-space-after": "always",
+    "declaration-colon-space-before": "never",
    "font-family-name-quotes": "always-unless-keyword",
    "function-calc-no-unspaced-operator": true,
+    "function-comma-newline-after": "never-multi-line",
+    "function-comma-newline-before": "never-multi-line",
+    "function-comma-space-after": "always",
+    "function-comma-space-before": "never",
    "function-linear-gradient-no-nonstandard-direction": true,
    "function-name-case": "lower",
+    "function-parentheses-newline-inside": "never-multi-line",
+    "function-parentheses-space-inside": "never",
    "function-url-quotes": "always",
    "function-url-scheme-disallowed-list": [
      "data"
    ],
+    "function-whitespace-after": "always",
+    "indentation": 2,
    "keyframe-declaration-no-important": true,
    "length-zero-no-unit": true,
+    "max-empty-lines": 1,
+    "max-line-length": [
+      100,
+      {
+        "ignore": [
+          "non-comments"
+        ]
+      }
+    ],
    "max-nesting-depth": 2,
+    "media-feature-colon-space-after": "always",
+    "media-feature-colon-space-before": "never",
+    "media-feature-name-case": "lower",
    "media-feature-name-no-vendor-prefix": true,
+    "media-feature-range-operator-space-after": "always",
+    "media-feature-range-operator-space-before": "always",
    "no-empty-source": true,
+    "no-eol-whitespace": true,
+    "no-extra-semicolons": true,
    "no-invalid-double-slash-comments": true,
+    "no-missing-end-of-source-newline": true,
+    "number-leading-zero": "always",
+    "number-no-trailing-zeros": true,
    "order/order": [
      "custom-properties",
      "dollar-variables",
@@ -82,7 +132,6 @@
          "right",
          "bottom",
          "left",
-          "inset",
          "z-index",
          "display",
          "visibility",
@@ -294,33 +343,54 @@
        ]
      }
    ],
+    "property-case": "lower",
    "property-no-vendor-prefix": true,
    "rule-empty-line-before": [
      "always",
      {
        "except": [
-          "first-nested"
+            "first-nested"
        ],
        "ignore": [
-          "after-comment"
+            "after-comment"
        ]
      }
    ],
+    "selector-attribute-brackets-space-inside": "never",
+    "selector-attribute-operator-space-after": "never",
+    "selector-attribute-operator-space-before": "never",
    "selector-attribute-quotes": "never",
    "selector-class-pattern": "^[A-Za-z0-9]+$",
+    "selector-combinator-space-after": "always",
+    "selector-combinator-space-before": "always",
+    "selector-descendant-combinator-no-non-space": true,
+    "selector-list-comma-newline-after": "always",
+    "selector-list-comma-newline-before": "never-multi-line",
+    "selector-list-comma-space-before": "never",
    "selector-max-attribute": 0,
    "selector-max-class": 3,
    "selector-max-compound-selectors": 3,
+    "selector-max-empty-lines": 0,
    "selector-max-id": 0,
    "selector-max-universal": 0,
+    "selector-pseudo-class-case": "lower",
+    "selector-pseudo-class-parentheses-space-inside": "never",
+    "selector-pseudo-element-case": "lower",
    "selector-pseudo-element-colon-notation": "double",
    "selector-pseudo-element-no-unknown": true,
    "selector-type-case": "lower",
    "selector-type-no-unknown": true,
    "shorthand-property-no-redundant-values": true,
    "string-no-newline": true,
+    "string-quotes": "single",
    "time-min-milliseconds": 100,
+    "unit-case": "lower",
    "unit-no-unknown": true,
+    "value-list-comma-newline-after": "never-multi-line",
+    "value-list-comma-newline-before": "never-multi-line",
+    "value-list-comma-space-after": "always",
+    "value-list-comma-space-before": "never",
+    "value-list-max-empty-lines": 0,
    "value-no-vendor-prefix": true
  }
-}
+}
--- a/frontend/.vscode/extensions.json
+++ b/frontend/.vscode/extensions.json
@@ -1,7 +0,0 @@
-{
-    "recommendations": [
-        "stylelint.vscode-stylelint",
-        "dbaeumer.vscode-eslint",
-        "esbenp.prettier-vscode"
-    ]
-}
--- a/frontend/.vscode/settings.json
+++ b/frontend/.vscode/settings.json
@@ -1,23 +0,0 @@
-// Place your settings in this file to overwrite default and user settings.
-{
-  "files.insertFinalNewline": true,
-
-  "files.exclude": {
-    "**/node_modules": true,
-    "**/*.d.css": true
-  },
-
-  "editor.formatOnSave": false,
-  "editor.codeActionsOnSave": {
-    "source.fixAll": true
-  },
-
-  "typescript.preferences.quoteStyle": "single",
-
-  "eslint.validate": [
-    "javascript",
-    "javascriptreact",
-    "typescript",
-    "typescriptreact"
-  ],
-}
--- a/frontend/babel.config.js
+++ b/frontend/babel.config.js
@@ -17,8 +17,7 @@ module.exports = {
  env: {
    development: {
      presets: [
-        ['@babel/preset-react', { development: true }],
-        '@babel/preset-typescript'
+        ['@babel/preset-react', { development: true }]
      ],
      plugins: [
        'babel-plugin-inline-classnames'
@@ -26,8 +25,7 @@ module.exports = {
    },
    production: {
      presets: [
-        '@babel/preset-react',
-        '@babel/preset-typescript'
+        '@babel/preset-react'
      ],
      plugins: [
        'babel-plugin-transform-react-remove-prop-types'
--- a/frontend/build/webpack.config.js
+++ b/frontend/build/webpack.config.js
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
 const path = require('path');
 const webpack = require('webpack');
 const FileManagerPlugin = require('filemanager-webpack-plugin');
@@ -6,7 +5,6 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const LiveReloadPlugin = require('webpack-livereload-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

 module.exports = (env) => {
  const uiFolder = 'UI';
@@ -40,18 +38,13 @@ module.exports = (env) => {
    },

    resolve: {
-      extensions: [
-        '.ts',
-        '.tsx',
-        '.js'
-      ],
      modules: [
        srcFolder,
        path.join(srcFolder, 'Shims'),
        'node_modules'
      ],
      alias: {
-        jquery: 'jquery/dist/jquery.min'
+        jquery: 'jquery/src/jquery'
      },
      fallback: {
        buffer: false,
@@ -137,8 +130,6 @@ module.exports = (env) => {
        }
      }),

-      new ForkTsCheckerWebpackPlugin(),
-
      new LiveReloadPlugin()
    ],

@@ -162,7 +153,7 @@ module.exports = (env) => {
          }
        },
        {
-          test: [/\.jsx?$/, /\.tsx?$/],
+          test: /\.js?$/,
          exclude: /(node_modules|JsLibraries)/,
          use: [
            {
@@ -193,7 +184,6 @@ module.exports = (env) => {
          exclude: /(node_modules|globals.css)/,
          use: [
            { loader: MiniCssExtractPlugin.loader },
-            { loader: 'css-modules-typescript-loader' },
            {
              loader: 'css-loader',
              options: {
@@ -233,6 +223,7 @@ module.exports = (env) => {
            {
              loader: 'url-loader',
              options: {
+                limit: 24096,
                mimetype: 'application/font-woff',
                emitFile: false,
                name: 'Content/Fonts/[name].[ext]'
@@ -242,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]'
              }
@@ -261,19 +253,18 @@ module.exports = (env) => {
    config.resolve.alias['react-dom$'] = 'react-dom/profiling';
    config.resolve.alias['scheduler/tracing'] = 'scheduler/tracing-profiling';

-    config.optimization = {
-      minimize: true,
-      minimizer: [
-        new TerserPlugin({
-          terserOptions: {
-            sourceMap: true, // Must be set to true if using source-maps in production
-            mangle: false,
-            keep_classnames: true,
-            keep_fnames: true
-          }
-        })
-      ]
-    };
+    config.optimization.minimizer = [
+      new TerserPlugin({
+        cache: true,
+        parallel: true,
+        sourceMap: true, // Must be set to true if using source-maps in production
+        terserOptions: {
+          mangle: false,
+          keep_classnames: true,
+          keep_fnames: true
+        }
+      })
+    ];
  }

  return config;
--- a/frontend/build/webpack/css-variables-loader.js
+++ b/frontend/build/webpack/css-variables-loader.js
@@ -1,4 +1,3 @@
-// eslint-disable-next-line filenames/match-exported
 const loaderUtils = require('loader-utils');

 module.exports = function cssVariablesLoader(source) {
--- a/frontend/postcss.config.js
+++ b/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'
  ]
-};
+};
--- a/frontend/src/.vscode/settings.json
+++ b/frontend/src/.vscode/settings.json
@@ -0,0 +1,4 @@
+// Place your settings in this file to overwrite default and user settings.
+{
+  "files.insertFinalNewline": true
+}
--- a/frontend/src/Activity/Blocklist/BlocklistRow.css.d.ts
+++ b/frontend/src/Activity/Blocklist/BlocklistRow.css.d.ts
@@ -1,10 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'actions': string;
-  'indexer': string;
-  'language': string;
-  'quality': string;
-}
-export const cssExports: CssExports;
-export default cssExports;
--- a/frontend/src/Activity/History/Details/HistoryDetails.css.d.ts
+++ b/frontend/src/Activity/History/Details/HistoryDetails.css.d.ts
@@ -1,7 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'description': string;
-}
-export const cssExports: CssExports;
-export default cssExports;
--- a/frontend/src/Activity/History/Details/HistoryDetails.js
+++ b/frontend/src/Activity/History/Details/HistoryDetails.js
@@ -27,7 +27,6 @@ function HistoryDetails(props) {
      downloadClient,
      downloadClientName,
      downloadId,
-      movieMatchType,
      age,
      ageHours,
      ageMinutes,
@@ -74,16 +73,6 @@ function HistoryDetails(props) {
            </span>
        }

-        {
-          movieMatchType ?
-            <DescriptionListItem
-              descriptionClassName={styles.description}
-              title={translate('MovieMatchType')}
-              data={movieMatchType}
-            /> :
-            null
-        }
-
        {
          downloadClientNameInfo ?
            <DescriptionListItem
--- a/frontend/src/Activity/History/Details/HistoryDetailsModal.css.d.ts
+++ b/frontend/src/Activity/History/Details/HistoryDetailsModal.css.d.ts
@@ -1,7 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'markAsFailedButton': string;
-}
-export const cssExports: CssExports;
-export default cssExports;
--- a/frontend/src/Activity/History/HistoryEventTypeCell.css.d.ts
+++ b/frontend/src/Activity/History/HistoryEventTypeCell.css.d.ts
@@ -1,7 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'cell': string;
-}
-export const cssExports: CssExports;
-export default cssExports;
--- a/frontend/src/Activity/History/HistoryRow.css
+++ b/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';

--- a/frontend/src/Activity/History/HistoryRow.css.d.ts
+++ b/frontend/src/Activity/History/HistoryRow.css.d.ts
@@ -1,11 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'customFormatScore': string;
-  'details': string;
-  'downloadClient': string;
-  'indexer': string;
-  'releaseGroup': string;
-}
-export const cssExports: CssExports;
-export default cssExports;
--- a/frontend/src/Activity/History/HistoryRow.js
+++ b/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';
@@ -56,7 +55,6 @@ class HistoryRow extends Component {
      movie,
      quality,
      customFormats,
-      customFormatScore,
      languages,
      qualityCutoffNotMet,
      eventType,
@@ -170,17 +168,6 @@ class HistoryRow extends Component {
              );
            }

-            if (name === 'customFormatScore') {
-              return (
-                <TableRowCell
-                  key={name}
-                  className={styles.customFormatScore}
-                >
-                  {formatCustomFormatScore(customFormatScore)}
-                </TableRowCell>
-              );
-            }
-
            if (name === 'releaseGroup') {
              return (
                <TableRowCell
@@ -242,9 +229,8 @@ HistoryRow.propTypes = {
  movie: PropTypes.object.isRequired,
  languages: PropTypes.arrayOf(PropTypes.object).isRequired,
  quality: PropTypes.object.isRequired,
-  customFormats: PropTypes.arrayOf(PropTypes.object),
-  customFormatScore: PropTypes.number.isRequired,
  qualityCutoffNotMet: PropTypes.bool.isRequired,
+  customFormats: PropTypes.arrayOf(PropTypes.object).isRequired,
  eventType: PropTypes.string.isRequired,
  sourceTitle: PropTypes.string.isRequired,
  date: PropTypes.string.isRequired,
--- a/frontend/src/Activity/Queue/ProtocolLabel.css
+++ b/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;
 }
--- a/frontend/src/Activity/Queue/ProtocolLabel.css.d.ts
+++ b/frontend/src/Activity/Queue/ProtocolLabel.css.d.ts
@@ -1,8 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'torrent': string;
-  'usenet': string;
-}
-export const cssExports: CssExports;
-export default cssExports;
--- a/frontend/src/Activity/Queue/Queue.js
+++ b/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;
-    }
-
-    if (!_.isEmpty(nextState)) {
-      this.setState(nextState);
+      this.setState({ isPendingSelected });
    }
  }

@@ -224,29 +214,26 @@ class Queue extends Component {

        <PageContentBody>
          {
-            isRefreshing && !isAllPopulated ?
-              <LoadingIndicator /> :
-              null
+            isRefreshing && !isAllPopulated &&
+              <LoadingIndicator />
          }

          {
-            !isRefreshing && hasError ?
+            !isRefreshing && hasError &&
              <div>
                {translate('FailedToLoadQueue')}
-              </div> :
-              null
+              </div>
          }

          {
-            isAllPopulated && !hasError && !items.length ?
+            isAllPopulated && !hasError && !items.length &&
              <div>
                {translate('QueueIsEmpty')}
-              </div> :
-              null
+              </div>
          }

          {
-            isAllPopulated && !hasError && !!items.length ?
+            isAllPopulated && !hasError && !!items.length &&
              <div>
                <Table
                  columns={columns}
@@ -281,8 +268,7 @@ class Queue extends Component {
                  isFetching={isRefreshing}
                  {...otherProps}
                />
-              </div> :
-              null
+              </div>
          }
        </PageContentBody>

--- a/frontend/src/Activity/Queue/QueueRow.css.d.ts
+++ b/frontend/src/Activity/Queue/QueueRow.css.d.ts
@@ -1,10 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'actions': string;
-  'progress': string;
-  'protocol': string;
-  'quality': string;
-}
-export const cssExports: CssExports;
-export default cssExports;
--- a/frontend/src/Activity/Queue/QueueRow.js
+++ b/frontend/src/Activity/Queue/QueueRow.js
@@ -128,7 +128,6 @@ class QueueRow extends Component {

        {
          columns.map((column) => {
-
            const {
              name,
              isVisible
@@ -235,16 +234,6 @@ class QueueRow extends Component {
              );
            }

-            if (name === 'year') {
-              return (
-                <TableRowCell key={name}>
-                  {
-                    movie ? movie.year : ''
-                  }
-                </TableRowCell>
-              );
-            }
-
            if (name === 'title') {
              return (
                <TableRowCell key={name}>
@@ -373,7 +362,6 @@ QueueRow.propTypes = {
  estimatedCompletionTime: PropTypes.string,
  timeleft: PropTypes.string,
  size: PropTypes.number,
-  year: PropTypes.number,
  sizeleft: PropTypes.number,
  showRelativeDates: PropTypes.bool.isRequired,
  shortDateFormat: PropTypes.string.isRequired,
--- a/frontend/src/Activity/Queue/QueueStatusCell.css.d.ts
+++ b/frontend/src/Activity/Queue/QueueStatusCell.css.d.ts
@@ -1,7 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'status': string;
-}
-export const cssExports: CssExports;
-export default cssExports;
--- a/frontend/src/Activity/Queue/RemoveQueueItemsModal.css.d.ts
+++ b/frontend/src/Activity/Queue/RemoveQueueItemsModal.css.d.ts
@@ -1,7 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'message': string;
-}
-export const cssExports: CssExports;
-export default cssExports;
--- a/frontend/src/Activity/Queue/TimeleftCell.css.d.ts
+++ b/frontend/src/Activity/Queue/TimeleftCell.css.d.ts
@@ -1,7 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'timeleft': string;
-}
-export const cssExports: CssExports;
-export default cssExports;
--- a/frontend/src/AddMovie/AddNewMovie/AddNewMovie.css
+++ b/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;
--- a/frontend/src/AddMovie/AddNewMovie/AddNewMovie.css.d.ts
+++ b/frontend/src/AddMovie/AddNewMovie/AddNewMovie.css.d.ts
@@ -1,15 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'clearLookupButton': string;
-  'helpText': string;
-  'message': string;
-  'noMoviesText': string;
-  'noResults': string;
-  'searchContainer': string;
-  'searchIconContainer': string;
-  'searchInput': string;
-  'searchResults': string;
-}
-export const cssExports: CssExports;
-export default cssExports;
--- a/frontend/src/AddMovie/AddNewMovie/AddNewMovieModalContent.css
+++ b/frontend/src/AddMovie/AddNewMovie/AddNewMovieModalContent.css
@@ -4,7 +4,7 @@

 .year {
  margin-left: 5px;
-  color: var(--disabledColor);
+  color: $disabledColor;
 }

 .poster {
--- a/frontend/src/AddMovie/AddNewMovie/AddNewMovieModalContent.css.d.ts
+++ b/frontend/src/AddMovie/AddNewMovie/AddNewMovieModalContent.css.d.ts
@@ -1,18 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'addButton': string;
-  'container': string;
-  'info': string;
-  'labelIcon': string;
-  'modalFooter': string;
-  'overview': string;
-  'poster': string;
-  'searchForMissingMovieContainer': string;
-  'searchForMissingMovieInput': string;
-  'searchForMissingMovieLabel': string;
-  'searchForMissingMovieLabelContainer': string;
-  'year': string;
-}
-export const cssExports: CssExports;
-export default cssExports;
--- a/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.css
+++ b/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;
 }

--- a/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.css.d.ts
+++ b/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.css.d.ts
@@ -1,24 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'alreadyExistsIcon': string;
-  'certification': string;
-  'content': string;
-  'exclusionIcon': string;
-  'icons': string;
-  'links': string;
-  'overlay': string;
-  'overview': string;
-  'poster': string;
-  'posterContainer': string;
-  'runtime': string;
-  'searchResult': string;
-  'statusContainer': string;
-  'title': string;
-  'titleContainer': string;
-  'titleRow': string;
-  'underlay': string;
-  'year': string;
-}
-export const cssExports: CssExports;
-export default cssExports;
--- a/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.js
+++ b/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.js
@@ -113,7 +113,6 @@ class AddNewMovieSearchResult extends Component {
                    images={images}
                    size={250}
                    overflow={true}
-                    lazy={false}
                  />
                </div>

@@ -123,7 +122,7 @@ class AddNewMovieSearchResult extends Component {
                      monitored={monitored}
                      hasFile={hasFile}
                      status={status}
-                      width={posterWidth}
+                      posterWidth={posterWidth}
                      detailedProgressBar={true}
                      queueStatus={queueStatus}
                      queueState={queueState}
--- a/frontend/src/AddMovie/ImportMovie/Import/ImportMovie.js
+++ b/frontend/src/AddMovie/ImportMovie/Import/ImportMovie.js
@@ -1,10 +1,10 @@
-import { reduce } from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
 import translate from 'Utilities/String/translate';
+import getSelectedIds from 'Utilities/Table/getSelectedIds';
 import selectAll from 'Utilities/Table/selectAll';
 import toggleSelected from 'Utilities/Table/toggleSelected';
 import ImportMovieFooterConnector from './ImportMovieFooterConnector';
@@ -18,8 +18,6 @@ class ImportMovie extends Component {
  constructor(props, context) {
    super(props, context);

-    this.scrollerRef = React.createRef();
-
    this.state = {
      allSelected: false,
      allUnselected: false,
@@ -29,21 +27,18 @@ class ImportMovie extends Component {
    };
  }

+  //
+  // Control
+
+  setScrollerRef = (ref) => {
+    this.setState({ scroller: ref });
+  };
+
  //
  // Listeners

  getSelectedIds = () => {
-    return reduce(
-      this.state.selectedState,
-      (result, value, id) => {
-        if (value) {
-          result.push(id);
-        }
-
-        return result;
-      },
-      []
-    );
+    return getSelectedIds(this.state.selectedState, { parseIds: false });
  };

  onSelectAllChange = ({ value }) => {
@@ -93,12 +88,16 @@ class ImportMovie extends Component {
    const {
      allSelected,
      allUnselected,
-      selectedState
+      selectedState,
+      scroller
    } = this.state;

    return (
      <PageContent title={translate('ImportMovies')}>
-        <PageContentBody ref={this.scrollerRef} >
+        <PageContentBody
+          registerScroller={this.setScrollerRef}
+          onScroll={this.onScroll}
+        >
          {
            rootFoldersFetching ? <LoadingIndicator /> : null
          }
@@ -127,14 +126,14 @@ class ImportMovie extends Component {
            !rootFoldersFetching &&
            rootFoldersPopulated &&
            !!unmappedFolders.length &&
-            this.scrollerRef.current ?
+            scroller ?
              <ImportMovieTableConnector
                rootFolderId={rootFolderId}
                unmappedFolders={unmappedFolders}
                allSelected={allSelected}
                allUnselected={allUnselected}
                selectedState={selectedState}
-                scroller={this.scrollerRef.current}
+                scroller={scroller}
                onSelectAllChange={this.onSelectAllChange}
                onSelectedChange={this.onSelectedChange}
                onRemoveSelectedStateItem={this.onRemoveSelectedStateItem}
--- a/frontend/src/AddMovie/ImportMovie/Import/ImportMovieFooter.css
+++ b/frontend/src/AddMovie/ImportMovie/Import/ImportMovieFooter.css
@@ -1,14 +1,6 @@
 .inputContainer {
  margin-right: 20px;
  min-width: 150px;
-
-  div {
-    margin-top: 10px;
-
-    &:first-child {
-      margin-top: 0;
-    }
-  }
 }

 .label {
@@ -43,17 +35,3 @@
 .importError {
  margin-left: 10px;
 }
-
-@media only screen and (max-width: $breakpointSmall) {
-  .inputContainer {
-    margin-top: 10px;
-
-    &:first-child {
-      margin-top: 0;
-    }
-  }
-
-  .importButtonContainer {
-    margin-top: 10px;
-  }
-}
--- a/frontend/src/AddMovie/ImportMovie/Import/ImportMovieFooter.css.d.ts
+++ b/frontend/src/AddMovie/ImportMovie/Import/ImportMovieFooter.css.d.ts
@@ -1,13 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'importButton': string;
-  'importButtonContainer': string;
-  'importError': string;
-  'inputContainer': string;
-  'label': string;
-  'loading': string;
-  'loadingButton': string;
-}
-export const cssExports: CssExports;
-export default cssExports;
--- a/frontend/src/AddMovie/ImportMovie/Import/ImportMovieFooter.js
+++ b/frontend/src/AddMovie/ImportMovie/Import/ImportMovieFooter.js
@@ -225,19 +225,13 @@ class ImportMovieFooter extends Component {
                  body={
                    <ul>
                      {
-                        Array.isArray(importError.responseJSON) ?
-                          importError.responseJSON.map((error, index) => {
-                            return (
-                              <li key={index}>
-                                {error.errorMessage}
-                              </li>
-                            );
-                          }) :
-                          <li>
-                            {
-                              JSON.stringify(importError.responseJSON)
-                            }
-                          </li>
+                        importError.responseJSON.map((error, index) => {
+                          return (
+                            <li key={index}>
+                              {error.errorMessage}
+                            </li>
+                          );
+                        })
                      }
                    </ul>
                  }
--- a/frontend/src/AddMovie/ImportMovie/Import/ImportMovieHeader.css.d.ts
+++ b/frontend/src/AddMovie/ImportMovie/Import/ImportMovieHeader.css.d.ts
@@ -1,12 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'detailsIcon': string;
-  'folder': string;
-  'minimumAvailability': string;
-  'monitor': string;
-  'movie': string;
-  'qualityProfile': string;
-}
-export const cssExports: CssExports;
-export default cssExports;
--- a/frontend/src/AddMovie/ImportMovie/Import/ImportMovieRow.css.d.ts
+++ b/frontend/src/AddMovie/ImportMovie/Import/ImportMovieRow.css.d.ts
@@ -1,12 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'folder': string;
-  'minimumAvailability': string;
-  'monitor': string;
-  'movie': string;
-  'qualityProfile': string;
-  'selectInput': string;
-}
-export const cssExports: CssExports;
-export default cssExports;
--- a/frontend/src/AddMovie/ImportMovie/Import/SelectMovie/ImportMovieSearchResult.css
+++ b/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 {
--- a/frontend/src/AddMovie/ImportMovie/Import/SelectMovie/ImportMovieSearchResult.css.d.ts
+++ b/frontend/src/AddMovie/ImportMovie/Import/SelectMovie/ImportMovieSearchResult.css.d.ts
@@ -1,10 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'container': string;
-  'movie': string;
-  'tmdbLink': string;
-  'tmdbLinkIcon': string;
-}
-export const cssExports: CssExports;
-export default cssExports;
--- a/frontend/src/AddMovie/ImportMovie/Import/SelectMovie/ImportMovieSelectMovie.css
+++ b/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;
 }
--- a/frontend/src/AddMovie/ImportMovie/Import/SelectMovie/ImportMovieSelectMovie.css.d.ts
+++ b/frontend/src/AddMovie/ImportMovie/Import/SelectMovie/ImportMovieSelectMovie.css.d.ts
@@ -1,16 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'button': string;
-  'content': string;
-  'contentContainer': string;
-  'dropdownArrowContainer': string;
-  'existing': string;
-  'loading': string;
-  'searchContainer': string;
-  'searchIconContainer': string;
-  'searchInput': string;
-  'warningIcon': string;
-}
-export const cssExports: CssExports;
-export default cssExports;
--- a/frontend/src/AddMovie/ImportMovie/Import/SelectMovie/ImportMovieTitle.css
+++ b/frontend/src/AddMovie/ImportMovie/Import/SelectMovie/ImportMovieTitle.css
@@ -9,7 +9,7 @@

 .year {
  margin-left: 5px;
-  color: var(--disabledColor);
+  color: $disabledColor;
 }

 .existing {
--- a/frontend/src/AddMovie/ImportMovie/Import/SelectMovie/ImportMovieTitle.css.d.ts
+++ b/frontend/src/AddMovie/ImportMovie/Import/SelectMovie/ImportMovieTitle.css.d.ts
@@ -1,10 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'existing': string;
-  'title': string;
-  'titleContainer': string;
-  'year': string;
-}
-export const cssExports: CssExports;
-export default cssExports;
--- a/frontend/src/AddMovie/ImportMovie/SelectFolder/ImportMovieRootFolderRow.css.d.ts
+++ b/frontend/src/AddMovie/ImportMovie/SelectFolder/ImportMovieRootFolderRow.css.d.ts
@@ -1,10 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'actions': string;
-  'freeSpace': string;
-  'link': string;
-  'unmappedFolders': string;
-}
-export const cssExports: CssExports;
-export default cssExports;
--- a/frontend/src/AddMovie/ImportMovie/SelectFolder/ImportMovieSelectFolder.css.d.ts
+++ b/frontend/src/AddMovie/ImportMovie/SelectFolder/ImportMovieSelectFolder.css.d.ts
@@ -1,14 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'addErrorAlert': string;
-  'code': string;
-  'header': string;
-  'importButtonIcon': string;
-  'recentFolders': string;
-  'startImport': string;
-  'tip': string;
-  'tips': string;
-}
-export const cssExports: CssExports;
-export default cssExports;
--- a/frontend/src/AddMovie/ImportMovie/SelectFolder/ImportMovieSelectFolder.js
+++ b/frontend/src/AddMovie/ImportMovie/SelectFolder/ImportMovieSelectFolder.js
@@ -152,19 +152,13 @@ class ImportMovieSelectFolder extends Component {

                      <ul>
                        {
-                          Array.isArray(saveError.responseJSON) ?
-                            saveError.responseJSON.map((e, index) => {
-                              return (
-                                <li key={index}>
-                                  {e.errorMessage}
-                                </li>
-                              );
-                            }) :
-                            <li>
-                              {
-                                JSON.stringify(saveError.responseJSON)
-                              }
-                            </li>
+                          saveError.responseJSON.map((e, index) => {
+                            return (
+                              <li key={index}>
+                                {e.errorMessage}
+                              </li>
+                            );
+                          })
                        }
                      </ul>
                    </Alert> :
--- a/frontend/src/App/App.js
+++ b/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>
--- a/frontend/src/App/AppRoutes.js
+++ b/frontend/src/App/AppRoutes.js
@@ -12,7 +12,7 @@ import NotFound from 'Components/NotFound';
 import Switch from 'Components/Router/Switch';
 import DiscoverMovieConnector from 'DiscoverMovie/DiscoverMovieConnector';
 import MovieDetailsPageConnector from 'Movie/Details/MovieDetailsPageConnector';
-import MovieIndex from 'Movie/Index/MovieIndex';
+import MovieIndexConnector from 'Movie/Index/MovieIndexConnector';
 import CustomFormatSettingsConnector from 'Settings/CustomFormats/CustomFormatSettingsConnector';
 import DownloadClientSettingsConnector from 'Settings/DownloadClients/DownloadClientSettingsConnector';
 import GeneralSettingsConnector from 'Settings/General/GeneralSettingsConnector';
@@ -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';
@@ -48,7 +48,7 @@ function AppRoutes(props) {
      <Route
        exact={true}
        path="/"
-        component={MovieIndex}
+        component={MovieIndexConnector}
      />

      {
@@ -143,7 +143,7 @@ function AppRoutes(props) {

      <Route
        path="/settings/quality"
-        component={QualityConnector}
+        component={Quality}
      />

      <Route
--- a/frontend/src/App/AppUpdatedModalContent.css.d.ts
+++ b/frontend/src/App/AppUpdatedModalContent.css.d.ts
@@ -1,9 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'changes': string;
-  'maintenance': string;
-  'version': string;
-}
-export const cssExports: CssExports;
-export default cssExports;
--- a/frontend/src/App/ApplyTheme.js
+++ b/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);
--- a/frontend/src/App/ConnectionLostModal.css.d.ts
+++ b/frontend/src/App/ConnectionLostModal.css.d.ts
@@ -1,7 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'automatic': string;
-}
-export const cssExports: CssExports;
-export default cssExports;
--- a/frontend/src/App/ModelBase.ts
+++ b/frontend/src/App/ModelBase.ts
@@ -1,5 +0,0 @@
-interface ModelBase {
-  id: number;
-}
-
-export default ModelBase;
--- a/frontend/src/App/SelectContext.tsx
+++ b/frontend/src/App/SelectContext.tsx
@@ -1,83 +0,0 @@
-import { cloneDeep } from 'lodash';
-import React, { useCallback, useEffect } from 'react';
-import useSelectState, { SelectState } from 'Helpers/Hooks/useSelectState';
-import ModelBase from './ModelBase';
-
-export type SelectContextAction =
-  | { type: 'reset' }
-  | { type: 'selectAll' }
-  | { type: 'unselectAll' }
-  | {
-      type: 'toggleSelected';
-      id: number;
-      isSelected: boolean;
-      shiftKey: boolean;
-    }
-  | {
-      type: 'removeItem';
-      id: number;
-    }
-  | {
-      type: 'updateItems';
-      items: ModelBase[];
-    };
-
-export type SelectDispatch = (action: SelectContextAction) => void;
-
-interface SelectProviderOptions<T extends ModelBase> {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  children: any;
-  items: Array<T>;
-}
-
-const SelectContext = React.createContext<
-  [SelectState, SelectDispatch] | undefined
->(cloneDeep(undefined));
-
-export function SelectProvider<T extends ModelBase>(
-  props: SelectProviderOptions<T>
-) {
-  const { items } = props;
-  const [state, dispatch] = useSelectState();
-
-  const dispatchWrapper = useCallback(
-    (action: SelectContextAction) => {
-      switch (action.type) {
-        case 'reset':
-        case 'removeItem':
-          dispatch(action);
-          break;
-
-        default:
-          dispatch({
-            ...action,
-            items,
-          });
-          break;
-      }
-    },
-    [items, dispatch]
-  );
-
-  const value: [SelectState, SelectDispatch] = [state, dispatchWrapper];
-
-  useEffect(() => {
-    dispatch({ type: 'updateItems', items });
-  }, [items, dispatch]);
-
-  return (
-    <SelectContext.Provider value={value}>
-      {props.children}
-    </SelectContext.Provider>
-  );
-}
-
-export function useSelect() {
-  const context = React.useContext(SelectContext);
-
-  if (context === undefined) {
-    throw new Error('useSelect must be used within a SelectProvider');
-  }
-
-  return context;
-}
--- a/frontend/src/App/State/AppSectionState.ts
+++ b/frontend/src/App/State/AppSectionState.ts
@@ -1,48 +0,0 @@
-import SortDirection from 'Helpers/Props/SortDirection';
-
-export interface Error {
-  responseJSON: {
-    message: string;
-  };
-}
-
-export interface AppSectionDeleteState {
-  isDeleting: boolean;
-  deleteError: Error;
-}
-
-export interface AppSectionSaveState {
-  isSaving: boolean;
-  saveError: Error;
-}
-
-export interface PagedAppSectionState {
-  pageSize: number;
-}
-
-export interface AppSectionSchemaState<T> {
-  isSchemaFetching: boolean;
-  isSchemaPopulated: boolean;
-  schemaError: Error;
-  schema: {
-    items: T[];
-  };
-}
-
-export interface AppSectionItemState<T> {
-  isFetching: boolean;
-  isPopulated: boolean;
-  error: Error;
-  item: T;
-}
-
-interface AppSectionState<T> {
-  isFetching: boolean;
-  isPopulated: boolean;
-  error: Error;
-  items: T[];
-  sortKey: string;
-  sortDirection: SortDirection;
-}
-
-export default AppSectionState;
--- a/frontend/src/App/State/AppState.ts
+++ b/frontend/src/App/State/AppState.ts
@@ -1,50 +0,0 @@
-import InteractiveImportAppState from 'App/State/InteractiveImportAppState';
-import MovieFilesAppState from './MovieFilesAppState';
-import MoviesAppState, { MovieIndexAppState } from './MoviesAppState';
-import QueueAppState from './QueueAppState';
-import SettingsAppState from './SettingsAppState';
-import TagsAppState from './TagsAppState';
-
-interface FilterBuilderPropOption {
-  id: string;
-  name: string;
-}
-
-export interface FilterBuilderProp<T> {
-  name: string;
-  label: string;
-  type: string;
-  valueType?: string;
-  optionsSelector?: (items: T[]) => FilterBuilderPropOption[];
-}
-
-export interface PropertyFilter {
-  key: string;
-  value: boolean | string | number | string[] | number[];
-  type: string;
-}
-
-export interface Filter {
-  key: string;
-  label: string;
-  filers: PropertyFilter[];
-}
-
-export interface CustomFilter {
-  id: number;
-  type: string;
-  label: string;
-  filers: PropertyFilter[];
-}
-
-interface AppState {
-  movieFiles: MovieFilesAppState;
-  interactiveImport: InteractiveImportAppState;
-  movieIndex: MovieIndexAppState;
-  settings: SettingsAppState;
-  movies: MoviesAppState;
-  tags: TagsAppState;
-  queue: QueueAppState;
-}
-
-export default AppState;
--- a/frontend/src/App/State/ClientSideCollectionAppState.ts
+++ b/frontend/src/App/State/ClientSideCollectionAppState.ts
@@ -1,8 +0,0 @@
-import { CustomFilter } from './AppState';
-
-interface ClientSideCollectionAppState {
-  totalItems: number;
-  customFilters: CustomFilter[];
-}
-
-export default ClientSideCollectionAppState;
--- a/frontend/src/App/State/CustomFiltersAppState.ts
+++ b/frontend/src/App/State/CustomFiltersAppState.ts
@@ -1,10 +0,0 @@
-import AppSectionState, {
-  AppSectionDeleteState,
-} from 'App/State/AppSectionState';
-import { CustomFilter } from './AppState';
-
-interface CustomFiltersAppState
-  extends AppSectionState<CustomFilter>,
-    AppSectionDeleteState {}
-
-export default CustomFiltersAppState;
--- a/frontend/src/App/State/InteractiveImportAppState.ts
+++ b/frontend/src/App/State/InteractiveImportAppState.ts
@@ -1,12 +0,0 @@
-import AppSectionState from 'App/State/AppSectionState';
-import RecentFolder from 'InteractiveImport/Folder/RecentFolder';
-import ImportMode from '../../InteractiveImport/ImportMode';
-import InteractiveImport from '../../InteractiveImport/InteractiveImport';
-
-interface InteractiveImportAppState extends AppSectionState<InteractiveImport> {
-  originalItems: InteractiveImport[];
-  importMode: ImportMode;
-  recentFolders: RecentFolder[];
-}
-
-export default InteractiveImportAppState;
--- a/frontend/src/App/State/MovieFilesAppState.ts
+++ b/frontend/src/App/State/MovieFilesAppState.ts
@@ -1,10 +0,0 @@
-import AppSectionState, {
-  AppSectionDeleteState,
-} from 'App/State/AppSectionState';
-import { MovieFile } from 'MovieFile/MovieFile';
-
-interface MovieFilesAppState
-  extends AppSectionState<MovieFile>,
-    AppSectionDeleteState {}
-
-export default MovieFilesAppState;
--- a/frontend/src/App/State/MoviesAppState.ts
+++ b/frontend/src/App/State/MoviesAppState.ts
@@ -1,61 +0,0 @@
-import AppSectionState, {
-  AppSectionDeleteState,
-  AppSectionSaveState,
-} from 'App/State/AppSectionState';
-import Column from 'Components/Table/Column';
-import SortDirection from 'Helpers/Props/SortDirection';
-import Movie from 'Movie/Movie';
-import { Filter, FilterBuilderProp } from './AppState';
-
-export interface MovieIndexAppState {
-  sortKey: string;
-  sortDirection: SortDirection;
-  secondarySortKey: string;
-  secondarySortDirection: SortDirection;
-  view: string;
-
-  posterOptions: {
-    detailedProgressBar: boolean;
-    size: string;
-    showTitle: boolean;
-    showMonitored: boolean;
-    showQualityProfile: boolean;
-    showReleaseDate: boolean;
-    showCinemaRelease: boolean;
-    showSearchAction: boolean;
-  };
-
-  overviewOptions: {
-    detailedProgressBar: boolean;
-    size: string;
-    showMonitored: boolean;
-    showStudio: boolean;
-    showQualityProfile: boolean;
-    showAdded: boolean;
-    showPath: boolean;
-    showSizeOnDisk: boolean;
-    showSearchAction: boolean;
-  };
-
-  tableOptions: {
-    showSearchAction: boolean;
-  };
-
-  selectedFilterKey: string;
-  filterBuilderProps: FilterBuilderProp<Movie>[];
-  filters: Filter[];
-  columns: Column[];
-}
-
-interface MoviesAppState
-  extends AppSectionState<Movie>,
-    AppSectionDeleteState,
-    AppSectionSaveState {
-  itemMap: Record<number, number>;
-
-  deleteOptions: {
-    addImportExclusion: boolean;
-  };
-}
-
-export default MoviesAppState;
--- a/frontend/src/App/State/QueueAppState.ts
+++ b/frontend/src/App/State/QueueAppState.ts
@@ -1,51 +0,0 @@
-import ModelBase from 'App/ModelBase';
-import Language from 'Language/Language';
-import { QualityModel } from 'Quality/Quality';
-import CustomFormat from 'typings/CustomFormat';
-import AppSectionState, { AppSectionItemState, Error } from './AppSectionState';
-
-export interface StatusMessage {
-  title: string;
-  messages: string[];
-}
-
-export interface Queue extends ModelBase {
-  languages: Language[];
-  quality: QualityModel;
-  customFormats: CustomFormat[];
-  size: number;
-  title: string;
-  sizeleft: number;
-  timeleft: string;
-  estimatedCompletionTime: string;
-  status: string;
-  trackedDownloadStatus: string;
-  trackedDownloadState: string;
-  statusMessages: StatusMessage[];
-  errorMessage: string;
-  downloadId: string;
-  protocol: string;
-  downloadClient: string;
-  outputPath: string;
-  movieHasFile: boolean;
-  movieId?: number;
-}
-
-export interface QueueDetailsAppState extends AppSectionState<Queue> {
-  params: unknown;
-}
-
-export interface QueuePagedAppState extends AppSectionState<Queue> {
-  isGrabbing: boolean;
-  grabError: Error;
-  isRemoving: boolean;
-  removeError: Error;
-}
-
-interface QueueAppState {
-  status: AppSectionItemState<Queue>;
-  details: QueueDetailsAppState;
-  paged: QueuePagedAppState;
-}
-
-export default QueueAppState;
--- a/frontend/src/App/State/SettingsAppState.ts
+++ b/frontend/src/App/State/SettingsAppState.ts
@@ -1,28 +0,0 @@
-import AppSectionState, {
-  AppSectionDeleteState,
-  AppSectionSchemaState,
-} from 'App/State/AppSectionState';
-import Language from 'Language/Language';
-import DownloadClient from 'typings/DownloadClient';
-import QualityProfile from 'typings/QualityProfile';
-import { UiSettings } from 'typings/UiSettings';
-
-export interface DownloadClientAppState
-  extends AppSectionState<DownloadClient>,
-    AppSectionDeleteState {}
-
-export interface QualityProfilesAppState
-  extends AppSectionState<QualityProfile>,
-    AppSectionSchemaState<QualityProfile> {}
-
-export type LanguageSettingsAppState = AppSectionState<Language>;
-export type UiSettingsAppState = AppSectionState<UiSettings>;
-
-interface SettingsAppState {
-  downloadClients: DownloadClientAppState;
-  language: LanguageSettingsAppState;
-  uiSettings: UiSettingsAppState;
-  qualityProfiles: QualityProfilesAppState;
-}
-
-export default SettingsAppState;
--- a/frontend/src/App/State/TagsAppState.ts
+++ b/frontend/src/App/State/TagsAppState.ts
@@ -1,12 +0,0 @@
-import ModelBase from 'App/ModelBase';
-import AppSectionState, {
-  AppSectionDeleteState,
-} from 'App/State/AppSectionState';
-
-export interface Tag extends ModelBase {
-  label: string;
-}
-
-interface TagsAppState extends AppSectionState<Tag>, AppSectionDeleteState {}
-
-export default TagsAppState;
--- a/frontend/src/Calendar/Agenda/Agenda.css.d.ts
+++ b/frontend/src/Calendar/Agenda/Agenda.css.d.ts
@@ -1,7 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'agenda': string;
-}
-export const cssExports: CssExports;
-export default cssExports;
--- a/frontend/src/Calendar/Agenda/AgendaEvent.css
+++ b/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;
  }
 }

--- a/frontend/src/Calendar/Agenda/AgendaEvent.css.d.ts
+++ b/frontend/src/Calendar/Agenda/AgendaEvent.css.d.ts
@@ -1,21 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'continuing': string;
-  'date': string;
-  'dateIcon': string;
-  'downloaded': string;
-  'event': string;
-  'eventWrapper': string;
-  'genres': string;
-  'link': string;
-  'missingMonitored': string;
-  'missingUnmonitored': string;
-  'movieTitle': string;
-  'queue': string;
-  'statusIcon': string;
-  'time': string;
-  'unmonitored': string;
-}
-export const cssExports: CssExports;
-export default cssExports;
--- a/frontend/src/Calendar/Calendar.css.d.ts
+++ b/frontend/src/Calendar/Calendar.css.d.ts
@@ -1,8 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'calendar': string;
-  'calendarContent': string;
-}
-export const cssExports: CssExports;
-export default cssExports;
--- a/frontend/src/Calendar/CalendarPage.css.d.ts
+++ b/frontend/src/Calendar/CalendarPage.css.d.ts
@@ -1,9 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'calendarInnerPageBody': string;
-  'calendarPageBody': string;
-  'errorMessage': string;
-}
-export const cssExports: CssExports;
-export default cssExports;
--- a/frontend/src/Calendar/Day/CalendarDay.css
+++ b/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;
 }
--- a/frontend/src/Calendar/Day/CalendarDay.css.d.ts
+++ b/frontend/src/Calendar/Day/CalendarDay.css.d.ts
@@ -1,11 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'day': string;
-  'dayOfMonth': string;
-  'isDifferentMonth': string;
-  'isSingleDay': string;
-  'isToday': string;
-}
-export const cssExports: CssExports;
-export default cssExports;
--- a/frontend/src/Calendar/Day/CalendarDays.css
+++ b/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,
--- a/frontend/src/Calendar/Day/CalendarDays.css.d.ts
+++ b/frontend/src/Calendar/Day/CalendarDays.css.d.ts
@@ -1,11 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'day': string;
-  'days': string;
-  'forecast': string;
-  'month': string;
-  'week': string;
-}
-export const cssExports: CssExports;
-export default cssExports;
--- a/frontend/src/Calendar/Day/DayOfWeek.css
+++ b/frontend/src/Calendar/Day/DayOfWeek.css
@@ -1,6 +1,6 @@
 .dayOfWeek {
  flex: 1 0 14.28%;
-  background-color: var(--calendarBackgroundColor);
+  background-color: #e4eaec;
  text-align: center;
 }

@@ -9,5 +9,5 @@
 }

 .isToday {
-  background-color: var(--calendarTodayBackgroundColor);
+  background-color: $calendarTodayBackgroundColor;
 }
--- a/frontend/src/Calendar/Day/DayOfWeek.css.d.ts
+++ b/frontend/src/Calendar/Day/DayOfWeek.css.d.ts
@@ -1,9 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'dayOfWeek': string;
-  'isSingleDay': string;
-  'isToday': string;
-}
-export const cssExports: CssExports;
-export default cssExports;
--- a/frontend/src/Calendar/Day/DaysOfWeek.css.d.ts
+++ b/frontend/src/Calendar/Day/DaysOfWeek.css.d.ts
@@ -1,7 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'daysOfWeek': string;
-}
-export const cssExports: CssExports;
-export default cssExports;
--- a/frontend/src/Calendar/Events/CalendarEvent.css
+++ b/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;
 }
--- a/frontend/src/Calendar/Events/CalendarEvent.css.d.ts
+++ b/frontend/src/Calendar/Events/CalendarEvent.css.d.ts
@@ -1,19 +0,0 @@
-// This file is automatically generated.
-// Please do not change this file!
-interface CssExports {
-  'continuing': string;
-  'downloaded': string;
-  'event': string;
-  'genres': string;
-  'info': string;
-  'link': string;
-  'missingMonitored': string;
-  'missingUnmonitored': string;
-  'movieInfo': string;
-  'movieTitle': string;
-  'queue': string;
-  'statusIcon': string;
-  'unmonitored': string;
-}
-export const cssExports: CssExports;
-export default cssExports;
--- a/Show More
+++ b/Show More