Fixed: Handle wonky timestamps from Orpheus

2026-03-14 16:04:26 -04:00 · 2022-04-08 04:14:26 +01:00
472 changed files with 14778 additions and 65982 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:warning
-dotnet_style_qualification_for_property = false:warning
-dotnet_style_qualification_for_method = false:warning
-dotnet_style_qualification_for_event = false:warning
+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

 # Indentation preferences
 csharp_indent_block_contents = true
@@ -32,6 +32,10 @@ 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 = _

--- a/README.md
+++ b/README.md
@@ -27,7 +27,10 @@ Prowlarr is an indexer manager/proxy built on the popular \*arr .net/reactjs bas

 ## Support

+Note: Prowlarr is currently early in life, thus bugs should be expected
+
 [![Wiki](https://img.shields.io/badge/servarr-wiki-181717.svg?maxAge=60)](https://wiki.servarr.com/prowlarr)
+
 [![Discord](https://img.shields.io/badge/discord-chat-7289DA.svg?maxAge=60)](https://prowlarr.com/discord)
 [![Reddit](https://img.shields.io/badge/reddit-discussion-FF4500.svg?maxAge=60)](https://www.reddit.com/r/Prowlarr)

--- a/azure-pipelines.yml
+++ b/azure-pipelines.yml
@@ -7,20 +7,16 @@ variables:
  outputFolder: './_output'
  artifactsFolder: './_artifacts'
  testsFolder: './_tests'
-  yarnCacheFolder: $(Pipeline.Workspace)/.yarn
-  nugetCacheFolder: $(Pipeline.Workspace)/.nuget/packages
-  majorVersion: '0.4.4'
+  majorVersion: '0.2.0'
  minorVersion: $[counter('minorVersion', 1)]
  prowlarrVersion: '$(majorVersion).$(minorVersion)'
  buildName: '$(Build.SourceBranchName).$(prowlarrVersion)'
  sentryOrg: 'servarr'
  sentryUrl: 'https://sentry.servarr.com'
-  dotnetVersion: '6.0.301'
+  dotnetVersion: '6.0.201'
  innoVersion: '6.2.0'
  nodeVersion: '16.x'
-  windowsImage: 'windows-2022'
-  linuxImage: 'ubuntu-20.04'
-  macImage: 'macOS-11'
+  yarnCacheFolder: $(Pipeline.Workspace)/.yarn

 trigger:
  branches:
@@ -44,7 +40,7 @@ stages:
    - job:
      displayName: Build Variables
      pool:
-        vmImage: ${{ variables.linuxImage }}
+        vmImage: 'ubuntu-18.04'
      steps:
      # Set the build name properly.  The 'name' property won't recursively expand so hack here:
      - bash: echo "##vso[build.updatebuildnumber]$PROWLARRVERSION"
@@ -70,15 +66,15 @@ stages:
        matrix:
          Linux:
            osName: 'Linux'
-            imageName: ${{ variables.linuxImage }}
+            imageName: 'ubuntu-18.04'
            enableAnalysis: 'true'
          Mac:
            osName: 'Mac'
-            imageName: ${{ variables.macImage }}
+            imageName: 'macos-10.15'
            enableAnalysis: 'false'
          Windows:
            osName: 'Windows'
-            imageName: ${{ variables.windowsImage }}
+            imageName: 'windows-2019'
            enableAnalysis: 'false'

      pool:
@@ -97,14 +93,15 @@ stages:
      - bash: |
          BUNDLEDVERSIONS=${AGENT_TOOLSDIRECTORY}/dotnet/sdk/${DOTNETVERSION}/Microsoft.NETCoreSdk.BundledVersions.props
          echo $BUNDLEDVERSIONS
+          grep osx-x64 $BUNDLEDVERSIONS
          if grep -q freebsd-x64 $BUNDLEDVERSIONS; then
-            echo "Extra platforms already enabled"
+            echo "BSD already enabled"
          else
-            echo "Enabling extra platform support"
-            sed -i.ORI 's/osx-x64/osx-x64;freebsd-x64;linux-x86/' $BUNDLEDVERSIONS
+            echo "Enabling BSD support"
+            sed -i.ORI 's/osx-x64/osx-x64;freebsd-x64/' $BUNDLEDVERSIONS
          fi
-        displayName: Enable Extra Platform Support
-      - bash: ./build.sh --backend --enable-extra-platforms
+        displayName: Enable FreeBSD Support
+      - bash: ./build.sh --backend --enable-bsd
        displayName: Build Prowlarr Backend
      - bash: |
          find ${OUTPUTFOLDER} -type f ! -path "*/publish/*" -exec rm -rf {} \;
@@ -118,28 +115,24 @@ stages:
        displayName: Publish Backend
        condition: and(succeeded(), eq(variables['osName'], 'Windows'))
      - publish: '$(testsFolder)/net6.0/win-x64/publish'
-        artifact: win-x64-tests
-        displayName: Publish win-x64 Test Package
+        artifact: WindowsCoreTests
+        displayName: Publish Windows Test Package
        condition: and(succeeded(), eq(variables['osName'], 'Windows'))
      - publish: '$(testsFolder)/net6.0/linux-x64/publish'
-        artifact: linux-x64-tests
-        displayName: Publish linux-x64 Test Package
-        condition: and(succeeded(), eq(variables['osName'], 'Windows'))
-      - publish: '$(testsFolder)/net6.0/linux-x86/publish'
-        artifact: linux-x86-tests
-        displayName: Publish linux-x86 Test Package
+        artifact: LinuxCoreTests
+        displayName: Publish Linux Test Package
        condition: and(succeeded(), eq(variables['osName'], 'Windows'))
      - publish: '$(testsFolder)/net6.0/linux-musl-x64/publish'
-        artifact: linux-musl-x64-tests
-        displayName: Publish linux-musl-x64 Test Package
+        artifact: LinuxMuslCoreTests
+        displayName: Publish Linux Musl Test Package
        condition: and(succeeded(), eq(variables['osName'], 'Windows'))
      - publish: '$(testsFolder)/net6.0/freebsd-x64/publish'
-        artifact: freebsd-x64-tests
-        displayName: Publish freebsd-x64 Test Package
+        artifact: FreebsdCoreTests
+        displayName: Publish FreeBSD Test Package
        condition: and(succeeded(), eq(variables['osName'], 'Windows'))
      - publish: '$(testsFolder)/net6.0/osx-x64/publish'
-        artifact: osx-x64-tests
-        displayName: Publish osx-x64 Test Package
+        artifact: MacCoreTests
+        displayName: Publish MacOS Test Package
        condition: and(succeeded(), eq(variables['osName'], 'Windows'))

  - stage: Build_Frontend
@@ -151,13 +144,13 @@ stages:
        matrix:
          Linux:
            osName: 'Linux'
-            imageName: ${{ variables.linuxImage }}
+            imageName: 'ubuntu-18.04'
          Mac:
            osName: 'Mac'
-            imageName: ${{ variables.macImage }}
+            imageName: 'macos-10.15'
          Windows:
            osName: 'Windows'
-            imageName: ${{ variables.windowsImage }}
+            imageName: 'windows-2019'
      pool:
        vmImage: $(imageName)
      steps:
@@ -193,7 +186,7 @@ stages:
    - job: Windows_Installer
      displayName: Create Installer
      pool:
-        vmImage: ${{ variables.windowsImage }}
+        vmImage: 'windows-2019'
      steps:
      - checkout: self
        fetchDepth: 1
@@ -226,7 +219,7 @@ stages:
    - job: Other_Packages
      displayName: Create Standard Packages
      pool:
-        vmImage: ${{ variables.linuxImage }}
+        vmImage: 'ubuntu-18.04'
      steps:
      - checkout: self
        fetchDepth: 1
@@ -242,35 +235,35 @@ stages:
          artifactName: WindowsFrontend
          targetPath: _output
        displayName: Fetch Frontend
-      - bash: ./build.sh --packages --enable-extra-platforms
+      - bash: ./build.sh --packages --enable-bsd
        displayName: Create Packages
      - bash: |
          find . -name "Prowlarr" -exec chmod a+x {} \;
          find . -name "Prowlarr.Update" -exec chmod a+x {} \;
        displayName: Set executable bits
      - task: ArchiveFiles@2
-        displayName: Create win-x64 zip
+        displayName: Create Windows Core zip
        inputs:
          archiveFile: '$(Build.ArtifactStagingDirectory)/Prowlarr.$(buildName).windows-core-x64.zip'
          archiveType: 'zip'
          includeRootFolder: false
          rootFolderOrFile: $(artifactsFolder)/win-x64/net6.0
      - task: ArchiveFiles@2
-        displayName: Create win-x86 zip
+        displayName: Create Windows x86 Core zip
        inputs:
          archiveFile: '$(Build.ArtifactStagingDirectory)/Prowlarr.$(buildName).windows-core-x86.zip'
          archiveType: 'zip'
          includeRootFolder: false
          rootFolderOrFile: $(artifactsFolder)/win-x86/net6.0
      - task: ArchiveFiles@2
-        displayName: Create osx-x64 app
+        displayName: Create MacOS x64 Core app
        inputs:
          archiveFile: '$(Build.ArtifactStagingDirectory)/Prowlarr.$(buildName).osx-app-core-x64.zip'
          archiveType: 'zip'
          includeRootFolder: false
          rootFolderOrFile: $(artifactsFolder)/osx-x64-app/net6.0
      - task: ArchiveFiles@2
-        displayName: Create osx-x64 tar
+        displayName: Create MacOS x64 Core tar
        inputs:
          archiveFile: '$(Build.ArtifactStagingDirectory)/Prowlarr.$(buildName).osx-core-x64.tar.gz'
          archiveType: 'tar'
@@ -278,14 +271,14 @@ stages:
          includeRootFolder: false
          rootFolderOrFile: $(artifactsFolder)/osx-x64/net6.0
      - task: ArchiveFiles@2
-        displayName: Create osx-arm64 app
+        displayName: Create MacOS arm64 Core app
        inputs:
          archiveFile: '$(Build.ArtifactStagingDirectory)/Prowlarr.$(buildName).osx-app-core-arm64.zip'
          archiveType: 'zip'
          includeRootFolder: false
          rootFolderOrFile: $(artifactsFolder)/osx-arm64-app/net6.0
      - task: ArchiveFiles@2
-        displayName: Create osx-arm64 tar
+        displayName: Create MacOS arm64 Core tar
        inputs:
          archiveFile: '$(Build.ArtifactStagingDirectory)/Prowlarr.$(buildName).osx-core-arm64.tar.gz'
          archiveType: 'tar'
@@ -293,7 +286,7 @@ stages:
          includeRootFolder: false
          rootFolderOrFile: $(artifactsFolder)/osx-arm64/net6.0
      - task: ArchiveFiles@2
-        displayName: Create linux-x64 tar
+        displayName: Create Linux Core tar
        inputs:
          archiveFile: '$(Build.ArtifactStagingDirectory)/Prowlarr.$(buildName).linux-core-x64.tar.gz'
          archiveType: 'tar'
@@ -301,7 +294,7 @@ stages:
          includeRootFolder: false
          rootFolderOrFile: $(artifactsFolder)/linux-x64/net6.0
      - task: ArchiveFiles@2
-        displayName: Create linux-musl-x64 tar
+        displayName: Create Linux Musl Core tar
        inputs:
          archiveFile: '$(Build.ArtifactStagingDirectory)/Prowlarr.$(buildName).linux-musl-core-x64.tar.gz'
          archiveType: 'tar'
@@ -309,15 +302,7 @@ stages:
          includeRootFolder: false
          rootFolderOrFile: $(artifactsFolder)/linux-musl-x64/net6.0
      - task: ArchiveFiles@2
-        displayName: Create linux-x86 tar
-        inputs:
-          archiveFile: '$(Build.ArtifactStagingDirectory)/Prowlarr.$(buildName).linux-core-x86.tar.gz'
-          archiveType: 'tar'
-          tarCompression: 'gz'
-          includeRootFolder: false
-          rootFolderOrFile: $(artifactsFolder)/linux-x86/net6.0
-      - task: ArchiveFiles@2
-        displayName: Create linux-arm tar
+        displayName: Create ARM32 Linux Core tar
        inputs:
          archiveFile: '$(Build.ArtifactStagingDirectory)/Prowlarr.$(buildName).linux-core-arm.tar.gz'
          archiveType: 'tar'
@@ -325,7 +310,7 @@ stages:
          includeRootFolder: false
          rootFolderOrFile: $(artifactsFolder)/linux-arm/net6.0
      - task: ArchiveFiles@2
-        displayName: Create linux-musl-arm tar
+        displayName: Create ARM32 Linux Musl Core tar
        inputs:
          archiveFile: '$(Build.ArtifactStagingDirectory)/Prowlarr.$(buildName).linux-musl-core-arm.tar.gz'
          archiveType: 'tar'
@@ -333,7 +318,7 @@ stages:
          includeRootFolder: false
          rootFolderOrFile: $(artifactsFolder)/linux-musl-arm/net6.0
      - task: ArchiveFiles@2
-        displayName: Create linux-arm64 tar
+        displayName: Create ARM64 Linux Core tar
        inputs:
          archiveFile: '$(Build.ArtifactStagingDirectory)/Prowlarr.$(buildName).linux-core-arm64.tar.gz'
          archiveType: 'tar'
@@ -341,7 +326,7 @@ stages:
          includeRootFolder: false
          rootFolderOrFile: $(artifactsFolder)/linux-arm64/net6.0
      - task: ArchiveFiles@2
-        displayName: Create linux-musl-arm64 tar
+        displayName: Create ARM64 Linux Musl Core tar
        inputs:
          archiveFile: '$(Build.ArtifactStagingDirectory)/Prowlarr.$(buildName).linux-musl-core-arm64.tar.gz'
          archiveType: 'tar'
@@ -394,7 +379,7 @@ stages:
    jobs:
    - job: Prepare
      pool:
-        vmImage: ${{ variables.linuxImage }}
+        vmImage: 'ubuntu-18.04'
      steps:
      - checkout: none
      - task: DownloadPipelineArtifact@2
@@ -416,22 +401,22 @@ stages:
        matrix:
          MacCore:
            osName: 'Mac'
-            testName: 'osx-x64'
+            testName: 'MacCore'
            poolName: 'Azure Pipelines'
-            imageName: ${{ variables.macImage }}
+            imageName: 'macos-10.15'
          WindowsCore:
            osName: 'Windows'
-            testName: 'win-x64'
+            testName: 'WindowsCore'
            poolName: 'Azure Pipelines'
-            imageName: ${{ variables.windowsImage }}
+            imageName: 'windows-2019'
          LinuxCore:
            osName: 'Linux'
-            testName: 'linux-x64'
+            testName: 'LinuxCore'
            poolName: 'Azure Pipelines'
-            imageName: ${{ variables.linuxImage }}
+            imageName: 'ubuntu-18.04'
          FreebsdCore:
            osName: 'Linux'
-            testName: 'freebsd-x64'
+            testName: 'FreebsdCore'
            poolName: 'FreeBSD'
            imageName:

@@ -450,7 +435,7 @@ stages:
        displayName: Download Test Artifact
        inputs:
          buildType: 'current'
-          artifactName: '$(testName)-tests'
+          artifactName: '$(testName)Tests'
          targetPath: $(testsFolder)
      - powershell: Set-Service SCardSvr -StartupType Manual
        displayName: Enable Windows Test Service
@@ -480,15 +465,11 @@ stages:
        matrix:
          alpine:
            testName: 'Musl Net Core'
-            artifactName: linux-musl-x64-tests
+            artifactName: LinuxMuslCoreTests
            containerImage: ghcr.io/servarr/testimages:alpine
-          linux-x86:
-            testName: 'linux-x86'
-            artifactName: linux-x86-tests
-            containerImage: ghcr.io/servarr/testimages:linux-x86

      pool:
-        vmImage: ${{ variables.linuxImage }}
+        vmImage: 'ubuntu-18.04'
      
      container: $[ variables['containerImage'] ]

@@ -496,15 +477,9 @@ stages:
        
      steps:
      - task: UseDotNet@2
-        displayName: 'Install .NET'
+        displayName: 'Install .net core'
        inputs:
          version: $(dotnetVersion)
-        condition: and(succeeded(), ne(variables['testName'], 'linux-x86'))
-      - bash: |
-          SDKURL=$(curl -s https://api.github.com/repos/Servarr/dotnet-linux-x86/releases | jq -rc '.[].assets[].browser_download_url' | grep sdk-${DOTNETVERSION}.*gz$)
-          curl -fsSL $SDKURL | tar xzf - -C /opt/dotnet
-        displayName: 'Install .NET'
-        condition: and(succeeded(), eq(variables['testName'], 'linux-x86'))
      - checkout: none
      - task: DownloadPipelineArtifact@2
        displayName: Download Test Artifact
@@ -527,58 +502,6 @@ stages:
          testResultsFiles: '**/TestResult.xml'
          testRunTitle: '$(testName) Unit Tests'
          failTaskOnFailedTests: true
-          
-    - job: Unit_LinuxCore_Postgres
-      displayName: Unit Native LinuxCore with Postgres Database
-      dependsOn: Prepare
-      condition: and(succeeded(), eq(dependencies.Prepare.outputs['setVar.backendNotUpdated'], '0'))
-      variables:
-        pattern: 'Prowlarr.*.linux-core-x64.tar.gz'
-        artifactName: linux-x64-tests
-        Prowlarr__Postgres__Host: 'localhost'
-        Prowlarr__Postgres__Port: '5432'
-        Prowlarr__Postgres__User: 'prowlarr'
-        Prowlarr__Postgres__Password: 'prowlarr'
-
-      pool:
-        vmImage: 'ubuntu-18.04'
-
-      timeoutInMinutes: 10
-        
-      steps:
-      - task: UseDotNet@2
-        displayName: 'Install .net core'
-        inputs:
-          version: $(dotnetVersion)
-      - checkout: none
-      - task: DownloadPipelineArtifact@2
-        displayName: Download Test Artifact
-        inputs:
-          buildType: 'current'
-          artifactName: $(artifactName)
-          targetPath: $(testsFolder)
-      - bash: find ${TESTSFOLDER} -name "Prowlarr.Test.Dummy" -exec chmod a+x {} \;
-        displayName: Make Test Dummy Executable
-        condition: and(succeeded(), ne(variables['osName'], 'Windows'))
-      - bash: |
-          docker run -d --name=postgres14 \
-          -e POSTGRES_PASSWORD=prowlarr \
-          -e POSTGRES_USER=prowlarr \
-          -p 5432:5432/tcp \
-          postgres:14
-        displayName: Start postgres
-      - bash: |
-          chmod a+x ${TESTSFOLDER}/test.sh
-          ls -lR ${TESTSFOLDER}
-          ${TESTSFOLDER}/test.sh Linux Unit Test
-        displayName: Run Tests
-      - task: PublishTestResults@2
-        displayName: Publish Test Results
-        inputs:
-          testResultsFormat: 'NUnit'
-          testResultsFiles: '**/TestResult.xml'
-          testRunTitle: 'LinuxCore Postgres Unit Tests'
-          failTaskOnFailedTests: true

  - stage: Integration
    displayName: Integration
@@ -587,7 +510,7 @@ stages:
    jobs:
    - job: Prepare
      pool:
-        vmImage: ${{ variables.linuxImage }}
+        vmImage: 'ubuntu-18.04'
      steps:
      - checkout: none
      - task: DownloadPipelineArtifact@2
@@ -606,18 +529,18 @@ stages:
        matrix:
          MacCore:
            osName: 'Mac'
-            testName: 'osx-x64'
-            imageName: ${{ variables.macImage }}
+            testName: 'MacCore'
+            imageName: 'macos-10.15'
            pattern: 'Prowlarr.*.osx-core-x64.tar.gz'
          WindowsCore:
            osName: 'Windows'
-            testName: 'win-x64'
-            imageName: ${{ variables.windowsImage }}
+            testName: 'WindowsCore'
+            imageName: 'windows-2019'
            pattern: 'Prowlarr.*.windows-core-x64.zip'
          LinuxCore:
            osName: 'Linux'
-            testName: 'linux-x64'
-            imageName: ${{ variables.linuxImage }}
+            testName: 'LinuxCore'
+            imageName: 'ubuntu-18.04'
            pattern: 'Prowlarr.*.linux-core-x64.tar.gz'

      pool:
@@ -633,7 +556,7 @@ stages:
        displayName: Download Test Artifact
        inputs:
          buildType: 'current'
-          artifactName: '$(testName)-tests'
+          artifactName: '$(testName)Tests'
          targetPath: $(testsFolder)
      - task: DownloadPipelineArtifact@2
        displayName: Download Build Artifact
@@ -663,67 +586,6 @@ stages:
          failTaskOnFailedTests: true
        displayName: Publish Test Results

-    - job: Integration_LinuxCore_Postgres
-      displayName: Integration Native LinuxCore with Postgres Database
-      dependsOn: Prepare
-      condition: and(succeeded(), eq(dependencies.Prepare.outputs['setVar.backendNotUpdated'], '0'))
-      variables:
-        pattern: 'Prowlarr.*.linux-core-x64.tar.gz'
-        Prowlarr__Postgres__Host: 'localhost'
-        Prowlarr__Postgres__Port: '5432'
-        Prowlarr__Postgres__User: 'prowlarr'
-        Prowlarr__Postgres__Password: 'prowlarr'
-
-      pool:
-        vmImage: 'ubuntu-18.04'
-
-      steps:
-        - task: UseDotNet@2
-          displayName: 'Install .net core'
-          inputs:
-            version: $(dotnetVersion)
-        - checkout: none
-        - task: DownloadPipelineArtifact@2
-          displayName: Download Test Artifact
-          inputs:
-            buildType: 'current'
-            artifactName: 'linux-x64-tests'
-            targetPath: $(testsFolder)
-        - task: DownloadPipelineArtifact@2
-          displayName: Download Build Artifact
-          inputs:
-            buildType: 'current'
-            artifactName: Packages
-            itemPattern: '**/$(pattern)'
-            targetPath: $(Build.ArtifactStagingDirectory)
-        - task: ExtractFiles@1
-          inputs:
-            archiveFilePatterns: '$(Build.ArtifactStagingDirectory)/**/$(pattern)' 
-            destinationFolder: '$(Build.ArtifactStagingDirectory)/bin'
-          displayName: Extract Package
-        - bash: |
-            mkdir -p ./bin/
-            cp -r -v ${BUILD_ARTIFACTSTAGINGDIRECTORY}/bin/Prowlarr/. ./bin/
-          displayName: Move Package Contents
-        - bash: |
-            docker run -d --name=postgres14 \
-            -e POSTGRES_PASSWORD=prowlarr \
-            -e POSTGRES_USER=prowlarr \
-            -p 5432:5432/tcp \
-            postgres:14
-          displayName: Start postgres
-        - bash: |
-            chmod a+x ${TESTSFOLDER}/test.sh
-            ${TESTSFOLDER}/test.sh Linux Integration Test
-          displayName: Run Integration Tests
-        - task: PublishTestResults@2
-          inputs:
-            testResultsFormat: 'NUnit'
-            testResultsFiles: '**/TestResult.xml'
-            testRunTitle: 'Integration LinuxCore Postgres Database Integration Tests'
-            failTaskOnFailedTests: true
-          displayName: Publish Test Results
-
    - job: Integration_FreeBSD
      displayName: Integration Native FreeBSD
      dependsOn: Prepare
@@ -741,7 +603,7 @@ stages:
        displayName: Download Test Artifact
        inputs:
          buildType: 'current'
-          artifactName: 'freebsd-x64-tests'
+          artifactName: 'FreebsdCoreTests'
          targetPath: $(testsFolder)
      - task: DownloadPipelineArtifact@2
        displayName: Download Build Artifact
@@ -777,17 +639,13 @@ stages:
      strategy:
        matrix:
          alpine:
-            testName: 'linux-musl-x64'
-            artifactName: linux-musl-x64-tests
+            testName: 'Musl Net Core'
+            artifactName: LinuxMuslCoreTests
            containerImage: ghcr.io/servarr/testimages:alpine
            pattern: 'Prowlarr.*.linux-musl-core-x64.tar.gz'
-          linux-x86:
-            testName: 'linux-x86'
-            artifactName: linux-x86-tests
-            containerImage: ghcr.io/servarr/testimages:linux-x86
-            pattern: 'Prowlarr.*.linux-core-x86.tar.gz'
+
      pool:
-        vmImage: ${{ variables.linuxImage }}
+        vmImage: 'ubuntu-18.04'

      container: $[ variables['containerImage'] ]

@@ -795,15 +653,9 @@ stages:
        
      steps:
      - task: UseDotNet@2
-        displayName: 'Install .NET'
+        displayName: 'Install .net core'
        inputs:
          version: $(dotnetVersion)
-        condition: and(succeeded(), ne(variables['testName'], 'linux-x86'))
-      - bash: |
-          SDKURL=$(curl -s https://api.github.com/repos/Servarr/dotnet-linux-x86/releases | jq -rc '.[].assets[].browser_download_url' | grep sdk-${DOTNETVERSION}.*gz$)
-          curl -fsSL $SDKURL | tar xzf - -C /opt/dotnet
-        displayName: 'Install .NET'
-        condition: and(succeeded(), eq(variables['testName'], 'linux-x86'))
      - checkout: none
      - task: DownloadPipelineArtifact@2
        displayName: Download Test Artifact
@@ -849,20 +701,17 @@ stages:
        matrix:
          Linux:
            osName: 'Linux'
-            artifactName: 'linux-x64'
-            imageName: ${{ variables.linuxImage }}
+            imageName: 'ubuntu-18.04'
            pattern: 'Prowlarr.*.linux-core-x64.tar.gz'
            failBuild: true
          Mac:
            osName: 'Mac'
-            artifactName: 'osx-x64'
-            imageName: ${{ variables.macImage }}
+            imageName: 'macos-10.15'
            pattern: 'Prowlarr.*.osx-core-x64.tar.gz'
            failBuild: true
          Windows:
            osName: 'Windows'
-            artifactName: 'win-x64'
-            imageName: ${{ variables.windowsImage }}
+            imageName: 'windows-2019'
            pattern: 'Prowlarr.*.windows-core-x64.zip'
            failBuild: true

@@ -879,7 +728,7 @@ stages:
        displayName: Download Test Artifact
        inputs:
          buildType: 'current'
-          artifactName: '$(artifactName)-tests'
+          artifactName: '$(osName)CoreTests'
          targetPath: $(testsFolder)
      - task: DownloadPipelineArtifact@2
        displayName: Download Build Artifact
@@ -928,7 +777,7 @@ stages:
    jobs:
    - job: Prepare
      pool:
-        vmImage: ${{ variables.linuxImage }}
+        vmImage: 'ubuntu-18.04'
      steps:
      - checkout: none
      - task: DownloadPipelineArtifact@2
@@ -945,10 +794,10 @@ stages:
        matrix:
          Linux:
            osName: 'Linux'
-            imageName: ${{ variables.linuxImage }}
+            imageName: 'ubuntu-18.04'
          Windows:
            osName: 'Windows'
-            imageName: ${{ variables.windowsImage }}
+            imageName: 'windows-2019'
      pool:
        vmImage: $(imageName)
      steps:
@@ -983,7 +832,7 @@ stages:
        )

      pool:
-        vmImage: ${{ variables.windowsImage }}
+        vmImage: windows-2019

      steps:
      - task: UseDotNet@2
@@ -1035,7 +884,7 @@ stages:
        EnableAnalyzers: 'false'

      pool:
-        vmImage: ${{ variables.windowsImage }}
+        vmImage: windows-2019

      steps:
      - task: UseDotNet@2
@@ -1092,7 +941,7 @@ stages:
    - job:
      displayName: Discord Notification
      pool:
-        vmImage: ${{ variables.linuxImage }}
+        vmImage: 'ubuntu-18.04'
      steps:
        - task: DownloadPipelineArtifact@2
          continueOnError: true
--- a/build.sh
+++ b/build.sh
@@ -25,22 +25,15 @@ UpdateVersionNumber()
    fi
 }

-EnableExtraPlatformsInSDK()
+EnableBsdSupport()
 {
-    SDK_PATH=$(dotnet --list-sdks | grep -P '6\.\d\.\d+' | head -1 | sed 's/\(6\.[0-9]*\.[0-9]*\).*\[\(.*\)\]/\2\/\1/g')
-    BUNDLEDVERSIONS="${SDK_PATH}/Microsoft.NETCoreSdk.BundledVersions.props"
-    if grep -q freebsd-x64 $BUNDLEDVERSIONS; then
-        echo "Extra platforms already enabled"
-    else
-        echo "Enabling extra platform support"
-        sed -i.ORI 's/osx-x64/osx-x64;freebsd-x64;linux-x86/' $BUNDLEDVERSIONS
-    fi
-}
+    #todo enable sdk with
+    #SDK_PATH=$(dotnet --list-sdks | grep -P '5\.\d\.\d+' | head -1 | sed 's/\(5\.[0-9]*\.[0-9]*\).*\[\(.*\)\]/\2\/\1/g')
+    # BUNDLED_VERSIONS="${SDK_PATH}/Microsoft.NETCoreSdk.BundledVersions.props"

-EnableExtraPlatforms()
-{
    if grep -qv freebsd-x64 src/Directory.Build.props; then
-        sed -i'' -e "s^<RuntimeIdentifiers>\(.*\)</RuntimeIdentifiers>^<RuntimeIdentifiers>\1;freebsd-x64;linux-x86</RuntimeIdentifiers>^g" src/Directory.Build.props
+        sed -i'' -e "s^<RuntimeIdentifiers>\(.*\)</RuntimeIdentifiers>^<RuntimeIdentifiers>\1;freebsd-x64</RuntimeIdentifiers>^g" src/Directory.Build.props
+        sed -i'' -e "s^<ExcludedRuntimeFrameworkPairs>\(.*\)</ExcludedRuntimeFrameworkPairs>^<ExcludedRuntimeFrameworkPairs>\1;freebsd-x64:net472</ExcludedRuntimeFrameworkPairs>^g" src/Directory.Build.props
    fi
 }

@@ -300,8 +293,7 @@ if [ $# -eq 0 ]; then
    PACKAGES=YES
    INSTALLER=NO
    LINT=YES
-    ENABLE_EXTRA_PLATFORMS=NO
-    ENABLE_EXTRA_PLATFORMS_IN_SDK=NO
+    ENABLE_BSD=NO
 fi

 while [[ $# -gt 0 ]]
@@ -313,12 +305,8 @@ case $key in
        BACKEND=YES
        shift # past argument
        ;;
-    --enable-bsd|--enable-extra-platforms)
-        ENABLE_EXTRA_PLATFORMS=YES
-        shift # past argument
-        ;;
-    --enable-extra-platforms-in-sdk)
-        ENABLE_EXTRA_PLATFORMS_IN_SDK=YES
+    --enable-bsd)
+        ENABLE_BSD=YES
        shift # past argument
        ;;
    -r|--runtime)
@@ -362,17 +350,12 @@ esac
 done
 set -- "${POSITIONAL[@]}" # restore positional parameters

-if [ "$ENABLE_EXTRA_PLATFORMS_IN_SDK" = "YES" ];
-then
-    EnableExtraPlatformsInSDK
-fi
-
 if [ "$BACKEND" = "YES" ];
 then
    UpdateVersionNumber
-    if [ "$ENABLE_EXTRA_PLATFORMS" = "YES" ];
+    if [ "$ENABLE_BSD" = "YES" ];
    then
-        EnableExtraPlatforms
+        EnableBsdSupport
    fi
    Build
    if [[ -z "$RID" || -z "$FRAMEWORK" ]];
@@ -382,10 +365,9 @@ then
        PackageTests "net6.0" "linux-x64"
        PackageTests "net6.0" "linux-musl-x64"
        PackageTests "net6.0" "osx-x64"
-        if [ "$ENABLE_EXTRA_PLATFORMS" = "YES" ];
+        if [ "$ENABLE_BSD" = "YES" ];
        then
            PackageTests "net6.0" "freebsd-x64"
-            PackageTests "net6.0" "linux-x86"
        fi
    else
        PackageTests "$FRAMEWORK" "$RID"
@@ -424,10 +406,9 @@ then
        Package "net6.0" "linux-musl-arm"
        Package "net6.0" "osx-x64"
        Package "net6.0" "osx-arm64"
-        if [ "$ENABLE_EXTRA_PLATFORMS" = "YES" ];
+        if [ "$ENABLE_BSD" = "YES" ];
        then
            Package "net6.0" "freebsd-x64"
-            Package "net6.0" "linux-x86"
        fi
    else
        Package "$FRAMEWORK" "$RID"
--- 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/App/App.js
+++ b/frontend/src/App/App.js
@@ -4,19 +4,16 @@ 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 }) {
  return (
-    <DocumentTitle title={window.Prowlarr.instanceName}>
+    <DocumentTitle title="Prowlarr">
      <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/ApplyTheme.js
+++ b/frontend/src/App/ApplyTheme.js
@@ -1,49 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Fragment, 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.Prowlarr.theme,
-    (
-      theme
-    ) => {
-      return {
-        theme
-      };
-    }
-  );
-}
-
-function ApplyTheme({ theme, children }) {
-  // Update the CSS Variables
-  function updateCSSVariables() {
-    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]
-      );
-    });
-  }
-
-  // On Component Mount and Component Update
-  useEffect(() => {
-    updateCSSVariables(theme);
-  }, [theme]);
-
-  return <Fragment>{children}</Fragment>;
-}
-
-ApplyTheme.propTypes = {
-  theme: PropTypes.string.isRequired,
-  children: PropTypes.object.isRequired
-};
-
-export default connect(createMapStateToProps)(ApplyTheme);
--- a/frontend/src/Components/Alert.css
+++ b/frontend/src/Components/Alert.css
@@ -7,25 +7,25 @@
 }

 .danger {
-  border-color: var(--alertDangerBorderColor);
-  background-color: var(--alertDangerBackgroundColor);
-  color: var(--alertDangerColor);
+  border-color: $alertDangerBorderColor;
+  background-color: $alertDangerBackgroundColor;
+  color: $alertDangerColor;
 }

 .info {
-  border-color: var(--alertInfoBorderColor);
-  background-color: var(--alertInfoBackgroundColor);
-  color: var(--alertInfoColor);
+  border-color: $alertInfoBorderColor;
+  background-color: $alertInfoBackgroundColor;
+  color: $alertInfoColor;
 }

 .success {
-  border-color: var(--alertSuccessBorderColor);
-  background-color: var(--alertSuccessBackgroundColor);
-  color: var(--alertSuccessColor);
+  border-color: $alertSuccessBorderColor;
+  background-color: $alertSuccessBackgroundColor;
+  color: $alertSuccessColor;
 }

 .warning {
-  border-color: var(--alertWarningBorderColor);
-  background-color: var(--alertWarningBackgroundColor);
-  color: var(--alertWarningColor);
+  border-color: $alertWarningBorderColor;
+  background-color: $alertWarningBackgroundColor;
+  color: $alertWarningColor;
 }
