Add db migration for Metadata Profile's Ignored to List

Bumps [tough-cookie](https://github.com/salesforce/tough-cookie) from 4.1.2 to 4.1.3.
- [Release notes](https://github.com/salesforce/tough-cookie/releases)
- [Changelog](https://github.com/salesforce/tough-cookie/blob/master/CHANGELOG.md)
- [Commits](https://github.com/salesforce/tough-cookie/compare/v4.1.2...v4.1.3)

---
updated-dependencies:
- dependency-name: tough-cookie
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

.editorconfig

@@ -36,12 +36,18 @@ dotnet_naming_style.instance_field_style.capitalization = camel_case
 dotnet_naming_style.instance_field_style.required_prefix = _
 
 # Prefer "var" everywhere
-csharp_style_var_for_built_in_types = true:suggestion
+csharp_style_var_for_built_in_types = true
-csharp_style_var_when_type_is_apparent = true:suggestion
+csharp_style_var_when_type_is_apparent = true
-csharp_style_var_elsewhere = true:suggestion
+csharp_style_var_elsewhere = true
+# Prefer "out" variables to be declared inline
+csharp_style_inlined_variable_declaration = true
 
 # Using directive is unnecessary.
 dotnet_diagnostic.IDE0005.severity = error
+# Use var instead of explicit type
+dotnet_diagnostic.IDE0007.severity = error
+# Inline variable declaration
+dotnet_diagnostic.IDE0018.severity = error
 
 # Stylecop Rules
 dotnet_diagnostic.SA0001.severity = none

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -76,7 +76,7 @@ body:
 - type: checkboxes
   attributes:
     label: Trace Logs have been provided as applicable. Reports may be closed if the required logs are not provided.
-    description: Trace logs are generally required for all bug reports
+    description: Trace logs are generally required for all bug reports and contain `trace`. Info logs are invalid for bug reports and do not contain `debug` nor `trace`
     options:
-    - label: I have followed the steps in the wiki link above and provided the required trace logs that are relevant and show this issue.
+    - label: I have read and followed the steps in the wiki link above and provided the required trace logs - the logs contain `trace` - that are relevant and show this issue.
       required: true

azure-pipelines.yml

@@ -9,7 +9,7 @@ variables:
   testsFolder: './_tests'
   yarnCacheFolder: $(Pipeline.Workspace)/.yarn
   nugetCacheFolder: $(Pipeline.Workspace)/.nuget/packages
-  majorVersion: '0.1.5'
+  majorVersion: '0.2.2'
   minorVersion: $[counter('minorVersion', 1)]
   readarrVersion: '$(majorVersion).$(minorVersion)'
   buildName: '$(Build.SourceBranchName).$(readarrVersion)'
@@ -382,7 +382,7 @@ stages:
       - bash: |
           echo "Uploading source maps to sentry"
           curl -sL https://sentry.io/get-cli/ | bash
-          RELEASENAME="${READARRVERSION}-${BUILD_SOURCEBRANCHNAME}"
+          RELEASENAME="Readarr@${READARRVERSION}-${BUILD_SOURCEBRANCHNAME}"
           sentry-cli releases new --finalize -p readarr -p readarr-ui -p readarr-update "${RELEASENAME}"
           sentry-cli releases -p readarr-ui files "${RELEASENAME}" upload-sourcemaps _output/UI/ --rewrite
           sentry-cli releases set-commits --auto "${RELEASENAME}"
@@ -984,7 +984,7 @@ stages:
           git status
           if git status | grep modified
           then
-            git commit -am 'Automated API Docs update'
+            git commit -am 'Automated API Docs update [skip ci]'
             git push -f --set-upstream origin api-docs
             curl -X POST -H "Authorization: token ${GITHUBTOKEN}" -H "Accept: application/vnd.github.v3+json" https://api.github.com/repos/readarr/readarr/pulls -d '{"head":"api-docs","base":"develop","title":"Update API docs"}'
           else

frontend/.eslintignore

@@ -1 +1,2 @@
 **/JsLibraries/**
+**/*.css.d.ts

frontend/.eslintrc.js

@@ -1,5 +1,9 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const fs = require('fs');
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const path = require('path');
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const typescriptEslintRecommended = require('@typescript-eslint/eslint-plugin').configs.recommended;
 
 const frontendFolder = __dirname;
 
@@ -44,7 +48,9 @@ module.exports = {
     'react',
     'react-hooks',
     'simple-import-sort',
-    'import'
+    'import',
+    '@typescript-eslint',
+    'prettier'
   ],
 
   settings: {
@@ -227,7 +233,7 @@ module.exports = {
     'consistent-this': ['error', 'self'],
     'eol-last': 'error',
     'func-names': 'off',
-    'func-style': ['error', 'declaration'],
+    'func-style': ['error', 'declaration', { allowArrowFunctions: true }],
     indent: ['error', 2, { SwitchCase: 1 }],
     'key-spacing': ['error', { beforeColon: false, afterColon: true }],
     'keyword-spacing': ['error', { before: true, after: true }],
@@ -318,7 +324,9 @@ module.exports = {
   },
   overrides: [
     {
-      files: ['*.js'],
+      files: [
+        '*.js'
+      ],
       rules: {
         'simple-import-sort/imports': [
           'error',
@@ -333,6 +341,52 @@ module.exports = {
           }
         ]
       }
+    },
+    {
+      files: [
+        '*.ts',
+        '*.tsx'
+      ],
+
+      parser: '@typescript-eslint/parser',
+      parserOptions: {
+        project: './tsconfig.json'
+      },
+
+      extends: [
+        'prettier'
+      ],
+
+      rules: Object.assign(typescriptEslintRecommended.rules, {
+        'no-shadow': 'off',
+        // These should be enabled after cleaning things up
+        '@typescript-eslint/no-unused-vars': 'warn',
+        '@typescript-eslint/explicit-function-return-type': 'off',
+        'react/prop-types': 'off',
+        'prettier/prettier': 'error',
+        'simple-import-sort/imports': [
+          'error',
+          {
+            groups: [
+              // Packages
+              // Absolute Paths
+              // Relative Paths
+              // Css
+              ['^@?\\w', `^(${dirs})(/.*|$)`, '^\\.', '^\\..*css$']
+            ]
+          }
+        ]
+      })
+    },
+    {
+      files: [
+        '*.css.d.ts'
+      ],
+      rules: {
+        'filenames/match-exported': 'off',
+        'init-declarations': 'off',
+        'prettier/prettier': 'off'
+      }
     }
   ]
 };

frontend/.prettierignore

@@ -0,0 +1,10 @@
+# Ignore everything recursively
+*
+
+# But not the .ts files
+!*.ts*
+
+*css.d.ts
+
+# Check subdirectories too
+!*/

frontend/.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "arrowParens": "always",
+  "endOfLine": "auto",
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

frontend/.vscode/settings.json

@@ -1,4 +1,23 @@
 // Place your settings in this file to overwrite default and user settings.
 {
-  "files.insertFinalNewline": true
+  "files.insertFinalNewline": true,
-}
+
+  "files.exclude": {
+    "**/node_modules": true,
+    "**/*.d.css": true
+  },
+
+  "editor.formatOnSave": false,
+  "editor.codeActionsOnSave": {
+    "source.fixAll": true
+  },
+
+  "typescript.preferences.quoteStyle": "single",
+
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact"
+  ],
+}

frontend/babel.config.js

@@ -17,7 +17,8 @@ module.exports = {
   env: {
     development: {
       presets: [
-        ['@babel/preset-react', { development: true }]
+        ['@babel/preset-react', { development: true }],
+        '@babel/preset-typescript'
       ],
       plugins: [
         'babel-plugin-inline-classnames'
@@ -25,7 +26,8 @@ module.exports = {
     },
     production: {
       presets: [
-        '@babel/preset-react'
+        '@babel/preset-react',
+        '@babel/preset-typescript'
       ],
       plugins: [
         'babel-plugin-transform-react-remove-prop-types'

frontend/build/webpack.config.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const path = require('path');
 const webpack = require('webpack');
 const FileManagerPlugin = require('filemanager-webpack-plugin');
@@ -5,6 +6,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const LiveReloadPlugin = require('webpack-livereload-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 
 module.exports = (env) => {
   const uiFolder = 'UI';
@@ -38,6 +40,11 @@ module.exports = (env) => {
     },
 
     resolve: {
+      extensions: [
+        '.ts',
+        '.tsx',
+        '.js'
+      ],
       modules: [
         srcFolder,
         path.join(srcFolder, 'Shims'),
@@ -131,6 +138,8 @@ module.exports = (env) => {
         }
       }),
 
+      new ForkTsCheckerWebpackPlugin(),
+
       new LiveReloadPlugin()
     ],
 
@@ -154,7 +163,7 @@ module.exports = (env) => {
           }
         },
         {
-          test: /\.js?$/,
+          test: [/\.jsx?$/, /\.tsx?$/],
           exclude: /(node_modules|JsLibraries)/,
           use: [
             {
@@ -185,6 +194,7 @@ module.exports = (env) => {
           exclude: /(node_modules|globals.css)/,
           use: [
             { loader: MiniCssExtractPlugin.loader },
+            { loader: 'css-modules-typescript-loader' },
             {
               loader: 'css-loader',
               options: {

frontend/src/Activity/Blocklist/Blocklist.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
 import PageContent from 'Components/Page/PageContent';
@@ -161,16 +162,16 @@ class Blocklist extends Component {
 
           {
             !isAnyFetching && !!error &&
-              <div>
+              <Alert kind={kinds.DANGER}>
                 {translate('UnableToLoadBlocklist')}
-              </div>
+              </Alert>
           }
 
           {
             isAllPopulated && !error && !items.length &&
-              <div>
+              <Alert kind={kinds.INFO}>
                 {translate('NoHistoryBlocklist')}
-              </div>
+              </Alert>
           }
 
           {
@@ -214,7 +215,7 @@ class Blocklist extends Component {
           isOpen={isConfirmRemoveModalOpen}
           kind={kinds.DANGER}
           title={translate('RemoveSelected')}
-          message={translate('RemoveSelectedMessageText')}
+          message={translate('RemoveSelectedItemBlocklistMessageText')}
           confirmLabel={translate('RemoveSelected')}
           onConfirm={this.onRemoveSelectedConfirmed}
           onCancel={this.onConfirmRemoveModalClose}

frontend/src/Activity/Blocklist/BlocklistRow.css.d.ts

@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'actions': string;
+  'indexer': string;
+  'quality': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Activity/History/Details/HistoryDetails.css.d.ts

@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'description': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Activity/History/Details/HistoryDetailsModal.css.d.ts

@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'markAsFailedButton': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Activity/History/History.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import FilterMenu from 'Components/Menu/FilterMenu';
 import PageContent from 'Components/Page/PageContent';
@@ -11,7 +12,7 @@ import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
 import TablePager from 'Components/Table/TablePager';
-import { align, icons } from 'Helpers/Props';
+import { align, icons, kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import HistoryRowConnector from './HistoryRowConnector';
 
@@ -85,9 +86,9 @@ class History extends Component {
 
           {
             !isFetchingAny && hasError &&
-              <div>
+              <Alert kind={kinds.DANGER}>
                 {translate('UnableToLoadHistory')}
-              </div>
+              </Alert>
           }
 
           {
@@ -95,9 +96,9 @@ class History extends Component {
             // wait for the books to populate because they are never coming.
 
             isPopulated && !hasError && !items.length &&
-              <div>
+              <Alert kind={kinds.INFO}>
-                No history found
+                {translate('NoHistory')}
-              </div>
+              </Alert>
           }
 
           {

frontend/src/Activity/History/HistoryEventTypeCell.css.d.ts

@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'cell': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Activity/History/HistoryRow.css.d.ts

@@ -0,0 +1,11 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'customFormatScore': string;
+  'details': string;
+  'downloadClient': string;
+  'indexer': string;
+  'releaseGroup': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Activity/Queue/ProtocolLabel.css.d.ts

@@ -0,0 +1,8 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'torrent': string;
+  'usenet': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Activity/Queue/Queue.js

@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
@@ -12,7 +13,7 @@ import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
 import TablePager from 'Components/Table/TablePager';
-import { align, icons } from 'Helpers/Props';
+import { align, icons, kinds } from 'Helpers/Props';
 import getRemovedItems from 'Utilities/Object/getRemovedItems';
 import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
 import translate from 'Utilities/String/translate';
@@ -233,17 +234,17 @@ class Queue extends Component {
 
           {
             !isRefreshing && hasError ?
-              <div>
+              <Alert kind={kinds.DANGER}>
                 {translate('FailedToLoadQueue')}
-              </div> :
+              </Alert> :
               null
           }
 
           {
             isAllPopulated && !hasError && !items.length ?
-              <div>
+              <Alert kind={kinds.INFO}>
                 {translate('QueueIsEmpty')}
-              </div> :
+              </Alert> :
               null
           }
 

frontend/src/Activity/Queue/QueueRow.css.d.ts

@@ -0,0 +1,10 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'actions': string;
+  'progress': string;
+  'protocol': string;
+  'quality': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Activity/Queue/QueueStatusCell.css.d.ts

@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'status': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Activity/Queue/RemoveQueueItemModal.js

@@ -124,7 +124,7 @@ class RemoveQueueItemModal extends Component {
                 type={inputTypes.CHECK}
                 name="blocklist"
                 value={blocklist}
-                helpText={translate('BlocklistHelpText')}
+                helpText={translate('BlocklistReleaseHelpText')}
                 onChange={this.onBlocklistChange}
               />
             </FormGroup>

frontend/src/Activity/Queue/RemoveQueueItemsModal.css.d.ts

@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'message': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Activity/Queue/RemoveQueueItemsModal.js

@@ -89,12 +89,12 @@ class RemoveQueueItemsModal extends Component {
           onModalClose={this.onModalClose}
         >
           <ModalHeader>
-            Remove Selected Item{selectedCount > 1 ? 's' : ''}
+            {selectedCount > 1 ? translate('RemoveSelectedItems') : translate('RemoveSelectedItem')}
           </ModalHeader>
 
           <ModalBody>
             <div className={styles.message}>
-              Are you sure you want to remove {selectedCount} item{selectedCount > 1 ? 's' : ''} from the queue?
+              {selectedCount > 1 ? translate('RemoveSelectedItemsQueueMessageText', selectedCount) : translate('RemoveSelectedItemQueueMessageText')}
             </div>
 
             {
@@ -118,14 +118,14 @@ class RemoveQueueItemsModal extends Component {
 
             <FormGroup>
               <FormLabel>
-                Add Release{selectedCount > 1 ? 's' : ''} To Blocklist
+                {selectedCount > 1 ? translate('BlocklistReleases') : translate('BlocklistRelease')}
               </FormLabel>
 
               <FormInputGroup
                 type={inputTypes.CHECK}
                 name="blocklist"
                 value={blocklist}
-                helpText={translate('BlocklistHelpText')}
+                helpText={translate('BlocklistReleaseHelpText')}
                 onChange={this.onBlocklistChange}
               />
             </FormGroup>
@@ -150,14 +150,14 @@ class RemoveQueueItemsModal extends Component {
 
           <ModalFooter>
             <Button onPress={this.onModalClose}>
-              Close
+              {translate('Close')}
             </Button>
 
             <Button
               kind={kinds.DANGER}
               onPress={this.onRemoveConfirmed}
             >
-              Remove
+              {translate('Remove')}
             </Button>
           </ModalFooter>
         </ModalContent>

frontend/src/Activity/Queue/TimeleftCell.css.d.ts

@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'timeleft': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/App/AppUpdatedModalContent.css.d.ts

@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'changes': string;
+  'maintenance': string;
+  'version': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/App/ConnectionLostModal.css.d.ts

@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'automatic': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Author/Delete/DeleteAuthorModalContent.css.d.ts

@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'deleteFilesMessage': string;
+  'pathContainer': string;
+  'pathIcon': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Author/Details/AuthorAlternateTitles.css.d.ts

@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'alternateTitle': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Author/Details/AuthorDetails.css.d.ts

@@ -0,0 +1,17 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'authorNavigationButton': string;
+  'authorNavigationButtons': string;
+  'authorUpButton': string;
+  'contentContainer': string;
+  'errorMessage': string;
+  'innerContentBody': string;
+  'metadataMessage': string;
+  'selectedTab': string;
+  'tab': string;
+  'tabContent': string;
+  'tabList': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Author/Details/AuthorDetailsHeader.css.d.ts

@@ -0,0 +1,29 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'alternateTitlesIconContainer': string;
+  'authorNavigationButton': string;
+  'authorNavigationButtons': string;
+  'authorUpButton': string;
+  'backdrop': string;
+  'backdropOverlay': string;
+  'details': string;
+  'detailsLabel': string;
+  'header': string;
+  'headerContent': string;
+  'info': string;
+  'links': string;
+  'monitorToggleButton': string;
+  'overview': string;
+  'path': string;
+  'poster': string;
+  'qualityProfileName': string;
+  'sizeOnDisk': string;
+  'tags': string;
+  'title': string;
+  'titleContainer': string;
+  'titleRow': string;
+  'toggleMonitoredContainer': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Author/Details/AuthorDetailsHeader.js

@@ -92,6 +92,7 @@ class AuthorDetailsHeader extends Component {
       titleWidth
     } = this.state;
 
+    const fanartUrl = getFanartUrl(images);
     const marqueeWidth = titleWidth - (isSmallScreen ? 85 : 160);
 
     const continuing = status === 'continuing';
@@ -108,9 +109,11 @@ class AuthorDetailsHeader extends Component {
       <div className={styles.header} style={{ width }} >
         <div
           className={styles.backdrop}
-          style={{
+          style={
-            backgroundImage: `url(${getFanartUrl(images)})`
+            fanartUrl ?
-          }}
+              { backgroundImage: `url(${fanartUrl})` } :
+              null
+          }
         >
           <div className={styles.backdropOverlay} />
         </div>

frontend/src/Author/Details/AuthorDetailsLinks.css.d.ts

@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'link': string;
+  'linkLabel': string;
+  'links': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Author/Details/AuthorDetailsSeason.css.d.ts

@@ -0,0 +1,23 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'actionButton': string;
+  'actionMenuIcon': string;
+  'actions': string;
+  'actionsMenu': string;
+  'actionsMenuContent': string;
+  'bookCount': string;
+  'bookType': string;
+  'bookTypeLabel': string;
+  'books': string;
+  'collapseButtonContainer': string;
+  'collapseButtonIcon': string;
+  'episodeCountTooltip': string;
+  'expandButton': string;
+  'expandButtonIcon': string;
+  'header': string;
+  'left': string;
+  'noBooks': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Author/Details/AuthorDetailsSeries.css.d.ts

@@ -0,0 +1,24 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'actionButton': string;
+  'actionMenuIcon': string;
+  'actions': string;
+  'actionsMenu': string;
+  'actionsMenuContent': string;
+  'bookCount': string;
+  'bookType': string;
+  'bookTypeLabel': string;
+  'books': string;
+  'collapseButtonContainer': string;
+  'collapseButtonIcon': string;
+  'episodeCountTooltip': string;
+  'expandButton': string;
+  'expandButtonIcon': string;
+  'header': string;
+  'left': string;
+  'noBooks': string;
+  'seriesTitle': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Author/Details/BookRow.css.d.ts

@@ -0,0 +1,13 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'monitored': string;
+  'pageCount': string;
+  'position': string;
+  'rating': string;
+  'releaseDate': string;
+  'status': string;
+  'title': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Author/Details/BookStatus.css.d.ts

@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'center': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Author/Edit/EditAuthorModalContent.css.d.ts

@@ -0,0 +1,8 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'deleteButton': string;
+  'labelIcon': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Author/Editor/AudioTags/RetagAuthorModalContent.css.d.ts

@@ -0,0 +1,12 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'message': string;
+  'retagIcon': string;
+  'searchForNewBookContainer': string;
+  'searchForNewBookInput': string;
+  'searchForNewBookLabel': string;
+  'searchForNewBookLabelContainer': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Author/Editor/AuthorEditorFooter.css.d.ts

@@ -0,0 +1,16 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'buttonContainer': string;
+  'buttonContainerContent': string;
+  'buttons': string;
+  'deleteSelectedButton': string;
+  'dropdownContainer': string;
+  'footer': string;
+  'inputContainer': string;
+  'organizeSelectedButton': string;
+  'selectedAuthorLabel': string;
+  'tagsButton': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Author/Editor/AuthorEditorFooterLabel.css.d.ts

@@ -0,0 +1,8 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'label': string;
+  'savingIcon': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

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

@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'message': string;
+  'path': string;
+  'pathContainer': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Author/Editor/Organize/OrganizeAuthorModalContent.css.d.ts

@@ -0,0 +1,8 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'message': string;
+  'renameIcon': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Author/Editor/Tags/TagsModalContent.css.d.ts

@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'message': string;
+  'renameIcon': string;
+  'result': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Author/History/AuthorHistoryRow.css.d.ts

@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'actions': string;
+  'details': string;
+  'sourceTitle': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Author/History/AuthorHistoryTableContent.js

@@ -1,8 +1,10 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
+import { kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import AuthorHistoryRowConnector from './AuthorHistoryRowConnector';
 
@@ -70,9 +72,9 @@ class AuthorHistoryTableContent extends Component {
 
         {
           !isFetching && !!error &&
-            <div>
+            <Alert kind={kinds.DANGER}>
               {translate('UnableToLoadHistory')}
-            </div>
+            </Alert>
         }
 
         {

frontend/src/Author/Index/AuthorIndex.css.d.ts

@@ -0,0 +1,13 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'bannersInnerContentBody': string;
+  'contentBody': string;
+  'contentBodyContainer': string;
+  'errorMessage': string;
+  'pageContentBodyWrapper': string;
+  'postersInnerContentBody': string;
+  'tableInnerContentBody': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Author/Index/AuthorIndexFooter.css.d.ts

@@ -0,0 +1,14 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'continuing': string;
+  'ended': string;
+  'footer': string;
+  'legendItem': string;
+  'legendItemColor': string;
+  'missingMonitored': string;
+  'missingUnmonitored': string;
+  'statistics': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

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

@@ -0,0 +1,19 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'actions': string;
+  'container': string;
+  'content': string;
+  'details': string;
+  'editorSelect': string;
+  'ended': string;
+  'info': string;
+  'link': string;
+  'overview': string;
+  'poster': string;
+  'posterContainer': string;
+  'title': string;
+  'titleRow': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Author/Index/Overview/AuthorIndexOverviewInfo.css.d.ts

@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'infos': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Author/Index/Overview/AuthorIndexOverviewInfoRow.css.d.ts

@@ -0,0 +1,8 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'icon': string;
+  'infoRow': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Author/Index/Overview/AuthorIndexOverviews.css.d.ts

@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'grid': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

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

@@ -0,0 +1,18 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'action': string;
+  'container': string;
+  'content': string;
+  'controls': string;
+  'editorSelect': string;
+  'ended': string;
+  'link': string;
+  'nextAiring': string;
+  'overlayTitle': string;
+  'poster': string;
+  'posterContainer': string;
+  'title': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

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

@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'info': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Author/Index/Posters/AuthorIndexPosters.css.d.ts

@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'grid': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

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

@@ -0,0 +1,8 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'progress': string;
+  'progressBar': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Author/Index/Table/AuthorIndexHeader.css.d.ts

@@ -0,0 +1,25 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'actions': string;
+  'added': string;
+  'banner': string;
+  'bannerGrow': string;
+  'bookCount': string;
+  'bookProgress': string;
+  'genres': string;
+  'lastBook': string;
+  'latestBook': string;
+  'metadataProfileId': string;
+  'nextBook': string;
+  'path': string;
+  'qualityProfileId': string;
+  'ratings': string;
+  'sizeOnDisk': string;
+  'sortName': string;
+  'status': string;
+  'tags': string;
+  'useSceneNumbering': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

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

@@ -0,0 +1,28 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'actions': string;
+  'added': string;
+  'banner': string;
+  'bannerGrow': string;
+  'bannerImage': string;
+  'bookProgress': string;
+  'cell': string;
+  'checkInput': string;
+  'genres': string;
+  'lastBook': string;
+  'link': string;
+  'metadataProfileId': string;
+  'nextBook': string;
+  'overlayTitle': string;
+  'path': string;
+  'qualityProfileId': string;
+  'ratings': string;
+  'sizeOnDisk': string;
+  'sortName': string;
+  'status': string;
+  'tags': string;
+  'useSceneNumbering': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Author/Index/Table/AuthorIndexTable.css.d.ts

@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'tableContainer': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Author/Index/Table/AuthorStatusCell.css.d.ts

@@ -0,0 +1,8 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'status': string;
+  'statusIcon': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Author/MoveAuthor/MoveAuthorModal.css.d.ts

@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'doNotMoveButton': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Author/NoAuthor.css.d.ts

@@ -0,0 +1,8 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'buttonContainer': string;
+  'message': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Book/BookSearchCell.css.d.ts

@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'BookSearchCell': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Book/Delete/DeleteBookModalContent.css.d.ts

@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'deleteFilesMessage': string;
+  'pathContainer': string;
+  'pathIcon': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Book/Details/BookDetails.css.d.ts

@@ -0,0 +1,16 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'bookNavigationButton': string;
+  'bookNavigationButtons': string;
+  'bookUpButton': string;
+  'contentContainer': string;
+  'filterIcon': string;
+  'innerContentBody': string;
+  'selectedTab': string;
+  'tab': string;
+  'tabContent': string;
+  'tabList': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Book/Details/BookDetailsHeader.css.d.ts

@@ -0,0 +1,26 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'alternateTitlesIconContainer': string;
+  'backdrop': string;
+  'backdropOverlay': string;
+  'cover': string;
+  'details': string;
+  'detailsLabel': string;
+  'duration': string;
+  'header': string;
+  'headerContent': string;
+  'info': string;
+  'links': string;
+  'monitorToggleButton': string;
+  'overview': string;
+  'qualityProfileName': string;
+  'sizeOnDisk': string;
+  'tags': string;
+  'title': string;
+  'titleContainer': string;
+  'titleRow': string;
+  'toggleMonitoredContainer': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Book/Details/BookDetailsHeader.js

@@ -83,15 +83,18 @@ class BookDetailsHeader extends Component {
       titleWidth
     } = this.state;
 
+    const fanartUrl = getFanartUrl(author.images);
     const marqueeWidth = titleWidth - (isSmallScreen ? 85 : 160);
 
     return (
       <div className={styles.header} style={{ width }}>
         <div
           className={styles.backdrop}
-          style={{
+          style={
-            backgroundImage: `url(${getFanartUrl(author.images)})`
+            fanartUrl ?
-          }}
+              { backgroundImage: `url(${fanartUrl})` } :
+              null
+          }
         >
           <div className={styles.backdropOverlay} />
         </div>

frontend/src/Book/Details/BookDetailsLinks.css.d.ts

@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'link': string;
+  'linkLabel': string;
+  'links': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Book/Editor/BookEditorFooter.css.d.ts

@@ -0,0 +1,14 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'buttonContainer': string;
+  'buttonContainerContent': string;
+  'buttons': string;
+  'deleteSelectedButton': string;
+  'inputContainer': string;
+  'organizeSelectedButton': string;
+  'selectedAuthorLabel': string;
+  'tagsButton': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Book/Editor/BookEditorFooterLabel.css.d.ts

@@ -0,0 +1,8 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'label': string;
+  'savingIcon': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

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

@@ -0,0 +1,8 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'deleteFilesMessage': string;
+  'message': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Book/Index/BookIndex.css.d.ts

@@ -0,0 +1,13 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'bannersInnerContentBody': string;
+  'contentBody': string;
+  'contentBodyContainer': string;
+  'errorMessage': string;
+  'pageContentBodyWrapper': string;
+  'postersInnerContentBody': string;
+  'tableInnerContentBody': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Book/Index/BookIndexFooter.css.d.ts

@@ -0,0 +1,14 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'continuing': string;
+  'ended': string;
+  'footer': string;
+  'legendItem': string;
+  'legendItemColor': string;
+  'missingMonitored': string;
+  'missingUnmonitored': string;
+  'statistics': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Book/Index/Overview/BookIndexOverview.css.d.ts

@@ -0,0 +1,19 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'actions': string;
+  'container': string;
+  'content': string;
+  'details': string;
+  'editorSelect': string;
+  'ended': string;
+  'info': string;
+  'link': string;
+  'overview': string;
+  'poster': string;
+  'posterContainer': string;
+  'title': string;
+  'titleRow': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Book/Index/Overview/BookIndexOverviewInfo.css.d.ts

@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'infos': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Book/Index/Overview/BookIndexOverviewInfoRow.css.d.ts

@@ -0,0 +1,8 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'icon': string;
+  'infoRow': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Book/Index/Overview/BookIndexOverviews.css.d.ts

@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'grid': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Book/Index/Posters/BookIndexPoster.css.d.ts

@@ -0,0 +1,18 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'action': string;
+  'container': string;
+  'content': string;
+  'controls': string;
+  'editorSelect': string;
+  'ended': string;
+  'link': string;
+  'nextAiring': string;
+  'overlayTitle': string;
+  'poster': string;
+  'posterContainer': string;
+  'title': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Book/Index/Posters/BookIndexPosterInfo.css.d.ts

@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'info': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Book/Index/Posters/BookIndexPosters.css.d.ts

@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'grid': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Book/Index/ProgressBar/BookIndexProgressBar.css.d.ts

@@ -0,0 +1,8 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'progress': string;
+  'progressBar': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Book/Index/Table/BookIndexHeader.css.d.ts

@@ -0,0 +1,20 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'actions': string;
+  'added': string;
+  'authorName': string;
+  'bookFileCount': string;
+  'genres': string;
+  'metadataProfileId': string;
+  'path': string;
+  'qualityProfileId': string;
+  'ratings': string;
+  'releaseDate': string;
+  'sizeOnDisk': string;
+  'status': string;
+  'tags': string;
+  'title': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Book/Index/Table/BookIndexRow.css.d.ts

@@ -0,0 +1,26 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'actions': string;
+  'added': string;
+  'authorName': string;
+  'bannerImage': string;
+  'bookFileCount': string;
+  'bookProgress': string;
+  'cell': string;
+  'checkInput': string;
+  'genres': string;
+  'link': string;
+  'metadataProfileId': string;
+  'overlayTitle': string;
+  'path': string;
+  'qualityProfileId': string;
+  'ratings': string;
+  'releaseDate': string;
+  'sizeOnDisk': string;
+  'status': string;
+  'tags': string;
+  'title': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Book/Index/Table/BookIndexTable.css.d.ts

@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'tableContainer': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Book/Index/Table/BookStatusCell.css.d.ts

@@ -0,0 +1,8 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'status': string;
+  'statusIcon': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/BookFile/Editor/BookFileActionsCell.css.d.ts

@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'TrackActionsCell': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/BookFile/Editor/BookFileEditorRow.css.d.ts

@@ -0,0 +1,10 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'dateAdded': string;
+  'path': string;
+  'quality': string;
+  'size': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/BookFile/Editor/BookFileEditorTableContent.css.d.ts

@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'actions': string;
+  'filesTable': string;
+  'selectInput': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/BookFile/FileDetails.css.d.ts

@@ -0,0 +1,8 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'audioTags': string;
+  'filename': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Bookshelf/Bookshelf.css.d.ts

@@ -0,0 +1,10 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'contentBody': string;
+  'contentBodyContainer': string;
+  'pageContentBodyWrapper': string;
+  'tableInnerContentBody': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Bookshelf/BookshelfBook.css.d.ts

@@ -0,0 +1,12 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'allBooks': string;
+  'book': string;
+  'bookType': string;
+  'books': string;
+  'info': string;
+  'missingWanted': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Bookshelf/BookshelfFooter.css.d.ts

@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'inputContainer': string;
+  'label': string;
+  'updateSelectedButton': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Bookshelf/BookshelfRow.css.d.ts

@@ -0,0 +1,13 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'books': string;
+  'cell': string;
+  'monitored': string;
+  'selectCell': string;
+  'status': string;
+  'statusIcon': string;
+  'title': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Bookshelf/BookshelfTableHeader.css.d.ts

@@ -0,0 +1,10 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'bookCount': string;
+  'monitored': string;
+  'sortName': string;
+  'status': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Calendar/Agenda/Agenda.css.d.ts

@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'agenda': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Calendar/Agenda/AgendaEvent.css.d.ts

@@ -0,0 +1,21 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'absoluteEpisodeNumber': string;
+  'authorName': string;
+  'bookSeparator': string;
+  'bookTitle': string;
+  'date': string;
+  'downloaded': string;
+  'downloading': string;
+  'event': string;
+  'eventWrapper': string;
+  'missing': string;
+  'partial': string;
+  'seasonEpisodeNumber': string;
+  'time': string;
+  'unmonitored': string;
+  'unreleased': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Calendar/Calendar.css.d.ts

@@ -0,0 +1,8 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'calendar': string;
+  'calendarContent': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Calendar/Calendar.js

@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import { kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import AgendaConnector from './Agenda/AgendaConnector';
 import * as calendarViews from './calendarViews';
@@ -31,9 +33,9 @@ class Calendar extends Component {
 
         {
           !isFetching && !!error &&
-            <div>
+            <Alert kind={kinds.DANGER}>
               {translate('UnableToLoadTheCalendar')}
-            </div>
+            </Alert>
         }
 
         {

frontend/src/Calendar/CalendarPage.css.d.ts

@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'calendarInnerPageBody': string;
+  'calendarPageBody': string;
+  'errorMessage': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Calendar/Day/CalendarDay.css.d.ts

@@ -0,0 +1,11 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'day': string;
+  'dayOfMonth': string;
+  'isDifferentMonth': string;
+  'isSingleDay': string;
+  'isToday': string;
+}
+export const cssExports: CssExports;
+export default cssExports;