shpaq/sct-overseerr
1
0
Fork 0
mirror of https://github.com/sct/overseerr.git synced 2025-09-26 20:12:33 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: upgrade tailwindcss to 2.0.1

Browse Source
This commit is contained in:
sct
2020-11-20 02:03:18 +00:00
parent 89be56d840
commit fb5c791b0b
47 changed files with 396 additions and 346 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Settings/CopyButton.tsx
View File

@@ -20,7 +20,7 @@ const CopyButton: React.FC<{ textToCopy: string }> = ({ textToCopy }) => {
return (
<button
onClick={setCopied}
className="-ml-px relative inline-flex items-center px-4 py-2 border border-cool-gray-500 text-sm leading-5 font-medium text-white bg-indigo-500 hover:bg-indigo-400 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
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-500 hover:bg-indigo-400 focus:outline-none focus:ring-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
>
<svg
className="w-5 h-5 text-white"

6
src/components/Settings/LibraryItem.tsx
View File

@@ -13,7 +13,7 @@ const LibraryItem: React.FC<LibraryItemProps> = ({
}) => {
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-cool-gray-700 bg-cool-gray-600 rounded-md truncate">
<div className="flex-1 flex items-center justify-between border-t border-r border-b border-gray-700 bg-gray-600 rounded-md truncate">
<div className="flex-1 px-4 py-6 text-sm leading-5 truncate cursor-default">
{name}
</div>
@@ -29,8 +29,8 @@ const LibraryItem: React.FC<LibraryItemProps> = ({
}
}}
className={`${
isEnabled ? 'bg-indigo-600' : 'bg-cool-gray-700'
} relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:shadow-outline`}
isEnabled ? 'bg-indigo-600' : 'bg-gray-700'
} relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring`}
>
<span
aria-hidden="true"

54
src/components/Settings/RadarrModal.tsx
View File

@@ -214,7 +214,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
<div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
<label
htmlFor="isDefault"
className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
>
Default Server
</label>
@@ -223,14 +223,14 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
type="checkbox"
id="isDefault"
name="isDefault"
className="form-checkbox h-6 w-6 text-indigo-600 transition duration-150 ease-in-out"
className="form-checkbox h-6 w-6 text-indigo-600 transition duration-150 ease-in-out rounded-md"
/>
</div>
</div>
<div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
<label
htmlFor="name"
className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
>
Server Name
</label>
@@ -239,13 +239,13 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
<Field
id="name"
name="name"
type="input"
type="text"
placeholder="A Radarr Server"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setIsValidated(false);
setFieldValue('name', e.target.value);
}}
className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-cool-gray-700 border border-cool-gray-500"
className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
/>
</div>
{errors.name && touched.name && (
@@ -256,7 +256,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
<div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
<label
htmlFor="hostname"
className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
>
Hostname
</label>
@@ -265,13 +265,13 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
<Field
id="hostname"
name="hostname"
type="input"
type="text"
placeholder="127.0.0.1"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setIsValidated(false);
setFieldValue('hostname', e.target.value);
}}
className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-cool-gray-700 border border-cool-gray-500"
className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
/>
</div>
{errors.hostname && touched.hostname && (
@@ -282,7 +282,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
<div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
<label
htmlFor="port"
className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
>
Port
</label>
@@ -290,13 +290,13 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
<Field
id="port"
name="port"
type="input"
type="text"
placeholder="7878"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setIsValidated(false);
setFieldValue('port', e.target.value);
}}
className="rounded-md shadow-sm form-input block w-24 transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-cool-gray-700 border border-cool-gray-500"
className="rounded-md shadow-sm form-input block w-24 transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
/>
{errors.port && touched.port && (
<div className="text-red-500 mt-2">{errors.port}</div>
@@ -306,7 +306,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
<div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
<label
htmlFor="ssl"
className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
>
SSL
</label>
@@ -319,14 +319,14 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
setIsValidated(false);
setFieldValue('ssl', !values.ssl);
}}
className="form-checkbox h-6 w-6 text-indigo-600 transition duration-150 ease-in-out"
className="form-checkbox h-6 w-6 rounded-md text-indigo-600 transition duration-150 ease-in-out"
/>
</div>
</div>
<div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
<label
htmlFor="apiKey"
className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
>
API Key
</label>
@@ -335,13 +335,13 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
<Field
id="apiKey"
name="apiKey"
type="input"
type="text"
placeholder="Your Radarr API Key"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setIsValidated(false);
setFieldValue('apiKey', e.target.value);
}}
className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-cool-gray-700 border border-cool-gray-500"
className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
/>
</div>
{errors.apiKey && touched.apiKey && (
@@ -352,7 +352,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
<div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
<label
htmlFor="baseUrl"
className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
>
Base URL
</label>
@@ -361,13 +361,13 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
<Field
id="baseUrl"
name="baseUrl"
type="input"
type="text"
placeholder="Example: /radarr"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setIsValidated(false);
setFieldValue('baseUrl', e.target.value);
}}
className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-cool-gray-700 border border-cool-gray-500"
className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
/>
</div>
{errors.baseUrl && touched.baseUrl && (
@@ -378,7 +378,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
<div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
<label
htmlFor="activeProfileId"
className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
>
Quality Profile
</label>
@@ -388,7 +388,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
as="select"
id="activeProfileId"
name="activeProfileId"
className="mt-1 form-select block w-full pl-3 pr-10 py-2 text-base leading-6 bg-cool-gray-700 border-cool-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-cool-gray-500 sm:text-sm sm:leading-5"
className="mt-1 form-select rounded-md block w-full pl-3 pr-10 py-2 text-base leading-6 bg-gray-700 border-gray-500 focus:outline-none focus:ring-blue focus:border-gray-500 sm:text-sm sm:leading-5"
>
{testResponse.profiles.length > 0 &&
testResponse.profiles.map((profile) => (
@@ -411,7 +411,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
<div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
<label
htmlFor="rootFolder"
className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
>
Root Folder
</label>
@@ -421,7 +421,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
as="select"
id="rootFolder"
name="rootFolder"
className="mt-1 form-select block w-full pl-3 pr-10 py-2 text-base leading-6 bg-cool-gray-700 border-cool-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-cool-gray-500 sm:text-sm sm:leading-5"
className="mt-1 form-select rounded-md block w-full pl-3 pr-10 py-2 text-base leading-6 bg-gray-700 border-gray-500 focus:outline-none focus:ring-blue focus:border-gray-500 sm:text-sm sm:leading-5"
>
{testResponse.rootFolders.length > 0 &&
testResponse.rootFolders.map((folder) => (
@@ -444,7 +444,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
<div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
<label
htmlFor="minimumAvailability"
className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
>
Minimum Availability
</label>
@@ -454,7 +454,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
as="select"
id="minimumAvailability"
name="minimumAvailability"
className="mt-1 form-select block w-full pl-3 pr-10 py-2 text-base leading-6 bg-cool-gray-700 border-cool-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-cool-gray-500 sm:text-sm sm:leading-5"
className="mt-1 form-select rounded-md block w-full pl-3 pr-10 py-2 text-base leading-6 bg-gray-700 border-gray-500 focus:outline-none focus:ring-blue focus:border-gray-500 sm:text-sm sm:leading-5"
>
<option value="announced">Announced</option>
<option value="inCinemas">In Cinemas</option>
@@ -467,7 +467,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
<div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
<label
htmlFor="is4k"
className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
>
Ultra HD Server
</label>
@@ -476,7 +476,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
type="checkbox"
id="is4k"
name="is4k"
className="form-checkbox h-6 w-6 text-indigo-600 transition duration-150 ease-in-out"
className="form-checkbox h-6 w-6 rounded-md text-indigo-600 transition duration-150 ease-in-out"
/>
</div>
</div>

14
src/components/Settings/SettingsJobs.tsx
View File

@@ -24,24 +24,24 @@ const SettingsJobs: React.FC = () => {
<table className="min-w-full">
<thead>
<tr>
<th className="px-6 py-3 bg-cool-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider">
<th className="px-6 py-3 bg-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider">
Job Name
</th>
<th className="px-6 py-3 bg-cool-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider">
<th className="px-6 py-3 bg-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider">
Next Execution
</th>
<th className="px-6 py-3 bg-cool-gray-500"></th>
<th className="px-6 py-3 bg-gray-500"></th>
</tr>
</thead>
<tbody className="bg-cool-gray-600 divide-y divide-cool-gray-700">
<tbody className="bg-gray-600 divide-y divide-gray-700">
{data?.map((job, index) => (
<tr key={`job-list-${index}`}>
<td className="px-6 py-4 whitespace-no-wrap">
<td className="px-6 py-4 whitespace-nowrap">
<div className="text-sm leading-5 text-white">
{job.name}
</div>
</td>
<td className="px-6 py-4 whitespace-no-wrap">
<td className="px-6 py-4 whitespace-nowrap">
<div className="text-sm leading-5 text-white">
<FormattedRelativeTime
value={Math.floor(
@@ -53,7 +53,7 @@ const SettingsJobs: React.FC = () => {
/>
</div>
</td>
<td className="px-6 py-4 whitespace-no-wrap text-right text-sm leading-5 font-medium">
<td className="px-6 py-4 whitespace-nowrap text-right text-sm leading-5 font-medium">
<Button buttonType="primary">Run Now</Button>
</td>
</tr>

8
src/components/Settings/SettingsLayout.tsx
View File

@@ -47,7 +47,7 @@ const SettingsLayout: React.FC = ({ children }) => {
'border-indigo-600 text-indigo-500 focus:outline-none focus:text-indigo-500 focus:border-indigo-500';
const inactiveLinkColor =
'border-transparent text-cool-gray-500 hover:text-cool-gray-400 hover:border-cool-gray-300 focus:outline-none focus:text-cool-gray-4700 focus:border-cool-gray-300';
'border-transparent text-gray-500 hover:text-gray-400 hover:border-gray-300 focus:outline-none focus:text-gray-4700 focus:border-gray-300';
const SettingsLink: React.FC<{
route: string;
@@ -61,7 +61,7 @@ const SettingsLayout: React.FC = ({ children }) => {
return (
<Link href={route}>
<a
className={`whitespace-no-wrap ml-8 first:ml-0 py-4 px-1 border-b-2 border-transparent font-medium text-sm leading-5 ${
className={`whitespace-nowrap ml-8 first:ml-0 py-4 px-1 border-b-2 border-transparent font-medium text-sm leading-5 ${
!!router.pathname.match(regex) ? activeLinkColor : inactiveLinkColor
}`}
aria-current="page"
@@ -88,7 +88,7 @@ const SettingsLayout: React.FC = ({ children }) => {
)?.route
}
aria-label="Selected tab"
className="bg-cool-gray-800 text-white mt-1 form-select block w-full pl-3 pr-10 py-2 text-base leading-6 border-cool-gray-700 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5 transition ease-in-out duration-150"
className="bg-gray-800 text-white mt-1 rounded-md form-select block w-full pl-3 pr-10 py-2 text-base leading-6 border-gray-700 focus:outline-none focus:ring-blue focus:border-blue-300 sm:text-sm sm:leading-5 transition ease-in-out duration-150"
>
{settingsRoutes.map((route, index) => (
<SettingsLink
@@ -103,7 +103,7 @@ const SettingsLayout: React.FC = ({ children }) => {
</select>
</div>
<div className="hidden sm:block">
<div className="border-b border-cool-gray-600">
<div className="border-b border-gray-600">
<nav className="-mb-px flex">
{settingsRoutes.map((route, index) => (
<SettingsLink

11
src/components/Settings/SettingsMain.tsx
View File

@@ -14,10 +14,10 @@ const SettingsMain: React.FC = () => {
return (
<>
<div>
<h3 className="text-lg leading-6 font-medium text-cool-gray-200">
<h3 className="text-lg leading-6 font-medium text-gray-200">
General Settings
</h3>
<p className="mt-1 max-w-2xl text-sm leading-5 text-cool-gray-500">
<p className="mt-1 max-w-2xl text-sm leading-5 text-gray-500">
These are settings related to general Overseerr configuration.
</p>
</div>
@@ -25,20 +25,21 @@ const SettingsMain: React.FC = () => {
<div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
<label
htmlFor="username"
className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
>
API Key
</label>
<div className="mt-1 sm:mt-0 sm:col-span-2">
<div className="max-w-lg flex rounded-md shadow-sm">
<input
type="text"
id="username"
className="flex-1 form-input block w-full min-w-0 rounded-none rounded-l-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-cool-gray-700 border border-cool-gray-500"
className="flex-1 form-input block w-full min-w-0 rounded-none rounded-l-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
value={data?.apiKey}
readOnly
/>
<CopyButton textToCopy={data?.apiKey ?? ''} />
<button className="-ml-px relative inline-flex items-center px-4 py-2 border border-cool-gray-500 text-sm leading-5 font-medium rounded-r-md text-white bg-indigo-500 hover:bg-indigo-400 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
<button className="-ml-px relative inline-flex items-center px-4 py-2 border border-gray-500 text-sm leading-5 font-medium rounded-r-md text-white bg-indigo-500 hover:bg-indigo-400 focus:outline-none focus:ring-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
<svg
className="w-5 h-5"
fill="currentColor"

33
src/components/Settings/SettingsPlex.tsx
View File

@@ -157,10 +157,10 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
return (
<>
<div>
<h3 className="text-lg leading-6 font-medium text-cool-gray-200">
<h3 className="text-lg leading-6 font-medium text-gray-200">
<FormattedMessage {...messages.plexsettings} />
</h3>
<p className="mt-1 max-w-2xl text-sm leading-5 text-cool-gray-500">
<p className="mt-1 max-w-2xl text-sm leading-5 text-gray-500">
<FormattedMessage {...messages.plexsettingsDescription} />
</p>
</div>
@@ -174,13 +174,14 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
<div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
<label
htmlFor="name"
className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
>
<FormattedMessage {...messages.servername} />
</label>
<div className="mt-1 sm:mt-0 sm:col-span-2">
<div className="max-w-lg flex rounded-md shadow-sm">
<input
type="text"
id="name"
name="name"
placeholder={intl.formatMessage(
@@ -188,7 +189,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
)}
value={data?.name}
readOnly
className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-cool-gray-700 border border-cool-gray-500"
className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
/>
</div>
</div>
@@ -196,19 +197,20 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
<div className="mt-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
<label
htmlFor="hostname"
className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
>
<FormattedMessage {...messages.hostname} />
</label>
<div className="mt-1 sm:mt-0 sm:col-span-2">
<div className="max-w-lg flex rounded-md shadow-sm">
<input
type="text"
id="hostname"
name="hostname"
placeholder="127.0.0.1"
value={formik.values.hostname}
onChange={formik.handleChange}
className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-cool-gray-700 border border-cool-gray-500"
className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
/>
</div>
</div>
@@ -216,25 +218,26 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
<div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
<label
htmlFor="port"
className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
>
<FormattedMessage {...messages.port} />
</label>
<div className="mt-1 sm:mt-0 sm:col-span-2">
<div className="max-w-lg rounded-md shadow-sm sm:max-w-xs">
<input
type="text"
id="port"
name="port"
placeholder="32400"
value={formik.values.port}
onChange={formik.handleChange}
className="form-input block w-24 transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-cool-gray-700 border border-cool-gray-500"
className="form-input block w-24 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
/>
</div>
</div>
</div>
</div>
<div className="mt-8 border-t border-cool-gray-700 pt-5">
<div className="mt-8 border-t border-gray-700 pt-5">
<div className="flex justify-end">
<span className="ml-3 inline-flex rounded-md shadow-sm">
<Button buttonType="primary" type="submit" disabled={isUpdating}>
@@ -247,10 +250,10 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
</div>
</form>
<div className="mt-10">
<h3 className="text-lg leading-6 font-medium text-cool-gray-200">
<h3 className="text-lg leading-6 font-medium text-gray-200">
<FormattedMessage {...messages.plexlibraries} />
</h3>
<p className="mt-1 max-w-2xl text-sm leading-5 text-cool-gray-500">
<p className="mt-1 max-w-2xl text-sm leading-5 text-gray-500">
<FormattedMessage {...messages.plexlibrariesDescription} />
</p>
<div className="mt-6">
@@ -284,15 +287,15 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
</ul>
</div>
<div className="mt-10">
<h3 className="text-lg leading-6 font-medium text-cool-gray-200">
<h3 className="text-lg leading-6 font-medium text-gray-200">
<FormattedMessage {...messages.manualscan} />
</h3>
<p className="mt-1 max-w-2xl text-sm leading-5 text-cool-gray-500">
<p className="mt-1 max-w-2xl text-sm leading-5 text-gray-500">
<FormattedMessage {...messages.manualscanDescription} />
</p>
<div className="mt-6">
<div className="bg-cool-gray-800 p-4 rounded-md">
<div className="w-full h-8 rounded-full bg-cool-gray-600 mb-6 relative overflow-hidden">
<div className="bg-gray-800 p-4 rounded-md">
<div className="w-full h-8 rounded-full bg-gray-600 mb-6 relative overflow-hidden">
{dataSync?.running && (
<div
className="h-8 bg-indigo-600 transition-all ease-in-out duration-200"

26
src/components/Settings/SettingsServices.tsx
View File

@@ -38,7 +38,7 @@ const ServerInstance: React.FC<ServerInstanceProps> = ({
onDelete,
}) => {
return (
<li className="col-span-1 bg-cool-gray-700 rounded-lg shadow">
<li className="col-span-1 bg-gray-700 rounded-lg shadow">
<div className="w-full flex items-center justify-between p-6 space-x-6">
<div className="flex-1 truncate">
<div className="flex items-center space-x-3 mb-2">
@@ -49,11 +49,11 @@ const ServerInstance: React.FC<ServerInstanceProps> = ({
{isDefault4K && <Badge badgeType="warning">Default 4K</Badge>}
{isSSL && <Badge badgeType="success">SSL</Badge>}
</div>
<p className="mt-1 text-cool-gray-300 text-sm leading-5 truncate">
<p className="mt-1 text-gray-300 text-sm leading-5 truncate">
<span className="font-bold mr-2">Address</span>
{address}
</p>
<p className="mt-1 text-cool-gray-300 text-sm leading-5 truncate">
<p className="mt-1 text-gray-300 text-sm leading-5 truncate">
<span className="font-bold mr-2">Active Profile</span> {profileName}
</p>
</div>
@@ -63,12 +63,12 @@ const ServerInstance: React.FC<ServerInstanceProps> = ({
alt=""
/>
</div>
<div className="border-t border-cool-gray-800">
<div className="border-t border-gray-800">
<div className="-mt-px flex">
<div className="w-0 flex-1 flex border-r border-cool-gray-800">
<div className="w-0 flex-1 flex border-r border-gray-800">
<button
onClick={() => onEdit()}
className="relative -mr-px w-0 flex-1 inline-flex items-center justify-center py-4 text-sm leading-5 text-cool-gray-200 font-medium border border-transparent rounded-bl-lg hover:text-white focus:outline-none focus:shadow-outline-blue focus:border-cool-gray-500 focus:z-10 transition ease-in-out duration-150"
className="relative -mr-px w-0 flex-1 inline-flex items-center justify-center py-4 text-sm leading-5 text-gray-200 font-medium border border-transparent rounded-bl-lg hover:text-white focus:outline-none focus:ring-blue focus:border-gray-500 focus:z-10 transition ease-in-out duration-150"
>
<svg
className="w-5 h-5"
@@ -84,7 +84,7 @@ const ServerInstance: React.FC<ServerInstanceProps> = ({
<div className="-ml-px w-0 flex-1 flex">
<button
onClick={() => onDelete()}
className="relative w-0 flex-1 inline-flex items-center justify-center py-4 text-sm leading-5 text-cool-gray-200 font-medium border border-transparent rounded-br-lg hover:text-white focus:outline-none focus:shadow-outline-blue focus:border-cool-gray-500 focus:z-10 transition ease-in-out duration-150"
className="relative w-0 flex-1 inline-flex items-center justify-center py-4 text-sm leading-5 text-gray-200 font-medium border border-transparent rounded-br-lg hover:text-white focus:outline-none focus:ring-blue focus:border-gray-500 focus:z-10 transition ease-in-out duration-150"
>
<svg
className="w-5 h-5"
@@ -154,10 +154,10 @@ const SettingsServices: React.FC = () => {
return (
<>
<div>
<h3 className="text-lg leading-6 font-medium text-cool-gray-200">
<h3 className="text-lg leading-6 font-medium text-gray-200">
Radarr Settings
</h3>
<p className="mt-1 max-w-2xl text-sm leading-5 text-cool-gray-500">
<p className="mt-1 max-w-2xl text-sm leading-5 text-gray-500">
Configure your Radarr connection below. You can have multiple Radarr
configurations but only two can be active as defaults at any time (one
for standard HD and one for 4K). Administrations can override a titles
@@ -232,7 +232,7 @@ const SettingsServices: React.FC = () => {
}
/>
))}
<li className="col-span-1 border-2 border-dashed border-cool-gray-400 rounded-lg shadow h-32 sm:h-32">
<li className="col-span-1 border-2 border-dashed border-gray-400 rounded-lg shadow h-32 sm:h-32">
<div className="flex items-center justify-center w-full h-full">
<Button
buttonType="ghost"
@@ -260,10 +260,10 @@ const SettingsServices: React.FC = () => {
)}
</div>
<div className="mt-10">
<h3 className="text-lg leading-6 font-medium text-cool-gray-200">
<h3 className="text-lg leading-6 font-medium text-gray-200">
Sonarr Settings
</h3>
<p className="mt-1 max-w-2xl text-sm leading-5 text-cool-gray-500">
<p className="mt-1 max-w-2xl text-sm leading-5 text-gray-500">
Configure your Sonarr connection below. You can have multiple Sonarr
configurations but only two can be active as defaults at any time (one
for standard HD and one for 4K). Administrations can override a titles
@@ -294,7 +294,7 @@ const SettingsServices: React.FC = () => {
}
/>
))}
<li className="col-span-1 border-2 border-dashed border-cool-gray-400 rounded-lg shadow h-32 sm:h-32">
<li className="col-span-1 border-2 border-dashed border-gray-400 rounded-lg shadow h-32 sm:h-32">
<div className="flex items-center justify-center w-full h-full">
<Button
buttonType="ghost"

54
src/components/Settings/SonarrModal.tsx
View File

@@ -214,7 +214,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
<div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
<label
htmlFor="isDefault"
className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
>
Default Server
</label>
@@ -223,14 +223,14 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
type="checkbox"
id="isDefault"
name="isDefault"
className="form-checkbox h-6 w-6 text-indigo-600 transition duration-150 ease-in-out"
className="form-checkbox rounded-md h-6 w-6 text-indigo-600 transition duration-150 ease-in-out"
/>
</div>
</div>
<div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
<label
htmlFor="name"
className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
>
Server Name
</label>
@@ -239,13 +239,13 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
<Field
id="name"
name="name"
type="input"
type="text"
placeholder="A Sonarr Server"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setIsValidated(false);
setFieldValue('name', e.target.value);
}}
className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-cool-gray-700 border border-cool-gray-500"
className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
/>
</div>
{errors.name && touched.name && (
@@ -256,7 +256,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
<div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
<label
htmlFor="hostname"
className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
>
Hostname
</label>
@@ -265,13 +265,13 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
<Field
id="hostname"
name="hostname"
type="input"
type="text"
placeholder="127.0.0.1"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setIsValidated(false);
setFieldValue('hostname', e.target.value);
}}
className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-cool-gray-700 border border-cool-gray-500"
className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
/>
</div>
{errors.hostname && touched.hostname && (
@@ -282,7 +282,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
<div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
<label
htmlFor="port"
className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
>
Port
</label>
@@ -290,13 +290,13 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
<Field
id="port"
name="port"
type="input"
type="text"
placeholder="8989"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setIsValidated(false);
setFieldValue('port', e.target.value);
}}
className="rounded-md shadow-sm form-input block w-24 transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-cool-gray-700 border border-cool-gray-500"
className="rounded-md shadow-sm form-input block w-24 transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
/>
{errors.port && touched.port && (
<div className="text-red-500 mt-2">{errors.port}</div>
@@ -306,7 +306,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
<div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
<label
htmlFor="ssl"
className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
>
SSL
</label>
@@ -319,14 +319,14 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
setIsValidated(false);
setFieldValue('ssl', !values.ssl);
}}
className="form-checkbox h-6 w-6 text-indigo-600 transition duration-150 ease-in-out"
className="form-checkbox rounded-md h-6 w-6 text-indigo-600 transition duration-150 ease-in-out"
/>
</div>
</div>
<div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
<label
htmlFor="apiKey"
className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
>
API Key
</label>
@@ -335,13 +335,13 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
<Field
id="apiKey"
name="apiKey"
type="input"
type="text"
placeholder="Your Sonarr API Key"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setIsValidated(false);
setFieldValue('apiKey', e.target.value);
}}
className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-cool-gray-700 border border-cool-gray-500"
className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
/>
</div>
{errors.apiKey && touched.apiKey && (
@@ -352,7 +352,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
<div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
<label
htmlFor="baseUrl"
className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
>
Base URL
</label>
@@ -361,13 +361,13 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
<Field
id="baseUrl"
name="baseUrl"
type="input"
type="text"
placeholder="Example: /sonarr"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setIsValidated(false);
setFieldValue('baseUrl', e.target.value);
}}
className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-cool-gray-700 border border-cool-gray-500"
className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
/>
</div>
{errors.baseUrl && touched.baseUrl && (
@@ -378,7 +378,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
<div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
<label
htmlFor="activeProfileId"
className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
>
Quality Profile
</label>
@@ -388,7 +388,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
as="select"
id="activeProfileId"
name="activeProfileId"
className="mt-1 form-select block w-full pl-3 pr-10 py-2 text-base leading-6 bg-cool-gray-700 border-cool-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-cool-gray-500 sm:text-sm sm:leading-5"
className="mt-1 form-select rounded-md block w-full pl-3 pr-10 py-2 text-base leading-6 bg-gray-700 border-gray-500 focus:outline-none focus:ring-blue focus:border-gray-500 sm:text-sm sm:leading-5"
>
<option value="">Select a Quality Profile</option>
{testResponse.profiles.length > 0 &&
@@ -412,7 +412,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
<div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
<label
htmlFor="rootFolder"
className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
>
Root Folder
</label>
@@ -422,7 +422,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
as="select"
id="rootFolder"
name="rootFolder"
className="mt-1 form-select block w-full pl-3 pr-10 py-2 text-base leading-6 bg-cool-gray-700 border-cool-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-cool-gray-500 sm:text-sm sm:leading-5"
className="mt-1 form-select block rounded-md w-full pl-3 pr-10 py-2 text-base leading-6 bg-gray-700 border-gray-500 focus:outline-none focus:ring-blue focus:border-gray-500 sm:text-sm sm:leading-5"
>
<option value="">Select a Root Folder</option>
{testResponse.rootFolders.length > 0 &&
@@ -446,7 +446,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
<div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
<label
htmlFor="is4k"
className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
>
Ultra HD Server
</label>
@@ -455,14 +455,14 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
type="checkbox"
id="is4k"
name="is4k"
className="form-checkbox h-6 w-6 text-indigo-600 transition duration-150 ease-in-out"
className="form-checkbox h-6 w-6 rounded-md text-indigo-600 transition duration-150 ease-in-out"
/>
</div>
</div>
<div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
<label
htmlFor="enableSeasonFolders"
className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
>
Season Folders
</label>
@@ -471,7 +471,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
type="checkbox"
id="enableSeasonFolders"
name="enableSeasonFolders"
className="form-checkbox h-6 w-6 text-indigo-600 transition duration-150 ease-in-out"
className="form-checkbox h-6 w-6 rounded-md text-indigo-600 transition duration-150 ease-in-out"
/>
</div>
</div>