--- a/frontend/src/Components/Card.css
+++ b/frontend/src/Components/Card.css
@@ -3,9 +3,9 @@
  margin: 10px;
  padding: 10px;
  border-radius: 3px;
-  background-color: var(--cardBackgroundColor);
-  box-shadow: 0 0 10px 1px var(--cardShadowColor);
-  color: var(--defaultColor);
+  background-color: $white;
+  box-shadow: 0 0 10px 1px $cardShadowColor;
+  color: $defaultColor;
 }

 .underlay {
--- a/frontend/src/Components/Chart/BarChart.js
+++ b/frontend/src/Components/Chart/BarChart.js
@@ -2,16 +2,15 @@ import Chart from 'chart.js/auto';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { kinds } from 'Helpers/Props';
+import colors from 'Styles/Variables/colors';

 function getColors(kind) {

-  const style = getComputedStyle(document.body);
-
  if (kind === kinds.WARNING) {
-    return style.getPropertyValue('--failedColors').split(',');
+    return colors.failedColors.reverse();
  }

-  return style.getPropertyValue('--chartColors').split(',');
+  return colors.chartColors;
 }

 class BarChart extends Component {
--- a/frontend/src/Components/Chart/DoughnutChart.js
+++ b/frontend/src/Components/Chart/DoughnutChart.js
@@ -1,12 +1,7 @@
 import Chart from 'chart.js/auto';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-
-function getColors(kind) {
-
-  const style = getComputedStyle(document.body);
-  return style.getPropertyValue('--chartColorsDiversified').split(',');
-}
+import colors from 'Styles/Variables/colors';

 class DoughnutChart extends Component {
  constructor(props) {
@@ -34,7 +29,7 @@ class DoughnutChart extends Component {
        datasets: [{
          label: this.props.title,
          data: this.props.data.map((d) => d.value),
-          backgroundColor: getColors()
+          backgroundColor: colors.chartColors
        }]
      }
    });
--- a/frontend/src/Components/Chart/StackedBarChart.js
+++ b/frontend/src/Components/Chart/StackedBarChart.js
@@ -1,12 +1,7 @@
 import Chart from 'chart.js/auto';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-
-function getColors(index) {
-
-  const style = getComputedStyle(document.body);
-  return style.getPropertyValue('--chartColorsDiversified').split(',')[index];
-}
+import colors from 'Styles/Variables/colors';

 class StackedBarChart extends Component {
  constructor(props) {
@@ -46,7 +41,7 @@ class StackedBarChart extends Component {
          return {
            label: d.label,
            data: d.data,
-            backgroundColor: getColors(index)
+            backgroundColor: colors.chartColors[index]
          };
        })
      }
@@ -59,7 +54,7 @@ class StackedBarChart extends Component {
      return {
        label: d.label,
        data: d.data,
-        backgroundColor: getColors(index)
+        backgroundColor: colors.chartColors[index]
      };
    });
    this.myChart.update();
--- a/frontend/src/Components/FieldSet.css
+++ b/frontend/src/Components/FieldSet.css
@@ -13,7 +13,7 @@
  width: 100%;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
-  color: var(--textColor);
+  color: #3a3f51;
  font-size: 21px;
  line-height: inherit;
 }
