chrisryn/requestarr
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix(frontend): full season request modal fits on a smaller mobile UI (#535)

Browse Source 
* fix(frontend): full season request modal fits on a smaller mobile UI

* fix(frontend): added responsive variant and removed unnecessary padding

* fix(frontend): added in responsive design

* fix(frontend): applied the same spacing from the discovery page to the requests/users pages

* fix(frontend): revered change to keep tables edge to edge on mobile
This commit is contained in:
Brandon Cohen
2020-12-30 23:57:31 -05:00
committed by GitHub
parent 058fb65495
commit 12db7a065a
25 changed files with 123 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/CollectionDetails/index.tsx
View File

@@ -102,7 +102,7 @@ const CollectionDetails: React.FC<CollectionDetailsProps> = ({
return ( return (
<div <div
className="px-4 pt-4 -mx-4 -mt-2 bg-center bg-cover sm:px-8 " className="px-4 pt-4 -mx-4 -mt-2 bg-center bg-cover"
style={{ style={{
height: 493, height: 493,
backgroundImage: `linear-gradient(180deg, rgba(17, 24, 39, 0.47) 0%, rgba(17, 24, 39, 1) 100%), url(//image.tmdb.org/t/p/w1920_and_h800_multi_faces/${data.backdropPath})`, backgroundImage: `linear-gradient(180deg, rgba(17, 24, 39, 0.47) 0%, rgba(17, 24, 39, 1) 100%), url(//image.tmdb.org/t/p/w1920_and_h800_multi_faces/${data.backdropPath})`,

2
src/components/Common/List/index.tsx
View File

@@ -7,7 +7,7 @@ interface ListItemProps {
const ListItem: React.FC<ListItemProps> = ({ title, children }) => { const ListItem: React.FC<ListItemProps> = ({ title, children }) => {
return ( return (
<div className="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4"> <div className="py-4 sm:grid sm:grid-cols-3 sm:gap-4">
<dt className="text-sm font-medium text-gray-200">{title}</dt> <dt className="text-sm font-medium text-gray-200">{title}</dt>
<dd className="mt-1 flex text-sm text-gray-400 sm:mt-0 sm:col-span-2"> <dd className="mt-1 flex text-sm text-gray-400 sm:mt-0 sm:col-span-2">
<span className="flex-grow">{children}</span> <span className="flex-grow">{children}</span>

4
src/components/Common/Modal/index.tsx
View File

@@ -98,7 +98,7 @@ const Modal: React.FC<ModalProps> = ({
show={!loading} show={!loading}
> >
<div <div
className="inline-block align-bottom bg-gray-700 sm:rounded-lg px-4 pt-5 pb-4 text-left overflow-auto shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl w-full sm:p-6 max-h-full" className="inline-block align-bottom bg-gray-700 sm:rounded-lg px-4 pt-5 pb-4 text-left overflow-auto shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl w-full max-h-full"
role="dialog" role="dialog"
aria-modal="true" aria-modal="true"
aria-labelledby="modal-headline" aria-labelledby="modal-headline"
@@ -166,7 +166,7 @@ const Modal: React.FC<ModalProps> = ({
<Button <Button
buttonType={cancelButtonType} buttonType={cancelButtonType}
onClick={onCancel} onClick={onCancel}
className="ml-3 sm:ml-0 sm:px-4" className="ml-3 sm:ml-0"
> >
{cancelText {cancelText
? cancelText ? cancelText

4
src/components/Common/SlideOver/index.tsx
View File

@@ -61,7 +61,7 @@ const SlideOver: React.FC<SlideOverProps> = ({
> >
<div className="w-screen max-w-md" ref={slideoverRef}> <div className="w-screen max-w-md" ref={slideoverRef}>
<div className="flex flex-col h-full overflow-y-scroll bg-gray-700 shadow-xl"> <div className="flex flex-col h-full overflow-y-scroll bg-gray-700 shadow-xl">
<header className="px-4 py-6 space-y-1 bg-indigo-600 sm:px-6"> <header className="px-4 py-6 space-y-1 bg-indigo-600">
<div className="flex items-center justify-between space-x-3"> <div className="flex items-center justify-between space-x-3">
<h2 className="text-lg font-medium leading-7 text-white"> <h2 className="text-lg font-medium leading-7 text-white">
{title} {title}
@@ -97,7 +97,7 @@ const SlideOver: React.FC<SlideOverProps> = ({
</div> </div>
)} )}
</header> </header>
<div className="relative flex-1 px-4 py-6 text-white sm:px-6"> <div className="relative flex-1 px-4 py-6 text-white">
{children} {children}
</div> </div>
</div> </div>

4
src/components/Common/Table/index.tsx
View File

@@ -71,8 +71,8 @@ const TD: React.FC<TDProps> = ({
const Table: React.FC = ({ children }) => { const Table: React.FC = ({ children }) => {
return ( return (
<div className="flex flex-col"> <div className="flex flex-col">
<div className="my-2 overflow-x-auto -mx-6 sm:-mx-6 md:mx-4 lg:mx-4"> <div className="my-2 overflow-x-auto -mx-6 md:mx-0 lg:mx-0">
<div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8"> <div className="py-2 align-middle inline-block min-w-full">
<div className="shadow overflow-hidden sm:rounded-lg"> <div className="shadow overflow-hidden sm:rounded-lg">
<table className="min-w-full">{children}</table> <table className="min-w-full">{children}</table>
</div> </div>

4
src/components/Layout/index.tsx
View File

@@ -55,8 +55,8 @@ const Layout: React.FC = ({ children }) => {
className="relative z-0 top-16 focus:outline-none right-0" className="relative z-0 top-16 focus:outline-none right-0"
tabIndex={0} tabIndex={0}
> >
<div className="pt-2 pb-6 md:py-6"> <div className="pt-2 pb-6">
<div className="max-w-8xl mx-auto px-4 sm:px-6 md:px-8"> <div className="max-w-8xl mx-auto px-4">
{router.pathname === '/' && hasPermission(Permission.ADMIN) && ( {router.pathname === '/' && hasPermission(Permission.ADMIN) && (
<div className="rounded-md bg-indigo-700 p-4 mt-2"> <div className="rounded-md bg-indigo-700 p-4 mt-2">
<div className="flex"> <div className="flex">

6
src/components/Login/index.tsx
View File

@@ -51,7 +51,7 @@ const Login: React.FC = () => {
}, [user, router]); }, [user, router]);
return ( return (
<div className="relative flex flex-col justify-center min-h-screen py-12 bg-gray-900 sm:px-6 lg:px-8"> <div className="relative flex flex-col justify-center min-h-screen py-12 bg-gray-900">
<ImageFader <ImageFader
backgroundImages={[ backgroundImages={[
'/images/rotate1.jpg', '/images/rotate1.jpg',
@@ -65,7 +65,7 @@ const Login: React.FC = () => {
<div className="absolute z-50 top-4 right-4"> <div className="absolute z-50 top-4 right-4">
<LanguagePicker /> <LanguagePicker />
</div> </div>
<div className="relative z-40 px-4 sm:px-2 md:px-0 sm:mx-auto sm:w-full sm:max-w-md"> <div className="relative z-40 px-4 sm:mx-auto sm:w-full sm:max-w-md">
<img <img
src="/logo.png" src="/logo.png"
className="w-auto mx-auto max-h-32" className="w-auto mx-auto max-h-32"
@@ -77,7 +77,7 @@ const Login: React.FC = () => {
</div> </div>
<div className="relative z-50 mt-8 sm:mx-auto sm:w-full sm:max-w-md"> <div className="relative z-50 mt-8 sm:mx-auto sm:w-full sm:max-w-md">
<div <div
className="px-4 py-8 bg-gray-800 bg-opacity-50 shadow sm:rounded-lg sm:px-10" className="px-4 py-8 bg-gray-800 bg-opacity-50 shadow sm:rounded-lg"
style={{ backdropFilter: 'blur(5px)' }} style={{ backdropFilter: 'blur(5px)' }}
> >
<Transition <Transition

2
src/components/MovieDetails/index.tsx
View File

@@ -146,7 +146,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
return ( return (
<div <div
className="px-4 pt-4 -mx-4 -mt-2 bg-center bg-cover sm:px-8 " className="px-4 pt-4 -mx-4 -mt-2 bg-center bg-cover"
style={{ style={{
height: 493, height: 493,
backgroundImage: `linear-gradient(180deg, rgba(17, 24, 39, 0.47) 0%, rgba(17, 24, 39, 1) 100%), url(//image.tmdb.org/t/p/w1920_and_h800_multi_faces/${data.backdropPath})`, backgroundImage: `linear-gradient(180deg, rgba(17, 24, 39, 0.47) 0%, rgba(17, 24, 39, 1) 100%), url(//image.tmdb.org/t/p/w1920_and_h800_multi_faces/${data.backdropPath})`,

2
src/components/RequestBlock/index.tsx
View File

@@ -43,7 +43,7 @@ const RequestBlock: React.FC<RequestBlockProps> = ({ request, onUpdate }) => {
return ( return (
<div className="block"> <div className="block">
<div className="px-4 py-4 sm:px-6"> <div className="px-4 py-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="mr-6 flex-col items-center text-sm leading-5 text-gray-300 flex-1 min-w-0"> <div className="mr-6 flex-col items-center text-sm leading-5 text-gray-300 flex-1 min-w-0">
<div className="flex flex-nowrap mb-1 white"> <div className="flex flex-nowrap mb-1 white">

2
src/components/RequestList/index.tsx
View File

@@ -63,7 +63,7 @@ const RequestList: React.FC = () => {
<tr> <tr>
<Table.TD colSpan={6} noPadding> <Table.TD colSpan={6} noPadding>
<nav <nav
className="flex items-center justify-between px-4 py-3 text-white bg-gray-700 sm:px-6" className="flex items-center justify-between px-4 py-3 text-white bg-gray-700"
aria-label="Pagination" aria-label="Pagination"
> >
<div className="hidden sm:block"> <div className="hidden sm:block">

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

@@ -224,7 +224,7 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
> >
<div className="flex flex-col"> <div className="flex flex-col">
<div className="-mx-4 overflow-auto sm:mx-0 max-h-96"> <div className="-mx-4 overflow-auto sm:mx-0 max-h-96">
<div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8"> <div className="inline-block min-w-full py-2 align-middle">
<div className="overflow-hidden shadow sm:rounded-lg"> <div className="overflow-hidden shadow sm:rounded-lg">
<table className="min-w-full"> <table className="min-w-full">
<thead> <thead>
@@ -256,13 +256,13 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
></span> ></span>
</span> </span>
</th> </th>
<th className="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-200 uppercase bg-gray-500"> <th className="px-1 md:px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-200 uppercase bg-gray-500">
{intl.formatMessage(messages.season)} {intl.formatMessage(messages.season)}
</th> </th>
<th className="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-200 uppercase bg-gray-500"> <th className="px-5 md:px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-200 uppercase bg-gray-500">
{intl.formatMessage(messages.numberofepisodes)} {intl.formatMessage(messages.numberofepisodes)}
</th> </th>
<th className="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-200 uppercase bg-gray-500"> <th className="px-2 md:px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-200 uppercase bg-gray-500">
{intl.formatMessage(messages.status)} {intl.formatMessage(messages.status)}
</th> </th>
</tr> </tr>
@@ -320,17 +320,17 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
></span> ></span>
</span> </span>
</td> </td>
<td className="px-6 py-4 text-sm font-medium leading-5 text-gray-100 whitespace-nowrap"> <td className="px-1 md:px-6 py-4 text-sm font-medium leading-5 text-gray-100 whitespace-nowrap">
{season.seasonNumber === 0 {season.seasonNumber === 0
? intl.formatMessage(messages.extras) ? intl.formatMessage(messages.extras)
: intl.formatMessage(messages.seasonnumber, { : intl.formatMessage(messages.seasonnumber, {
number: season.seasonNumber, number: season.seasonNumber,
})} })}
</td> </td>
<td className="px-6 py-4 text-sm leading-5 text-gray-200 whitespace-nowrap"> <td className="px-5 md:px-6 py-4 text-sm leading-5 text-gray-200 whitespace-nowrap">
{season.episodeCount} {season.episodeCount}
</td> </td>
<td className="px-6 py-4 text-sm leading-5 text-gray-200 whitespace-nowrap"> <td className="pr-2 md:px-6 py-4 text-sm leading-5 text-gray-200 whitespace-nowrap">
{!seasonRequest && !mediaSeason && ( {!seasonRequest && !mediaSeason && (
<Badge> <Badge>
{intl.formatMessage(messages.notrequested)} {intl.formatMessage(messages.notrequested)}

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

@@ -89,10 +89,10 @@ const NotificationsDiscord: React.FC = () => {
return ( return (
<Form> <Form>
<div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"> <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200">
<label <label
htmlFor="enabled" htmlFor="enabled"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.agentenabled)} {intl.formatMessage(messages.agentenabled)}
</label> </label>
@@ -105,10 +105,10 @@ const NotificationsDiscord: React.FC = () => {
/> />
</div> </div>
</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"> <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">
<label <label
htmlFor="name" htmlFor="name"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.webhookUrl)} {intl.formatMessage(messages.webhookUrl)}
</label> </label>

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

@@ -125,10 +125,10 @@ const NotificationsEmail: React.FC = () => {
return ( return (
<Form> <Form>
<div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"> <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200">
<label <label
htmlFor="enabled" htmlFor="enabled"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.agentenabled)} {intl.formatMessage(messages.agentenabled)}
</label> </label>
@@ -141,10 +141,10 @@ const NotificationsEmail: React.FC = () => {
/> />
</div> </div>
</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"> <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">
<label <label
htmlFor="emailFrom" htmlFor="emailFrom"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.emailsender)} {intl.formatMessage(messages.emailsender)}
</label> </label>
@@ -163,10 +163,10 @@ const NotificationsEmail: React.FC = () => {
)} )}
</div> </div>
</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"> <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">
<label <label
htmlFor="senderName" htmlFor="senderName"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.senderName)} {intl.formatMessage(messages.senderName)}
</label> </label>
@@ -182,10 +182,10 @@ const NotificationsEmail: React.FC = () => {
</div> </div>
</div> </div>
</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"> <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">
<label <label
htmlFor="smtpHost" htmlFor="smtpHost"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.smtpHost)} {intl.formatMessage(messages.smtpHost)}
</label> </label>
@@ -204,10 +204,10 @@ const NotificationsEmail: React.FC = () => {
)} )}
</div> </div>
</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"> <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">
<label <label
htmlFor="smtpPort" htmlFor="smtpPort"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.smtpPort)} {intl.formatMessage(messages.smtpPort)}
</label> </label>
@@ -226,10 +226,10 @@ const NotificationsEmail: React.FC = () => {
)} )}
</div> </div>
</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"> <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">
<label <label
htmlFor="secure" htmlFor="secure"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
<div className="flex flex-col"> <div className="flex flex-col">
<span>{intl.formatMessage(messages.enableSsl)}</span> <span>{intl.formatMessage(messages.enableSsl)}</span>
@@ -247,10 +247,10 @@ const NotificationsEmail: React.FC = () => {
/> />
</div> </div>
</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"> <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">
<label <label
htmlFor="allowSelfSigned" htmlFor="allowSelfSigned"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.allowselfsigned)} {intl.formatMessage(messages.allowselfsigned)}
</label> </label>
@@ -263,10 +263,10 @@ const NotificationsEmail: React.FC = () => {
/> />
</div> </div>
</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"> <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">
<label <label
htmlFor="authUser" htmlFor="authUser"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.authUser)} {intl.formatMessage(messages.authUser)}
</label> </label>
@@ -281,10 +281,10 @@ const NotificationsEmail: React.FC = () => {
</div> </div>
</div> </div>
</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"> <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">
<label <label
htmlFor="authPass" htmlFor="authPass"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.authPass)} {intl.formatMessage(messages.authPass)}
</label> </label>

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

@@ -117,10 +117,10 @@ const NotificationsSlack: React.FC = () => {
return ( return (
<Form> <Form>
<div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"> <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200">
<label <label
htmlFor="isDefault" htmlFor="isDefault"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.agentenabled)} {intl.formatMessage(messages.agentenabled)}
</label> </label>
@@ -133,10 +133,10 @@ const NotificationsSlack: React.FC = () => {
/> />
</div> </div>
</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"> <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">
<label <label
htmlFor="name" htmlFor="name"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.webhookUrl)} {intl.formatMessage(messages.webhookUrl)}
</label> </label>

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

@@ -134,10 +134,10 @@ const NotificationsTelegram: React.FC = () => {
})} })}
</Alert> </Alert>
<Form> <Form>
<div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"> <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200">
<label <label
htmlFor="enabled" htmlFor="enabled"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.agentenabled)} {intl.formatMessage(messages.agentenabled)}
</label> </label>
@@ -150,10 +150,10 @@ const NotificationsTelegram: React.FC = () => {
/> />
</div> </div>
</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"> <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">
<label <label
htmlFor="botAPI" htmlFor="botAPI"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.botAPI)} {intl.formatMessage(messages.botAPI)}
</label> </label>
@@ -173,7 +173,7 @@ const NotificationsTelegram: React.FC = () => {
</div> </div>
<label <label
htmlFor="chatId" htmlFor="chatId"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.chatId)} {intl.formatMessage(messages.chatId)}
</label> </label>

44
src/components/Settings/RadarrModal/index.tsx
View File

@@ -274,10 +274,10 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
} }
> >
<div className="mb-6"> <div className="mb-6">
<div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"> <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200">
<label <label
htmlFor="isDefault" htmlFor="isDefault"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.defaultserver)} {intl.formatMessage(messages.defaultserver)}
</label> </label>
@@ -290,10 +290,10 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
/> />
</div> </div>
</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"> <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">
<label <label
htmlFor="name" htmlFor="name"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.servername)} {intl.formatMessage(messages.servername)}
</label> </label>
@@ -318,10 +318,10 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
)} )}
</div> </div>
</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"> <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">
<label <label
htmlFor="hostname" htmlFor="hostname"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.hostname)} {intl.formatMessage(messages.hostname)}
</label> </label>
@@ -347,10 +347,10 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
)} )}
</div> </div>
</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"> <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">
<label <label
htmlFor="port" htmlFor="port"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.port)} {intl.formatMessage(messages.port)}
</label> </label>
@@ -371,10 +371,10 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
)} )}
</div> </div>
</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"> <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">
<label <label
htmlFor="ssl" htmlFor="ssl"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.ssl)} {intl.formatMessage(messages.ssl)}
</label> </label>
@@ -391,10 +391,10 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
/> />
</div> </div>
</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"> <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">
<label <label
htmlFor="apiKey" htmlFor="apiKey"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.apiKey)} {intl.formatMessage(messages.apiKey)}
</label> </label>
@@ -419,10 +419,10 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
)} )}
</div> </div>
</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"> <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">
<label <label
htmlFor="baseUrl" htmlFor="baseUrl"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.baseUrl)} {intl.formatMessage(messages.baseUrl)}
</label> </label>
@@ -447,10 +447,10 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
)} )}
</div> </div>
</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"> <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">
<label <label
htmlFor="activeProfileId" htmlFor="activeProfileId"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.qualityprofile)} {intl.formatMessage(messages.qualityprofile)}
</label> </label>
@@ -490,10 +490,10 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
)} )}
</div> </div>
</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"> <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-8005">
<label <label
htmlFor="rootFolder" htmlFor="rootFolder"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.rootfolder)} {intl.formatMessage(messages.rootfolder)}
</label> </label>
@@ -531,10 +531,10 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
)} )}
</div> </div>
</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"> <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">
<label <label
htmlFor="minimumAvailability" htmlFor="minimumAvailability"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.minimumAvailability)} {intl.formatMessage(messages.minimumAvailability)}
</label> </label>
@@ -560,10 +560,10 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
)} )}
</div> </div>
</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"> <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">
<label <label
htmlFor="is4k" htmlFor="is4k"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.server4k)} {intl.formatMessage(messages.server4k)}
</label> </label>

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

