mirrors/jellyseerr
1
0
Fork 0
mirror of https://github.com/fallenbagel/jellyseerr.git synced 2026-01-06 22:58:09 -05:00
Code Issues Packages Projects Releases Wiki Activity

style: add new tailwind prettier plugin (#2465)

Browse Source
This commit is contained in:
Ryan Cohen
2022-01-25 21:09:41 +09:00
committed by GitHub
parent 5b2a8f682b
commit 822ae9eec7
104 changed files with 737 additions and 734 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,9 +13,9 @@ const LibraryItem: React.FC<LibraryItemProps> = ({
onToggle,
}) => {
return (
<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">
<li className="col-span-1 flex rounded-md shadow-sm">
<div className="flex flex-1 items-center justify-between truncate rounded-md border-t border-b border-r border-gray-700 bg-gray-600">
<div className="flex-1 cursor-default truncate px-4 py-6 text-sm leading-5">
{name}
</div>
<div className="flex-shrink-0 pr-2">
@@ -31,31 +31,31 @@ const LibraryItem: React.FC<LibraryItemProps> = ({
}}
className={`${
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`}
} relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring`}
>
<span
aria-hidden="true"
className={`${
isEnabled ? 'translate-x-5' : 'translate-x-0'
} relative inline-block h-5 w-5 rounded-full bg-white shadow transform transition ease-in-out duration-200`}
} relative inline-block h-5 w-5 transform rounded-full bg-white shadow transition duration-200 ease-in-out`}
>
<span
className={`${
isEnabled
? 'opacity-0 ease-out duration-100'
: 'opacity-100 ease-in duration-200'
} absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`}
? 'opacity-0 duration-100 ease-out'
: 'opacity-100 duration-200 ease-in'
} absolute inset-0 flex h-full w-full items-center justify-center transition-opacity`}
>
<XIcon className="w-3 h-3 text-gray-400" />
<XIcon className="h-3 w-3 text-gray-400" />
</span>
<span
className={`${
isEnabled
? 'opacity-100 ease-in duration-200'
: 'opacity-0 ease-out duration-100'
} absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`}
? 'opacity-100 duration-200 ease-in'
: 'opacity-0 duration-100 ease-out'
} absolute inset-0 flex h-full w-full items-center justify-center transition-opacity`}
>
<CheckIcon className="w-3 h-3 text-indigo-600" />
<CheckIcon className="h-3 w-3 text-indigo-600" />
</span>
</span>
</span>

4
src/components/Settings/Notifications/NotificationsDiscord.tsx
View File