--- a/frontend/src/Components/FileBrowser/FileBrowserModalContent.css
+++ b/frontend/src/Components/FileBrowser/FileBrowserModalContent.css
@@ -13,7 +13,7 @@
 }

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

--- a/frontend/src/Components/Filter/Builder/DateFilterBuilderRowValue.js
+++ b/frontend/src/Components/Filter/Builder/DateFilterBuilderRowValue.js
@@ -160,7 +160,6 @@ class DateFilterBuilderRowValue extends Component {
      <TextInput
        name={NAME}
        value={filterValue}
-        type="date"
        placeholder="yyyy-mm-dd"
        onChange={this.onValueChange}
      />
--- a/frontend/src/Components/Filter/Builder/FilterBuilderRow.css
+++ b/frontend/src/Components/Filter/Builder/FilterBuilderRow.css
@@ -3,7 +3,7 @@
  margin-bottom: 5px;

  &:hover {
-    background-color: var(--tableRowHoverBackgroundColor);
+    background-color: $tableRowHoverBackgroundColor;
  }
 }

--- a/frontend/src/Components/Filter/Builder/FilterBuilderRowValueTag.css
+++ b/frontend/src/Components/Filter/Builder/FilterBuilderRowValueTag.css
@@ -17,5 +17,5 @@

 .or {
  margin: 0 3px;
-  color: var(--themeDarkColor);
+  color: $themeDarkColor;
 }
