Fixed: Handle wonky timestamps from Orpheus

.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 = _
 
@@ -117,6 +121,7 @@ dotnet_diagnostic.CA1003.severity = suggestion
 dotnet_diagnostic.CA1008.severity = suggestion
 dotnet_diagnostic.CA1010.severity = suggestion
 dotnet_diagnostic.CA1012.severity = suggestion
+dotnet_diagnostic.CA1014.severity = suggestion
 dotnet_diagnostic.CA1016.severity = suggestion
 dotnet_diagnostic.CA1017.severity = suggestion
 dotnet_diagnostic.CA1018.severity = suggestion
@@ -162,7 +167,6 @@ dotnet_diagnostic.CA1309.severity = suggestion
 dotnet_diagnostic.CA1310.severity = suggestion
 dotnet_diagnostic.CA1401.severity = suggestion
 dotnet_diagnostic.CA1416.severity = suggestion
-dotnet_diagnostic.CA1419.severity = suggestion
 dotnet_diagnostic.CA1507.severity = suggestion
 dotnet_diagnostic.CA1508.severity = suggestion
 dotnet_diagnostic.CA1707.severity = suggestion
@@ -178,6 +182,9 @@ dotnet_diagnostic.CA1720.severity = suggestion
 dotnet_diagnostic.CA1721.severity = suggestion
 dotnet_diagnostic.CA1724.severity = suggestion
 dotnet_diagnostic.CA1725.severity = suggestion
+dotnet_diagnostic.CA1801.severity = suggestion
+dotnet_diagnostic.CA1802.severity = suggestion
+dotnet_diagnostic.CA1805.severity = suggestion
 dotnet_diagnostic.CA1806.severity = suggestion
 dotnet_diagnostic.CA1810.severity = suggestion
 dotnet_diagnostic.CA1812.severity = suggestion
@@ -189,14 +196,13 @@ dotnet_diagnostic.CA1819.severity = suggestion
 dotnet_diagnostic.CA1822.severity = suggestion
 dotnet_diagnostic.CA1823.severity = suggestion
 dotnet_diagnostic.CA1824.severity = suggestion
-dotnet_diagnostic.CA1835.severity = suggestion
-dotnet_diagnostic.CA1845.severity = suggestion
-dotnet_diagnostic.CA1848.severity = suggestion
-dotnet_diagnostic.CA1849.severity = suggestion
 dotnet_diagnostic.CA2000.severity = suggestion
 dotnet_diagnostic.CA2002.severity = suggestion
 dotnet_diagnostic.CA2007.severity = suggestion
 dotnet_diagnostic.CA2008.severity = suggestion
+dotnet_diagnostic.CA2009.severity = suggestion
+dotnet_diagnostic.CA2010.severity = suggestion
+dotnet_diagnostic.CA2011.severity = suggestion
 dotnet_diagnostic.CA2012.severity = suggestion
 dotnet_diagnostic.CA2013.severity = suggestion
 dotnet_diagnostic.CA2100.severity = suggestion
@@ -227,7 +233,6 @@ dotnet_diagnostic.CA2243.severity = suggestion
 dotnet_diagnostic.CA2244.severity = suggestion
 dotnet_diagnostic.CA2245.severity = suggestion
 dotnet_diagnostic.CA2246.severity = suggestion
-dotnet_diagnostic.CA2254.severity = suggestion
 dotnet_diagnostic.CA3061.severity = suggestion
 dotnet_diagnostic.CA3075.severity = suggestion
 dotnet_diagnostic.CA3076.severity = suggestion
@@ -254,7 +259,6 @@ dotnet_diagnostic.CA5385.severity = suggestion
 dotnet_diagnostic.CA5392.severity = suggestion
 dotnet_diagnostic.CA5394.severity = suggestion
 dotnet_diagnostic.CA5397.severity = suggestion
-dotnet_diagnostic.CA5401.severity = suggestion
 
 dotnet_diagnostic.SYSLIB0014.severity = none
 

.github/ISSUE_TEMPLATE/bug_report.yml

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

.github/ISSUE_TEMPLATE/feature_request.yml

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

.github/workflows/azuresync.yml

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

