mirror of
https://github.com/fallenbagel/jellyseerr.git
synced 2026-01-01 12:18:35 -05:00
refactor(icons): install and use @heroicons/react (#1438)
This commit is contained in:
TheCatLady
@@ -1,7 +1,8 @@
|
||||
import { ClipboardCopyIcon } from '@heroicons/react/solid';
|
||||
import React, { useEffect } from 'react';
|
||||
import useClipboard from 'react-use-clipboard';
|
||||
import { useToasts } from 'react-toast-notifications';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
import { useToasts } from 'react-toast-notifications';
|
||||
import useClipboard from 'react-use-clipboard';
|
||||
|
||||
const messages = defineMessages({
|
||||
copied: 'Copied API key to clipboard.',
|
||||
@@ -29,17 +30,9 @@ const CopyButton: React.FC<{ textToCopy: string }> = ({ textToCopy }) => {
|
||||
e.preventDefault();
|
||||
setCopied();
|
||||
}}
|
||||
className="-ml-px relative inline-flex items-center px-4 py-2 border border-gray-500 text-sm leading-5 font-medium text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:ring-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
|
||||
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 hover:bg-indigo-500 focus:outline-none focus:ring-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700"
|
||||
>
|
||||
<svg
|
||||
className="w-5 h-5 text-white"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M8 2a1 1 0 000 2h2a1 1 0 100-2H8z" />
|
||||
<path d="M3 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v6h-4.586l1.293-1.293a1 1 0 00-1.414-1.414l-3 3a1 1 0 000 1.414l3 3a1 1 0 001.414-1.414L10.414 13H15v3a2 2 0 01-2 2H5a2 2 0 01-2-2V5zM15 11h2a1 1 0 110 2h-2v-2z" />
|
||||
</svg>
|
||||
<ClipboardCopyIcon className="w-5 h-5 text-white" />
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { CheckIcon, XIcon } from '@heroicons/react/solid';
|
||||
import React from 'react';
|
||||
|
||||
interface LibraryItemProps {
|
||||
@@ -12,8 +13,8 @@ const LibraryItem: React.FC<LibraryItemProps> = ({
|
||||
onToggle,
|
||||
}) => {
|
||||
return (
|
||||
<li className="col-span-1 flex shadow-sm rounded-md">
|
||||
<div className="flex-1 flex items-center justify-between border-t border-r border-b border-gray-700 bg-gray-600 rounded-md truncate">
|
||||
<li className="flex col-span-1 rounded-md shadow-sm">
|
||||
<div className="flex items-center justify-between flex-1 truncate bg-gray-600 border-t border-b border-r border-gray-700 rounded-md">
|
||||
<div className="flex-1 px-4 py-6 text-sm leading-5 truncate cursor-default">
|
||||
{name}
|
||||
</div>
|
||||
@@ -45,19 +46,7 @@ const LibraryItem: React.FC<LibraryItemProps> = ({
|
||||
: 'opacity-100 ease-in duration-200'
|
||||
} absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`}
|
||||
>
|
||||
<svg
|
||||
className="h-3 w-3 text-gray-400"
|
||||
fill="none"
|
||||
viewBox="0 0 12 12"
|
||||
>
|
||||
<path
|
||||
d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<XIcon className="w-3 h-3 text-gray-400" />
|
||||
</span>
|
||||
<span
|
||||
className={`${
|
||||
@@ -66,13 +55,7 @@ const LibraryItem: React.FC<LibraryItemProps> = ({
|
||||
: 'opacity-0 ease-out duration-100'
|
||||
} absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`}
|
||||
>
|
||||
<svg
|
||||
className="h-3 w-3 text-indigo-600"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 12 12"
|
||||
>
|
||||
<path d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z" />
|
||||
</svg>
|
||||
<CheckIcon className="w-3 h-3 text-indigo-600" />
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { QuestionMarkCircleIcon, RefreshIcon } from '@heroicons/react/solid';
|
||||
import axios from 'axios';
|
||||
import { Field, Form, Formik } from 'formik';
|
||||
import dynamic from 'next/dynamic';
|
||||
@@ -232,18 +233,7 @@ const NotificationsWebhook: React.FC = () => {
|
||||
}}
|
||||
className="mr-2"
|
||||
>
|
||||
<svg
|
||||
className="w-5 h-5 mr-1"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<RefreshIcon className="w-5 h-5 mr-1" />
|
||||
{intl.formatMessage(messages.resetPayload)}
|
||||
</Button>
|
||||
<a
|
||||
@@ -252,18 +242,7 @@ const NotificationsWebhook: React.FC = () => {
|
||||
rel="noreferrer"
|
||||
className="inline-flex items-center justify-center font-medium leading-5 text-white transition duration-150 ease-in-out bg-indigo-600 border border-transparent rounded-md focus:outline-none hover:bg-indigo-500 focus:border-indigo-700 focus:ring-indigo active:bg-indigo-700 disabled:opacity-50 px-2.5 py-1.5 text-xs"
|
||||
>
|
||||
<svg
|
||||
className="w-5 h-5 mr-1"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<QuestionMarkCircleIcon className="w-5 h-5 mr-1" />
|
||||
{intl.formatMessage(messages.templatevariablehelp)}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -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<RadarrModalProps> = ({
|
||||
values.is4k ? messages.edit4kradarr : messages.editradarr
|
||||
)
|
||||
}
|
||||
iconSvg={
|
||||
!radarr ? (
|
||||
<PlusIcon className="w-6 h-6" />
|
||||
) : (
|
||||
<PencilIcon className="w-6 h-6" />
|
||||
)
|
||||
}
|
||||
>
|
||||
<div className="mb-6">
|
||||
<div className="form-row">
|
||||
|
||||
@@ -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<ReleaseProps> = ({
|
||||
>
|
||||
<Modal
|
||||
onCancel={() => setModalOpen(false)}
|
||||
iconSvg={
|
||||
<svg
|
||||
className="w-6 h-6"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
|
||||
/>
|
||||
</svg>
|
||||
}
|
||||
iconSvg={<DocumentTextIcon className="w-6 h-6" />}
|
||||
title={intl.formatMessage(messages.versionChangelog)}
|
||||
cancelText={intl.formatMessage(globalMessages.close)}
|
||||
okText={intl.formatMessage(messages.viewongithub)}
|
||||
@@ -126,6 +112,7 @@ const Release: React.FC<ReleaseProps> = ({
|
||||
</div>
|
||||
<div className="flex-1 text-center sm:text-right">
|
||||
<Button buttonType="primary" onClick={() => setModalOpen(true)}>
|
||||
<DocumentTextIcon className="w-5 h-5 mr-1" />
|
||||
{intl.formatMessage(messages.viewchangelog)}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@@ -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 = () => {
|
||||
<tr key={`job-list-${job.id}`}>
|
||||
<Table.TD>
|
||||
<div className="flex items-center text-sm leading-5 text-white">
|
||||
{job.running && <Spinner className="w-5 h-5 mr-2" />}
|
||||
<span>
|
||||
{intl.formatMessage(
|
||||
messages[job.id] ?? messages.unknownJob
|
||||
)}
|
||||
</span>
|
||||
{job.running && <Spinner className="w-5 h-5 ml-2" />}
|
||||
</div>
|
||||
</Table.TD>
|
||||
<Table.TD>
|
||||
@@ -180,10 +181,12 @@ const SettingsJobs: React.FC = () => {
|
||||
<Table.TD alignText="right">
|
||||
{job.running ? (
|
||||
<Button buttonType="danger" onClick={() => cancelJob(job)}>
|
||||
<StopIcon className="w-5 h-5 mr-1" />
|
||||
{intl.formatMessage(messages.canceljob)}
|
||||
</Button>
|
||||
) : (
|
||||
<Button buttonType="primary" onClick={() => runJob(job)}>
|
||||
<PlayIcon className="w-5 h-5 mr-1" />
|
||||
{intl.formatMessage(messages.runnow)}
|
||||
</Button>
|
||||
)}
|
||||
@@ -223,6 +226,7 @@ const SettingsJobs: React.FC = () => {
|
||||
<Table.TD>{formatBytes(cache.stats.vsize)}</Table.TD>
|
||||
<Table.TD alignText="right">
|
||||
<Button buttonType="danger" onClick={() => flushCache(cache)}>
|
||||
<XCircleIcon className="w-5 h-5 mr-1" />
|
||||
{intl.formatMessage(messages.flushcache)}
|
||||
</Button>
|
||||
</Table.TD>
|
||||
|
||||
@@ -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 = () => {
|
||||
>
|
||||
<Modal
|
||||
title={intl.formatMessage(messages.logDetails)}
|
||||
iconSvg={<DocumentSearchIcon className="w-6 h-6" />}
|
||||
onCancel={() => setActiveLog(null)}
|
||||
cancelText={intl.formatMessage(globalMessages.close)}
|
||||
onOk={() => (activeLog ? copyLogString(activeLog) : undefined)}
|
||||
@@ -237,31 +245,9 @@ const SettingsLogs: React.FC = () => {
|
||||
>
|
||||
<span>
|
||||
{refreshInterval ? (
|
||||
<svg
|
||||
className="w-5 h-5 mr-1"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<PauseIcon className="w-5 h-5 mr-1" />
|
||||
) : (
|
||||
<svg
|
||||
className="w-5 h-5 mr-1"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<PlayIcon className="w-5 h-5 mr-1" />
|
||||
)}
|
||||
</span>
|
||||
<span>
|
||||
@@ -273,18 +259,7 @@ const SettingsLogs: React.FC = () => {
|
||||
</div>
|
||||
<div className="flex flex-1 mb-2 sm:mb-0 sm:flex-none">
|
||||
<span className="inline-flex items-center px-3 text-sm text-gray-100 bg-gray-800 border border-r-0 border-gray-500 cursor-default rounded-l-md">
|
||||
<svg
|
||||
className="w-6 h-6"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<FilterIcon className="w-6 h-6" />
|
||||
</span>
|
||||
<select
|
||||
id="filter"
|
||||
@@ -360,19 +335,7 @@ const SettingsLogs: React.FC = () => {
|
||||
onClick={() => setActiveLog(row)}
|
||||
className="mr-2"
|
||||
>
|
||||
<svg
|
||||
className="w-5 h-5 text-white"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2h-1.528A6 6 0 004 9.528V4z" />
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M8 10a4 4 0 00-3.446 6.032l-1.261 1.26a1 1 0 101.414 1.415l1.261-1.261A4 4 0 108 10zm-2 4a2 2 0 114 0 2 2 0 01-4 0z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<DocumentSearchIcon className="w-5 h-5 text-white" />
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
@@ -380,15 +343,7 @@ const SettingsLogs: React.FC = () => {
|
||||
buttonSize="sm"
|
||||
onClick={() => copyLogString(row)}
|
||||
>
|
||||
<svg
|
||||
className="w-5 h-5 text-white"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M8 2a1 1 0 000 2h2a1 1 0 100-2H8z" />
|
||||
<path d="M3 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v6h-4.586l1.293-1.293a1 1 0 00-1.414-1.414l-3 3a1 1 0 000 1.414l3 3a1 1 0 001.414-1.414L10.414 13H15v3a2 2 0 01-2 2H5a2 2 0 01-2-2V5zM15 11h2a1 1 0 110 2h-2v-2z" />
|
||||
</svg>
|
||||
<ClipboardCopyIcon className="w-5 h-5 text-white" />
|
||||
</Button>
|
||||
</Table.TD>
|
||||
</tr>
|
||||
|
||||
@@ -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"
|
||||
>
|
||||
<svg
|
||||
className="w-5 h-5"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<RefreshIcon className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { AtSymbolIcon } from '@heroicons/react/outline';
|
||||
import { LightningBoltIcon } from '@heroicons/react/solid';
|
||||
import React from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
import Bolt from '../../assets/bolt.svg';
|
||||
import DiscordLogo from '../../assets/extlogos/discord.svg';
|
||||
import PushbulletLogo from '../../assets/extlogos/pushbullet.svg';
|
||||
import PushoverLogo from '../../assets/extlogos/pushover.svg';
|
||||
@@ -27,20 +28,7 @@ const SettingsNotifications: React.FC = ({ children }) => {
|
||||
text: intl.formatMessage(messages.email),
|
||||
content: (
|
||||
<span className="flex items-center">
|
||||
<svg
|
||||
className="h-4 mr-2"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"
|
||||
/>
|
||||
</svg>
|
||||
<AtSymbolIcon className="h-4 mr-2" />
|
||||
{intl.formatMessage(messages.email)}
|
||||
</span>
|
||||
),
|
||||
@@ -106,7 +94,7 @@ const SettingsNotifications: React.FC = ({ children }) => {
|
||||
text: intl.formatMessage(messages.webhook),
|
||||
content: (
|
||||
<span className="flex items-center">
|
||||
<Bolt className="h-4 mr-2" />
|
||||
<LightningBoltIcon className="h-4 mr-2" />
|
||||
{intl.formatMessage(messages.webhook)}
|
||||
</span>
|
||||
),
|
||||
|
||||
@@ -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<SettingsPlexProps> = ({ 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 ? (
|
||||
<Spinner className="w-5 h-5" />
|
||||
) : (
|
||||
<svg
|
||||
className="w-5 h-5"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
<RefreshIcon
|
||||
className={`w-5 h-5 ${
|
||||
isRefreshingPresets ? 'animate-spin' : ''
|
||||
}`}
|
||||
style={{ animationDirection: 'reverse' }}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -538,18 +528,10 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
|
||||
</div>
|
||||
<div className="section">
|
||||
<Button onClick={() => syncLibraries()} disabled={isSyncing}>
|
||||
<svg
|
||||
className={`${isSyncing ? 'animate-spin' : ''} w-5 h-5 mr-1`}
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<RefreshIcon
|
||||
className={`w-5 h-5 mr-1 ${isSyncing ? 'animate-spin' : ''}`}
|
||||
style={{ animationDirection: 'reverse' }}
|
||||
/>
|
||||
{isSyncing
|
||||
? intl.formatMessage(messages.scanning)
|
||||
: intl.formatMessage(messages.scan)}
|
||||
@@ -623,40 +605,14 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
|
||||
<div className="flex-1 text-right">
|
||||
{!dataSync?.running && (
|
||||
<Button buttonType="warning" onClick={() => startScan()}>
|
||||
<svg
|
||||
className="w-5 h-5 mr-1"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
|
||||
/>
|
||||
</svg>
|
||||
<SearchIcon className="w-5 h-5 mr-1" />
|
||||
{intl.formatMessage(messages.startscan)}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{dataSync?.running && (
|
||||
<Button buttonType="danger" onClick={() => cancelScan()}>
|
||||
<svg
|
||||
className="w-5 h-5 mr-1"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
<XIcon className="w-5 h-5 mr-1" />
|
||||
{intl.formatMessage(messages.cancelscan)}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
@@ -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<ServerInstanceProps> = ({
|
||||
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"
|
||||
>
|
||||
<svg
|
||||
className="w-5 h-5"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
|
||||
</svg>
|
||||
<span className="ml-3">
|
||||
{intl.formatMessage(globalMessages.edit)}
|
||||
</span>
|
||||
<PencilIcon className="w-5 h-5 mr-2" />
|
||||
{intl.formatMessage(globalMessages.edit)}
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex flex-1 w-0 -ml-px">
|
||||
@@ -148,21 +140,8 @@ const ServerInstance: React.FC<ServerInstanceProps> = ({
|
||||
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"
|
||||
>
|
||||
<svg
|
||||
className="w-5 h-5"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<span className="ml-3">
|
||||
{intl.formatMessage(globalMessages.delete)}
|
||||
</span>
|
||||
<TrashIcon className="w-5 h-5 mr-2" />
|
||||
{intl.formatMessage(globalMessages.delete)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -278,6 +257,7 @@ const SettingsServices: React.FC = () => {
|
||||
})
|
||||
}
|
||||
title="Delete Server"
|
||||
iconSvg={<TrashIcon className="w-6 h-6" />}
|
||||
>
|
||||
{intl.formatMessage(messages.deleteserverconfirm)}
|
||||
</Modal>
|
||||
@@ -343,18 +323,7 @@ const SettingsServices: React.FC = () => {
|
||||
setEditRadarrModal({ open: true, radarr: null })
|
||||
}
|
||||
>
|
||||
<svg
|
||||
className="w-5 h-5 mr-1"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<PlusIcon className="w-5 h-5 mr-1" />
|
||||
{intl.formatMessage(messages.addradarr)}
|
||||
</Button>
|
||||
</div>
|
||||
@@ -434,18 +403,7 @@ const SettingsServices: React.FC = () => {
|
||||
setEditSonarrModal({ open: true, sonarr: null })
|
||||
}
|
||||
>
|
||||
<svg
|
||||
className="w-5 h-5 mr-1"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<PlusIcon className="w-5 h-5 mr-1" />
|
||||
{intl.formatMessage(messages.addsonarr)}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@@ -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';
|
||||
@@ -387,6 +388,13 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
|
||||
values.is4k ? messages.edit4ksonarr : messages.editsonarr
|
||||
)
|
||||
}
|
||||
iconSvg={
|
||||
!sonarr ? (
|
||||
<PlusIcon className="w-6 h-6" />
|
||||
) : (
|
||||
<PencilIcon className="w-6 h-6" />
|
||||
)
|
||||
}
|
||||
>
|
||||
<div className="mb-6">
|
||||
<div className="form-row">
|
||||
|
||||
Reference in New Issue
Block a user