--- a/frontend/src/Components/Filter/CustomFilters/CustomFilter.css
+++ b/frontend/src/Components/Filter/CustomFilters/CustomFilter.css
@@ -4,7 +4,7 @@
  padding: 5px;

  &:hover {
-    background-color: var(--tableRowHoverBackgroundColor);
+    background-color: $tableRowHoverBackgroundColor;
  }
 }

--- a/frontend/src/Components/Form/AutoSuggestInput.css
+++ b/frontend/src/Components/Form/AutoSuggestInput.css
@@ -27,10 +27,10 @@
    overflow-y: auto;
    max-height: 200px;
    width: 100%;
-    border: 1px solid var(--inputBorderColor);
+    border: 1px solid $inputBorderColor;
    border-radius: 4px;
-    background-color: var(--inputBackgroundColor);
-    box-shadow: inset 0 1px 1px var(--inputBoxShadowColor);
+    background-color: $white;
+    box-shadow: inset 0 1px 1px $inputBoxShadowColor;
  }
 }

@@ -46,5 +46,5 @@
 }

 .suggestionHighlighted {
-  background-color: var(--menuItemHoverBackgroundColor);
+  background-color: $menuItemHoverBackgroundColor;
 }
--- a/frontend/src/Components/Form/CheckInput.css
+++ b/frontend/src/Components/Form/CheckInput.css
@@ -32,21 +32,21 @@
  height: 20px;
  border: 1px solid #ccc;
  border-radius: 2px;