@@ -159,10 +159,10 @@ const SettingsMain: React.FC = () => {
return ( return (
<Form> <Form>
{userHasPermission(Permission.ADMIN) && ( {userHasPermission(Permission.ADMIN) && (
<div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5"> <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800">
<label <label
htmlFor="username" htmlFor="username"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.apikey)} {intl.formatMessage(messages.apikey)}
</label> </label>
@@ -203,10 +203,10 @@ const SettingsMain: React.FC = () => {
</div> </div>
</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"> <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">
<label <label
htmlFor="name" htmlFor="name"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.applicationurl)} {intl.formatMessage(messages.applicationurl)}
</label> </label>

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

@@ -192,10 +192,10 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
{submitError} {submitError}
</div> </div>
)} )}
<div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5"> <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800">
<label <label
htmlFor="name" htmlFor="name"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
<FormattedMessage {...messages.servername} /> <FormattedMessage {...messages.servername} />
</label> </label>
@@ -215,10 +215,10 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
</div> </div>
</div> </div>
</div> </div>
<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"> <div className="mt-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800">
<label <label
htmlFor="hostname" htmlFor="hostname"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
<FormattedMessage {...messages.hostname} /> <FormattedMessage {...messages.hostname} />
</label> </label>
@@ -240,10 +240,10 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
)} )}
</div> </div>
</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"> <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">
<label <label
htmlFor="port" htmlFor="port"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
<FormattedMessage {...messages.port} /> <FormattedMessage {...messages.port} />
</label> </label>
@@ -263,10 +263,10 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
</div> </div>
</div> </div>
</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"> <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">
<label <label
htmlFor="ssl" htmlFor="ssl"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.ssl)} {intl.formatMessage(messages.ssl)}
</label> </label>