CODE_OF_CONDUCT.md

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

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)
 

azure-pipelines.yml

@@ -7,20 +7,16 @@ variables:
   outputFolder: './_output'
   artifactsFolder: './_artifacts'
   testsFolder: './_tests'
-  yarnCacheFolder: $(Pipeline.Workspace)/.yarn
-  nugetCacheFolder: $(Pipeline.Workspace)/.nuget/packages
-  majorVersion: '1.3.1'
+  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.405'
+  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: ${{ variables.linuxImage }}
-
-      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: ${{ variables.linuxImage }}
-
-      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,14 +603,14 @@ stages:
         displayName: Download Test Artifact
         inputs:
           buildType: 'current'
-          artifactName: 'freebsd-x64-tests'
+          artifactName: 'FreebsdCoreTests'
           targetPath: $(testsFolder)
       - task: DownloadPipelineArtifact@2
         displayName: Download Build Artifact
         inputs:
           buildType: 'current'
           artifactName: Packages
-          itemPattern: '**/$(pattern)'
+          itemPattern: '/$(pattern)'
           targetPath: $(Build.ArtifactStagingDirectory)
       - bash: |
           mkdir -p ${BUILD_ARTIFACTSTAGINGDIRECTORY}/bin
@@ -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
@@ -1108,5 +957,4 @@ stages:
             SYSTEM_ACCESSTOKEN: $(System.AccessToken)
             DISCORDCHANNELID: $(discordChannelId)
             DISCORDWEBHOOKKEY: $(discordWebhookKey)
-            DISCORDTHREADID: $(discordThreadId)
 

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"

frontend/.eslintrc.js

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

frontend/build/webpack.config.js

