ByteSnap/channels-seerr
1
0
Fork 0
Code Issues Pull Requests Actions 5 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

52
src/components/RequestModal/AdvancedRequester/index.tsx
View File

@@ -258,7 +258,7 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
if (!data && !error) {
return (
<div className="w-full mb-2">
<div className="mb-2 w-full">
<SmallLoadingSpinner />
</div>
);
@@ -280,15 +280,15 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
return (
<>
<div className="flex items-center mt-4 mb-2 font-bold tracking-wider">
<AdjustmentsIcon className="w-5 h-5 mr-1.5" />
<div className="mt-4 mb-2 flex items-center font-bold tracking-wider">
<AdjustmentsIcon className="mr-1.5 h-5 w-5" />
{intl.formatMessage(messages.advancedoptions)}
</div>
<div className="p-4 bg-gray-600 rounded-md shadow">
<div className="rounded-md bg-gray-600 p-4 shadow">
{!!data && selectedServer !== null && (
<div className="flex flex-col md:flex-row">
{data.filter((server) => server.is4k === is4k).length > 1 && (
<div className="flex-grow flex-shrink-0 w-full mb-3 md:w-1/4 md:pr-4 last:pr-0">
<div className="mb-3 w-full flex-shrink-0 flex-grow last:pr-0 md:w-1/4 md:pr-4">
<label htmlFor="server">
{intl.formatMessage(messages.destinationserver)}
</label>
@@ -298,7 +298,7 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
value={selectedServer}
onChange={(e) => setSelectedServer(Number(e.target.value))}
onBlur={(e) => setSelectedServer(Number(e.target.value))}
className="bg-gray-800 border-gray-700"
className="border-gray-700 bg-gray-800"
>
{data
.filter((server) => server.is4k === is4k)
@@ -320,7 +320,7 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
{(isValidating ||
!serverData ||
serverData.profiles.length > 1) && (
<div className="flex-grow flex-shrink-0 w-full mb-3 md:w-1/4 md:pr-4 last:pr-0">
<div className="mb-3 w-full flex-shrink-0 flex-grow last:pr-0 md:w-1/4 md:pr-4">
<label htmlFor="profile">
{intl.formatMessage(messages.qualityprofile)}
</label>
@@ -330,7 +330,7 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
value={selectedProfile}
onChange={(e) => setSelectedProfile(Number(e.target.value))}
onBlur={(e) => setSelectedProfile(Number(e.target.value))}
className="bg-gray-800 border-gray-700"
className="border-gray-700 bg-gray-800"
disabled={isValidating || !serverData}
>
{(isValidating || !serverData) && (
@@ -364,7 +364,7 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
{(isValidating ||
!serverData ||
serverData.rootFolders.length > 1) && (
<div className="flex-grow flex-shrink-0 w-full mb-3 md:w-1/4 md:pr-4 last:pr-0">
<div className="mb-3 w-full flex-shrink-0 flex-grow last:pr-0 md:w-1/4 md:pr-4">
<label htmlFor="folder">
{intl.formatMessage(messages.rootfolder)}
</label>
@@ -374,7 +374,7 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
value={selectedFolder}
onChange={(e) => setSelectedFolder(e.target.value)}
onBlur={(e) => setSelectedFolder(e.target.value)}
className="bg-gray-800 border-gray-700"
className="border-gray-700 bg-gray-800"
disabled={isValidating || !serverData}
>
{(isValidating || !serverData) && (
@@ -418,7 +418,7 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
(isValidating ||
!serverData ||
(serverData.languageProfiles ?? []).length > 1) && (
<div className="flex-grow flex-shrink-0 w-full mb-3 md:w-1/4 md:pr-4 last:pr-0">
<div className="mb-3 w-full flex-shrink-0 flex-grow last:pr-0 md:w-1/4 md:pr-4">
<label htmlFor="language">
{intl.formatMessage(messages.languageprofile)}
</label>
@@ -432,7 +432,7 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
onBlur={(e) =>
setSelectedLanguage(parseInt(e.target.value))
}
className="bg-gray-800 border-gray-700"
className="border-gray-700 bg-gray-800"
disabled={isValidating || !serverData}
>
{(isValidating || !serverData) && (
@@ -529,25 +529,25 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
</Listbox.Label>
<div className="relative">
<span className="inline-block w-full rounded-md shadow-sm">
<Listbox.Button className="relative w-full py-2 pl-3 pr-10 text-left text-white transition duration-150 ease-in-out bg-gray-800 border border-gray-700 rounded-md cursor-default focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5">
<Listbox.Button className="focus:shadow-outline-blue relative w-full cursor-default rounded-md border border-gray-700 bg-gray-800 py-2 pl-3 pr-10 text-left text-white transition duration-150 ease-in-out focus:border-blue-300 focus:outline-none sm:text-sm sm:leading-5">
<span className="flex items-center">
<img
src={selectedUser.avatar}
alt=""
className="flex-shrink-0 w-6 h-6 rounded-full"
className="h-6 w-6 flex-shrink-0 rounded-full"
/>
<span className="block ml-3">
<span className="ml-3 block">
{selectedUser.displayName}
</span>
{selectedUser.displayName.toLowerCase() !==
selectedUser.email && (
<span className="ml-1 text-gray-400 truncate">
<span className="ml-1 truncate text-gray-400">
({selectedUser.email})
</span>
)}
</span>
<span className="absolute inset-y-0 right-0 flex items-center pr-2 text-gray-500 pointer-events-none">
<ChevronDownIcon className="w-5 h-5" />
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2 text-gray-500">
<ChevronDownIcon className="h-5 w-5" />
</span>
</Listbox.Button>
</span>
@@ -560,11 +560,11 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
className="w-full mt-1 bg-gray-800 rounded-md shadow-lg"
className="mt-1 w-full rounded-md bg-gray-800 shadow-lg"
>
<Listbox.Options
static
className="py-1 overflow-auto text-base leading-6 rounded-md shadow-xs max-h-60 focus:outline-none sm:text-sm sm:leading-5"
className="shadow-xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5"
>
{userData?.results.map((user) => (
<Listbox.Option key={user.id} value={user}>
@@ -572,9 +572,9 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
<div
className={`${
active
? 'text-white bg-indigo-600'
? 'bg-indigo-600 text-white'
: 'text-gray-300'
} cursor-default select-none relative py-2 pl-8 pr-4`}
} relative cursor-default select-none py-2 pl-8 pr-4`}
>
<span
className={`${
@@ -584,14 +584,14 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
<img
src={user.avatar}
alt=""
className="flex-shrink-0 w-6 h-6 rounded-full"
className="h-6 w-6 flex-shrink-0 rounded-full"
/>
<span className="flex-shrink-0 block ml-3">
<span className="ml-3 block flex-shrink-0">
{user.displayName}
</span>
{user.displayName.toLowerCase() !==
user.email && (
<span className="ml-1 text-gray-400 truncate">
<span className="ml-1 truncate text-gray-400">
({user.email})
</span>
)}
@@ -602,7 +602,7 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
active ? 'text-white' : 'text-indigo-600'
} absolute inset-y-0 left-0 flex items-center pl-1.5`}
>
<CheckIcon className="w-5 h-5" />
<CheckIcon className="h-5 w-5" />
</span>
)}
</div>

26
src/components/RequestModal/CollectionRequestModal.tsx
View File

@@ -300,7 +300,7 @@ const CollectionRequestModal: React.FC<RequestModalProps> = ({
<table className="min-w-full">
<thead>
<tr>
<th className="w-16 px-4 py-3 bg-gray-500">
<th className="w-16 bg-gray-500 px-4 py-3">
<span
role="checkbox"
tabIndex={0}
@@ -311,7 +311,7 @@ const CollectionRequestModal: React.FC<RequestModalProps> = ({
toggleAllParts();
}
}}
className={`relative inline-flex items-center justify-center flex-shrink-0 w-10 h-5 pt-2 cursor-pointer focus:outline-none ${
className={`relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center pt-2 focus:outline-none ${
quota?.movie.limit &&
(quota.movie.remaining ?? 0) < unrequestedParts.length
? 'opacity-50'
@@ -322,25 +322,25 @@ const CollectionRequestModal: React.FC<RequestModalProps> = ({
aria-hidden="true"
className={`${
isAllParts() ? 'bg-indigo-500' : 'bg-gray-800'
} absolute h-4 w-9 mx-auto rounded-full transition-colors ease-in-out duration-200`}
} absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out`}
></span>
<span
aria-hidden="true"
className={`${
isAllParts() ? 'translate-x-5' : 'translate-x-0'
} absolute left-0 inline-block h-5 w-5 border border-gray-200 rounded-full bg-white shadow transform group-focus:ring group-focus:border-blue-300 transition-transform ease-in-out duration-200`}
} absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
></span>
</span>
</th>
<th className="px-1 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-200 uppercase bg-gray-500 md:px-6">
<th className="bg-gray-500 px-1 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-200 md:px-6">
{intl.formatMessage(globalMessages.movie)}
</th>
<th className="px-2 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-200 uppercase bg-gray-500 md:px-6">
<th className="bg-gray-500 px-2 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-200 md:px-6">
{intl.formatMessage(globalMessages.status)}
</th>
</tr>
</thead>
<tbody className="bg-gray-600 divide-y divide-gray-700">
<tbody className="divide-y divide-gray-700 bg-gray-600">
{data?.parts.map((part) => {
const partRequest = getPartRequest(part.id);
const partMedia =
@@ -352,7 +352,7 @@ const CollectionRequestModal: React.FC<RequestModalProps> = ({
return (
<tr key={`part-${part.id}`}>
<td className="px-4 py-4 text-sm font-medium leading-5 text-gray-100 whitespace-nowrap">
<td className="whitespace-nowrap px-4 py-4 text-sm font-medium leading-5 text-gray-100">
<span
role="checkbox"
tabIndex={0}
@@ -365,7 +365,7 @@ const CollectionRequestModal: React.FC<RequestModalProps> = ({
togglePart(part.id);
}
}}
className={`pt-2 relative inline-flex items-center justify-center flex-shrink-0 h-5 w-10 cursor-pointer focus:outline-none ${
className={`relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center pt-2 focus:outline-none ${
!!partMedia ||
partRequest ||
(quota?.movie.limit &&
@@ -383,7 +383,7 @@ const CollectionRequestModal: React.FC<RequestModalProps> = ({
isSelectedPart(part.id)
? 'bg-indigo-500'
: 'bg-gray-800'
} absolute h-4 w-9 mx-auto rounded-full transition-colors ease-in-out duration-200`}
} absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out`}
></span>
<span
aria-hidden="true"
@@ -393,12 +393,12 @@ const CollectionRequestModal: React.FC<RequestModalProps> = ({
isSelectedPart(part.id)
? 'translate-x-5'
: 'translate-x-0'
} absolute left-0 inline-block h-5 w-5 border border-gray-200 rounded-full bg-white shadow transform group-focus:ring group-focus:border-blue-300 transition-transform ease-in-out duration-200`}
} absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
></span>
</span>
</td>
<td className="flex items-center px-1 py-4 text-sm font-medium leading-5 text-gray-100 md:px-6">
<div className="relative flex-shrink-0 w-10 h-auto overflow-hidden rounded-md">
<div className="relative h-auto w-10 flex-shrink-0 overflow-hidden rounded-md">
<CachedImage
src={
part.posterPath
@@ -421,7 +421,7 @@ const CollectionRequestModal: React.FC<RequestModalProps> = ({
</div>
</div>
</td>
<td className="py-4 pr-2 text-sm leading-5 text-gray-200 md:px-6 whitespace-nowrap">
<td className="whitespace-nowrap py-4 pr-2 text-sm leading-5 text-gray-200 md:px-6">
{!partMedia && !partRequest && (
<Badge>
{intl.formatMessage(globalMessages.notrequested)}

10
src/components/RequestModal/QuotaDisplay/index.tsx
View File

@@ -46,7 +46,7 @@ const QuotaDisplay: React.FC<QuotaDisplayProps> = ({
const [showDetails, setShowDetails] = useState(false);
return (
<div
className="flex flex-col p-4 my-4 bg-gray-800 rounded-md"
className="my-4 flex flex-col rounded-md bg-gray-800 p-4"
onClick={() => setShowDetails((s) => !s)}
onKeyDown={(e) => {
if (e.key === 'Enter') {
@@ -58,7 +58,7 @@ const QuotaDisplay: React.FC<QuotaDisplayProps> = ({
>
<div className="flex items-center">
<ProgressCircle
className="w-8 h-8"
className="h-8 w-8"
progress={Math.round(
((remaining ?? quota?.remaining ?? 0) / (quota?.limit ?? 1)) * 100
)}
@@ -85,11 +85,11 @@ const QuotaDisplay: React.FC<QuotaDisplayProps> = ({
})}
</div>
</div>
<div className="flex justify-end flex-1">
<div className="flex flex-1 justify-end">
{showDetails ? (
<ChevronUpIcon className="w-6 h-6" />
<ChevronUpIcon className="h-6 w-6" />
) : (
<ChevronDownIcon className="w-6 h-6" />
<ChevronDownIcon className="h-6 w-6" />
)}
</div>
</div>

12
src/components/RequestModal/SearchByNameModal/index.tsx
View File

@@ -63,26 +63,26 @@ const SearchByNameModal: React.FC<SearchByNameModalProps> = ({
{data?.slice(0, 6).map((item) => (
<button
key={item.tvdbId}
className="container flex flex-col items-center justify-center h-40 mx-auto space-y-4 transition scale-100 outline-none cursor-pointer focus:ring focus:ring-indigo-500 focus:ring-opacity-70 focus:outline-none rounded-xl transform-gpu hover:scale-105"
className="container mx-auto flex h-40 scale-100 transform-gpu cursor-pointer flex-col items-center justify-center space-y-4 rounded-xl outline-none transition hover:scale-105 focus:outline-none focus:ring focus:ring-indigo-500 focus:ring-opacity-70"
onClick={() => handleClick(item.tvdbId)}
>
<div
className={`bg-gray-600 h-40 overflow-hidden w-full flex items-center p-2 rounded-xl shadow transition ${
className={`flex h-40 w-full items-center overflow-hidden rounded-xl bg-gray-600 p-2 shadow transition ${
tvdbId === item.tvdbId ? 'ring ring-indigo-500' : ''
} `}
>
<div className="flex items-center flex-none w-24 space-x-4">
<div className="flex w-24 flex-none items-center space-x-4">
<img
src={
item.remotePoster ??
'/images/overseerr_poster_not_found.png'
}
alt={item.title}
className="w-auto rounded-md h-100"
className="h-100 w-auto rounded-md"
/>
</div>
<div className="self-start flex-grow p-3 text-left">
<div className="text-sm font-medium text-grey-200">
<div className="flex-grow self-start p-3 text-left">
<div className="text-grey-200 text-sm font-medium">
{item.title}
</div>
<div className="h-24 overflow-hidden text-sm text-gray-400">

30
src/components/RequestModal/TvRequestModal.tsx
View File

@@ -513,7 +513,7 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
<thead>
<tr>
<th
className={`w-16 px-4 py-3 bg-gray-500 ${
className={`w-16 bg-gray-500 px-4 py-3 ${
!settings.currentSettings.partialRequestsEnabled &&
'hidden'
}`}
@@ -528,7 +528,7 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
toggleAllSeasons();
}
}}
className={`relative inline-flex items-center justify-center flex-shrink-0 w-10 h-5 pt-2 cursor-pointer focus:outline-none ${
className={`relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center pt-2 focus:outline-none ${
quota?.tv.remaining &&
quota.tv.limit &&
quota.tv.remaining < unrequestedSeasons.length
@@ -540,28 +540,28 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
aria-hidden="true"
className={`${
isAllSeasons() ? 'bg-indigo-500' : 'bg-gray-800'
} absolute h-4 w-9 mx-auto rounded-full transition-colors ease-in-out duration-200`}
} absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out`}
></span>
<span
aria-hidden="true"
className={`${
isAllSeasons() ? 'translate-x-5' : 'translate-x-0'
} absolute left-0 inline-block h-5 w-5 border border-gray-200 rounded-full bg-white shadow transform group-focus:ring group-focus:border-blue-300 transition-transform ease-in-out duration-200`}
} absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
></span>
</span>
</th>
<th className="px-1 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-200 uppercase bg-gray-500 md:px-6">
<th className="bg-gray-500 px-1 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-200 md:px-6">
{intl.formatMessage(messages.season)}
</th>
<th className="px-5 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-200 uppercase bg-gray-500 md:px-6">
<th className="bg-gray-500 px-5 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-200 md:px-6">
{intl.formatMessage(messages.numberofepisodes)}
</th>
<th className="px-2 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-200 uppercase bg-gray-500 md:px-6">
<th className="bg-gray-500 px-2 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-200 md:px-6">
{intl.formatMessage(globalMessages.status)}
</th>
</tr>
</thead>
<tbody className="bg-gray-600 divide-y divide-gray-700">
<tbody className="divide-y divide-gray-700 bg-gray-600">
{data?.seasons
.filter((season) => season.seasonNumber !== 0)
.map((season) => {
@@ -577,7 +577,7 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
return (
<tr key={`season-${season.id}`}>
<td
className={`px-4 py-4 text-sm font-medium leading-5 text-gray-100 whitespace-nowrap ${
className={`whitespace-nowrap px-4 py-4 text-sm font-medium leading-5 text-gray-100 ${
!settings.currentSettings
.partialRequestsEnabled && 'hidden'
}`}
@@ -599,7 +599,7 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
toggleSeason(season.seasonNumber);
}
}}
className={`pt-2 relative inline-flex items-center justify-center flex-shrink-0 h-5 w-10 cursor-pointer focus:outline-none ${
className={`relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center pt-2 focus:outline-none ${
mediaSeason ||
(quota?.tv.limit &&
currentlyRemaining <= 0 &&
@@ -621,7 +621,7 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
isSelectedSeason(season.seasonNumber)
? 'bg-indigo-500'
: 'bg-gray-800'
} absolute h-4 w-9 mx-auto rounded-full transition-colors ease-in-out duration-200`}
} absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out`}
></span>
<span
aria-hidden="true"
@@ -634,21 +634,21 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
isSelectedSeason(season.seasonNumber)
? 'translate-x-5'
: 'translate-x-0'
} absolute left-0 inline-block h-5 w-5 border border-gray-200 rounded-full bg-white shadow transform group-focus:ring group-focus:border-blue-300 transition-transform ease-in-out duration-200`}
} absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
></span>
</span>
</td>
<td className="px-1 py-4 text-sm font-medium leading-5 text-gray-100 md:px-6 whitespace-nowrap">
<td className="whitespace-nowrap px-1 py-4 text-sm font-medium leading-5 text-gray-100 md:px-6">
{season.seasonNumber === 0
? intl.formatMessage(messages.extras)
: intl.formatMessage(messages.seasonnumber, {
number: season.seasonNumber,
})}
</td>
<td className="px-5 py-4 text-sm leading-5 text-gray-200 md:px-6 whitespace-nowrap">
<td className="whitespace-nowrap px-5 py-4 text-sm leading-5 text-gray-200 md:px-6">
{season.episodeCount}
</td>
<td className="py-4 pr-2 text-sm leading-5 text-gray-200 md:px-6 whitespace-nowrap">
<td className="whitespace-nowrap py-4 pr-2 text-sm leading-5 text-gray-200 md:px-6">
{!seasonRequest && !mediaSeason && (
<Badge>
{intl.formatMessage(