mirrors/jellyseerr
1
0
Fork 0
mirror of https://github.com/fallenbagel/jellyseerr.git synced 2026-01-02 04:39:14 -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

10
src/components/Common/Alert/index.tsx
View File

@@ -15,7 +15,7 @@ const Alert: React.FC<AlertProps> = ({ title, children, type }) => {
bgColor: 'bg-yellow-600',
titleColor: 'text-yellow-100',
textColor: 'text-yellow-300',
svg: <ExclamationIcon className="w-5 h-5" />,
svg: <ExclamationIcon className="h-5 w-5" />,
};
switch (type) {
@@ -24,7 +24,7 @@ const Alert: React.FC<AlertProps> = ({ title, children, type }) => {
bgColor: 'bg-indigo-600',
titleColor: 'text-indigo-100',
textColor: 'text-indigo-300',
svg: <InformationCircleIcon className="w-5 h-5" />,
svg: <InformationCircleIcon className="h-5 w-5" />,
};
break;
case 'error':
@@ -32,13 +32,13 @@ const Alert: React.FC<AlertProps> = ({ title, children, type }) => {
bgColor: 'bg-red-600',
titleColor: 'text-red-100',
textColor: 'text-red-300',
svg: <XCircleIcon className="w-5 h-5" />,
svg: <XCircleIcon className="h-5 w-5" />,
};
break;
}
return (
<div className={`rounded-md p-4 mb-4 ${design.bgColor}`}>
<div className={`mb-4 rounded-md p-4 ${design.bgColor}`}>
<div className="flex">
<div className={`flex-shrink-0 ${design.titleColor}`}>{design.svg}</div>
<div className="ml-3">
@@ -48,7 +48,7 @@ const Alert: React.FC<AlertProps> = ({ title, children, type }) => {
</div>
)}
{children && (
<div className={`mt-2 first:mt-0 text-sm ${design.textColor}`}>
<div className={`mt-2 text-sm first:mt-0 ${design.textColor}`}>
{children}
</div>
)}

10
src/components/Common/ButtonWithDropdown/index.tsx
View File