@@ -142,8 +142,8 @@ module.exports = (env) => {
     module: {
       rules: [
         {
-          test: /\.jsx?$/,
-          exclude: /[\\/]node_modules[\\/](?!(@sentry\/browser|@sentry\/integrations|chart.js|filesize|normalize.css)[\\/])/,
+          test: /\.js?$/,
+          exclude: /(node_modules|JsLibraries)/,
           use: [
             {
               loader: 'babel-loader',

frontend/postcss.config.js

@@ -1,6 +1,7 @@
 const reload = require('require-nocache')(module);
 
 const cssVarsFiles = [
+  './src/Styles/Variables/colors',
   './src/Styles/Variables/dimensions',
   './src/Styles/Variables/fonts',
   './src/Styles/Variables/animations',
@@ -28,4 +29,4 @@ module.exports = {
     'postcss-color-function',
     'postcss-nested'
   ]
-};
+};

frontend/src/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>

frontend/src/App/ApplyTheme.js

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

frontend/src/Components/Alert.css

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

frontend/src/Components/Card.css

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

frontend/src/Components/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 {

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
         }]
       }
     });

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();

frontend/src/Components/FieldSet.css

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

frontend/src/Components/FileBrowser/FileBrowserModalContent.css

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

frontend/src/Components/Filter/Builder/DateFilterBuilderRowValue.js

@@ -160,7 +160,6 @@ class DateFilterBuilderRowValue extends Component {
       <TextInput
         name={NAME}
         value={filterValue}
-        type="date"
         placeholder="yyyy-mm-dd"
         onChange={this.onValueChange}
       />

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

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

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

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

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

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

frontend/src/Components/Filter/CustomFilters/CustomFiltersModalContent.js

@@ -50,7 +50,7 @@ function CustomFiltersModalContent(props) {
 
         <div className={styles.addButtonContainer}>
           <Button onPress={onAddCustomFilter}>
-            {translate('AddCustomFilter')}
+            Add Custom Filter
           </Button>
         </div>
       </ModalBody>

frontend/src/Components/Form/AutoSuggestInput.css

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

frontend/src/Components/Form/CheckInput.css

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

frontend/src/Components/Form/EnhancedSelectInput.css

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

frontend/src/Components/Form/EnhancedSelectInputOption.css

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

frontend/src/Components/Form/EnhancedSelectInputSelectedValue.css

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

frontend/src/Components/Form/FormInputGroup.css

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

frontend/src/Components/Form/FormInputGroup.js

@@ -16,7 +16,6 @@ import FormInputHelpText from './FormInputHelpText';
 import IndexerFlagsSelectInputConnector from './IndexerFlagsSelectInputConnector';
 import InfoInput from './InfoInput';
 import KeyValueListInput from './KeyValueListInput';
-import NewznabCategorySelectInputConnector from './NewznabCategorySelectInputConnector';
 import NumberInput from './NumberInput';
 import OAuthInputConnector from './OAuthInputConnector';
 import PasswordInput from './PasswordInput';
@@ -69,9 +68,6 @@ function getComponent(type) {
     case inputTypes.PATH:
       return PathInputConnector;
 
-    case inputTypes.CATEGORY_SELECT:
-      return NewznabCategorySelectInputConnector;
-
     case inputTypes.INDEXER_FLAGS_SELECT:
       return IndexerFlagsSelectInputConnector;
 

frontend/src/Components/Form/FormInputHelpText.css

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

frontend/src/Components/Form/FormLabel.css

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

frontend/src/Components/Form/HintedSelectInputOption.css

@@ -18,6 +18,6 @@
   @add-mixin truncate;
 
   margin-left: 15px;
-  color: var(--darkGray);
+  color: $darkGray;
   font-size: $smallFontSize;
 }

frontend/src/Components/Form/HintedSelectInputSelectedValue.css

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

frontend/src/Components/Form/Input.css

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

frontend/src/Components/Form/KeyValueListInput.css

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

frontend/src/Components/Form/KeyValueListInputItem.css

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

frontend/src/Components/Form/NewznabCategorySelectInputConnector.js

@@ -31,7 +31,7 @@ function createMapStateToProps() {
       });
 
       return {
-        value: value || [],
+        value,
         values
       };
     }

frontend/src/Components/Form/TagInput.css

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

frontend/src/Components/Form/TagInputInput.js

@@ -36,6 +36,7 @@ class TagInputInput extends Component {
       <div
         ref={forwardedRef}
         className={className}
+        component="div"
         onMouseDown={this.onMouseDown}
       >
         {

frontend/src/Components/Form/TextArea.css

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

frontend/src/Components/Form/TextInput.css

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

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;
 }

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(--cardBackgroundColor);
+  background-color: $white;
 }

frontend/src/Components/Label.css

@@ -3,7 +3,7 @@
   margin: 2px;
   border: 1px solid;
   border-radius: 2px;
-  color: var(--white);
+  color: $white;
   text-align: center;
   white-space: nowrap;
   line-height: 1;
@@ -13,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(--cardBackgroundColor);
+  background-color: $white;
 }

frontend/src/Components/Link/Button.css

@@ -19,62 +19,62 @@
 }
 
 .danger {
-  border-color: var(--dangerBorderColor);
-  background-color: var(--dangerBackgroundColor);
-  color: var(--white);
+  border-color: $dangerBorderColor;
+  background-color: $dangerBackgroundColor;
+  color: $white;
 
   &:hover {
-    border-color: var(--dangerHoverBorderColor);
-    background-color: var(--dangerHoverBackgroundColor);
-    color: var(--white);
+    border-color: $dangerHoverBorderColor;
+    background-color: $dangerHoverBackgroundColor;
+    color: $white;
   }
 }
 
 .default {
-  border-color: var(--defaultBorderColor);
-  background-color: var(--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;
   }
 }
 

frontend/src/Components/Link/IconButton.css

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

frontend/src/Components/Link/Link.css

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

frontend/src/Components/Loading/LoadingIndicator.css

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

frontend/src/Components/Menu/MenuButton.css

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

frontend/src/Components/Menu/MenuContent.css

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

frontend/src/Components/Menu/MenuItem.css

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

frontend/src/Components/Menu/MenuItemSeparator.css

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

frontend/src/Components/Modal/ConfirmModal.js