-  background-color: var(--white);
-  color: var(--white);
+  background-color: $white;
+  color: $white;
  text-align: center;
  line-height: 20px;
 }

 .checkbox:focus + .input {
  outline: 0;
-  border-color: var(--inputFocusBorderColor);
-  box-shadow: inset 0 1px 1px var(--inputBoxShadowColor), 0 0 8px var(--inputFocusBoxShadowColor);
+  border-color: $inputFocusBorderColor;
+  box-shadow: inset 0 1px 1px $inputBoxShadowColor, 0 0 8px $inputFocusBoxShadowColor;
 }

 .dangerIsChecked {
-  border-color: var(--dangerColor);
-  background-color: var(--dangerColor);
+  border-color: $dangerColor;
+  background-color: $dangerColor;

  &.isDisabled {
    opacity: 0.7;
@@ -54,8 +54,8 @@
 }

 .primaryIsChecked {
-  border-color: var(--primaryColor);
-  background-color: var(--primaryColor);
+  border-color: $primaryColor;
+  background-color: $primaryColor;

  &.isDisabled {
    opacity: 0.7;
@@ -63,8 +63,8 @@
 }

 .successIsChecked {
-  border-color: var(--successColor);
-  background-color: var(--successColor);
+  border-color: $successColor;
+  background-color: $successColor;

  &.isDisabled {
    opacity: 0.7;
@@ -72,8 +72,8 @@
 }

 .warningIsChecked {
-  border-color: var(--warningColor);
-  background-color: var(--warningColor);
+  border-color: $warningColor;
+  background-color: $warningColor;

  &.isDisabled {
    opacity: 0.7;
@@ -82,15 +82,15 @@

 .isNotChecked {
  &.isDisabled {
-    border-color: var(--disabledCheckInputColor);
-    background-color: var(--disabledCheckInputColor);
+    border-color: $disabledCheckInputColor;
+    background-color: $disabledCheckInputColor;
    opacity: 0.7;
  }
 }

 .isIndeterminate {
-  border-color: var(--gray);
-  background-color: var(--gray);
+  border-color: $gray;
+  background-color: $gray;
 }

 .helpText {
--- a/frontend/src/Components/Form/EnhancedSelectInput.css
+++ b/frontend/src/Components/Form/EnhancedSelectInput.css
@@ -39,7 +39,7 @@
 .dropdownArrowContainerDisabled {
  composes: dropdownArrowContainer;

-  color: var(--disabledInputColor);
+  color: $disabledInputColor;
 }

 .optionsContainer {
@@ -50,9 +50,9 @@
 .options {
  composes: scroller from '~Components/Scroller/Scroller.css';

-  border: 1px solid var(--inputBorderColor);
+  border: 1px solid $inputBorderColor;
  border-radius: 4px;
-  background-color: var(--inputBackgroundColor);
+  background-color: $white;
 }

 .optionsModal {
@@ -76,9 +76,9 @@
 .optionsModalScroller {
  composes: scroller from '~Components/Scroller/Scroller.css';

-  border: 1px solid var(--inputBorderColor);
+  border: 1px solid $inputBorderColor;
  border-radius: 4px;
-  background-color: var(--inputBackgroundColor);
+  background-color: $white;
 }

 .loading {
@@ -90,7 +90,7 @@
  display: flex;
  justify-content: flex-end;
  height: 40px;
-  border-bottom: 1px solid var(--borderColor);
+  border-bottom: 1px solid $borderColor;
 }

 .mobileCloseButton {
@@ -100,6 +100,6 @@
  line-height: 40px;

  &:hover {
-    color: var(--modalCloseButtonHoverColor);
+    color: $modalCloseButtonHoverColor;
  }
 }
--- a/frontend/src/Components/Form/EnhancedSelectInputOption.css
+++ b/frontend/src/Components/Form/EnhancedSelectInputOption.css
@@ -7,7 +7,7 @@
  cursor: default;

  &:hover {
-    background-color: var(--inputHoverBackgroundColor);
+    background-color: #f8f8f8;
  }
 }

@@ -24,17 +24,17 @@
 }

 .isSelected {
-  background-color: var(--inputSelectedBackgroundColor);
+  background-color: #e2e2e2;

  &:hover {
-    background-color: var(--inputSelectedBackgroundColor);
+    background-color: #e2e2e2;
  }

  &.isMobile {
    background-color: inherit;

    .iconContainer {
-      color: var(--primaryColor);
+      color: $primaryColor;
    }
  }
 }
@@ -49,7 +49,7 @@

 .isMobile {
  height: 50px;
-  border-bottom: 1px solid var(--borderColor);
+  border-bottom: 1px solid $borderColor;

  &:last-child {
    border: none;
--- a/frontend/src/Components/Form/EnhancedSelectInputSelectedValue.css
+++ b/frontend/src/Components/Form/EnhancedSelectInputSelectedValue.css
@@ -3,5 +3,5 @@
 }

 .isDisabled {
-  color: var(--disabledInputColor);
+  color: $disabledInputColor;
 }
--- a/frontend/src/Components/Form/FormInputGroup.css
+++ b/frontend/src/Components/Form/FormInputGroup.css
@@ -40,7 +40,7 @@
 }

 .pendingChangesIcon {
-  color: var(--warningColor);
+  color: $warningColor;
  font-size: 20px;
  line-height: 35px;
 }
--- a/frontend/src/Components/Form/FormInputHelpText.css
+++ b/frontend/src/Components/Form/FormInputHelpText.css
@@ -1,14 +1,14 @@
 .helpText {
  margin-top: 5px;
-  color: var(--helpTextColor);
+  color: $helpTextColor;
  line-height: 20px;
 }

 .isError {
-  color: var(--dangerColor);
+  color: $dangerColor;

  .link {
-    color: var(--dangerColor);
+    color: $dangerColor;

    &:hover {
      color: #e01313;
@@ -17,10 +17,10 @@
 }

 .isWarning {
-  color: var(--warningColor);
+  color: $warningColor;

  .link {
-    color: var(--warningColor);
+    color: $warningColor;

    &:hover {
      color: #e36c00;
--- a/frontend/src/Components/Form/FormLabel.css
+++ b/frontend/src/Components/Form/FormLabel.css
@@ -7,11 +7,11 @@
 }

 .hasError {
-  color: var(--dangerColor);
+  color: $dangerColor;
 }

 .isAdvanced {
-  color: var(--advancedFormLabelColor);
+  color: $advancedFormLabelColor;
 }

@media only screen and (max-width: $breakpointLarge) {
--- a/frontend/src/Components/Form/HintedSelectInputOption.css
+++ b/frontend/src/Components/Form/HintedSelectInputOption.css
@@ -18,6 +18,6 @@
  @add-mixin truncate;

  margin-left: 15px;
-  color: var(--darkGray);
+  color: $darkGray;
  font-size: $smallFontSize;
 }
--- a/frontend/src/Components/Form/HintedSelectInputSelectedValue.css
+++ b/frontend/src/Components/Form/HintedSelectInputSelectedValue.css
@@ -18,7 +18,7 @@

  flex: 1 10 0;
  margin-left: 15px;
-  color: var(--gray);
+  color: $gray;
  text-align: right;
  font-size: $smallFontSize;
 }
--- a/frontend/src/Components/Form/Input.css
+++ b/frontend/src/Components/Form/Input.css
@@ -2,27 +2,26 @@
  padding: 6px 16px;
  width: 100%;
  height: 35px;
-  border: 1px solid var(--inputBorderColor);
+  border: 1px solid $inputBorderColor;
  border-radius: 4px;
-  background-color: var(--inputBackgroundColor);
-  box-shadow: inset 0 1px 1px var(--inputBoxShadowColor);
-  color: var(--textColor);
+  background-color: $white;
+  box-shadow: inset 0 1px 1px $inputBoxShadowColor;

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

 .hasError {
-  border-color: var(--inputErrorBorderColor);
-  box-shadow: inset 0 1px 1px var(--inputBoxShadowColor), 0 0 8px var(--inputErrorBoxShadowColor);
+  border-color: $inputErrorBorderColor;
+  box-shadow: inset 0 1px 1px $inputBoxShadowColor, 0 0 8px $inputErrorBoxShadowColor;
 }

 .hasWarning {
-  border-color: var(--inputWarningBorderColor);
-  box-shadow: inset 0 1px 1px var(--inputBoxShadowColor), 0 0 8px var(--inputWarningBoxShadowColor);
+  border-color: $inputWarningBorderColor;
+  box-shadow: inset 0 1px 1px $inputBoxShadowColor, 0 0 8px $inputWarningBoxShadowColor;
 }

 .hasButton {
--- a/frontend/src/Components/Form/KeyValueListInput.css
+++ b/frontend/src/Components/Form/KeyValueListInput.css
@@ -7,8 +7,8 @@

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

--- a/frontend/src/Components/Form/KeyValueListInputItem.css
+++ b/frontend/src/Components/Form/KeyValueListInputItem.css
@@ -1,7 +1,7 @@
 .itemContainer {
  display: flex;
  margin-bottom: 3px;
-  border-bottom: 1px solid var(--inputBorderColor);
+  border-bottom: 1px solid $inputBorderColor;

  &:last-child {
    margin-bottom: 0;
--- a/frontend/src/Components/Form/TagInput.css
+++ b/frontend/src/Components/Form/TagInput.css
@@ -7,8 +7,8 @@

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

@@ -20,6 +20,4 @@
  width: 0%;
  height: 31px;
  border: none;
-  background-color: var(--inputBackground);
-  color: var(--textColor);
 }
--- a/frontend/src/Components/Form/TextArea.css
+++ b/frontend/src/Components/Form/TextArea.css
@@ -7,7 +7,7 @@
 }

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

 .hasError {
--- a/frontend/src/Components/Form/TextInput.css
+++ b/frontend/src/Components/Form/TextInput.css
@@ -3,7 +3,7 @@
 }

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

 .hasError {
--- a/frontend/src/Components/Icon.css
+++ b/frontend/src/Components/Icon.css
@@ -1,5 +1,5 @@
 .danger {
-  color: var(--dangerColor);
+  color: $dangerColor;
 }

 .default {
@@ -7,21 +7,25 @@
 }

 .disabled {
-  color: var(--disabledColor);
+  color: $disabledColor;
 }

 .info {
-  color: var(--infoColor);
+  color: $infoColor;
+}
+
+.pink {
+  color: $pink;
 }

 .success {
-  color: var(--successColor);
+  color: $successColor;
 }

 .warning {
-  color: var(--warningColor);
+  color: $warningColor;
 }

 .purple {
-  color: var(--purple);
+  color: $purple;
 }
--- a/frontend/src/Components/InfoLabel.css
+++ b/frontend/src/Components/InfoLabel.css
@@ -1,7 +1,7 @@
 .label {
  display: inline-block;
  margin: 2px;
-  color: var(--white);
+  color: $white;
  /** text-align: center; **/
  white-space: nowrap;
  line-height: 1;
@@ -10,7 +10,7 @@

 .title {
  margin-bottom: 2px;
-  color: var(--helpTextColor);
+  color: $helpTextColor;
  font-size: 10px;
 }

@@ -36,5 +36,5 @@
 /** Outline **/

 .outline {
-  background-color: var(--white);
+  background-color: $white;
 }
--- a/frontend/src/Components/Label.css
+++ b/frontend/src/Components/Label.css
@@ -3,7 +3,7 @@
  margin: 2px;
  border: 1px solid;
  border-radius: 2px;
-  color: var(--white);
+  color: $white;
  text-align: center;
  white-space: nowrap;
  line-height: 1;
@@ -13,77 +13,86 @@
 /** Kinds **/

 .danger {
-  border-color: var(--dangerColor);
-  background-color: var(--dangerColor);
+  border-color: $dangerColor;
+  background-color: $dangerColor;

  &.outline {
-    color: var(--dangerColor);
+    color: $dangerColor;
  }
 }

 .default {
-  border-color: var(--themeLightColor);
-  background-color: var(--themeLightColor);
+  border-color: $themeLightColor;
+  background-color: $themeLightColor;

  &.outline {
-    color: var(--themeLightColor);
+    color: $themeLightColor;
  }
 }

 .disabled {
-  border-color: var(--disabledColor);
-  background-color: var(--disabledColor);
+  border-color: $disabledColor;
+  background-color: $disabledColor;

  &.outline {
-    color: var(--disabledColor);
+    color: $disabledColor;
  }
 }

 .info {
-  border-color: var(--infoColor);
-  background-color: var(--infoColor);
+  border-color: $infoColor;
+  background-color: $infoColor;

  &.outline {
-    color: var(--infoColor);
+    color: $infoColor;
  }
 }

 .inverse {
-  border-color: var(--inverseLabelColor);
-  background-color: var(--inverseLabelColor);
-  color: var(--inverseLabelTextColor);
+  border-color: $lightGray;
+  background-color: $lightGray;
+  color: $defaultColor;

  &.outline {
-    background-color: var(--inverseLabelTextColor) !important;
-    color: var(--inverseLabelColor);
+    background-color: $defaultColor !important;
+    color: $lightGray;
  }
 }

 .primary {
-  border-color: var(--primaryColor);
-  background-color: var(--primaryColor);
+  border-color: $primaryColor;
+  background-color: $primaryColor;

  &.outline {
-    color: var(--primaryColor);
+    color: $primaryColor;
  }
 }

 .success {
-  border-color: var(--successColor);
-  background-color: var(--successColor);
+  border-color: $successColor;
+  background-color: $successColor;
  color: #eee;

  &.outline {
-    color: var(--successColor);
+    color: $successColor;
  }
 }

 .warning {
-  border-color: var(--warningColor);
-  background-color: var(--warningColor);
+  border-color: $warningColor;
+  background-color: $warningColor;

  &.outline {
-    color: var(--warningColor);
+    color: $warningColor;
+  }
+}
+
+.queue {
+  border-color: $queueColor;
+  background-color: $queueColor;
+
+  &.outline {
+    color: $queueColor;
  }
 }

@@ -108,5 +117,5 @@
 /** Outline **/

 .outline {
-  background-color: var(--white);
+  background-color: $white;
 }
--- a/frontend/src/Components/Link/Button.css
+++ b/frontend/src/Components/Link/Button.css
@@ -19,62 +19,62 @@
 }

 .danger {
-  border-color: var(--dangerBorderColor);
-  background-color: var(--dangerBackgroundColor);
-  color: var(--white);
+  border-color: $dangerBorderColor;
+  background-color: $dangerBackgroundColor;
+  color: $white;

  &:hover {
-    border-color: var(--dangerHoverBorderColor);
-    background-color: var(--dangerHoverBackgroundColor);
-    color: var(--white);
+    border-color: $dangerHoverBorderColor;
+    background-color: $dangerHoverBackgroundColor;
+    color: $white;
  }
 }

 .default {
-  border-color: var(--defaultBorderColor);
-  background-color: var(--defaultButtonBackgroundColor);
-  color: var(--defaultButtonTextColor);
+  border-color: $defaultBorderColor;
+  background-color: $defaultBackgroundColor;
+  color: $defaultColor;

  &:hover {
-    border-color: var(--defaultHoverBorderColor);
-    background-color: var(--defaultHoverBackgroundColor);
-    color: var(--defaultButtonTextColor);
+    border-color: $defaultHoverBorderColor;
+    background-color: $defaultHoverBackgroundColor;
+    color: $defaultColor;
  }
 }

 .primary {
-  border-color: var(--primaryBorderColor);
-  background-color: var(--primaryBackgroundColor);
-  color: var(--white);
+  border-color: $primaryBorderColor;
+  background-color: $primaryBackgroundColor;
+  color: $white;

  &:hover {
-    border-color: var(--primaryHoverBorderColor);
-    background-color: var(--primaryHoverBackgroundColor);
-    color: var(--white);
+    border-color: $primaryHoverBorderColor;
+    background-color: $primaryHoverBackgroundColor;
+    color: $white;
  }
 }

 .success {
-  border-color: var(--successBorderColor);
-  background-color: var(--successBackgroundColor);
-  color: var(--white);
+  border-color: $successBorderColor;
+  background-color: $successBackgroundColor;
+  color: $white;

  &:hover {
-    border-color: var(--successHoverBorderColor);
-    background-color: var(--successHoverBackgroundColor);
-    color: var(--white);
+    border-color: $successHoverBorderColor;
+    background-color: $successHoverBackgroundColor;
+    color: $white;
  }
 }

 .warning {
-  border-color: var(--warningBorderColor);
-  background-color: var(--warningBackgroundColor);
-  color: var(--white);
+  border-color: $warningBorderColor;
+  background-color: $warningBackgroundColor;
+  color: $white;

  &:hover {
-    border-color: var(--warningHoverBorderColor);
-    background-color: var(--warningHoverBackgroundColor);
-    color: var(--white);
+    border-color: $warningHoverBorderColor;
+    background-color: $warningHoverBackgroundColor;
+    color: $white;
  }
 }

--- a/frontend/src/Components/Link/IconButton.css
+++ b/frontend/src/Components/Link/IconButton.css
@@ -12,10 +12,10 @@
  &:hover {
    border: none;
    background-color: inherit;
-    color: var(--iconButtonHoverColor);
+    color: $iconButtonHoverColor;
  }

  &.isDisabled {
-    color: var(--iconButtonDisabledColor);
+    color: $iconButtonDisabledColor;
  }
 }
--- a/frontend/src/Components/Link/Link.css
+++ b/frontend/src/Components/Link/Link.css
@@ -15,10 +15,10 @@
 }

 .to {
-  color: var(--linkColor);
+  color: $linkColor;

  &:hover {
-    color: var(--linkHoverColor);
+    color: $linkHoverColor;
    text-decoration: underline;
  }
 }
--- a/frontend/src/Components/Loading/LoadingIndicator.css
+++ b/frontend/src/Components/Loading/LoadingIndicator.css
@@ -26,7 +26,7 @@

 .ripple {
  position: absolute;
-  border: 2px solid var(--themeDarkColor);
+  border: 2px solid #3a3f51;
  border-radius: 100%;
  animation: rippleContainer 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
  animation-fill-mode: both;
--- a/frontend/src/Components/Menu/MenuButton.css
+++ b/frontend/src/Components/Menu/MenuButton.css
@@ -10,12 +10,12 @@
  }

  &:hover {
-    color: var(--toobarButtonHoverColor);
+    color: $toobarButtonHoverColor;
  }
 }

 .isDisabled {
-  color: var(--disabledColor);
+  color: $disabledColor;

  pointer-events: none;
 }
--- a/frontend/src/Components/Menu/MenuContent.css
+++ b/frontend/src/Components/Menu/MenuContent.css
@@ -2,7 +2,7 @@
  z-index: $popperZIndex;
  display: flex;
  flex-direction: column;
-  background-color: var(--toolbarMenuItemBackgroundColor);
+  background-color: $toolbarMenuItemBackgroundColor;
  line-height: 20px;
 }

--- a/frontend/src/Components/Menu/MenuItem.css
+++ b/frontend/src/Components/Menu/MenuItem.css
@@ -5,19 +5,19 @@
  padding: 10px 20px;
  min-width: 150px;
  max-width: 250px;
-  background-color: var(--toolbarMenuItemBackgroundColor);
-  color: var(--menuItemColor);
+  background-color: $toolbarMenuItemBackgroundColor;
+  color: $menuItemColor;
  line-height: 20px;

  &:hover,
  &:focus {
-    background-color: var(--toolbarMenuItemHoverBackgroundColor);
-    color: var(--menuItemHoverColor);
+    background-color: $toolbarMenuItemHoverBackgroundColor;
+    color: $menuItemHoverColor;
    text-decoration: none;
  }
 }

 .isDisabled {
-  color: var(--disabledColor);
+  color: $disabledColor;
  pointer-events: none;
 }
--- a/frontend/src/Components/Menu/MenuItemSeparator.css
+++ b/frontend/src/Components/Menu/MenuItemSeparator.css
@@ -2,5 +2,5 @@
  overflow: hidden;
  min-height: 1px;
  height: 1px;
-  background-color: var(--themeDarkColor);
+  background-color: $themeDarkColor;
 }
--- a/frontend/src/Components/Modal/Modal.css
+++ b/frontend/src/Components/Modal/Modal.css
@@ -12,7 +12,7 @@
  justify-content: center;
  width: 100%;
  height: 100%;
-  background-color: var(--modalBackdropBackgroundColor);
+  background-color: $modalBackdropBackgroundColor;
  opacity: 1;
 }

--- a/frontend/src/Components/Modal/ModalContent.css
+++ b/frontend/src/Components/Modal/ModalContent.css
@@ -4,7 +4,7 @@
  flex-direction: column;
  flex-grow: 1;
  width: 100%;
-  background-color: var(--modalBackgroundColor);
+  background-color: $modalBackgroundColor;
 }

 .closeButton {
@@ -18,6 +18,6 @@
  line-height: 60px;

  &:hover {
-    color: var(--modalCloseButtonHoverColor);
+    color: $modalCloseButtonHoverColor;
  }
 }
--- a/frontend/src/Components/Modal/ModalFooter.css
+++ b/frontend/src/Components/Modal/ModalFooter.css
@@ -4,7 +4,7 @@
  justify-content: flex-end;
  flex-shrink: 0;
  padding: 15px 30px;
-  border-top: 1px solid var(--borderColor);
+  border-top: 1px solid $borderColor;

  a,
  button {
--- a/frontend/src/Components/Modal/ModalHeader.css
+++ b/frontend/src/Components/Modal/ModalHeader.css
@@ -3,6 +3,6 @@

  flex-shrink: 0;
  padding: 15px 50px 15px 30px;
-  border-bottom: 1px solid var(--borderColor);
+  border-bottom: 1px solid $borderColor;
  font-size: 18px;
 }
--- a/frontend/src/Components/Page/Header/IndexerSearchInput.css
+++ b/frontend/src/Components/Page/Header/IndexerSearchInput.css
@@ -12,22 +12,22 @@
 .ripple {
  composes: ripple from '~Components/Loading/LoadingIndicator.css';

-  border: 1px solid var(--toolbarColor);
+  border: 1px solid $toolbarColor;
 }

 .input {
  margin-left: 8px;
  width: 200px;
  border: none;
-  border-bottom: solid 1px var(--white);
+  border-bottom: solid 1px $white;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
-  color: var(--white);
+  color: $white;
  transition: border 0.3s ease-out;

  &::placeholder {
-    color: var(--white);
+    color: $white;
    transition: color 0.3s ease-out;
  }

@@ -60,13 +60,13 @@
    overflow-y: auto;
    min-width: 100%;
    max-height: 230px;
-    border: 1px solid var(--themeDarkColor);
+    border: 1px solid $themeDarkColor;
    border-radius: 4px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
-    background-color: var(--themeDarkColor);
-    box-shadow: inset 0 1px 1px var(--inputBoxShadowColor);
-    color: var(--menuItemColor);
+    background-color: $themeDarkColor;
+    box-shadow: inset 0 1px 1px $inputBoxShadowColor;
+    color: $menuItemColor;
  }
 }

@@ -82,12 +82,12 @@
 }

 .highlighted {
-  background-color: var(--themeLightColor);
+  background-color: $themeLightColor;
 }

 .sectionTitle {
  padding: 5px 8px;
-  color: var(--disabledColor);
+  color: $disabledColor;
 }

 .addNewMovieSuggestion {
--- a/frontend/src/Components/Page/Header/IndexerSearchResult.css
+++ b/frontend/src/Components/Page/Header/IndexerSearchResult.css
@@ -21,7 +21,7 @@
 .alternateTitle {
  composes: title;

-  color: var(--disabledColor);
+  color: $disabledColor;
  font-size: $smallFontSize;
 }

--- a/frontend/src/Components/Page/Header/KeyboardShortcutsModalContent.css
+++ b/frontend/src/Components/Page/Header/KeyboardShortcutsModalContent.css
@@ -8,8 +8,8 @@
 .key {
  padding: 2px 4px;
  border-radius: 3px;
-  background-color: var(--defaultColor);
+  background-color: $defaultColor;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
-  color: var(--white);
+  color: $white;
  font-size: 16px;
 }
--- a/frontend/src/Components/Page/Header/PageHeader.css
+++ b/frontend/src/Components/Page/Header/PageHeader.css
@@ -4,9 +4,9 @@
  align-items: center;
  flex: 0 0 auto;
  height: $headerHeight;
-  background-color: var(--pageHeaderBackgroundColor);
+  background-color: $prowlarrOrange;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-  color: var(--white);
+  color: $white;
 }

 .logoContainer {
@@ -80,7 +80,7 @@
  align-items: center;
  justify-content: center;
  width: 30px;
-  color: var(--themeRed);
+  color: $themeRed;
  text-align: center;
  line-height: 60px;

--- a/frontend/src/Components/Page/Header/PageHeader.js
+++ b/frontend/src/Components/Page/Header/PageHeader.js
@@ -74,7 +74,7 @@ class PageHeader extends Component {
          <IconButton
            className={styles.donate}
            name={icons.HEART}
-            to="https://prowlarr.com/donate"
+            to="https://opencollective.com/prowlarr"
            size={14}
          />
          <IconButton
--- a/frontend/src/Components/Page/Header/PageHeaderActionsMenu.css
+++ b/frontend/src/Components/Page/Header/PageHeaderActionsMenu.css
@@ -5,7 +5,7 @@
  text-align: center;

  &:hover {
-    color: var(--toobarButtonHoverColor);
+    color: $toobarButtonHoverColor;
  }
 }

--- a/frontend/src/Components/Page/LoadingPage.css
+++ b/frontend/src/Components/Page/LoadingPage.css
@@ -1,7 +1,5 @@
 .page {
  composes: page from '~./Page.css';
-
-  background-color: var(--pageBackground);
 }

 .logoFull {
--- a/frontend/src/Components/Page/PageConnector.js
+++ b/frontend/src/Components/Page/PageConnector.js
@@ -7,7 +7,7 @@ import { saveDimensions, setIsSidebarVisible } from 'Store/Actions/appActions';
 import { fetchCustomFilters } from 'Store/Actions/customFilterActions';
 import { fetchIndexers } from 'Store/Actions/indexerActions';
 import { fetchIndexerStatus } from 'Store/Actions/indexerStatusActions';
-import { fetchAppProfiles, fetchGeneralSettings, fetchIndexerCategories, fetchUISettings } from 'Store/Actions/settingsActions';
+import { fetchAppProfiles, fetchGeneralSettings, fetchIndexerCategories, fetchLanguages, fetchUISettings } from 'Store/Actions/settingsActions';
 import { fetchStatus } from 'Store/Actions/systemActions';
 import { fetchTags } from 'Store/Actions/tagActions';
 import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
@@ -48,6 +48,7 @@ const selectIsPopulated = createSelector(
  (state) => state.tags.isPopulated,
  (state) => state.settings.ui.isPopulated,
  (state) => state.settings.general.isPopulated,
+  (state) => state.settings.languages.isPopulated,
  (state) => state.settings.appProfiles.isPopulated,
  (state) => state.indexers.isPopulated,
  (state) => state.indexerStatus.isPopulated,
@@ -58,6 +59,7 @@ const selectIsPopulated = createSelector(
    tagsIsPopulated,
    uiSettingsIsPopulated,
    generalSettingsIsPopulated,
+    languagesIsPopulated,
    appProfilesIsPopulated,
    indexersIsPopulated,
    indexerStatusIsPopulated,
@@ -69,6 +71,7 @@ const selectIsPopulated = createSelector(
      tagsIsPopulated &&
      uiSettingsIsPopulated &&
      generalSettingsIsPopulated &&
+      languagesIsPopulated &&
      appProfilesIsPopulated &&
      indexersIsPopulated &&
      indexerStatusIsPopulated &&
@@ -83,6 +86,7 @@ const selectErrors = createSelector(
  (state) => state.tags.error,
  (state) => state.settings.ui.error,
  (state) => state.settings.general.error,
+  (state) => state.settings.languages.error,
  (state) => state.settings.appProfiles.error,
  (state) => state.indexers.error,
  (state) => state.indexerStatus.error,
@@ -93,6 +97,7 @@ const selectErrors = createSelector(
    tagsError,
    uiSettingsError,
    generalSettingsError,
+    languagesError,
    appProfilesError,
    indexersError,
    indexerStatusError,
@@ -104,6 +109,7 @@ const selectErrors = createSelector(
      tagsError ||
      uiSettingsError ||
      generalSettingsError ||
+      languagesError ||
      appProfilesError ||
      indexersError ||
      indexerStatusError ||
@@ -117,6 +123,7 @@ const selectErrors = createSelector(
      tagsError,
      uiSettingsError,
      generalSettingsError,
+      languagesError,
      appProfilesError,
      indexersError,
      indexerStatusError,
@@ -159,6 +166,9 @@ function createMapDispatchToProps(dispatch, props) {
    dispatchFetchTags() {
      dispatch(fetchTags());
    },
+    dispatchFetchLanguages() {
+      dispatch(fetchLanguages());
+    },
    dispatchFetchIndexers() {
      dispatch(fetchIndexers());
    },
@@ -206,6 +216,7 @@ class PageConnector extends Component {
    if (!this.props.isPopulated) {
      this.props.dispatchFetchCustomFilters();
      this.props.dispatchFetchTags();
+      this.props.dispatchFetchLanguages();
      this.props.dispatchFetchAppProfiles();
      this.props.dispatchFetchIndexers();
      this.props.dispatchFetchIndexerStatus();
@@ -231,6 +242,7 @@ class PageConnector extends Component {
      isPopulated,
      hasError,
      dispatchFetchTags,
+      dispatchFetchLanguages,
      dispatchFetchAppProfiles,
      dispatchFetchIndexers,
      dispatchFetchIndexerStatus,
@@ -271,6 +283,7 @@ PageConnector.propTypes = {
  isSidebarVisible: PropTypes.bool.isRequired,
  dispatchFetchCustomFilters: PropTypes.func.isRequired,
  dispatchFetchTags: PropTypes.func.isRequired,
+  dispatchFetchLanguages: PropTypes.func.isRequired,
  dispatchFetchAppProfiles: PropTypes.func.isRequired,
  dispatchFetchIndexers: PropTypes.func.isRequired,
  dispatchFetchIndexerStatus: PropTypes.func.isRequired,
--- a/frontend/src/Components/Page/PageContent.js
+++ b/frontend/src/Components/Page/PageContent.js
@@ -14,7 +14,7 @@ function PageContent(props) {

  return (
    <ErrorBoundary errorComponent={PageContentError}>
-      <DocumentTitle title={title ? `${title} - ${window.Prowlarr.instanceName}` : window.Prowlarr.instanceName}>
+      <DocumentTitle title={title ? `${title} - Prowlarr` : 'Prowlarr'}>
        <div className={className}>
          {children}
        </div>
--- a/frontend/src/Components/Page/PageContentFooter.css
+++ b/frontend/src/Components/Page/PageContentFooter.css
@@ -2,7 +2,7 @@
  display: flex;
  flex: 0 0 auto;
  padding: 20px;
-  background-color: var(--pageFooterBackground);
+  background-color: #f1f1f1;
 }

@media only screen and (max-width: $breakpointSmall) {
--- a/frontend/src/Components/Page/PageJumpBarItem.css
+++ b/frontend/src/Components/Page/PageJumpBarItem.css
@@ -1,6 +1,6 @@
 .jumpBarItem {
  flex: 1 1 $jumpBarItemHeight;
-  border-bottom: 1px solid var(--borderColor);
+  border-bottom: 1px solid $borderColor;
  text-align: center;
  font-weight: bold;

--- a/frontend/src/Components/Page/Sidebar/Messages/Message.css
+++ b/frontend/src/Components/Page/Sidebar/Messages/Message.css
@@ -1,6 +1,6 @@
 .message {
  display: flex;
-  border-left: 3px solid var(--infoColor);
+  border-left: 3px solid $infoColor;
 }

 .iconContainer,
@@ -9,7 +9,7 @@
  justify-content: center;
  flex-direction: column;
  padding: 2px 0;
-  color: var(--sidebarColor);
+  color: $sidebarColor;
 }

 .iconContainer {
@@ -26,17 +26,17 @@
 /* Types */

 .error {
-  border-left-color: var(--dangerColor);
+  border-left-color: $dangerColor;
 }

 .info {
-  border-left-color: var(--infoColor);
+  border-left-color: $infoColor;
 }

 .success {
-  border-left-color: var(--successColor);
+  border-left-color: $successColor;
 }

 .warning {
-  border-left-color: var(--warningColor);
+  border-left-color: $warningColor;
 }
--- a/frontend/src/Components/Page/Sidebar/PageSidebar.css
+++ b/frontend/src/Components/Page/Sidebar/PageSidebar.css
@@ -2,7 +2,7 @@
  flex: 0 0 $sidebarWidth;
  overflow: hidden;
  width: $sidebarWidth;
-  background-color: var(--sidebarBackgroundColor);
+  background-color: $sidebarBackgroundColor;
  transition: transform 300ms ease-in-out;
  transform: translateX(0);
 }
@@ -11,8 +11,8 @@
  display: flex;
  flex-direction: column;
  overflow: hidden;
-  background-color: var(--sidebarBackgroundColor);
-  color: var(--white);
+  background-color: $sidebarBackgroundColor;
+  color: $white;
 }

@media only screen and (max-width: $breakpointSmall) {
--- a/frontend/src/Components/Page/Sidebar/PageSidebar.js
+++ b/frontend/src/Components/Page/Sidebar/PageSidebar.js
@@ -20,9 +20,9 @@ const SIDEBAR_WIDTH = parseInt(dimensions.sidebarWidth);
 const links = [
  {
    iconName: icons.MOVIE_CONTINUING,
-    title: translate('Indexers'),
+    title: 'Indexers',
    to: '/',
-    alias: '/indexers',
+    alias: '/movies',
    children: [
      {
        title: translate('Stats'),
@@ -33,13 +33,13 @@ const links = [

  {
    iconName: icons.SEARCH,
-    title: translate('Search'),
+    title: 'Search',
    to: '/search'
  },

  {
    iconName: icons.ACTIVITY,
-    title: translate('History'),
+    title: 'History',
    to: '/history'
  },

--- a/frontend/src/Components/Page/Sidebar/PageSidebarItem.css
+++ b/frontend/src/Components/Page/Sidebar/PageSidebarItem.css
@@ -1,21 +1,21 @@
 .item {
  border-left: 3px solid transparent;
-  color: var(--sidebarColor);
+  color: $sidebarColor;
  transition: border-left 0.3s ease-in-out;
 }

 .isActiveItem {
-  border-left: 3px solid var(--themeBlue);
+  border-left: 3px solid $themeBlue;
 }

 .link {
  display: block;
  padding: 12px 24px;
-  color: var(--sidebarColor);
+  color: $sidebarColor;

  &:hover,
  &:focus {
-    color: var(--themeBlue);
+    color: $themeBlue;
    text-decoration: none;
  }
 }
@@ -27,11 +27,11 @@
 }

 .isActiveLink {
-  color: var(--themeBlue);
+  color: $themeBlue;
 }

 .isActiveParentLink {
-  background-color: var(--sidebarActiveBackgroundColor);
+  background-color: $sidebarActiveBackgroundColor;
 }

 .iconContainer {
--- a/frontend/src/Components/Page/Toolbar/PageToolbar.css
+++ b/frontend/src/Components/Page/Toolbar/PageToolbar.css
@@ -4,8 +4,8 @@
  flex: 0 0 auto;
  padding: 0 20px;
  height: $toolbarHeight;
-  background-color: var(--toolbarBackgroundColor);
-  color: var(--toolbarColor);
+  background-color: $toolbarBackgroundColor;
+  color: $toolbarColor;
  line-height: 60px;
 }

--- a/frontend/src/Components/Page/Toolbar/PageToolbarButton.css
+++ b/frontend/src/Components/Page/Toolbar/PageToolbarButton.css
@@ -6,16 +6,16 @@
  text-align: center;

  &:hover {
-    color: var(--toobarButtonHoverColor);
+    color: $toobarButtonHoverColor;
  }

  &.isDisabled {
-    color: var(--disabledColor);
+    color: $disabledColor;
  }
 }

 .isDisabled {
-  color: var(--disabledColor);
+  color: $disabledColor;
 }

 .labelContainer {
@@ -27,7 +27,7 @@

 .label {
  padding: 0 3px;
-  color: var(--toolbarLabelColor);
+  color: $toolbarLabelColor;
  font-size: $extraSmallFontSize;
  line-height: calc($extraSmallFontSize + 1px);
 }
--- a/frontend/src/Components/ProgressBar.css
+++ b/frontend/src/Components/ProgressBar.css
@@ -14,13 +14,13 @@
  width: 0;
  height: 100%;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-  color: var(--white);
+  color: $white;
  transition: width 0.6s ease;
 }

 .frontTextContainer {
  z-index: 1;
-  color: var(--white);
+  color: $white;
 }

 .backTextContainer,
@@ -42,35 +42,39 @@
 }

 .primary {
-  background-color: var(--primaryColor);
+  background-color: $primaryColor;
 }

 .danger {
-  background-color: var(--dangerColor);
+  background-color: $dangerColor;

  &:global(.colorImpaired) {
-    background: repeating-linear-gradient(90deg, color(var(--dangerColor) shade(5%)), color(var(--dangerColor) shade(5%)) 5px, color(var(--dangerColor) shade(15%)) 5px, color(var(--dangerColor) shade(15%)) 10px);
+    background: repeating-linear-gradient(90deg, color($dangerColor shade(5%)), color($dangerColor shade(5%)) 5px, color($dangerColor shade(15%)) 5px, color($dangerColor shade(15%)) 10px);
  }
 }

 .success {
-  background-color: var(--successColor);
+  background-color: $successColor;
 }

 .purple {
-  background-color: var(--purple);
+  background-color: $purple;
 }

 .warning {
-  background-color: var(--warningColor);
+  background-color: $warningColor;

  &:global(.colorImpaired) {
-    background: repeating-linear-gradient(45deg, var(--warningColor), var(--warningColor) 5px, color(var(--warningColor) tint(15%)) 5px, color(var(--warningColor) tint(15%)) 10px);
+    background: repeating-linear-gradient(45deg, $warningColor, $warningColor 5px, color($warningColor tint(15%)) 5px, color($warningColor tint(15%)) 10px);
  }
 }

 .info {
-  background-color: var(--infoColor);
+  background-color: $infoColor;
+}
+
+.queue {
+  background-color: $queueColor;
 }

 .small {
--- a/frontend/src/Components/Scroller/OverlayScroller.css
+++ b/frontend/src/Components/Scroller/OverlayScroller.css
@@ -10,10 +10,10 @@
  min-height: 100px;
  border: 1px solid transparent;
  border-radius: 5px;
-  background-color: var(--scrollbarBackgroundColor);
+  background-color: $scrollbarBackgroundColor;
  background-clip: padding-box;

  &:hover {
-    background-color: var(--scrollbarHoverBackgroundColor);
+    background-color: $scrollbarHoverBackgroundColor;
  }
 }
--- a/frontend/src/Components/Table/TableOptions/TableOptionsColumn.css
+++ b/frontend/src/Components/Table/TableOptions/TableOptionsColumn.css
@@ -4,7 +4,7 @@
  width: 100%;
  border: 1px solid #aaa;
  border-radius: 4px;
-  background: var(--inputBackgroundColor);
+  background: #fafafa;
 }

 .checkContainer {
--- a/frontend/src/Components/Table/TablePager.css
+++ b/frontend/src/Components/Table/TablePager.css
@@ -46,11 +46,11 @@
 }

 .records {
-  color: var(--disabledColor);
+  color: $disabledColor;
 }

 .disabledPageButton {
-  color: var(--disabledColor);
+  color: $disabledColor;
 }

 .pageSelect {
--- a/frontend/src/Components/Table/TableRow.css
+++ b/frontend/src/Components/Table/TableRow.css
@@ -2,6 +2,6 @@
  transition: background-color 500ms;

  &:hover {
-    background-color: var(--tableRowHoverBackgroundColor);
+    background-color: $tableRowHoverBackgroundColor;
  }
 }
--- a/frontend/src/Components/Table/VirtualTableRow.css
+++ b/frontend/src/Components/Table/VirtualTableRow.css
@@ -3,7 +3,7 @@
  transition: background-color 500ms;

  &:hover {
-    background-color: var(--tableRowHoverBackgroundColor);
+    background-color: #fafbfc;
  }
 }

--- a/frontend/src/Components/Tooltip/Popover.css
+++ b/frontend/src/Components/Tooltip/Popover.css
@@ -1,7 +1,7 @@
 .title {
  padding: 10px 20px;
-  border-bottom: 1px solid var(--popoverTitleBorderColor);
-  background-color: var(--popoverTitleBackgroundColor);
+  border-bottom: 1px solid $popoverTitleBorderColor;
+  background-color: $popoverTitleBackgroundColor;
  font-size: 16px;
 }

--- a/frontend/src/Components/Tooltip/Tooltip.css
+++ b/frontend/src/Components/Tooltip/Tooltip.css
@@ -7,13 +7,13 @@
  position: relative;

  &.default {
-    background-color: var(--popoverBodyBackgroundColor);
-    box-shadow: 0 5px 10px var(--popoverShadowColor);
+    background-color: $white;
+    box-shadow: 0 5px 10px $popoverShadowColor;
  }

  &.inverse {
-    background-color: var(--themeDarkColor);
-    box-shadow: 0 5px 10px var(--popoverShadowInverseColor);
+    background-color: $themeDarkColor;
+    box-shadow: 0 5px 10px $popoverShadowInverseColor;
  }
 }

@@ -49,20 +49,20 @@
    content: ' ';

    &.default {
-      border-top-color: var(--popoverArrowBorderColor);
+      border-top-color: $popoverArrowBorderColor;
    }

    &.inverse {
-      border-top-color: var(--popoverArrowBorderInverseColor);
+      border-top-color: $popoverArrowBorderInverseColor;
    }
  }

  &.default {
-    border-top-color: var(--popoverArrowBorderColor);
+    border-top-color: $popoverArrowBorderColor;
  }

  &.inverse {
-    border-top-color: var(--popoverArrowBorderInverseColor);
+    border-top-color: $popoverArrowBorderInverseColor;
  }
 }

@@ -78,20 +78,20 @@
    content: ' ';

    &.default {
-      border-right-color: var(--popoverArrowBorderColor);
+      border-right-color: $popoverArrowBorderColor;
    }

    &.inverse {
-      border-right-color: var(--popoverArrowBorderInverseColor);
+      border-right-color: $popoverArrowBorderInverseColor;
    }
  }

  &.default {
-    border-right-color: var(--popoverArrowBorderColor);
+    border-right-color: $popoverArrowBorderColor;
  }

  &.inverse {
-    border-right-color: var(--popoverArrowBorderInverseColor);
+    border-right-color: $popoverArrowBorderInverseColor;
  }
 }

@@ -107,20 +107,20 @@
    content: ' ';

    &.default {
-      border-bottom-color: var(--popoverArrowBorderColor);
+      border-bottom-color: $popoverArrowBorderColor;
    }

    &.inverse {
-      border-bottom-color: var(--popoverArrowBorderInverseColor);
+      border-bottom-color: $popoverArrowBorderInverseColor;
    }
  }

  &.default {
-    border-bottom-color: var(--popoverArrowBorderColor);
+    border-bottom-color: $popoverArrowBorderColor;
  }

  &.inverse {
-    border-bottom-color: var(--popoverArrowBorderInverseColor);
+    border-bottom-color: $popoverArrowBorderInverseColor;
  }
 }

@@ -136,20 +136,20 @@
    content: ' ';

    &.default {
-      border-left-color: var(--popoverArrowBorderColor);
+      border-left-color: $popoverArrowBorderColor;
    }

    &.inverse {
-      border-left-color: var(--popoverArrowBorderInverseColor);
+      border-left-color: $popoverArrowBorderInverseColor;
    }
  }

  &.default {
-    border-left-color: var(--popoverArrowBorderColor);
+    border-left-color: $popoverArrowBorderColor;
  }

  &.inverse {
-    border-left-color: var(--popoverArrowBorderInverseColor);
+    border-left-color: $popoverArrowBorderInverseColor;
  }
 }

--- a/frontend/src/Helpers/Props/kinds.js
+++ b/frontend/src/Helpers/Props/kinds.js
@@ -3,6 +3,7 @@ export const DEFAULT = 'default';
 export const DISABLED = 'disabled';
 export const INFO = 'info';
 export const INVERSE = 'inverse';
+export const PINK = 'pink';
 export const PRIMARY = 'primary';
 export const PURPLE = 'purple';
 export const SUCCESS = 'success';
@@ -15,6 +16,7 @@ export const all = [
  DISABLED,
  INFO,
  INVERSE,
+  PINK,
  PRIMARY,
  PURPLE,
  SUCCESS,
--- a/frontend/src/History/HistoryRowParameter.css
+++ b/frontend/src/History/HistoryRowParameter.css
@@ -3,9 +3,9 @@
  align-items: stretch;
  overflow: hidden;
  margin: 2px 4px;
-  border: 1px solid var(--borderColor);
+  border: 1px solid $borderColor;
  border-radius: 4px;
-  background-color: var(--defaultHoverBackgroundColor);
+  background-color: #eee;
  cursor: default;
 }

@@ -16,7 +16,7 @@

 .value {
  padding: 0 4px;
-  background-color: var(--defaultButtonBackgroundColor);
-  color: var(--defaultColor);
+  background-color: $white;
+  color: $defaultColor;
  white-space: nowrap;
 }
--- a/frontend/src/Indexer/Edit/EditIndexerModalContent.js
+++ b/frontend/src/Indexer/Edit/EditIndexerModalContent.js
@@ -112,7 +112,7 @@ function EditIndexerModalContent(props) {
              </FormGroup>

              <FormGroup>
-                <FormLabel>{translate('SyncProfile')}</FormLabel>
+                <FormLabel>{translate('AppProfile')}</FormLabel>

                <FormInputGroup
                  type={inputTypes.APP_PROFILE_SELECT}
--- a/frontend/src/Indexer/Editor/Delete/DeleteIndexerModalContent.css
+++ b/frontend/src/Indexer/Editor/Delete/DeleteIndexerModalContent.css
@@ -9,5 +9,5 @@

 .path {
  margin-left: 5px;
-  color: var(--dangerColor);
+  color: $dangerColor;
 }
--- a/frontend/src/Indexer/Editor/IndexerEditorFooter.js
+++ b/frontend/src/Indexer/Editor/IndexerEditorFooter.js
@@ -133,7 +133,7 @@ class IndexerEditorFooter extends Component {

        <div className={styles.inputContainer}>
          <IndexerEditorFooterLabel
-            label={translate('SyncProfile')}
+            label={translate('AppProfile')}
            isSaving={isSaving && appProfileId !== NO_CHANGE}
          />

--- a/frontend/src/Indexer/Index/IndexerIndexFooter.css
+++ b/frontend/src/Indexer/Index/IndexerIndexFooter.css
@@ -21,28 +21,28 @@
 .disabled {
  composes: legendItemColor;

-  background-color: var(--darkGray);
+  background-color: $darkGray;
 }

 .enabled {
  composes: legendItemColor;

-  background-color: var(--successColor);
+  background-color: $successColor;
 }

 .redirected {
  composes: legendItemColor;

-  background-color: var(--infoColor);
+  background-color: $infoColor;
 }

 .error {
  composes: legendItemColor;

-  background-color: var(--dangerColor);
+  background-color: $dangerColor;

  &:global(.colorImpaired) {
-    background: repeating-linear-gradient(90deg, color(var(--dangerColor) shade(5%)), color(var(--dangerColor) shade(5%)) 5px, color(var(--dangerColor) shade(15%)) 5px, color(var(--dangerColor) shade(15%)) 10px);
+    background: repeating-linear-gradient(90deg, color($dangerColor shade(5%)), color($dangerColor shade(5%)) 5px, color($dangerColor shade(15%)) 5px, color($dangerColor shade(15%)) 10px);
  }
 }

--- a/frontend/src/Indexer/Index/IndexerIndexFooter.js
+++ b/frontend/src/Indexer/Index/IndexerIndexFooter.js
@@ -35,21 +35,21 @@ class IndexerIndexFooter extends PureComponent {
          <div className={styles.legendItem}>
            <div className={styles.enabled} />
            <div>
-              {translate('Enabled')}
+              Enabled
            </div>
          </div>

          <div className={styles.legendItem}>
            <div className={styles.redirected} />
            <div>
-              {translate('EnabledRedirected')}
+              Enabled, Redirected
            </div>
          </div>

          <div className={styles.legendItem}>
            <div className={styles.disabled} />
            <div>
-              {translate('Disabled')}
+              Disabled
            </div>
          </div>

@@ -60,7 +60,7 @@ class IndexerIndexFooter extends PureComponent {
            )}
            />
            <div>
-              {translate('Error')}
+              Error
            </div>
          </div>
        </div>
--- a/frontend/src/Indexer/Index/Menus/IndexerIndexSortMenu.js
+++ b/frontend/src/Indexer/Index/Menus/IndexerIndexSortMenu.js
@@ -53,7 +53,7 @@ function IndexerIndexSortMenu(props) {
          sortDirection={sortDirection}
          onPress={onSortSelect}
        >
-          {translate('SyncProfile')}
+          {translate('AppProfile')}
        </SortMenuItem>

        <SortMenuItem
--- a/frontend/src/Indexer/Index/Table/IndexerIndexRow.css
+++ b/frontend/src/Indexer/Index/Table/IndexerIndexRow.css
@@ -65,5 +65,5 @@
 .externalLink {
  composes: link from '~Components/Link/Link.css';

-  color: var(--textColor);
+  color: $textColor;
 }
--- a/frontend/src/Indexer/Index/Table/IndexerIndexRow.js
+++ b/frontend/src/Indexer/Index/Table/IndexerIndexRow.js
@@ -190,7 +190,7 @@ class IndexerIndexRow extends Component {
                  key={name}
                  className={styles[column.name]}
                >
-                  {appProfile?.name || ''}
+                  {appProfile.name}
                </VirtualTableRowCell>
              );
            }
--- a/frontend/src/Indexer/Index/Table/ProtocolLabel.css
+++ b/frontend/src/Indexer/Index/Table/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/Search/QueryParameterModal.css
+++ b/frontend/src/Search/QueryParameterModal.css
@@ -19,7 +19,7 @@

 .footNote {
  display: flex;
-  color: var(--helpTextColor);
+  color: $helpTextColor;

  .icon {
    margin-top: 3px;
@@ -29,7 +29,7 @@

  code {
    padding: 0 1px;
-    border: 1px solid var(--borderColor);
+    border: 1px solid $borderColor;
    background-color: #f7f7f7;
  }
 }
--- a/frontend/src/Search/QueryParameterModal.js
+++ b/frontend/src/Search/QueryParameterModal.js
@@ -24,7 +24,6 @@ const searchOptions = [
 const seriesTokens = [
  { token: '{ImdbId:tt1234567}', example: 'tt12345' },
  { token: '{TvdbId:12345}', example: '12345' },
-  { token: '{TmdbId:12345}', example: '12345' },
  { token: '{TvMazeId:12345}', example: '54321' },
  { token: '{Season:00}', example: '01' },
  { token: '{Episode:00}', example: '01' }
--- a/frontend/src/Search/QueryParameterOption.css
+++ b/frontend/src/Search/QueryParameterOption.css
@@ -3,15 +3,15 @@
  align-items: stretch;
  flex-wrap: wrap;
  margin: 3px;
-  border: 1px solid var(--borderColor);
+  border: 1px solid $borderColor;

  &:hover {
    .token {
-      background-color: rgba(0, 0, 0, 0.01);
+      background-color: #ddd;
    }

    .example {
-      background-color: rgba(0, 0, 0, 0.01);
+      background-color: #ccc;
    }
  }
 }
@@ -27,7 +27,7 @@
 .token {
  flex: 0 0 50%;
  padding: 6px 16px;
-  background-color: var(--defaultButtonBackgroundColor);
+  background-color: #eee;
  font-family: $monoSpaceFontFamily;
 }

@@ -37,7 +37,7 @@
  justify-content: space-between;
  flex: 0 0 50%;
  padding: 6px 16px;
-  background-color: var(--defaultHoverBackgroundColor);
+  background-color: #ddd;

  .footNote {
    padding: 2px;
--- a/frontend/src/Search/Table/ProtocolLabel.css
+++ b/frontend/src/Search/Table/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/Search/Table/SearchIndexRow.css
+++ b/frontend/src/Search/Table/SearchIndexRow.css
@@ -58,7 +58,7 @@

  margin: 0 2px;
  width: 22px;
-  color: var(--textColor);
+  color: $textColor;
 }

 .externalLinks {
--- a/frontend/src/Settings/AdvancedSettingsButton.css
+++ b/frontend/src/Settings/AdvancedSettingsButton.css
@@ -19,13 +19,13 @@
 }

 .indicatorBackground {
-  color: var(--themeDarkColor);
+  color: $themeDarkColor;
 }

 .enabled {
-  color: var(--successColor);
+  color: $successColor;
 }

 .disabled {
-  color: var(--dangerColor);
+  color: $dangerColor;
 }
--- a/frontend/src/Settings/Applications/Applications/Applications.css
+++ b/frontend/src/Settings/Applications/Applications/Applications.css
@@ -6,15 +6,15 @@
 .addApplication {
  composes: application from '~./Application.css';

-  background-color: var(--cardAlternateBackgroundColor);
-  color: var(--gray);
+  background-color: $cardAlternateBackgroundColor;
+  color: $gray;
  text-align: center;
 }

 .center {
  display: inline-block;
  padding: 5px 20px 0;
-  border: 1px solid var(--borderColor);
+  border: 1px solid $borderColor;
  border-radius: 4px;
-  background-color: var(--cardCenterBackgroundColor);
+  background-color: $white;
 }
--- a/frontend/src/Settings/DownloadClients/DownloadClients/DownloadClients.css
+++ b/frontend/src/Settings/DownloadClients/DownloadClients/DownloadClients.css
@@ -6,15 +6,15 @@
 .addDownloadClient {
  composes: downloadClient from '~./DownloadClient.css';

-  background-color: var(--cardAlternateBackgroundColor);
-  color: var(--gray);
+  background-color: $cardAlternateBackgroundColor;
+  color: $gray;
  text-align: center;
 }

 .center {
  display: inline-block;
  padding: 5px 20px 0;
-  border: 1px solid var(--borderColor);
+  border: 1px solid $borderColor;
  border-radius: 4px;
-  background-color: var(--cardCenterBackgroundColor);
+  background-color: $white;
 }
--- a/frontend/src/Settings/General/HostSettings.js
+++ b/frontend/src/Settings/General/HostSettings.js
@@ -20,7 +20,6 @@ function HostSettings(props) {
    bindAddress,
    port,
    urlBase,
-    instanceName,
    enableSsl,
    sslPort,
    sslCertPath,
@@ -73,22 +72,6 @@ function HostSettings(props) {
        />
      </FormGroup>

-      <FormGroup
-        advancedSettings={advancedSettings}
-        isAdvanced={true}
-      >
-        <FormLabel>{translate('InstanceName')}</FormLabel>
-
-        <FormInputGroup
-          type={inputTypes.TEXT}
-          name="instanceName"
-          helpText={translate('InstanceNameHelpText')}
-          helpTextWarning={translate('RestartRequiredHelpTextWarning')}
-          onChange={onInputChange}
-          {...instanceName}
-        />
-      </FormGroup>
-
      <FormGroup
        advancedSettings={advancedSettings}
        isAdvanced={true}
--- a/frontend/src/Settings/Indexers/IndexerProxies/IndexerProxies.css
+++ b/frontend/src/Settings/Indexers/IndexerProxies/IndexerProxies.css
@@ -6,15 +6,15 @@
 .addIndexerProxy {
  composes: indexerProxy from '~./IndexerProxy.css';

-  background-color: var(--cardAlternateBackgroundColor);
-  color: var(--gray);
+  background-color: $cardAlternateBackgroundColor;
+  color: $gray;
  text-align: center;
 }

 .center {
  display: inline-block;
  padding: 5px 20px 0;
-  border: 1px solid var(--borderColor);
+  border: 1px solid $borderColor;
  border-radius: 4px;
-  background-color: var(--cardCenterBackgroundColor);
+  background-color: $white;
 }
--- a/frontend/src/Settings/Notifications/Notifications/Notifications.css
+++ b/frontend/src/Settings/Notifications/Notifications/Notifications.css
@@ -6,15 +6,15 @@
 .addNotification {
  composes: notification from '~./Notification.css';

-  background-color: var(--cardAlternateBackgroundColor);
-  color: var(--gray);
+  background-color: $cardAlternateBackgroundColor;
+  color: $gray;
  text-align: center;
 }

 .center {
  display: inline-block;
  padding: 5px 20px 0;
-  border: 1px solid var(--borderColor);
+  border: 1px solid $borderColor;
  border-radius: 4px;
-  background-color: var(--cardCenterBackgroundColor);
+  background-color: $white;
 }
--- a/frontend/src/Settings/Profiles/App/AppProfiles.css
+++ b/frontend/src/Settings/Profiles/App/AppProfiles.css
@@ -6,8 +6,8 @@
 .addAppProfile {
  composes: appProfile from '~./AppProfile.css';

-  background-color: var(--cardAlternateBackgroundColor);
-  color: var(--gray);
+  background-color: $cardAlternateBackgroundColor;
+  color: $gray;
  text-align: center;
  font-size: 45px;
 }
@@ -15,7 +15,7 @@
 .center {
  display: inline-block;
  padding: 5px 20px 0;
-  border: 1px solid var(--borderColor);
+  border: 1px solid $borderColor;
  border-radius: 4px;
-  background-color: var(--cardCenterBackgroundColor);
+  background-color: $white;
 }
--- a/frontend/src/Settings/Profiles/App/AppProfiles.js
+++ b/frontend/src/Settings/Profiles/App/AppProfiles.js
@@ -52,7 +52,7 @@ class AppProfiles extends Component {
    } = this.props;

    return (
-      <FieldSet legend={translate('SyncProfiles')}>
+      <FieldSet legend={translate('AppProfiles')}>
        <PageSectionContent
          errorMessage={translate('UnableToLoadAppProfiles')}
          {...otherProps}c={true}
--- a/frontend/src/Settings/Profiles/App/EditAppProfileModalContent.js
+++ b/frontend/src/Settings/Profiles/App/EditAppProfileModalContent.js
@@ -40,15 +40,14 @@ class EditAppProfileModalContent extends Component {
      name,
      enableRss,
      enableInteractiveSearch,
-      enableAutomaticSearch,
-      minimumSeeders
+      enableAutomaticSearch
    } = item;

    return (
      <ModalContent onModalClose={onModalClose}>

        <ModalHeader>
-          {id ? translate('EditSyncProfile') : translate('AddSyncProfile')}
+          {id ? translate('EditAppProfile') : translate('AddAppProfile')}
        </ModalHeader>

        <ModalBody>
@@ -124,20 +123,6 @@ class EditAppProfileModalContent extends Component {
                      onChange={onInputChange}
                    />
                  </FormGroup>
-
-                  <FormGroup>
-                    <FormLabel>
-                      {translate('MinimumSeeders')}
-                    </FormLabel>
-
-                    <FormInputGroup
-                      type={inputTypes.NUMBER}
-                      name="minimumSeeders"
-                      {...minimumSeeders}
-                      helpText={translate('MinimumSeedersHelpText')}
-                      onChange={onInputChange}
-                    />
-                  </FormGroup>
                </Form>
            }
          </div>
--- a/frontend/src/Settings/Settings.css
+++ b/frontend/src/Settings/Settings.css
@@ -2,7 +2,7 @@
  composes: link from '~Components/Link/Link.css';

  border-bottom: 1px solid #e5e5e5;
-  color: var(--textColor);
+  color: #3a3f51;
  font-size: 21px;

  &:hover {
@@ -14,5 +14,5 @@
 .summary {
  margin-top: 10px;
  margin-bottom: 30px;
-  color: var(--helpTextColor);
+  color: $dimColor;
 }
--- a/Show More
+++ b/Show More