52
src/components/Settings/SonarrModal/index.tsx
View File

@@ -283,10 +283,10 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
} }
> >
<div className="mb-6"> <div className="mb-6">
<div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"> <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200">
<label <label
htmlFor="isDefault" htmlFor="isDefault"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.defaultserver)} {intl.formatMessage(messages.defaultserver)}
</label> </label>
@@ -299,10 +299,10 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
/> />
</div> </div>
</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"> <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">
<label <label
htmlFor="name" htmlFor="name"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.servername)} {intl.formatMessage(messages.servername)}
</label> </label>
@@ -327,10 +327,10 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
)} )}
</div> </div>
</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"> <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">
<label <label
htmlFor="hostname" htmlFor="hostname"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.hostname)} {intl.formatMessage(messages.hostname)}
</label> </label>
@@ -356,10 +356,10 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
)} )}
</div> </div>
</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"> <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">
<label <label
htmlFor="port" htmlFor="port"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.port)} {intl.formatMessage(messages.port)}
</label> </label>
@@ -380,10 +380,10 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
)} )}
</div> </div>
</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"> <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">
<label <label
htmlFor="ssl" htmlFor="ssl"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.ssl)} {intl.formatMessage(messages.ssl)}
</label> </label>
@@ -400,10 +400,10 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
/> />
</div> </div>
</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"> <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">
<label <label
htmlFor="apiKey" htmlFor="apiKey"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.apiKey)} {intl.formatMessage(messages.apiKey)}
</label> </label>
@@ -428,10 +428,10 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
)} )}
</div> </div>
</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"> <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">
<label <label
htmlFor="baseUrl" htmlFor="baseUrl"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.baseUrl)} {intl.formatMessage(messages.baseUrl)}
</label> </label>
@@ -456,10 +456,10 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
)} )}
</div> </div>
</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"> <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">
<label <label
htmlFor="activeProfileId" htmlFor="activeProfileId"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.qualityprofile)} {intl.formatMessage(messages.qualityprofile)}
</label> </label>
@@ -499,10 +499,10 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
)} )}
</div> </div>
</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"> <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">
<label <label
htmlFor="rootFolder" htmlFor="rootFolder"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.rootfolder)} {intl.formatMessage(messages.rootfolder)}
</label> </label>
@@ -540,10 +540,10 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
)} )}
</div> </div>
</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"> <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">
<label <label
htmlFor="activeAnimeProfileId" htmlFor="activeAnimeProfileId"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.animequalityprofile)} {intl.formatMessage(messages.animequalityprofile)}
</label> </label>
@@ -584,10 +584,10 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
)} )}
</div> </div>
</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"> <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">
<label <label
htmlFor="activeAnimeRootFolder" htmlFor="activeAnimeRootFolder"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.animerootfolder)} {intl.formatMessage(messages.animerootfolder)}
</label> </label>
@@ -626,10 +626,10 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
)} )}
</div> </div>
</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"> <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">
<label <label
htmlFor="is4k" htmlFor="is4k"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.server4k)} {intl.formatMessage(messages.server4k)}
</label> </label>
@@ -642,10 +642,10 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
/> />
</div> </div>
</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"> <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">
<label <label
htmlFor="enableSeasonFolders" htmlFor="enableSeasonFolders"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2" className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
> >
{intl.formatMessage(messages.seasonfolders)} {intl.formatMessage(messages.seasonfolders)}
</label> </label>