@@ -263,7 +263,7 @@ const NotificationsDiscord: React.FC = () => {
/>
<div className="actions">
<div className="flex justify-end">
<span className="inline-flex ml-3 rounded-md shadow-sm">
<span className="ml-3 inline-flex rounded-md shadow-sm">
<Button
buttonType="warning"
disabled={isSubmitting || !isValid || isTesting}
@@ -280,7 +280,7 @@ const NotificationsDiscord: React.FC = () => {
</span>
</Button>
</span>
<span className="inline-flex ml-3 rounded-md shadow-sm">
<span className="ml-3 inline-flex rounded-md shadow-sm">
<Button
buttonType="primary"
type="submit"

4
src/components/Settings/Notifications/NotificationsEmail.tsx
View File

@@ -431,7 +431,7 @@ const NotificationsEmail: React.FC = () => {
</div>
<div className="actions">
<div className="flex justify-end">
<span className="inline-flex ml-3 rounded-md shadow-sm">
<span className="ml-3 inline-flex rounded-md shadow-sm">
<Button
buttonType="warning"
disabled={isSubmitting || !isValid || isTesting}
@@ -448,7 +448,7 @@ const NotificationsEmail: React.FC = () => {
</span>
</Button>
</span>
<span className="inline-flex ml-3 rounded-md shadow-sm">
<span className="ml-3 inline-flex rounded-md shadow-sm">
<Button
buttonType="primary"
type="submit"

4
src/components/Settings/Notifications/NotificationsGotify/index.tsx
View File

@@ -210,7 +210,7 @@ const NotificationsGotify: React.FC = () => {
/>
<div className="actions">
<div className="flex justify-end">
<span className="inline-flex ml-3 rounded-md shadow-sm">
<span className="ml-3 inline-flex rounded-md shadow-sm">
<Button
buttonType="warning"
disabled={isSubmitting || !isValid || isTesting}
@@ -227,7 +227,7 @@ const NotificationsGotify: React.FC = () => {
</span>
</Button>
</span>
<span className="inline-flex ml-3 rounded-md shadow-sm">
<span className="ml-3 inline-flex rounded-md shadow-sm">
<Button
buttonType="primary"
type="submit"

4
src/components/Settings/Notifications/NotificationsLunaSea/index.tsx
View File

@@ -219,7 +219,7 @@ const NotificationsLunaSea: React.FC = () => {
/>
<div className="actions">
<div className="flex justify-end">
<span className="inline-flex ml-3 rounded-md shadow-sm">
<span className="ml-3 inline-flex rounded-md shadow-sm">
<Button
buttonType="warning"
disabled={isSubmitting || !isValid || isTesting}
@@ -236,7 +236,7 @@ const NotificationsLunaSea: React.FC = () => {
</span>
</Button>
</span>
<span className="inline-flex ml-3 rounded-md shadow-sm">
<span className="ml-3 inline-flex rounded-md shadow-sm">
<Button
buttonType="primary"
type="submit"

4
src/components/Settings/Notifications/NotificationsPushbullet/index.tsx
View File

@@ -213,7 +213,7 @@ const NotificationsPushbullet: React.FC = () => {
/>
<div className="actions">
<div className="flex justify-end">
<span className="inline-flex ml-3 rounded-md shadow-sm">
<span className="ml-3 inline-flex rounded-md shadow-sm">
<Button
buttonType="warning"
disabled={isSubmitting || !isValid || isTesting}
@@ -230,7 +230,7 @@ const NotificationsPushbullet: React.FC = () => {
</span>
</Button>
</span>
<span className="inline-flex ml-3 rounded-md shadow-sm">
<span className="ml-3 inline-flex rounded-md shadow-sm">
<Button
buttonType="primary"
type="submit"

4
src/components/Settings/Notifications/NotificationsPushover/index.tsx
View File

@@ -245,7 +245,7 @@ const NotificationsPushover: React.FC = () => {
/>
<div className="actions">
<div className="flex justify-end">
<span className="inline-flex ml-3 rounded-md shadow-sm">
<span className="ml-3 inline-flex rounded-md shadow-sm">
<Button
buttonType="warning"
disabled={isSubmitting || !isValid || isTesting}
@@ -262,7 +262,7 @@ const NotificationsPushover: React.FC = () => {
</span>
</Button>
</span>
<span className="inline-flex ml-3 rounded-md shadow-sm">
<span className="ml-3 inline-flex rounded-md shadow-sm">
<Button
buttonType="primary"
type="submit"

4
src/components/Settings/Notifications/NotificationsSlack/index.tsx
View File

@@ -197,7 +197,7 @@ const NotificationsSlack: React.FC = () => {
/>
<div className="actions">
<div className="flex justify-end">
<span className="inline-flex ml-3 rounded-md shadow-sm">
<span className="ml-3 inline-flex rounded-md shadow-sm">
<Button
buttonType="warning"
disabled={isSubmitting || !isValid || isTesting}
@@ -214,7 +214,7 @@ const NotificationsSlack: React.FC = () => {
</span>
</Button>
</span>
<span className="inline-flex ml-3 rounded-md shadow-sm">
<span className="ml-3 inline-flex rounded-md shadow-sm">
<Button
buttonType="primary"
type="submit"

4
src/components/Settings/Notifications/NotificationsTelegram.tsx
View File

@@ -300,7 +300,7 @@ const NotificationsTelegram: React.FC = () => {
/>
<div className="actions">
<div className="flex justify-end">
<span className="inline-flex ml-3 rounded-md shadow-sm">
<span className="ml-3 inline-flex rounded-md shadow-sm">
<Button
buttonType="warning"
disabled={isSubmitting || !isValid || isTesting}
@@ -317,7 +317,7 @@ const NotificationsTelegram: React.FC = () => {
</span>
</Button>
</span>
<span className="inline-flex ml-3 rounded-md shadow-sm">
<span className="ml-3 inline-flex rounded-md shadow-sm">
<Button
buttonType="primary"
type="submit"

4
src/components/Settings/Notifications/NotificationsWebPush/index.tsx
View File

@@ -126,7 +126,7 @@ const NotificationsWebPush: React.FC = () => {
</div>
<div className="actions">
<div className="flex justify-end">
<span className="inline-flex ml-3 rounded-md shadow-sm">
<span className="ml-3 inline-flex rounded-md shadow-sm">
<Button
buttonType="warning"
disabled={isSubmitting || isTesting}
@@ -143,7 +143,7 @@ const NotificationsWebPush: React.FC = () => {
</span>
</Button>
</span>
<span className="inline-flex ml-3 rounded-md shadow-sm">
<span className="ml-3 inline-flex rounded-md shadow-sm">
<Button
buttonType="primary"
type="submit"

4
src/components/Settings/Notifications/NotificationsWebhook/index.tsx
View File

@@ -325,7 +325,7 @@ const NotificationsWebhook: React.FC = () => {
/>
<div className="actions">
<div className="flex justify-end">
<span className="inline-flex ml-3 rounded-md shadow-sm">
<span className="ml-3 inline-flex rounded-md shadow-sm">
<Button
buttonType="warning"
disabled={isSubmitting || !isValid || isTesting}
@@ -342,7 +342,7 @@ const NotificationsWebhook: React.FC = () => {
</span>
</Button>
</span>
<span className="inline-flex ml-3 rounded-md shadow-sm">
<span className="ml-3 inline-flex rounded-md shadow-sm">
<Button
buttonType="primary"
type="submit"

10
src/components/Settings/SettingsAbout/Releases/index.tsx
View File

@@ -57,7 +57,7 @@ const Release: React.FC<ReleaseProps> = ({
const [isModalOpen, setModalOpen] = useState(false);
return (
<div className="flex flex-col w-full px-4 py-2 space-y-3 bg-gray-800 rounded-md shadow-md sm:space-y-0 sm:space-x-3 sm:flex-row ring-1 ring-gray-700">
<div className="flex w-full flex-col space-y-3 rounded-md bg-gray-800 px-4 py-2 shadow-md ring-1 ring-gray-700 sm:flex-row sm:space-y-0 sm:space-x-3">
<Transition
enter="opacity-0 transition duration-300"
enterFrom="opacity-0"
@@ -84,9 +84,9 @@ const Release: React.FC<ReleaseProps> = ({
</div>
</Modal>
</Transition>
<div className="flex items-center justify-center flex-grow w-full space-x-2 truncate sm:justify-start">
<span className="text-lg font-bold truncate">
<span className="mr-2 text-xs font-normal whitespace-nowrap">
<div className="flex w-full flex-grow items-center justify-center space-x-2 truncate sm:justify-start">
<span className="truncate text-lg font-bold">
<span className="mr-2 whitespace-nowrap text-xs font-normal">
<FormattedRelativeTime
value={Math.floor(
(new Date(release.created_at).getTime() - Date.now()) / 1000
@@ -139,7 +139,7 @@ const Releases: React.FC<ReleasesProps> = ({ currentVersion }) => {
return (
<div>
<h3 className="heading">{intl.formatMessage(messages.releases)}</h3>
<div className="space-y-3 section">
<div className="section space-y-3">
{data.map((release, index) => {
return (
<div key={`release-${release.id}`}>

12
src/components/Settings/SettingsAbout/index.tsx
View File

@@ -60,19 +60,19 @@ const SettingsAbout: React.FC = () => {
intl.formatMessage(globalMessages.settings),
]}
/>
<div className="p-4 mt-6 bg-indigo-700 rounded-md">
<div className="mt-6 rounded-md bg-indigo-700 p-4">
<div className="flex">
<div className="flex-shrink-0">
<InformationCircleIcon className="w-5 h-5 text-white" />
<InformationCircleIcon className="h-5 w-5 text-white" />
</div>
<div className="flex-1 ml-3 md:flex md:justify-between">
<div className="ml-3 flex-1 md:flex md:justify-between">
<p className="text-sm leading-5 text-white">
{intl.formatMessage(messages.betawarning)}
</p>
<p className="mt-3 text-sm leading-5 md:mt-0 md:ml-6">
<a
href="http://github.com/sct/overseerr"
className="font-medium text-indigo-100 transition duration-150 ease-in-out whitespace-nowrap hover:text-white"
className="whitespace-nowrap font-medium text-indigo-100 transition duration-150 ease-in-out hover:text-white"
target="_blank"
rel="noreferrer"
>
@@ -113,7 +113,7 @@ const SettingsAbout: React.FC = () => {
>
<Badge
badgeType="warning"
className="ml-2 transition !cursor-pointer hover:bg-yellow-400"
className="ml-2 !cursor-pointer transition hover:bg-yellow-400"
>
{intl.formatMessage(messages.outofdate)}
</Badge>
@@ -130,7 +130,7 @@ const SettingsAbout: React.FC = () => {
>
<Badge
badgeType="success"
className="ml-2 transition !cursor-pointer hover:bg-green-400"
className="ml-2 !cursor-pointer transition hover:bg-green-400"
>
{intl.formatMessage(messages.uptodate)}
</Badge>

6
src/components/Settings/SettingsJobsCache/index.tsx
View File

@@ -212,7 +212,7 @@ const SettingsJobs: React.FC = () => {
>
<div className="section">
<form>
<div className="pb-6 form-row">
<div className="form-row pb-6">
<label htmlFor="jobSchedule" className="text-label">
{intl.formatMessage(messages.editJobSchedulePrompt)}
</label>
@@ -291,7 +291,7 @@ const SettingsJobs: React.FC = () => {
messages[job.id] ?? messages.unknownJob
)}
</span>
{job.running && <Spinner className="w-5 h-5 ml-2" />}
{job.running && <Spinner className="ml-2 h-5 w-5" />}
</div>
</Table.TD>
<Table.TD>
@@ -337,7 +337,7 @@ const SettingsJobs: React.FC = () => {
</Button>
) : (
<Button buttonType="primary" onClick={() => runJob(job)}>
<PlayIcon className="w-5 h-5 mr-1" />
<PlayIcon className="mr-1 h-5 w-5" />
<span>{intl.formatMessage(messages.runnow)}</span>
</Button>
)}

34
src/components/Settings/SettingsLogs/index.tsx
View File

@@ -158,7 +158,7 @@ const SettingsLogs: React.FC = () => {
{intl.formatMessage(messages.time)}
</div>
<div className="mb-1 text-sm font-medium leading-5 text-gray-400 sm:mt-2">
<div className="flex items-center max-w-lg">
<div className="flex max-w-lg items-center">
{intl.formatDate(activeLog.timestamp, {
year: 'numeric',
month: 'short',
@@ -175,7 +175,7 @@ const SettingsLogs: React.FC = () => {
{intl.formatMessage(messages.level)}
</div>
<div className="mb-1 text-sm font-medium leading-5 text-gray-400 sm:mt-2">
<div className="flex items-center max-w-lg">
<div className="flex max-w-lg items-center">
<Badge
badgeType={
activeLog.level === 'error'
@@ -197,7 +197,7 @@ const SettingsLogs: React.FC = () => {
{intl.formatMessage(messages.label)}
</div>
<div className="mb-1 text-sm font-medium leading-5 text-gray-400 sm:mt-2">
<div className="flex items-center max-w-lg">
<div className="flex max-w-lg items-center">
{activeLog.label}
</div>
</div>
@@ -207,7 +207,7 @@ const SettingsLogs: React.FC = () => {
{intl.formatMessage(messages.message)}
</div>
<div className="col-span-2 mb-1 text-sm font-medium leading-5 text-gray-400 sm:mt-2">
<div className="flex items-center max-w-lg">
<div className="flex max-w-lg items-center">
{activeLog.message}
</div>
</div>
@@ -218,7 +218,7 @@ const SettingsLogs: React.FC = () => {
{intl.formatMessage(messages.extraData)}
</div>
<div className="col-span-2 mb-1 text-sm font-medium leading-5 text-gray-400 sm:mt-2">
<code className="block w-full px-6 py-4 overflow-auto whitespace-pre bg-gray-800 ring-1 ring-gray-700 max-h-64">
<code className="block max-h-64 w-full overflow-auto whitespace-pre bg-gray-800 px-6 py-4 ring-1 ring-gray-700">
{JSON.stringify(activeLog.data, null, ' ')}
</code>
</div>
@@ -238,10 +238,10 @@ const SettingsLogs: React.FC = () => {
configDir: appData ? appData.appDataPath : '/app/config',
})}
</p>
<div className="flex flex-row flex-grow mt-2 sm:flex-grow-0 sm:justify-end">
<div className="flex flex-row justify-between flex-1 mb-2 sm:mb-0 sm:flex-none">
<div className="mt-2 flex flex-grow flex-row sm:flex-grow-0 sm:justify-end">
<div className="mb-2 flex flex-1 flex-row justify-between sm:mb-0 sm:flex-none">
<Button
className="flex-grow w-full mr-2"
className="mr-2 w-full flex-grow"
buttonType={refreshInterval ? 'default' : 'primary'}
onClick={() => toggleLogs()}
>
@@ -253,9 +253,9 @@ const SettingsLogs: React.FC = () => {
</span>
</Button>
</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">
<FilterIcon className="w-6 h-6" />
<div className="mb-2 flex flex-1 sm:mb-0 sm:flex-none">
<span className="inline-flex cursor-default items-center rounded-l-md border border-r-0 border-gray-500 bg-gray-800 px-3 text-sm text-gray-100">
<FilterIcon className="h-6 w-6" />
</span>
<select
id="filter"
@@ -325,7 +325,7 @@ const SettingsLogs: React.FC = () => {
{row.label ?? ''}
</Table.TD>
<Table.TD className="text-gray-300">{row.message}</Table.TD>
<Table.TD className="flex flex-wrap items-center justify-end -m-1">
<Table.TD className="-m-1 flex flex-wrap items-center justify-end">
{row.data && (
<Button
buttonType="primary"
@@ -352,7 +352,7 @@ const SettingsLogs: React.FC = () => {
{data.results.length === 0 && (
<tr className="relative h-24 p-2 text-white">
<Table.TD colSpan={5} noPadding>
<div className="flex flex-col items-center justify-center w-screen p-6 md:w-full">
<div className="flex w-screen flex-col items-center justify-center p-6 md:w-full">
<span className="text-base">
{intl.formatMessage(globalMessages.noresults)}
</span>
@@ -374,7 +374,7 @@ const SettingsLogs: React.FC = () => {
<tr className="bg-gray-700">
<Table.TD colSpan={5} noPadding>
<nav
className="flex flex-col items-center w-screen px-6 py-3 space-x-4 space-y-3 sm:space-y-0 sm:flex-row md:w-full"
className="flex w-screen flex-col items-center space-x-4 space-y-3 px-6 py-3 sm:flex-row sm:space-y-0 md:w-full"
aria-label="Pagination"
>
<div className="hidden lg:flex lg:flex-1">
@@ -395,7 +395,7 @@ const SettingsLogs: React.FC = () => {
</p>
</div>
<div className="flex justify-center sm:flex-1 sm:justify-start md:justify-center">
<span className="items-center -mt-3 text-sm sm:-ml-4 md:ml-0 sm:mt-0">
<span className="-mt-3 items-center text-sm sm:-ml-4 sm:mt-0 md:ml-0">
{intl.formatMessage(globalMessages.resultsperpage, {
pageSize: (
<select
@@ -408,7 +408,7 @@ const SettingsLogs: React.FC = () => {
.then(() => window.scrollTo(0, 0));
}}
value={currentPageSize}
className="inline short"
className="short inline"
>
<option value="10">10</option>
<option value="25">25</option>
@@ -419,7 +419,7 @@ const SettingsLogs: React.FC = () => {
})}
</span>
</div>
<div className="flex justify-center flex-auto space-x-2 sm:justify-end sm:flex-1">
<div className="flex flex-auto justify-center space-x-2 sm:flex-1 sm:justify-end">
<Button
disabled={!hasPrevPage}
onClick={() =>

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

@@ -398,7 +398,7 @@ const SettingsMain: React.FC = () => {
</div>
<div className="actions">
<div className="flex justify-end">
<span className="inline-flex ml-3 rounded-md shadow-sm">
<span className="ml-3 inline-flex rounded-md shadow-sm">
<Button
buttonType="primary"
type="submit"

20
src/components/Settings/SettingsNotifications.tsx
View File

@@ -30,7 +30,7 @@ const SettingsNotifications: React.FC = ({ children }) => {
text: intl.formatMessage(messages.email),
content: (
<span className="flex items-center">
<MailIcon className="h-4 mr-2" />
<MailIcon className="mr-2 h-4" />
{intl.formatMessage(messages.email)}
</span>
),
@@ -41,7 +41,7 @@ const SettingsNotifications: React.FC = ({ children }) => {
text: intl.formatMessage(messages.webpush),
content: (
<span className="flex items-center">
<CloudIcon className="h-4 mr-2" />
<CloudIcon className="mr-2 h-4" />
{intl.formatMessage(messages.webpush)}
</span>
),
@@ -52,7 +52,7 @@ const SettingsNotifications: React.FC = ({ children }) => {
text: 'Discord',
content: (
<span className="flex items-center">
<DiscordLogo className="h-4 mr-2" />
<DiscordLogo className="mr-2 h-4" />
Discord
</span>
),
@@ -63,7 +63,7 @@ const SettingsNotifications: React.FC = ({ children }) => {
text: 'Gotify',
content: (
<span className="flex items-center">
<GotifyLogo className="h-4 mr-2" />
<GotifyLogo className="mr-2 h-4" />
Gotify
</span>
),
@@ -74,7 +74,7 @@ const SettingsNotifications: React.FC = ({ children }) => {
text: 'LunaSea',
content: (
<span className="flex items-center">
<LunaSeaLogo className="h-4 mr-2" />
<LunaSeaLogo className="mr-2 h-4" />
LunaSea
</span>
),
@@ -85,7 +85,7 @@ const SettingsNotifications: React.FC = ({ children }) => {
text: 'Pushbullet',
content: (
<span className="flex items-center">
<PushbulletLogo className="h-4 mr-2" />
<PushbulletLogo className="mr-2 h-4" />
Pushbullet
</span>
),
@@ -96,7 +96,7 @@ const SettingsNotifications: React.FC = ({ children }) => {
text: 'Pushover',
content: (
<span className="flex items-center">
<PushoverLogo className="h-4 mr-2" />
<PushoverLogo className="mr-2 h-4" />
Pushover
</span>
),
@@ -107,7 +107,7 @@ const SettingsNotifications: React.FC = ({ children }) => {
text: 'Slack',
content: (
<span className="flex items-center">
<SlackLogo className="h-4 mr-2" />
<SlackLogo className="mr-2 h-4" />
Slack
</span>
),
@@ -118,7 +118,7 @@ const SettingsNotifications: React.FC = ({ children }) => {
text: 'Telegram',
content: (
<span className="flex items-center">
<TelegramLogo className="h-4 mr-2" />
<TelegramLogo className="mr-2 h-4" />
Telegram
</span>
),
@@ -129,7 +129,7 @@ const SettingsNotifications: React.FC = ({ children }) => {
text: intl.formatMessage(messages.webhook),
content: (
<span className="flex items-center">
<LightningBoltIcon className="h-4 mr-2" />
<LightningBoltIcon className="mr-2 h-4" />
{intl.formatMessage(messages.webhook)}
</span>
),

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

@@ -506,7 +506,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
</label>
<div className="form-input">
<div className="form-input-field">
<span className="inline-flex items-center px-3 text-gray-100 bg-gray-800 border border-r-0 border-gray-500 cursor-default rounded-l-md sm:text-sm">
<span className="inline-flex cursor-default items-center rounded-l-md border border-r-0 border-gray-500 bg-gray-800 px-3 text-gray-100 sm:text-sm">
{values.useSsl ? 'https://' : 'http://'}
</span>
<Field
@@ -594,7 +594,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
</div>
<div className="actions">
<div className="flex justify-end">
<span className="inline-flex ml-3 rounded-md shadow-sm">
<span className="ml-3 inline-flex rounded-md shadow-sm">
<Button
buttonType="primary"
type="submit"
@@ -637,7 +637,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
: intl.formatMessage(messages.scan)}
</span>
</Button>
<ul className="grid grid-cols-1 gap-5 mt-6 sm:gap-6 sm:grid-cols-2 lg:grid-cols-4">
<ul className="mt-6 grid grid-cols-1 gap-5 sm:grid-cols-2 sm:gap-6 lg:grid-cols-4">
{data?.libraries.map((library) => (
<LibraryItem
name={library.name}
@@ -655,11 +655,11 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
</p>
</div>
<div className="section">
<div className="p-4 bg-gray-800 rounded-md">
<div className="relative w-full h-8 mb-6 overflow-hidden bg-gray-600 rounded-full">
<div className="rounded-md bg-gray-800 p-4">
<div className="relative mb-6 h-8 w-full overflow-hidden rounded-full bg-gray-600">
{dataSync?.running && (
<div
className="h-8 transition-all duration-200 ease-in-out bg-indigo-600"
className="h-8 bg-indigo-600 transition-all duration-200 ease-in-out"
style={{
width: `${Math.round(
(dataSync.progress / dataSync.total) * 100
@@ -667,7 +667,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
}}
/>
)}
<div className="absolute inset-0 flex items-center justify-center w-full h-8 text-sm">
<div className="absolute inset-0 flex h-8 w-full items-center justify-center text-sm">
<span>
{dataSync?.running
? `${dataSync.progress} of ${dataSync.total}`
@@ -675,11 +675,11 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
</span>
</div>
</div>
<div className="flex flex-col w-full sm:flex-row">
<div className="flex w-full flex-col sm:flex-row">
{dataSync?.running && (
<>
{dataSync.currentLibrary && (
<div className="flex items-center mb-2 mr-0 sm:mb-0 sm:mr-2">
<div className="mb-2 mr-0 flex items-center sm:mb-0 sm:mr-2">
<Badge>
{intl.formatMessage(messages.currentlibrary, {
name: dataSync.currentLibrary.name,
@@ -792,7 +792,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
</label>
<div className="form-input">
<div className="form-input-field">
<span className="inline-flex items-center px-3 text-gray-100 bg-gray-800 border border-r-0 border-gray-500 cursor-default rounded-l-md sm:text-sm">
<span className="inline-flex cursor-default items-center rounded-l-md border border-r-0 border-gray-500 bg-gray-800 px-3 text-gray-100 sm:text-sm">
{values.tautulliUseSsl ? 'https://' : 'http://'}
</span>
<Field
@@ -904,7 +904,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
</div>
<div className="actions">
<div className="flex justify-end">
<span className="inline-flex ml-3 rounded-md shadow-sm">
<span className="ml-3 inline-flex rounded-md shadow-sm">
<Button
buttonType="primary"
type="submit"

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

@@ -79,14 +79,14 @@ const ServerInstance: React.FC<ServerInstanceProps> = ({
const serviceUrl = externalUrl ?? internalUrl;
return (
<li className="col-span-1 bg-gray-800 rounded-lg shadow ring-1 ring-gray-500">
<div className="flex items-center justify-between w-full p-6 space-x-6">
<li className="col-span-1 rounded-lg bg-gray-800 shadow ring-1 ring-gray-500">
<div className="flex w-full items-center justify-between space-x-6 p-6">
<div className="flex-1 truncate">
<div className="flex items-center mb-2 space-x-2">
<h3 className="font-medium leading-5 text-white truncate">
<div className="mb-2 flex items-center space-x-2">
<h3 className="truncate font-medium leading-5 text-white">
<a
href={serviceUrl}
className="transition duration-300 hover:underline hover:text-white"
className="transition duration-300 hover:text-white hover:underline"
>
{name}
</a>
@@ -108,18 +108,18 @@ const ServerInstance: React.FC<ServerInstanceProps> = ({
</Badge>
)}
</div>
<p className="mt-1 text-sm leading-5 text-gray-300 truncate">
<p className="mt-1 truncate text-sm leading-5 text-gray-300">
<span className="mr-2 font-bold">
{intl.formatMessage(messages.address)}
</span>
<a
href={internalUrl}
className="transition duration-300 hover:underline hover:text-white"
className="transition duration-300 hover:text-white hover:underline"
>
{internalUrl}
</a>
</p>
<p className="mt-1 text-sm leading-5 text-gray-300 truncate">
<p className="mt-1 truncate text-sm leading-5 text-gray-300">
<span className="mr-2 font-bold">
{intl.formatMessage(messages.activeProfile)}
</span>
@@ -128,29 +128,29 @@ const ServerInstance: React.FC<ServerInstanceProps> = ({
</div>
<a href={serviceUrl} className="opacity-50 hover:opacity-100">
{isSonarr ? (
<SonarrLogo className="flex-shrink-0 w-10 h-10" />
<SonarrLogo className="h-10 w-10 flex-shrink-0" />
) : (
<RadarrLogo className="flex-shrink-0 w-10 h-10" />
<RadarrLogo className="h-10 w-10 flex-shrink-0" />
)}
</a>
</div>
<div className="border-t border-gray-500">
<div className="flex -mt-px">
<div className="flex flex-1 w-0 border-r border-gray-500">
<div className="-mt-px flex">
<div className="flex w-0 flex-1 border-r border-gray-500">
<button
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"
className="focus:ring-blue relative -mr-px inline-flex w-0 flex-1 items-center justify-center rounded-bl-lg border border-transparent py-4 text-sm font-medium leading-5 text-gray-200 transition duration-150 ease-in-out hover:text-white focus:z-10 focus:border-gray-500 focus:outline-none"
>
<PencilIcon className="w-5 h-5 mr-2" />
<PencilIcon className="mr-2 h-5 w-5" />
<span>{intl.formatMessage(globalMessages.edit)}</span>
</button>
</div>
<div className="flex flex-1 w-0 -ml-px">
<div className="-ml-px flex w-0 flex-1">
<button
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"
className="focus:ring-blue relative inline-flex w-0 flex-1 items-center justify-center rounded-br-lg border border-transparent py-4 text-sm font-medium leading-5 text-gray-200 transition duration-150 ease-in-out hover:text-white focus:z-10 focus:border-gray-500 focus:outline-none"
>
<TrashIcon className="w-5 h-5 mr-2" />
<TrashIcon className="mr-2 h-5 w-5" />
<span>{intl.formatMessage(globalMessages.delete)}</span>
</button>
</div>
@@ -334,8 +334,8 @@ const SettingsServices: React.FC = () => {
}
/>
))}
<li className="h-32 col-span-1 border-2 border-gray-400 border-dashed rounded-lg shadow sm:h-44">
<div className="flex items-center justify-center w-full h-full">
<li className="col-span-1 h-32 rounded-lg border-2 border-dashed border-gray-400 shadow sm:h-44">
<div className="flex h-full w-full items-center justify-center">
<Button
buttonType="ghost"
className="mt-3 mb-3"
@@ -425,8 +425,8 @@ const SettingsServices: React.FC = () => {
}
/>
))}
<li className="h-32 col-span-1 border-2 border-gray-400 border-dashed rounded-lg shadow sm:h-44">
<div className="flex items-center justify-center w-full h-full">
<li className="col-span-1 h-32 rounded-lg border-2 border-dashed border-gray-400 shadow sm:h-44">
<div className="flex h-full w-full items-center justify-center">
<Button
buttonType="ghost"
onClick={() =>

2
src/components/Settings/SettingsUsers/index.tsx
View File

@@ -197,7 +197,7 @@ const SettingsUsers: React.FC = () => {
</div>
<div className="actions">
<div className="flex justify-end">
<span className="inline-flex ml-3 rounded-md shadow-sm">
<span className="ml-3 inline-flex rounded-md shadow-sm">
<Button
buttonType="primary"
type="submit"