@@ -30,10 +30,10 @@ function ConfirmModal(props) {
   useEffect(() => {
     if (isOpen) {
       bindShortcut('enter', onConfirm);
-
-      return () => unbindShortcut('enter', onConfirm);
+    } else {
+      unbindShortcut('enter', onConfirm);
     }
-  }, [bindShortcut, unbindShortcut, isOpen, onConfirm]);
+  }, [onConfirm]);
 
   return (
     <Modal

frontend/src/Components/Modal/Modal.css

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

frontend/src/Components/Modal/ModalContent.css

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

frontend/src/Components/Modal/ModalFooter.css

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

frontend/src/Components/Modal/ModalHeader.css

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

frontend/src/Components/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 {

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

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

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

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

frontend/src/Components/Page/Header/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;
 

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

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

@@ -5,7 +5,7 @@
   text-align: center;
 
   &:hover {
-    color: #515253;
+    color: $toobarButtonHoverColor;
   }
 }
 

frontend/src/Components/Page/LoadingPage.css

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

frontend/src/Components/Page/Page.js

@@ -4,7 +4,6 @@ import AppUpdatedModalConnector from 'App/AppUpdatedModalConnector';
 import ColorImpairedContext from 'App/ColorImpairedContext';
 import ConnectionLostModalConnector from 'App/ConnectionLostModalConnector';
 import SignalRConnector from 'Components/SignalRConnector';
-import AuthenticationRequiredModal from 'FirstRun/AuthenticationRequiredModal';
 import locationShape from 'Helpers/Props/Shapes/locationShape';
 import PageHeader from './Header/PageHeader';
 import PageSidebar from './Sidebar/PageSidebar';
@@ -76,7 +75,6 @@ class Page extends Component {
       isSmallScreen,
       isSidebarVisible,
       enableColorImpairedMode,
-      authenticationEnabled,
       onSidebarToggle,
       onSidebarVisibleChange
     } = this.props;
@@ -111,10 +109,6 @@ class Page extends Component {
             isOpen={this.state.isConnectionLostModalOpen}
             onModalClose={this.onConnectionLostModalClose}
           />
-
-          <AuthenticationRequiredModal
-            isOpen={!authenticationEnabled}
-          />
         </div>
       </ColorImpairedContext.Provider>
     );
@@ -130,7 +124,6 @@ Page.propTypes = {
   isUpdated: PropTypes.bool.isRequired,
   isDisconnected: PropTypes.bool.isRequired,
   enableColorImpairedMode: PropTypes.bool.isRequired,
-  authenticationEnabled: PropTypes.bool.isRequired,
   onResize: PropTypes.func.isRequired,
   onSidebarToggle: PropTypes.func.isRequired,
   onSidebarVisibleChange: PropTypes.func.isRequired

frontend/src/Components/Page/PageConnector.js

@@ -7,11 +7,10 @@ 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';
-import createSystemStatusSelector from 'Store/Selectors/createSystemStatusSelector';
 import ErrorPage from './ErrorPage';
 import LoadingPage from './LoadingPage';
 import Page from './Page';
@@ -49,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,
@@ -59,6 +59,7 @@ const selectIsPopulated = createSelector(
     tagsIsPopulated,
     uiSettingsIsPopulated,
     generalSettingsIsPopulated,
+    languagesIsPopulated,
     appProfilesIsPopulated,
     indexersIsPopulated,
     indexerStatusIsPopulated,
@@ -70,6 +71,7 @@ const selectIsPopulated = createSelector(
       tagsIsPopulated &&
       uiSettingsIsPopulated &&
       generalSettingsIsPopulated &&
+      languagesIsPopulated &&
       appProfilesIsPopulated &&
       indexersIsPopulated &&
       indexerStatusIsPopulated &&
@@ -84,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,
@@ -94,6 +97,7 @@ const selectErrors = createSelector(
     tagsError,
     uiSettingsError,
     generalSettingsError,
+    languagesError,
     appProfilesError,
     indexersError,
     indexerStatusError,
@@ -105,6 +109,7 @@ const selectErrors = createSelector(
       tagsError ||
       uiSettingsError ||
       generalSettingsError ||
+      languagesError ||
       appProfilesError ||
       indexersError ||
       indexerStatusError ||
@@ -118,6 +123,7 @@ const selectErrors = createSelector(
       tagsError,
       uiSettingsError,
       generalSettingsError,
+      languagesError,
       appProfilesError,
       indexersError,
       indexerStatusError,
@@ -134,21 +140,18 @@ function createMapStateToProps() {
     selectErrors,
     selectAppProps,
     createDimensionsSelector(),
-    createSystemStatusSelector(),
     (
       enableColorImpairedMode,
       isPopulated,
       errors,
       app,
-      dimensions,
-      systemStatus
+      dimensions
     ) => {
       return {
         ...app,
         ...errors,
         isPopulated,
         isSmallScreen: dimensions.isSmallScreen,
-        authenticationEnabled: systemStatus.authentication !== 'none',
         enableColorImpairedMode
       };
     }
@@ -163,6 +166,9 @@ function createMapDispatchToProps(dispatch, props) {
     dispatchFetchTags() {
       dispatch(fetchTags());
     },
+    dispatchFetchLanguages() {
+      dispatch(fetchLanguages());
+    },
     dispatchFetchIndexers() {
       dispatch(fetchIndexers());
     },
@@ -210,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();
@@ -235,6 +242,7 @@ class PageConnector extends Component {
       isPopulated,
       hasError,
       dispatchFetchTags,
+      dispatchFetchLanguages,
       dispatchFetchAppProfiles,
       dispatchFetchIndexers,
       dispatchFetchIndexerStatus,
@@ -275,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,

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>

frontend/src/Components/Page/PageContentFooter.css

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

frontend/src/Components/Page/PageJumpBarItem.css

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

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

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

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

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

frontend/src/Components/Page/Sidebar/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'
   },
 

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

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

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

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

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

@@ -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);
 }

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 {

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;
   }
 }

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 {

frontend/src/Components/Table/TablePager.css

@@ -46,11 +46,11 @@
 }
 
 .records {
-  color: var(--disabledColor);
+  color: $disabledColor;
 }
 
 .disabledPageButton {
-  color: var(--disabledColor);
+  color: $disabledColor;
 }
 
 .pageSelect {

frontend/src/Components/Table/TableRow.css

@@ -2,6 +2,6 @@
   transition: background-color 500ms;
 
   &:hover {
-    background-color: var(--tableRowHoverBackgroundColor);
+    background-color: $tableRowHoverBackgroundColor;
   }
 }

frontend/src/Components/Table/VirtualTableRow.css

@@ -3,7 +3,7 @@
   transition: background-color 500ms;
 
   &:hover {
-    background-color: var(--tableRowHoverBackgroundColor);
+    background-color: #fafbfc;
   }
 }
 

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;
 }
 

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;
   }
 }
 

frontend/src/FirstRun/AuthenticationRequiredModal.js

@@ -1,34 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import Modal from 'Components/Modal/Modal';
-import { sizes } from 'Helpers/Props';
-import AuthenticationRequiredModalContentConnector from './AuthenticationRequiredModalContentConnector';
-
-function onModalClose() {
-  // No-op
-}
-
-function AuthenticationRequiredModal(props) {
-  const {
-    isOpen
-  } = props;
-
-  return (
-    <Modal
-      size={sizes.MEDIUM}
-      isOpen={isOpen}
-      closeOnBackgroundClick={false}
-      onModalClose={onModalClose}
-    >
-      <AuthenticationRequiredModalContentConnector
-        onModalClose={onModalClose}
-      />
-    </Modal>
-  );
-}
-
-AuthenticationRequiredModal.propTypes = {
-  isOpen: PropTypes.bool.isRequired
-};
-
-export default AuthenticationRequiredModal;

frontend/src/FirstRun/AuthenticationRequiredModalContent.css

@@ -1,5 +0,0 @@
-.authRequiredAlert {
-  composes: alert from '~Components/Alert.css';
-
-  margin-bottom: 20px;
-}

frontend/src/FirstRun/AuthenticationRequiredModalContent.js

@@ -1,165 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { useEffect, useRef } from 'react';
-import Alert from 'Components/Alert';
-import FormGroup from 'Components/Form/FormGroup';
-import FormInputGroup from 'Components/Form/FormInputGroup';
-import FormLabel from 'Components/Form/FormLabel';
-import SpinnerButton from 'Components/Link/SpinnerButton';
-import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import ModalBody from 'Components/Modal/ModalBody';
-import ModalContent from 'Components/Modal/ModalContent';
-import ModalFooter from 'Components/Modal/ModalFooter';
-import ModalHeader from 'Components/Modal/ModalHeader';
-import { inputTypes, kinds } from 'Helpers/Props';
-import { authenticationMethodOptions, authenticationRequiredOptions, authenticationRequiredWarning } from 'Settings/General/SecuritySettings';
-import translate from 'Utilities/String/translate';
-import styles from './AuthenticationRequiredModalContent.css';
-
-function onModalClose() {
-  // No-op
-}
-
-function AuthenticationRequiredModalContent(props) {
-  const {
-    isPopulated,
-    error,
-    isSaving,
-    settings,
-    onInputChange,
-    onSavePress,
-    dispatchFetchStatus
-  } = props;
-
-  const {
-    authenticationMethod,
-    authenticationRequired,
-    username,
-    password
-  } = settings;
-
-  const authenticationEnabled = authenticationMethod && authenticationMethod.value !== 'none';
-
-  const didMount = useRef(false);
-
-  useEffect(() => {
-    if (!isSaving && didMount.current) {
-      dispatchFetchStatus();
-    }
-
-    didMount.current = true;
-  }, [isSaving, dispatchFetchStatus]);
-
-  return (
-    <ModalContent
-      showCloseButton={false}
-      onModalClose={onModalClose}
-    >
-      <ModalHeader>
-        {translate('AuthenticationRequired')}
-      </ModalHeader>
-
-      <ModalBody>
-        <Alert
-          className={styles.authRequiredAlert}
-          kind={kinds.WARNING}
-        >
-          {authenticationRequiredWarning}
-        </Alert>
-
-        {
-          isPopulated && !error ?
-            <div>
-              <FormGroup>
-                <FormLabel>{translate('Authentication')}</FormLabel>
-
-                <FormInputGroup
-                  type={inputTypes.SELECT}
-                  name="authenticationMethod"
-                  values={authenticationMethodOptions}
-                  helpText={translate('AuthenticationMethodHelpText')}
-                  onChange={onInputChange}
-                  {...authenticationMethod}
-                />
-              </FormGroup>
-
-              {
-                authenticationEnabled ?
-                  <FormGroup>
-                    <FormLabel>{translate('AuthenticationRequired')}</FormLabel>
-
-                    <FormInputGroup
-                      type={inputTypes.SELECT}
-                      name="authenticationRequired"
-                      values={authenticationRequiredOptions}
-                      helpText={translate('AuthenticationRequiredHelpText')}
-                      onChange={onInputChange}
-                      {...authenticationRequired}
-                    />
-                  </FormGroup> :
-                  null
-              }
-
-              {
-                authenticationEnabled ?
-                  <FormGroup>
-                    <FormLabel>{translate('Username')}</FormLabel>
-
-                    <FormInputGroup
-                      type={inputTypes.TEXT}
-                      name="username"
-                      onChange={onInputChange}
-                      {...username}
-                    />
-                  </FormGroup> :
-                  null
-              }
-
-              {
-                authenticationEnabled ?
-                  <FormGroup>
-                    <FormLabel>{translate('Password')}</FormLabel>
-
-                    <FormInputGroup
-                      type={inputTypes.PASSWORD}
-                      name="password"
-                      onChange={onInputChange}
-                      {...password}
-                    />
-                  </FormGroup> :
-                  null
-              }
-            </div> :
-            null
-        }
-
-        {
-          !isPopulated && !error ? <LoadingIndicator /> : null
-        }
-      </ModalBody>
-
-      <ModalFooter>
-        <SpinnerButton
-          kind={kinds.PRIMARY}
-          isSpinning={isSaving}
-          isDisabled={!authenticationEnabled}
-          onPress={onSavePress}
-        >
-          {translate('Save')}
-        </SpinnerButton>
-      </ModalFooter>
-    </ModalContent>
-  );
-}
-
-AuthenticationRequiredModalContent.propTypes = {
-  isPopulated: PropTypes.bool.isRequired,
-  error: PropTypes.object,
-  isSaving: PropTypes.bool.isRequired,
-  saveError: PropTypes.object,
-  settings: PropTypes.object.isRequired,
-  onInputChange: PropTypes.func.isRequired,
-  onSavePress: PropTypes.func.isRequired,
-  dispatchFetchStatus: PropTypes.func.isRequired
-};
-
-export default AuthenticationRequiredModalContent;

frontend/src/FirstRun/AuthenticationRequiredModalContentConnector.js

@@ -1,86 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { clearPendingChanges } from 'Store/Actions/baseActions';
-import { fetchGeneralSettings, saveGeneralSettings, setGeneralSettingsValue } from 'Store/Actions/settingsActions';
-import { fetchStatus } from 'Store/Actions/systemActions';
-import createSettingsSectionSelector from 'Store/Selectors/createSettingsSectionSelector';
-import AuthenticationRequiredModalContent from './AuthenticationRequiredModalContent';
-
-const SECTION = 'general';
-
-function createMapStateToProps() {
-  return createSelector(
-    createSettingsSectionSelector(SECTION),
-    (sectionSettings) => {
-      return {
-        ...sectionSettings
-      };
-    }
-  );
-}
-
-const mapDispatchToProps = {
-  dispatchClearPendingChanges: clearPendingChanges,
-  dispatchSetGeneralSettingsValue: setGeneralSettingsValue,
-  dispatchSaveGeneralSettings: saveGeneralSettings,
-  dispatchFetchGeneralSettings: fetchGeneralSettings,
-  dispatchFetchStatus: fetchStatus
-};
-
-class AuthenticationRequiredModalContentConnector extends Component {
-
-  //
-  // Lifecycle
-
-  componentDidMount() {
-    this.props.dispatchFetchGeneralSettings();
-  }
-
-  componentWillUnmount() {
-    this.props.dispatchClearPendingChanges({ section: `settings.${SECTION}` });
-  }
-
-  //
-  // Listeners
-
-  onInputChange = ({ name, value }) => {
-    this.props.dispatchSetGeneralSettingsValue({ name, value });
-  };
-
-  onSavePress = () => {
-    this.props.dispatchSaveGeneralSettings();
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      dispatchClearPendingChanges,
-      dispatchFetchGeneralSettings,
-      dispatchSetGeneralSettingsValue,
-      dispatchSaveGeneralSettings,
-      ...otherProps
-    } = this.props;
-
-    return (
-      <AuthenticationRequiredModalContent
-        {...otherProps}
-        onInputChange={this.onInputChange}
-        onSavePress={this.onSavePress}
-      />
-    );
-  }
-}
-
-AuthenticationRequiredModalContentConnector.propTypes = {
-  dispatchClearPendingChanges: PropTypes.func.isRequired,
-  dispatchFetchGeneralSettings: PropTypes.func.isRequired,
-  dispatchSetGeneralSettingsValue: PropTypes.func.isRequired,
-  dispatchSaveGeneralSettings: PropTypes.func.isRequired,
-  dispatchFetchStatus: PropTypes.func.isRequired
-};
-
-export default connect(createMapStateToProps, mapDispatchToProps)(AuthenticationRequiredModalContentConnector);

frontend/src/Helpers/Props/inputTypes.js

@@ -8,7 +8,6 @@ export const DEVICE = 'device';
 export const KEY_VALUE_LIST = 'keyValueList';
 export const INFO = 'info';
 export const MOVIE_MONITORED_SELECT = 'movieMonitoredSelect';
-export const CATEGORY_SELECT = 'newznabCategorySelect';
 export const NUMBER = 'number';
 export const OAUTH = 'oauth';
 export const PASSWORD = 'password';
@@ -33,7 +32,6 @@ export const all = [
   KEY_VALUE_LIST,
   INFO,
   MOVIE_MONITORED_SELECT,
-  CATEGORY_SELECT,
   NUMBER,
   OAUTH,
   PASSWORD,

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,

frontend/src/History/HistoryRow.js

@@ -226,42 +226,6 @@ class HistoryRow extends Component {
                       null
                   }
 
-                  {
-                    data.label ?
-                      <HistoryRowParameter
-                        title='Label'
-                        value={data.label}
-                      /> :
-                      null
-                  }
-
-                  {
-                    data.track ?
-                      <HistoryRowParameter
-                        title='Track'
-                        value={data.track}
-                      /> :
-                      null
-                  }
-
-                  {
-                    data.year ?
-                      <HistoryRowParameter
-                        title='Year'
-                        value={data.year}
-                      /> :
-                      null
-                  }
-
-                  {
-                    data.genre ?
-                      <HistoryRowParameter
-                        title='Genre'
-                        value={data.genre}
-                      /> :
-                      null
-                  }
-
                   {
                     data.author ?
                       <HistoryRowParameter
@@ -279,15 +243,6 @@ class HistoryRow extends Component {
                       /> :
                       null
                   }
-
-                  {
-                    data.publisher ?
-                      <HistoryRowParameter
-                        title='Publisher'
-                        value={data.publisher}
-                      /> :
-                      null
-                  }
                 </TableRowCell>
               );
             }

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;
 }