4
src/components/Setup/index.tsx
View File

@@ -43,7 +43,7 @@ const Setup: React.FC = () => {
}; };
return ( return (
<div className="relative flex flex-col justify-center min-h-screen py-12 bg-gray-900 sm:px-6 lg:px-8"> <div className="relative flex flex-col justify-center min-h-screen py-12 bg-gray-900">
<ImageFader <ImageFader
backgroundImages={[ backgroundImages={[
'/images/rotate1.jpg', '/images/rotate1.jpg',
@@ -57,7 +57,7 @@ const Setup: React.FC = () => {
<div className="absolute z-50 top-4 right-4"> <div className="absolute z-50 top-4 right-4">
<LanguagePicker /> <LanguagePicker />
</div> </div>
<div className="relative z-40 px-4 sm:px-2 md:px-0 sm:mx-auto sm:w-full sm:max-w-4xl"> <div className="relative z-40 px-4 sm:mx-auto sm:w-full sm:max-w-4xl">
<img <img
src="/logo.png" src="/logo.png"
className="w-auto mx-auto mb-10 max-h-32" className="w-auto mx-auto mb-10 max-h-32"

2
src/components/Toast/index.tsx
View File

@@ -3,7 +3,7 @@ import type { ToastProps } from 'react-toast-notifications';
const Toast: React.FC<ToastProps> = ({ appearance, children, onDismiss }) => { const Toast: React.FC<ToastProps> = ({ appearance, children, onDismiss }) => {
return ( return (
<div className="toast flex items-end justify-center px-2 py-2 pointer-events-none sm:p-6 sm:items-start sm:justify-end"> <div className="toast flex items-end justify-center px-2 py-2 pointer-events-none sm:items-start sm:justify-end">
<div className="max-w-sm w-full bg-gray-700 shadow-lg rounded-lg pointer-events-auto"> <div className="max-w-sm w-full bg-gray-700 shadow-lg rounded-lg pointer-events-auto">
<div className="rounded-lg ring-1 ring-black ring-opacity-5 overflow-hidden"> <div className="rounded-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
<div className="p-4"> <div className="p-4">

2
src/components/TvDetails/index.tsx
View File

@@ -166,7 +166,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
return ( return (
<div <div
className="px-4 pt-4 -mx-4 -mt-2 bg-center bg-cover sm:px-8 " className="px-4 pt-4 -mx-4 -mt-2 bg-center bg-cover"
style={{ style={{
height: 493, height: 493,
backgroundImage: `linear-gradient(180deg, rgba(17, 24, 39, 0.47) 0%, rgba(17, 24, 39, 1) 100%), url(//image.tmdb.org/t/p/w1920_and_h800_multi_faces/${data.backdropPath})`, backgroundImage: `linear-gradient(180deg, rgba(17, 24, 39, 0.47) 0%, rgba(17, 24, 39, 1) 100%), url(//image.tmdb.org/t/p/w1920_and_h800_multi_faces/${data.backdropPath})`,

6
src/components/UserEdit/index.tsx
View File

@@ -155,10 +155,10 @@ const UserEdit: React.FC = () => {
return ( return (
<> <>
<Header extraMargin={4}> <Header>
<FormattedMessage {...messages.edituser} /> <FormattedMessage {...messages.edituser} />
</Header> </Header>
<div className="px-4 space-y-6 sm:p-6 lg:pb-8"> <div className="space-y-6">
<div className="flex flex-col space-y-6 text-white lg:flex-row lg:space-y-0 lg:space-x-6"> <div className="flex flex-col space-y-6 text-white lg:flex-row lg:space-y-0 lg:space-x-6">
<div className="flex-grow space-y-6"> <div className="flex-grow space-y-6">
<div className="space-y-1"> <div className="space-y-1">
@@ -229,7 +229,7 @@ const UserEdit: React.FC = () => {
</div> </div>
</div> </div>
<div className="text-white"> <div className="text-white">
<div className="sm:border-t sm:border-gray-200 sm:pt-5"> <div className="sm:border-t sm:border-gray-200">
<div role="group" aria-labelledby="label-permissions"> <div role="group" aria-labelledby="label-permissions">
<div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-baseline"> <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-baseline">
<div> <div>

2
src/components/UserList/index.tsx
View File

@@ -150,7 +150,7 @@ const UserList: React.FC = () => {
</Modal> </Modal>
</Transition> </Transition>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<Header extraMargin={4}>{intl.formatMessage(messages.userlist)}</Header> <Header>{intl.formatMessage(messages.userlist)}</Header>
<Button <Button
className="mx-4 my-8" className="mx-4 my-8"
buttonType="primary" buttonType="primary"

2
tailwind.config.js
View File

@@ -58,7 +58,7 @@ module.exports = {
}, },
}, },
variants: { variants: {
padding: ['first', 'last'], padding: ['first', 'last', 'responsive'],
borderWidth: ['first', 'last'], borderWidth: ['first', 'last'],
margin: ['first', 'last', 'responsive'], margin: ['first', 'last', 'responsive'],
boxShadow: ['group-focus'], boxShadow: ['group-focus'],