@@ -32,7 +32,7 @@ const DropdownItem: React.FC<DropdownItemProps> = ({
}
return (
<a
className={`flex items-center px-4 py-2 text-sm leading-5 cursor-pointer focus:outline-none ${styleClass}`}
className={`flex cursor-pointer items-center px-4 py-2 text-sm leading-5 focus:outline-none ${styleClass}`}
{...props}
>
{children}
@@ -84,7 +84,7 @@ const ButtonWithDropdown: React.FC<ButtonWithDropdownProps> = ({
<span className="relative inline-flex h-full rounded-md shadow-sm">
<button
type="button"
className={`relative inline-flex h-full items-center px-4 py-2 text-sm leading-5 font-medium z-10 hover:z-20 focus:z-20 focus:outline-none transition ease-in-out duration-150 ${
className={`relative z-10 inline-flex h-full items-center px-4 py-2 text-sm font-medium leading-5 transition duration-150 ease-in-out hover:z-20 focus:z-20 focus:outline-none ${
styleClasses.mainButtonClasses
} ${children ? 'rounded-l-md' : 'rounded-md'} ${className}`}
ref={buttonRef}
@@ -93,10 +93,10 @@ const ButtonWithDropdown: React.FC<ButtonWithDropdownProps> = ({
{text}
</button>
{children && (
<span className="relative block -ml-px">
<span className="relative -ml-px block">
<button
type="button"
className={`relative inline-flex items-center h-full px-2 py-2 text-sm font-medium leading-5 text-white transition duration-150 ease-in-out rounded-r-md z-10 hover:z-20 focus:z-20 ${styleClasses.dropdownSideButtonClasses}`}
className={`relative z-10 inline-flex h-full items-center rounded-r-md px-2 py-2 text-sm font-medium leading-5 text-white transition duration-150 ease-in-out hover:z-20 focus:z-20 ${styleClasses.dropdownSideButtonClasses}`}
aria-label="Expand"
onClick={() => setIsOpen((state) => !state)}
>
@@ -111,7 +111,7 @@ const ButtonWithDropdown: React.FC<ButtonWithDropdownProps> = ({
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<div className="absolute right-0 z-40 w-56 mt-2 -mr-1 origin-top-right rounded-md shadow-lg">
<div className="absolute right-0 z-40 mt-2 -mr-1 w-56 origin-top-right rounded-md shadow-lg">
<div
className={`rounded-md ring-1 ring-black ring-opacity-5 ${styleClasses.dropdownClasses}`}
>

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

@@ -34,7 +34,7 @@ const ConfirmButton: React.FC<ConfirmButtonProps> = ({
&nbsp;
<div
ref={ref}
className={`absolute flex items-center justify-center inset-0 w-full h-full duration-300 transition transform-gpu ${
className={`absolute inset-0 flex h-full w-full transform-gpu items-center justify-center transition duration-300 ${
isClicked
? '-translate-y-full opacity-0'
: 'translate-y-0 opacity-100'
@@ -44,7 +44,7 @@ const ConfirmButton: React.FC<ConfirmButtonProps> = ({
</div>
<div
ref={ref}
className={`absolute flex items-center justify-center inset-0 w-full h-full duration-300 transition transform-gpu ${
className={`absolute inset-0 flex h-full w-full transform-gpu items-center justify-center transition duration-300 ${
isClicked ? 'translate-y-0 opacity-100' : 'translate-y-full opacity-0'
}`}
>

6
src/components/Common/Header/index.tsx
View File

@@ -12,9 +12,9 @@ const Header: React.FC<HeaderProps> = ({
}) => {
return (
<div className="mt-8 md:flex md:items-center md:justify-between">
<div className={`flex-1 min-w-0 mx-${extraMargin}`}>
<h2 className="mb-4 text-2xl font-bold leading-7 text-gray-100 truncate sm:text-4xl sm:leading-9 sm:overflow-visible md:mb-0">
<span className="text-transparent bg-clip-text bg-gradient-to-br from-indigo-400 to-purple-400">
<div className={`min-w-0 flex-1 mx-${extraMargin}`}>
<h2 className="mb-4 truncate text-2xl font-bold leading-7 text-gray-100 sm:overflow-visible sm:text-4xl sm:leading-9 md:mb-0">
<span className="bg-gradient-to-br from-indigo-400 to-purple-400 bg-clip-text text-transparent">
{children}
</span>
</h2>

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

@@ -59,13 +59,13 @@ const ImageFader: ForwardRefRenderFunction<HTMLDivElement, ImageFaderProps> = (
{backgroundImages.map((imageUrl, i) => (
<div
key={`banner-image-${i}`}
className={`absolute absolute-top-shift inset-0 bg-cover bg-center transition-opacity duration-300 ease-in ${
className={`absolute-top-shift absolute inset-0 bg-cover bg-center transition-opacity duration-300 ease-in ${
i === activeIndex ? 'opacity-100' : 'opacity-0'
}`}
{...props}
>
<CachedImage
className="absolute inset-0 w-full h-full"
className="absolute inset-0 h-full w-full"
alt=""
src={imageUrl}
layout="fill"

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

@@ -11,7 +11,7 @@ const ListItem: React.FC<ListItemProps> = ({ title, className, children }) => {
<div>
<div className="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
<dt className="block text-sm font-bold text-gray-400">{title}</dt>
<dd className="flex text-sm text-white sm:mt-0 sm:col-span-2">
<dd className="flex text-sm text-white sm:col-span-2 sm:mt-0">
<span className={`flex-grow ${className}`}>{children}</span>
</dd>
</div>
@@ -31,7 +31,7 @@ const List: React.FC<ListProps> = ({ title, subTitle, children }) => {
<h3 className="heading">{title}</h3>
{subTitle && <p className="description">{subTitle}</p>}
</div>
<div className="border-t border-gray-800 section">
<div className="section border-t border-gray-800">
<dl className="divide-y divide-gray-800">{children}</dl>
</div>
</>

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

@@ -30,7 +30,7 @@ const ListView: React.FC<ListViewProps> = ({
return (
<>
{isEmpty && (
<div className="w-full mt-64 text-2xl text-center text-gray-400">
<div className="mt-64 w-full text-center text-2xl text-gray-400">
{intl.formatMessage(globalMessages.noresults)}
</div>
)}

8
src/components/Common/LoadingSpinner/index.tsx
View File

@@ -2,9 +2,9 @@ import React from 'react';
export const SmallLoadingSpinner: React.FC = () => {
return (
<div className="inset-0 flex items-center justify-center w-full h-full text-gray-200">
<div className="inset-0 flex h-full w-full items-center justify-center text-gray-200">
<svg
className="w-10 h-10"
className="h-10 w-10"
viewBox="0 0 38 38"
xmlns="http://www.w3.org/2000/svg"
stroke="currentColor"
@@ -31,9 +31,9 @@ export const SmallLoadingSpinner: React.FC = () => {
const LoadingSpinner: React.FC = () => {
return (
<div className="inset-0 flex items-center justify-center h-64 text-gray-200">
<div className="inset-0 flex h-64 items-center justify-center text-gray-200">
<svg
className="w-16 h-16"
className="h-16 w-16"
viewBox="0 0 38 38"
xmlns="http://www.w3.org/2000/svg"
stroke="currentColor"

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

@@ -69,7 +69,7 @@ const Modal: React.FC<ModalProps> = ({
return ReactDOM.createPortal(
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
<div
className="fixed top-0 bottom-0 left-0 right-0 z-50 flex items-center justify-center w-full h-full bg-gray-800 bg-opacity-70"
className="fixed top-0 bottom-0 left-0 right-0 z-50 flex h-full w-full items-center justify-center bg-gray-800 bg-opacity-70"
onKeyDown={(e) => {
if (e.key === 'Escape') {
typeof onCancel === 'function' && backgroundClickable
@@ -101,7 +101,7 @@ const Modal: React.FC<ModalProps> = ({
show={!loading}
>
<div
className="relative inline-block w-full px-4 pt-5 pb-4 overflow-auto text-left align-bottom transition-all transform bg-gray-700 shadow-xl ring-1 ring-gray-500 sm:rounded-lg sm:my-8 sm:align-middle sm:max-w-3xl"
className="relative inline-block w-full transform overflow-auto bg-gray-700 px-4 pt-5 pb-4 text-left align-bottom shadow-xl ring-1 ring-gray-500 transition-all sm:my-8 sm:max-w-3xl sm:rounded-lg sm:align-middle"
role="dialog"
aria-modal="true"
aria-labelledby="modal-headline"
@@ -111,7 +111,7 @@ const Modal: React.FC<ModalProps> = ({
}}
>
{backdrop && (
<div className="absolute top-0 left-0 right-0 z-0 w-full h-64 max-h-full">
<div className="absolute top-0 left-0 right-0 z-0 h-64 max-h-full w-full">
<CachedImage
alt=""
src={backdrop}
@@ -131,13 +131,13 @@ const Modal: React.FC<ModalProps> = ({
<div className="relative overflow-x-hidden sm:flex sm:items-center">
{iconSvg && <div className="modal-icon">{iconSvg}</div>}
<div
className={`mt-3 text-center sm:mt-0 sm:text-left truncate text-white ${
className={`mt-3 truncate text-center text-white sm:mt-0 sm:text-left ${
iconSvg ? 'sm:ml-4' : 'sm:mb-4'
}`}
>
{title && (
<span
className="text-lg font-bold leading-6 truncate"
className="truncate text-lg font-bold leading-6"
id="modal-headline"
>
{title}
@@ -151,7 +151,7 @@ const Modal: React.FC<ModalProps> = ({
</div>
)}
{(onCancel || onOk || onSecondary || onTertiary) && (
<div className="relative flex flex-row-reverse justify-center mt-5 sm:mt-4 sm:justify-start">
<div className="relative mt-5 flex flex-row-reverse justify-center sm:mt-4 sm:justify-start">
{typeof onOk === 'function' && (
<Button
buttonType={okButtonType}

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

@@ -120,7 +120,7 @@ const SettingsTabs: React.FC<{
</div>
{tabType === 'button' ? (
<div className="hidden sm:block">
<nav className="flex flex-wrap -mx-2 -my-1" aria-label="Tabs">
<nav className="-mx-2 -my-1 flex flex-wrap" aria-label="Tabs">
{settingsRoutes.map((route, index) => (
<SettingsLink
tabType={tabType}
@@ -136,7 +136,7 @@ const SettingsTabs: React.FC<{
</nav>
</div>
) : (
<div className="hidden overflow-x-scroll border-b border-gray-600 sm:block hide-scrollbar">
<div className="hide-scrollbar hidden overflow-x-scroll border-b border-gray-600 sm:block">
<nav className="flex">
{settingsRoutes
.filter(

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

@@ -44,7 +44,7 @@ const SlideOver: React.FC<SlideOverProps> = ({
>
{/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
<div
className={`z-50 fixed inset-0 overflow-hidden bg-opacity-70 bg-gray-800`}
className={`fixed inset-0 z-50 overflow-hidden bg-gray-800 bg-opacity-70`}
onClick={() => onClose()}
onKeyDown={(e) => {
if (e.key === 'Escape') {
@@ -70,19 +70,19 @@ const SlideOver: React.FC<SlideOverProps> = ({
ref={slideoverRef}
onClick={(e) => e.stopPropagation()}
>
<div className="flex flex-col h-full overflow-y-scroll bg-gray-700 shadow-xl">
<header className="px-4 space-y-1 bg-indigo-600 slideover">
<div className="flex h-full flex-col overflow-y-scroll bg-gray-700 shadow-xl">
<header className="slideover space-y-1 bg-indigo-600 px-4">
<div className="flex items-center justify-between space-x-3">
<h2 className="text-lg font-bold leading-7 text-white">
{title}
</h2>
<div className="flex items-center h-7">
<div className="flex h-7 items-center">
<button
aria-label="Close panel"
className="text-indigo-200 transition duration-150 ease-in-out hover:text-white"
onClick={() => onClose()}
>
<XIcon className="w-6 h-6" />
<XIcon className="h-6 w-6" />
</button>
</div>
</div>

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

@@ -3,7 +3,7 @@ import { withProperties } from '../../../utils/typeHelpers';
const TBody: React.FC = ({ children }) => {
return (
<tbody className="bg-gray-800 divide-y divide-gray-700">{children}</tbody>
<tbody className="divide-y divide-gray-700 bg-gray-800">{children}</tbody>
);
};