frontend/src/Indexer/Add/AddIndexerModalContent.js

@@ -123,7 +123,7 @@ class AddIndexerModalContent extends Component {
     const filteredIndexers = indexers.filter((indexer) => {
       const { filter, filterProtocols, filterLanguages, filterPrivacyLevels } = this.state;
 
-      if (!indexer.name.toLowerCase().includes(filter.toLocaleLowerCase()) && !indexer.description.toLowerCase().includes(filter.toLocaleLowerCase())) {
+      if (!indexer.name.toLowerCase().includes(filter.toLocaleLowerCase())) {
         return false;
       }
 

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}

frontend/src/Indexer/Editor/Delete/DeleteIndexerModalContent.css

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

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}
           />
 

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

@@ -61,15 +61,15 @@ class TagsModalContent extends Component {
     } = this.state;
 
     const applyTagsOptions = [
-      { key: 'add', value: translate('Add') },
-      { key: 'remove', value: translate('Remove') },
-      { key: 'replace', value: translate('Replace') }
+      { key: 'add', value: 'Add' },
+      { key: 'remove', value: 'Remove' },
+      { key: 'replace', value: 'Replace' }
     ];
 
     return (
       <ModalContent onModalClose={onModalClose}>
         <ModalHeader>
-          {translate('Tags')}
+          Tags
         </ModalHeader>
 
         <ModalBody>

frontend/src/Indexer/Index/IndexerIndex.js

@@ -221,7 +221,7 @@ class IndexerIndex extends Component {
 
   onKeyUp = (event) => {
     const jumpBarItems = this.state.jumpBarItems.order;
-    if (event.composedPath && event.composedPath().length === 4) {
+    if (event.path.length === 4) {
       if (event.keyCode === keyCodes.HOME && event.ctrlKey) {
         this.setState({ jumpToCharacter: jumpBarItems[0] });
       }
@@ -272,7 +272,6 @@ class IndexerIndex extends Component {
       saveError,
       isDeleting,
       isTestingAll,
-      isSyncingIndexers,
       deleteError,
       onScroll,
       onSortSelect,
@@ -310,15 +309,6 @@ class IndexerIndex extends Component {
               onPress={this.onAddIndexerPress}
             />
 
-            <PageToolbarSeparator />
-
-            <PageToolbarButton
-              label={translate('SyncAppIndexers')}
-              iconName={icons.REFRESH}
-              isSpinning={isSyncingIndexers}
-              onPress={this.props.onAppIndexerSyncPress}
-            />
-
             <PageToolbarButton
               label={translate('TestAllIndexers')}
               iconName={icons.TEST}
@@ -503,12 +493,10 @@ IndexerIndex.propTypes = {
   saveError: PropTypes.object,
   isDeleting: PropTypes.bool.isRequired,
   isTestingAll: PropTypes.bool.isRequired,
-  isSyncingIndexers: PropTypes.bool.isRequired,
   deleteError: PropTypes.object,
   onSortSelect: PropTypes.func.isRequired,
   onFilterSelect: PropTypes.func.isRequired,
   onTestAllPress: PropTypes.func.isRequired,
-  onAppIndexerSyncPress: PropTypes.func.isRequired,
   onScroll: PropTypes.func.isRequired,
   onSaveSelected: PropTypes.func.isRequired
 };