= ({
title={intl.formatMessage(
is4k ? messages.requestcollection4k : messages.requestcollection
)}
- iconSvg={
-
-
- }
+ iconSvg={
{intl.formatMessage(
@@ -355,20 +341,7 @@ const CollectionDetails: React.FC = ({
}}
text={
<>
-
-
+
{intl.formatMessage(
hasRequestable
@@ -393,20 +366,7 @@ const CollectionDetails: React.FC = ({
setIs4k(true);
}}
>
-
-
+
{intl.formatMessage(messages.requestcollection4k)}
diff --git a/src/components/Common/Alert/index.tsx b/src/components/Common/Alert/index.tsx
index b29513cc6..9f62131a3 100644
--- a/src/components/Common/Alert/index.tsx
+++ b/src/components/Common/Alert/index.tsx
@@ -1,3 +1,8 @@
+import {
+ ExclamationIcon,
+ InformationCircleIcon,
+ XCircleIcon,
+} from '@heroicons/react/solid';
import React from 'react';
interface AlertProps {
@@ -10,21 +15,7 @@ const Alert: React.FC = ({ title, children, type }) => {
bgColor: 'bg-yellow-600',
titleColor: 'text-yellow-200',
textColor: 'text-yellow-300',
- svg: (
-
-
- ),
+ svg: = ({ title, children, type }) => {
bgColor: 'bg-indigo-600',
titleColor: 'text-indigo-200',
textColor: 'text-indigo-300',
- svg: (
-
-
- ),
+ svg: = ({ title, children, type }) => {
bgColor: 'bg-red-600',
titleColor: 'text-red-200',
textColor: 'text-red-300',
- svg: (
-
-
- ),
+ svg: {
buttonType?: 'primary' | 'ghost';
@@ -102,18 +103,7 @@ const ButtonWithDropdown: React.FC = ({
{dropdownIcon ? (
dropdownIcon
) : (
-
-
+ = ({ links }) => {
buttonType="ghost"
text={
<>
-
-
+ {links[0].text}
}
diff --git a/src/components/Common/SlideOver/index.tsx b/src/components/Common/SlideOver/index.tsx
index 79a9a0bb7..4dac751a7 100644
--- a/src/components/Common/SlideOver/index.tsx
+++ b/src/components/Common/SlideOver/index.tsx
@@ -1,4 +1,5 @@
/* eslint-disable jsx-a11y/click-events-have-key-events */
+import { XIcon } from '@heroicons/react/outline';
import React, { useEffect, useRef, useState } from 'react';
import ReactDOM from 'react-dom';
import { useLockBodyScroll } from '../../../hooks/useLockBodyScroll';
@@ -81,20 +82,7 @@ const SlideOver: React.FC = ({
className="text-indigo-200 transition duration-150 ease-in-out hover:text-white"
onClick={() => onClose()}
>
-
-
+
{intl.formatMessage(messages.moviegenres)}
-
-
+
diff --git a/src/components/Discover/TvGenreSlider/index.tsx b/src/components/Discover/TvGenreSlider/index.tsx
index 20b1b1e26..37f1ee18b 100644
--- a/src/components/Discover/TvGenreSlider/index.tsx
+++ b/src/components/Discover/TvGenreSlider/index.tsx
@@ -1,12 +1,13 @@
+import { ArrowCircleRightIcon } from '@heroicons/react/outline';
+import Link from 'next/link';
import React, { useContext } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import useSWR from 'swr';
-import GenreCard from '../../GenreCard';
-import Slider from '../../Slider';
import { GenreSliderItem } from '../../../../server/interfaces/api/discoverInterfaces';
import { LanguageContext } from '../../../context/LanguageContext';
+import GenreCard from '../../GenreCard';
+import Slider from '../../Slider';
import { genreColorMap } from '../constants';
-import Link from 'next/link';
const messages = defineMessages({
tvgenres: 'Series Genres',
@@ -29,20 +30,7 @@ const TvGenreSlider: React.FC = () => {
{intl.formatMessage(messages.tvgenres)}
-
-
+
diff --git a/src/components/Discover/index.tsx b/src/components/Discover/index.tsx
index 8560a5353..bb80d08b8 100644
--- a/src/components/Discover/index.tsx
+++ b/src/components/Discover/index.tsx
@@ -1,3 +1,4 @@
+import { ArrowCircleRightIcon } from '@heroicons/react/outline';
import Link from 'next/link';
import React from 'react';
import { defineMessages, useIntl } from 'react-intl';
@@ -66,20 +67,7 @@ const Discover: React.FC = () => {
{intl.formatMessage(messages.recentrequests)}
-
-
+
diff --git a/src/components/Layout/LanguagePicker/index.tsx b/src/components/Layout/LanguagePicker/index.tsx
index 25111f302..683fe5f43 100644
--- a/src/components/Layout/LanguagePicker/index.tsx
+++ b/src/components/Layout/LanguagePicker/index.tsx
@@ -1,3 +1,4 @@
+import { TranslateIcon } from '@heroicons/react/solid';
import React, { useContext, useRef, useState } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import {
@@ -100,18 +101,7 @@ const LanguagePicker: React.FC = () => {
aria-label="Language Picker"
onClick={() => setDropdownOpen(true)}
>
-
-
+ {
@@ -6,19 +7,7 @@ const Notifications: React.FC = () => {
className="p-1 text-gray-400 rounded-full hover:bg-gray-500 hover:text-white focus:outline-none focus:ring focus:text-white"
aria-label="Notifications"
>
-
-
+
{
className="absolute inset-y-0 p-1 m-auto text-gray-400 transition border-none outline-none right-2 h-7 w-7 focus:outline-none focus:border-none hover:text-white"
onClick={() => clear()}
>
-
+
)}
diff --git a/src/components/Layout/Sidebar/index.tsx b/src/components/Layout/Sidebar/index.tsx
index 7558b95ba..dbd156252 100644
--- a/src/components/Layout/Sidebar/index.tsx
+++ b/src/components/Layout/Sidebar/index.tsx
@@ -1,3 +1,10 @@
+import {
+ ClockIcon,
+ CogIcon,
+ SparklesIcon,
+ XIcon,
+} from '@heroicons/react/outline';
+import { UsersIcon } from '@heroicons/react/solid';
import Link from 'next/link';
import { useRouter } from 'next/router';
import React, { ReactNode, useRef } from 'react';
@@ -33,20 +40,7 @@ const SidebarLinks: SidebarLinkProps[] = [
href: '/',
messagesKey: 'dashboard',
svgIcon: (
-
-
+
-
+
-
+
-
+ = ({ open, setClosed }) => {
aria-label="Close sidebar"
onClick={() => setClosed()}
>
-
-
+ = ({ onClick }) => {
}`}
>
{data.commitTag === 'local' ? (
-
-
+
-
+
-
+
{versionStream}
@@ -114,22 +81,7 @@ const VersionStatus: React.FC = ({ onClick }) => {
)}
- {data.updateAvailable && (
-
-
- )}
+ {data.updateAvailable &&
-
+
@@ -87,18 +77,7 @@ const Layout: React.FC = ({ children }) => {
diff --git a/src/components/Login/LocalLogin.tsx b/src/components/Login/LocalLogin.tsx
index 4216bf4a3..1dc6006de 100644
--- a/src/components/Login/LocalLogin.tsx
+++ b/src/components/Login/LocalLogin.tsx
@@ -1,3 +1,4 @@
+import { LoginIcon, SupportIcon } from '@heroicons/react/outline';
import axios from 'axios';
import { Field, Form, Formik } from 'formik';
import Link from 'next/link';
@@ -103,6 +104,7 @@ const LocalLogin: React.FC = ({ revalidate }) => {
+
@@ -113,6 +115,7 @@ const LocalLogin: React.FC = ({ revalidate }) => {
type="submit"
disabled={isSubmitting || !isValid}
>
+
diff --git a/src/components/MediaSlider/ShowMoreCard/index.tsx b/src/components/MediaSlider/ShowMoreCard/index.tsx
index e229ad7ef..c42909669 100644
--- a/src/components/MediaSlider/ShowMoreCard/index.tsx
+++ b/src/components/MediaSlider/ShowMoreCard/index.tsx
@@ -1,3 +1,4 @@
+import { ArrowCircleRightIcon } from '@heroicons/react/solid';
import Link from 'next/link';
import React, { useState } from 'react';
import { defineMessages, useIntl } from 'react-intl';
@@ -79,18 +80,7 @@ const ShowMoreCard: React.FC = ({ url, posters }) => {
)}
-
-
+
{intl.formatMessage(messages.seemore)}
diff --git a/src/components/MediaSlider/index.tsx b/src/components/MediaSlider/index.tsx
index c46e16bcf..64aa79153 100644
--- a/src/components/MediaSlider/index.tsx
+++ b/src/components/MediaSlider/index.tsx
@@ -1,3 +1,4 @@
+import { ArrowCircleRightIcon } from '@heroicons/react/outline';
import Link from 'next/link';
import React, { useContext, useEffect } from 'react';
import { useSWRInfinite } from 'swr';
@@ -140,20 +141,7 @@ const MediaSlider: React.FC
= ({
{title}
-
-
+
) : (
diff --git a/src/components/MovieDetails/index.tsx b/src/components/MovieDetails/index.tsx
index dadd9c1ad..baa39a8e5 100644
--- a/src/components/MovieDetails/index.tsx
+++ b/src/components/MovieDetails/index.tsx
@@ -1,3 +1,9 @@
+import { ArrowCircleRightIcon, CogIcon } from '@heroicons/react/outline';
+import {
+ CheckCircleIcon,
+ DocumentRemoveIcon,
+ ExternalLinkIcon,
+} from '@heroicons/react/solid';
import axios from 'axios';
import Link from 'next/link';
import { useRouter } from 'next/router';
@@ -50,7 +56,7 @@ const messages = defineMessages({
manageModalTitle: 'Manage Movie',
manageModalRequests: 'Requests',
manageModalNoRequests: 'No requests.',
- manageModalClearMedia: 'Clear All Media Data',
+ manageModalClearMedia: 'Clear Media Data',
manageModalClearMediaWarning:
'* This will irreversibly remove all data for this movie, including any requests. If this item exists in your Plex library, the media information will be recreated during the next scan.',
studio: '{studioCount, plural, one {Studio} other {Studios}}',
@@ -266,18 +272,7 @@ const MovieDetails: React.FC = ({ movie }) => {
className="w-full sm:mb-0"
buttonType="success"
>
-
-
+ {intl.formatMessage(messages.markavailable)}
@@ -291,18 +286,7 @@ const MovieDetails: React.FC
= ({ movie }) => {
className="w-full sm:mb-0"
buttonType="success"
>
-
-
+
{intl.formatMessage(messages.mark4kavailable)}
@@ -341,15 +325,7 @@ const MovieDetails: React.FC = ({ movie }) => {
className="block mb-2 last:mb-0"
>
-
-
+ {intl.formatMessage(messages.openradarr)}
@@ -361,15 +337,7 @@ const MovieDetails: React.FC = ({ movie }) => {
rel="noreferrer"
>
-
-
+ {intl.formatMessage(messages.openradarr4k)}
@@ -383,6 +351,7 @@ const MovieDetails: React.FC = ({ movie }) => {
confirmText={intl.formatMessage(globalMessages.areyousure)}
className="w-full"
>
+
@@ -463,27 +432,7 @@ const MovieDetails: React.FC
= ({ movie }) => {
className="ml-2 first:ml-0"
onClick={() => setShowManager(true)}
>
-
-
+ = ({ movie }) => {
{intl.formatMessage(messages.viewfullcrew)}
-
-
+
@@ -709,20 +645,7 @@ const MovieDetails: React.FC
= ({ movie }) => {
{intl.formatMessage(messages.cast)}
-
-
+
diff --git a/src/components/PersonCard/index.tsx b/src/components/PersonCard/index.tsx
index 67cdf43ff..85e41ff33 100644
--- a/src/components/PersonCard/index.tsx
+++ b/src/components/PersonCard/index.tsx
@@ -1,3 +1,4 @@
+import { UserCircleIcon } from '@heroicons/react/solid';
import Link from 'next/link';
import React, { useState } from 'react';
import CachedImage from '../Common/CachedImage';
@@ -57,18 +58,7 @@ const PersonCard: React.FC = ({
/>
) : (
-
-
+
)}
{name}
diff --git a/src/components/PlexLoginButton/index.tsx b/src/components/PlexLoginButton/index.tsx
index f6bbb5b79..2125f0053 100644
--- a/src/components/PlexLoginButton/index.tsx
+++ b/src/components/PlexLoginButton/index.tsx
@@ -1,3 +1,4 @@
+import { LoginIcon } from '@heroicons/react/outline';
import React, { useState } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import globalMessages from '../../i18n/globalMessages';
@@ -48,6 +49,7 @@ const PlexLoginButton: React.FC
= ({
disabled={loading || isProcessing}
className="plex-button"
>
+ = ({
: intl.formatMessage(messages.regionDefault)}
-
-
+
@@ -196,18 +184,7 @@ const RegionSelector: React.FC = ({
active ? 'text-white' : 'text-indigo-600'
} absolute inset-y-0 left-0 flex items-center pl-1.5`}
>
-
-
+
@@ -234,18 +211,7 @@ const RegionSelector: React.FC
= ({
active ? 'text-white' : 'text-indigo-600'
} absolute inset-y-0 left-0 flex items-center pl-1.5`}
>
-
-
+
@@ -286,18 +252,7 @@ const RegionSelector: React.FC = ({
active ? 'text-white' : 'text-indigo-600'
} absolute inset-y-0 left-0 flex items-center pl-1.5`}
>
-
-
+
)}
diff --git a/src/components/RequestBlock/index.tsx b/src/components/RequestBlock/index.tsx
index c23370e94..d003bcf72 100644
--- a/src/components/RequestBlock/index.tsx
+++ b/src/components/RequestBlock/index.tsx
@@ -1,3 +1,12 @@
+import {
+ CalendarIcon,
+ CheckIcon,
+ EyeIcon,
+ PencilIcon,
+ TrashIcon,
+ UserIcon,
+ XIcon,
+} from '@heroicons/react/solid';
import axios from 'axios';
import React, { useState } from 'react';
import { defineMessages, useIntl } from 'react-intl';
@@ -69,37 +78,14 @@ const RequestBlock: React.FC = ({ request, onUpdate }) => {
-
-
+
{request.requestedBy.displayName}
{request.modifiedBy && (
-
-
+
{request.modifiedBy?.displayName}
@@ -115,18 +101,7 @@ const RequestBlock: React.FC
= ({ request, onUpdate }) => {
onClick={() => updateRequest('approve')}
disabled={isUpdating}
>
-
-
+
@@ -135,18 +110,7 @@ const RequestBlock: React.FC = ({ request, onUpdate }) => {
onClick={() => updateRequest('decline')}
disabled={isUpdating}
>
-
-
+
@@ -155,14 +119,7 @@ const RequestBlock: React.FC = ({ request, onUpdate }) => {
onClick={() => setShowEditModal(true)}
disabled={isUpdating}
>
-
-
+
@@ -173,18 +130,7 @@ const RequestBlock: React.FC = ({ request, onUpdate }) => {
onClick={() => deleteRequest()}
disabled={isUpdating}
>
-
-
+
@@ -215,18 +161,7 @@ const RequestBlock: React.FC
= ({ request, onUpdate }) => {
-
-
+
{intl.formatDate(request.createdAt, {
year: 'numeric',
diff --git a/src/components/RequestButton/index.tsx b/src/components/RequestButton/index.tsx
index 2c26c694f..c5fef6fd7 100644
--- a/src/components/RequestButton/index.tsx
+++ b/src/components/RequestButton/index.tsx
@@ -1,3 +1,9 @@
+import { DownloadIcon } from '@heroicons/react/outline';
+import {
+ CheckIcon,
+ InformationCircleIcon,
+ XIcon,
+} from '@heroicons/react/solid';
import axios from 'axios';
import React, { useState } from 'react';
import { defineMessages, useIntl } from 'react-intl';
@@ -117,22 +123,7 @@ const RequestButton: React.FC = ({
action: () => {
setShowRequestModal(true);
},
- svg: (
-
-
- ),
+ svg: = ({
action: () => {
setShowRequestModal(true);
},
- svg: (
-
-
- ),
+ svg: = ({
action: () => {
setShowRequest4kModal(true);
},
- svg: (
-
-
- ),
+ svg: = ({
action: () => {
setShowRequest4kModal(true);
},
- svg: (
-
-
- ),
+ svg: = ({
id: 'active-request',
text: intl.formatMessage(messages.viewrequest),
action: () => setShowRequestModal(true),
- svg: (
-
-
- ),
+ svg: = ({
id: 'active-4k-request',
text: intl.formatMessage(messages.viewrequest4k),
action: () => setShowRequest4kModal(true),
- svg: (
-
-
- ),
+ svg: = ({
action: () => {
modifyRequest(activeRequest, 'approve');
},
- svg: (
-
-
- ),
+ svg: = ({
action: () => {
modifyRequest(activeRequest, 'decline');
},
- svg: (
-
-
- ),
+ svg: = ({
action: () => {
modifyRequests(activeRequests, 'approve');
},
- svg: (
-
-
- ),
+ svg: = ({
action: () => {
modifyRequests(activeRequests, 'decline');
},
- svg: (
-
-
- ),
+ svg: = ({
action: () => {
modifyRequest(active4kRequest, 'approve');
},
- svg: (
-
-
- ),
+ svg: = ({
action: () => {
modifyRequest(active4kRequest, 'decline');
},
- svg: (
-
-
- ),
+ svg: = ({
) {
buttons.push(
{
- id: 'approve-request-batch',
+ id: 'approve-4k-request-batch',
text: intl.formatMessage(messages.approve4krequests, {
requestCount: active4kRequests.length,
}),
action: () => {
modifyRequests(active4kRequests, 'approve');
},
- svg: (
-
-
- ),
+ svg:
-
- ),
+ svg: = ({ mediaId }) => {
buttonSize="sm"
onClick={() => deleteRequest()}
>
-
-
+ {intl.formatMessage(messages.deleterequest)}
= ({ request, onTitleData }) => {
buttonSize="sm"
onClick={() => modifyRequest('approve')}
>
-
-
+
{intl.formatMessage(globalMessages.approve)}
@@ -284,18 +261,7 @@ const RequestCard: React.FC = ({ request, onTitleData }) => {
buttonSize="sm"
onClick={() => modifyRequest('decline')}
>
-
-
+
{intl.formatMessage(globalMessages.decline)}
diff --git a/src/components/RequestList/RequestItem/index.tsx b/src/components/RequestList/RequestItem/index.tsx
index f9f512c96..13b7c01ee 100644
--- a/src/components/RequestList/RequestItem/index.tsx
+++ b/src/components/RequestList/RequestItem/index.tsx
@@ -1,3 +1,10 @@
+import {
+ CheckIcon,
+ PencilIcon,
+ RefreshIcon,
+ TrashIcon,
+ XIcon,
+} from '@heroicons/react/solid';
import axios from 'axios';
import Link from 'next/link';
import React, { useContext, useState } from 'react';
@@ -66,20 +73,7 @@ const RequestItemError: React.FC = ({
buttonSize="sm"
onClick={() => deleteRequest()}
>
-
-
+ {intl.formatMessage(messages.deleterequest)}
@@ -377,18 +371,7 @@ const RequestItem: React.FC = ({
confirmText={intl.formatMessage(globalMessages.areyousure)}
className="w-full"
>
-
-
+
{intl.formatMessage(messages.cancelRequest)}
@@ -404,19 +387,14 @@ const RequestItem: React.FC = ({
disabled={isRetrying}
onClick={() => retryRequest()}
>
-
-
+
- {intl.formatMessage(globalMessages.retry)}
+ {intl.formatMessage(
+ isRetrying ? globalMessages.retrying : globalMessages.retry
+ )}
)}
@@ -427,18 +405,7 @@ const RequestItem: React.FC = ({
confirmText={intl.formatMessage(globalMessages.areyousure)}
className="w-full"
>
-
-
+
{intl.formatMessage(globalMessages.delete)}
@@ -454,18 +421,7 @@ const RequestItem: React.FC = ({
buttonType="success"
onClick={() => modifyRequest('approve')}
>
-
-
+
{intl.formatMessage(globalMessages.approve)}
@@ -477,18 +433,7 @@ const RequestItem: React.FC = ({
buttonType="danger"
onClick={() => modifyRequest('decline')}
>
-
-
+
{intl.formatMessage(globalMessages.decline)}
@@ -501,14 +446,7 @@ const RequestItem: React.FC = ({
buttonType="primary"
onClick={() => setShowEditModal(true)}
>
-
-
+
{intl.formatMessage(globalMessages.edit)}
diff --git a/src/components/RequestList/index.tsx b/src/components/RequestList/index.tsx
index d0177e641..fd3281015 100644
--- a/src/components/RequestList/index.tsx
+++ b/src/components/RequestList/index.tsx
@@ -1,3 +1,4 @@
+import { FilterIcon, SortDescendingIcon } from '@heroicons/react/solid';
import Link from 'next/link';
import { useRouter } from 'next/router';
import React, { useEffect, useState } from 'react';
@@ -119,18 +120,7 @@ const RequestList: React.FC = () => {
-
-
+
= ({
return (
<>
-
-
+
{intl.formatMessage(messages.advancedoptions)}
@@ -526,19 +523,7 @@ const AdvancedRequester: React.FC
= ({
-
-
+
@@ -592,18 +577,7 @@ const AdvancedRequester: React.FC = ({
: 'text-indigo-600'
} absolute inset-y-0 left-0 flex items-center pl-1.5`}
>
-
-
+ = ({
{showDetails ? (
-
-
+
) : (
-
-
+
)}
diff --git a/src/components/RequestModal/SearchByNameModal/index.tsx b/src/components/RequestModal/SearchByNameModal/index.tsx
index 50df04691..111d6137f 100644
--- a/src/components/RequestModal/SearchByNameModal/index.tsx
+++ b/src/components/RequestModal/SearchByNameModal/index.tsx
@@ -1,3 +1,4 @@
+import { DownloadIcon } from '@heroicons/react/outline';
import React from 'react';
import { defineMessages, useIntl } from 'react-intl';
import useSWR from 'swr';
@@ -51,22 +52,7 @@ const SearchByNameModal: React.FC = ({
okText={intl.formatMessage(globalMessages.next)}
okDisabled={!tvdbId}
okButtonType="primary"
- iconSvg={
-
-
- }
+ iconSvg={ = ({
? intl.formatMessage(globalMessages.back)
: intl.formatMessage(globalMessages.cancel)
}
- iconSvg={
-
-
- }
+ iconSvg={
-
+ = ({
onToggle,
}) => {
return (
-
-
+
+
diff --git a/src/components/Settings/RadarrModal/index.tsx b/src/components/Settings/RadarrModal/index.tsx
index bf3b0f20d..8ea9093a1 100644
--- a/src/components/Settings/RadarrModal/index.tsx
+++ b/src/components/Settings/RadarrModal/index.tsx
@@ -1,3 +1,4 @@
+import { PencilIcon, PlusIcon } from '@heroicons/react/solid';
import axios from 'axios';
import { Field, Formik } from 'formik';
import dynamic from 'next/dynamic';
@@ -356,6 +357,13 @@ const RadarrModal: React.FC = ({
values.is4k ? messages.edit4kradarr : messages.editradarr
)
}
+ iconSvg={
+ !radarr ? (
+
diff --git a/src/components/Settings/SettingsAbout/Releases/index.tsx b/src/components/Settings/SettingsAbout/Releases/index.tsx
index 1230185e3..49a0c88b9 100644
--- a/src/components/Settings/SettingsAbout/Releases/index.tsx
+++ b/src/components/Settings/SettingsAbout/Releases/index.tsx
@@ -1,3 +1,4 @@
+import { DocumentTextIcon } from '@heroicons/react/outline';
import React, { useState } from 'react';
import { defineMessages, FormattedRelativeTime, useIntl } from 'react-intl';
import ReactMarkdown from 'react-markdown';
@@ -70,22 +71,7 @@ const Release: React.FC
= ({
>
setModalOpen(false)}
- iconSvg={
-
-
- }
+ iconSvg={ = ({
setModalOpen(true)}>
+
diff --git a/src/components/Settings/SettingsJobsCache/index.tsx b/src/components/Settings/SettingsJobsCache/index.tsx
index 46d0cd9d7..ffd3446ff 100644
--- a/src/components/Settings/SettingsJobsCache/index.tsx
+++ b/src/components/Settings/SettingsJobsCache/index.tsx
@@ -1,3 +1,4 @@
+import { PlayIcon, StopIcon, XCircleIcon } from '@heroicons/react/solid';
import axios from 'axios';
import React from 'react';
import {
@@ -146,12 +147,12 @@ const SettingsJobs: React.FC = () => {
- {job.running &&
{intl.formatMessage(
messages[job.id] ?? messages.unknownJob
)}
+ {job.running &&
@@ -180,10 +181,12 @@ const SettingsJobs: React.FC = () => {
{job.running ? (
cancelJob(job)}>
+
) : (
runJob(job)}>
+
)}
@@ -223,6 +226,7 @@ const SettingsJobs: React.FC = () => {
{formatBytes(cache.stats.vsize)}
flushCache(cache)}>
+
diff --git a/src/components/Settings/SettingsLogs/index.tsx b/src/components/Settings/SettingsLogs/index.tsx
index fe1845c27..a4aaf755e 100644
--- a/src/components/Settings/SettingsLogs/index.tsx
+++ b/src/components/Settings/SettingsLogs/index.tsx
@@ -1,3 +1,10 @@
+import {
+ ClipboardCopyIcon,
+ DocumentSearchIcon,
+ FilterIcon,
+ PauseIcon,
+ PlayIcon,
+} from '@heroicons/react/solid';
import copy from 'copy-to-clipboard';
import { useRouter } from 'next/router';
import React, { useEffect, useState } from 'react';
@@ -135,6 +142,7 @@ const SettingsLogs: React.FC = () => {
>
{refreshInterval ? (
-
-
+
-
+
@@ -273,18 +259,7 @@ const SettingsLogs: React.FC = () => {
-
-
+
{
onClick={() => setActiveLog(row)}
className="mr-2"
>
-
-
+ {
buttonSize="sm"
onClick={() => copyLogString(row)}
>
-
-
+
diff --git a/src/components/Settings/SettingsMain.tsx b/src/components/Settings/SettingsMain.tsx
index 177efd53f..d3a669317 100644
--- a/src/components/Settings/SettingsMain.tsx
+++ b/src/components/Settings/SettingsMain.tsx
@@ -1,3 +1,4 @@
+import { RefreshIcon } from '@heroicons/react/solid';
import axios from 'axios';
import { Field, Form, Formik } from 'formik';
import React, { useMemo } from 'react';
@@ -204,18 +205,7 @@ const SettingsMain: React.FC = () => {
}}
className="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium leading-5 text-white transition duration-150 ease-in-out bg-indigo-600 border border-gray-500 rounded-r-md hover:bg-indigo-500 focus:outline-none focus:ring-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700"
>
-
-
+
-
-
+
),
@@ -106,7 +94,7 @@ const SettingsNotifications: React.FC = ({ children }) => {
text: intl.formatMessage(messages.webhook),
content: (
-
),
diff --git a/src/components/Settings/SettingsPlex.tsx b/src/components/Settings/SettingsPlex.tsx
index d410bb493..05e07352c 100644
--- a/src/components/Settings/SettingsPlex.tsx
+++ b/src/components/Settings/SettingsPlex.tsx
@@ -1,3 +1,4 @@
+import { RefreshIcon, SearchIcon, XIcon } from '@heroicons/react/solid';
import axios from 'axios';
import { Field, Formik } from 'formik';
import React, { useMemo, useState } from 'react';
@@ -7,7 +8,6 @@ import useSWR from 'swr';
import * as Yup from 'yup';
import type { PlexDevice } from '../../../server/interfaces/api/plexInterfaces';
import type { PlexSettings } from '../../../server/lib/settings';
-import Spinner from '../../assets/spinner.svg';
import globalMessages from '../../i18n/globalMessages';
import Alert from '../Common/Alert';
import Badge from '../Common/Badge';
@@ -433,22 +433,12 @@ const SettingsPlex: React.FC = ({ onComplete }) => {
}}
className="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium leading-5 text-white transition duration-150 ease-in-out bg-indigo-600 border border-gray-500 rounded-r-md hover:bg-indigo-500 focus:outline-none focus:ring-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700"
>
- {isRefreshingPresets ? (
-
-
- )}
+ = ({ onComplete }) => {
syncLibraries()} disabled={isSyncing}>
-
-
+ = ({ onComplete }) => {
{!dataSync?.running && (
startScan()}>
-
-
+
)}
{dataSync?.running && (
cancelScan()}>
-
-
+
)}
diff --git a/src/components/Settings/SettingsServices.tsx b/src/components/Settings/SettingsServices.tsx
index c4801a03e..abc4f66ad 100644
--- a/src/components/Settings/SettingsServices.tsx
+++ b/src/components/Settings/SettingsServices.tsx
@@ -1,3 +1,4 @@
+import { PencilIcon, PlusIcon, TrashIcon } from '@heroicons/react/solid';
import axios from 'axios';
import React, { useState } from 'react';
import { defineMessages, useIntl } from 'react-intl';
@@ -130,17 +131,8 @@ const ServerInstance: React.FC
= ({
onClick={() => onEdit()}
className="relative inline-flex items-center justify-center flex-1 w-0 py-4 -mr-px text-sm font-medium leading-5 text-gray-200 transition duration-150 ease-in-out border border-transparent rounded-bl-lg hover:text-white focus:outline-none focus:ring-blue focus:border-gray-500 focus:z-10"
>
-
-
-
- {intl.formatMessage(globalMessages.edit)}
-
+
@@ -148,21 +140,8 @@ const ServerInstance: React.FC
= ({
onClick={() => onDelete()}
className="relative inline-flex items-center justify-center flex-1 w-0 py-4 text-sm font-medium leading-5 text-gray-200 transition duration-150 ease-in-out border border-transparent rounded-br-lg hover:text-white focus:outline-none focus:ring-blue focus:border-gray-500 focus:z-10"
>
-
-
-
- {intl.formatMessage(globalMessages.delete)}
-
+
@@ -278,6 +257,7 @@ const SettingsServices: React.FC = () => {
})
}
title="Delete Server"
+ iconSvg={
-
+
-
+ = ({
values.is4k ? messages.edit4ksonarr : messages.editsonarr
)
}
+ iconSvg={
+ !sonarr ? (
+
diff --git a/src/components/Setup/SetupSteps.tsx b/src/components/Setup/SetupSteps.tsx
index 2429e3ca2..df65f56b4 100644
--- a/src/components/Setup/SetupSteps.tsx
+++ b/src/components/Setup/SetupSteps.tsx
@@ -1,3 +1,4 @@
+import { CheckIcon } from '@heroicons/react/solid';
import React from 'react';
interface CurrentStep {
@@ -17,26 +18,13 @@ const SetupSteps: React.FC
= ({
}) => {
return (
-
+
- {completed && (
-
-
- )}
+ {completed &&
}
{!completed && (
{stepNumber}
@@ -53,9 +41,9 @@ const SetupSteps: React.FC = ({
{!isLastStep && (
-
+
= ({
onClick={() => slide(Direction.LEFT)}
disabled={scrollPos.isStart}
>
-
-
+ = ({
onClick={() => slide(Direction.RIGHT)}
disabled={scrollPos.isEnd}
>
-
-
+
{
show={data.commitTag !== process.env.commitTag}
>
- = ({
{(currentStatus === MediaStatus.AVAILABLE ||
currentStatus === MediaStatus.PARTIALLY_AVAILABLE) && (
)}
{currentStatus === MediaStatus.PENDING && (
)}
{currentStatus === MediaStatus.PROCESSING && (
@@ -161,18 +143,7 @@ const TitleCard: React.FC = ({
{inProgress ? (
-
+
)}
@@ -265,20 +236,7 @@ const TitleCard: React.FC
= ({
}}
className="flex items-center justify-center w-full text-white transition duration-150 ease-in-out bg-indigo-600 rounded-md h-7 hover:bg-indigo-500 focus:border-indigo-700 focus:ring-indigo active:bg-indigo-700"
>
-
-
+
{intl.formatMessage(globalMessages.request)}
diff --git a/src/components/Toast/index.tsx b/src/components/Toast/index.tsx
index 5e94e3e14..aaad91a33 100644
--- a/src/components/Toast/index.tsx
+++ b/src/components/Toast/index.tsx
@@ -1,98 +1,41 @@
+import {
+ CheckCircleIcon,
+ ExclamationCircleIcon,
+ ExclamationIcon,
+ InformationCircleIcon,
+} from '@heroicons/react/outline';
+import { XIcon } from '@heroicons/react/solid';
import React from 'react';
import type { ToastProps } from 'react-toast-notifications';
const Toast: React.FC = ({ appearance, children, onDismiss }) => {
return (
-
-
-
+
+
+
{appearance === 'success' && (
-
-
+
)}
-
{appearance === 'error' && (
-
-
+
)}
-
{appearance === 'info' && (
-
-
+
)}
-
{appearance === 'warning' && (
-
-
+
)}
-
{children}
-
+
{children}
+
onDismiss()}
- className="inline-flex text-gray-400 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150"
+ className="inline-flex text-gray-400 transition duration-150 ease-in-out focus:outline-none focus:text-gray-500"
>
-
-
+
diff --git a/src/components/TvDetails/index.tsx b/src/components/TvDetails/index.tsx
index 9632c56b5..1d7d98fcb 100644
--- a/src/components/TvDetails/index.tsx
+++ b/src/components/TvDetails/index.tsx
@@ -1,3 +1,9 @@
+import { ArrowCircleRightIcon, CogIcon } from '@heroicons/react/outline';
+import {
+ CheckCircleIcon,
+ DocumentRemoveIcon,
+ ExternalLinkIcon,
+} from '@heroicons/react/solid';
import axios from 'axios';
import Link from 'next/link';
import { useRouter } from 'next/router';
@@ -50,7 +56,7 @@ const messages = defineMessages({
manageModalTitle: 'Manage Series',
manageModalRequests: 'Requests',
manageModalNoRequests: 'No requests.',
- manageModalClearMedia: 'Clear All Media Data',
+ manageModalClearMedia: 'Clear Media Data',
manageModalClearMediaWarning:
'* This will irreversibly remove all data for this TV series, including any requests. If this item exists in your Plex library, the media information will be recreated during the next scan.',
originaltitle: 'Original Title',
@@ -302,18 +308,7 @@ const TvDetails: React.FC
= ({ tv }) => {
className="w-full sm:mb-0"
buttonType="success"
>
-
-
+ {intl.formatMessage(messages.markavailable)}
@@ -327,18 +322,7 @@ const TvDetails: React.FC
= ({ tv }) => {
className="w-full sm:mb-0"
buttonType="success"
>
-
-
+
{intl.formatMessage(messages.mark4kavailable)}
@@ -380,15 +364,7 @@ const TvDetails: React.FC = ({ tv }) => {
className="block mb-2 last:mb-0"
>
-
-
+ {intl.formatMessage(messages.opensonarr)}
@@ -400,15 +376,7 @@ const TvDetails: React.FC = ({ tv }) => {
rel="noreferrer"
>
-
-
+ {intl.formatMessage(messages.opensonarr4k)}
@@ -422,6 +390,7 @@ const TvDetails: React.FC = ({ tv }) => {
confirmText={intl.formatMessage(globalMessages.areyousure)}
className="w-full"
>
+
@@ -501,26 +470,7 @@ const TvDetails: React.FC
= ({ tv }) => {
className="ml-2 first:ml-0"
onClick={() => setShowManager(true)}
>
-
-
+ = ({ tv }) => {
{intl.formatMessage(messages.viewfullcrew)}
-
-
+
@@ -734,20 +671,7 @@ const TvDetails: React.FC
= ({ tv }) => {
{intl.formatMessage(messages.cast)}
-
-
+
diff --git a/src/components/UserList/BulkEditModal.tsx b/src/components/UserList/BulkEditModal.tsx
index 96e80524a..17473ec6b 100644
--- a/src/components/UserList/BulkEditModal.tsx
+++ b/src/components/UserList/BulkEditModal.tsx
@@ -1,3 +1,4 @@
+import { PencilIcon } from '@heroicons/react/solid';
import axios from 'axios';
import React, { useEffect, useState } from 'react';
import { defineMessages, useIntl } from 'react-intl';
@@ -84,6 +85,7 @@ const BulkEditModal: React.FC
= ({
return (
-
- }
+ iconSvg={ {
disabled={isImporting}
onClick={() => importFromPlex()}
>
+
-
-
+
{
onClick={() => setShowBulkEditModal(true)}
disabled={selectedUsers.length === 0}
>
+ = ({
passHref
>
-
-
+
@@ -116,18 +106,7 @@ const ProfileHeader: React.FC = ({
passHref
>
-
-
+
diff --git a/src/components/UserProfile/UserSettings/UserNotificationSettings/index.tsx b/src/components/UserProfile/UserSettings/UserNotificationSettings/index.tsx
index b52db4813..e0d68421d 100644
--- a/src/components/UserProfile/UserSettings/UserNotificationSettings/index.tsx
+++ b/src/components/UserProfile/UserSettings/UserNotificationSettings/index.tsx
@@ -1,3 +1,4 @@
+import { AtSymbolIcon } from '@heroicons/react/outline';
import { useRouter } from 'next/router';
import React from 'react';
import { defineMessages, useIntl } from 'react-intl';
@@ -33,20 +34,7 @@ const UserNotificationSettings: React.FC = ({ children }) => {
text: intl.formatMessage(messages.email),
content: (
-
-
+
),
diff --git a/src/components/UserProfile/index.tsx b/src/components/UserProfile/index.tsx
index f9a6d311d..e4dd601de 100644
--- a/src/components/UserProfile/index.tsx
+++ b/src/components/UserProfile/index.tsx
@@ -1,3 +1,4 @@
+import { ArrowCircleRightIcon } from '@heroicons/react/outline';
import Link from 'next/link';
import { useRouter } from 'next/router';
import React, { useCallback, useEffect, useState } from 'react';
@@ -236,20 +237,7 @@ const UserProfile: React.FC = () => {
{intl.formatMessage(messages.recentrequests)}
-
-
+
diff --git a/src/i18n/globalMessages.ts b/src/i18n/globalMessages.ts
index 884acc4ad..58d260e74 100644
--- a/src/i18n/globalMessages.ts
+++ b/src/i18n/globalMessages.ts
@@ -24,6 +24,7 @@ const globalMessages = defineMessages({
decline: 'Decline',
delete: 'Delete',
retry: 'Retry',
+ retrying: 'Retrying…',
view: 'View',
deleting: 'Deleting…',
test: 'Test',
diff --git a/src/i18n/locale/en.json b/src/i18n/locale/en.json
index 60c7ce3e5..629deec27 100644
--- a/src/i18n/locale/en.json
+++ b/src/i18n/locale/en.json
@@ -64,7 +64,7 @@
"components.MovieDetails.budget": "Budget",
"components.MovieDetails.cast": "Cast",
"components.MovieDetails.downloadstatus": "Download Status",
- "components.MovieDetails.manageModalClearMedia": "Clear All Media Data",
+ "components.MovieDetails.manageModalClearMedia": "Clear Media Data",
"components.MovieDetails.manageModalClearMediaWarning": "* This will irreversibly remove all data for this movie, including any requests. If this item exists in your Plex library, the media information will be recreated during the next scan.",
"components.MovieDetails.manageModalNoRequests": "No requests.",
"components.MovieDetails.manageModalRequests": "Requests",
@@ -620,7 +620,7 @@
"components.TvDetails.episodeRuntime": "Episode Runtime",
"components.TvDetails.episodeRuntimeMinutes": "{runtime} minutes",
"components.TvDetails.firstAirDate": "First Air Date",
- "components.TvDetails.manageModalClearMedia": "Clear All Media Data",
+ "components.TvDetails.manageModalClearMedia": "Clear Media Data",
"components.TvDetails.manageModalClearMediaWarning": "* This will irreversibly remove all data for this TV series, including any requests. If this item exists in your Plex library, the media information will be recreated during the next scan.",
"components.TvDetails.manageModalNoRequests": "No requests.",
"components.TvDetails.manageModalRequests": "Requests",
@@ -799,6 +799,7 @@
"i18n.requesting": "Requesting…",
"i18n.resultsperpage": "Display {pageSize} results per page",
"i18n.retry": "Retry",
+ "i18n.retrying": "Retrying…",
"i18n.save": "Save Changes",
"i18n.saving": "Saving…",
"i18n.settings": "Settings",
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index 900f17af3..da7507505 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -1,3 +1,4 @@
+import { ArrowCircleRightIcon } from '@heroicons/react/outline';
import Link from 'next/link';
import React from 'react';
import { defineMessages, useIntl } from 'react-intl';
@@ -22,22 +23,9 @@ const Custom404: React.FC = () => {
})}
-
+
{intl.formatMessage(messages.returnHome)}
-
-
+
diff --git a/src/pages/_error.tsx b/src/pages/_error.tsx
index bb24b57fb..c1960638c 100644
--- a/src/pages/_error.tsx
+++ b/src/pages/_error.tsx
@@ -1,9 +1,10 @@
-import React from 'react';
+import { ArrowCircleRightIcon } from '@heroicons/react/outline';
import type { NextPage } from 'next';
import Link from 'next/link';
-import type { Undefinable } from '../utils/typeHelpers';
+import React from 'react';
import { defineMessages, useIntl } from 'react-intl';
import PageTitle from '../components/Common/PageTitle';
+import type { Undefinable } from '../utils/typeHelpers';
interface ErrorProps {
statusCode?: number;
@@ -45,22 +46,9 @@ const Error: NextPage
= ({ statusCode }) => {
: getErrorMessage(statusCode)}
-
+
{intl.formatMessage(messages.returnHome)}
-
-
+