mirror of
https://github.com/sct/overseerr.git
synced 2025-09-17 17:24:35 +02:00
style: add new tailwind prettier plugin (#2465)
This commit is contained in:
@@ -24,13 +24,13 @@ const LanguagePicker: React.FC = () => {
|
||||
<div className="relative">
|
||||
<div>
|
||||
<button
|
||||
className={`p-1 rounded-full sm:p-2 hover:bg-gray-600 hover:text-white focus:outline-none focus:bg-gray-600 focus:ring-1 focus:ring-gray-500 focus:text-white ${
|
||||
className={`rounded-full p-1 hover:bg-gray-600 hover:text-white focus:bg-gray-600 focus:text-white focus:outline-none focus:ring-1 focus:ring-gray-500 sm:p-2 ${
|
||||
isDropdownOpen ? 'bg-gray-600 text-white' : 'text-gray-400'
|
||||
}`}
|
||||
aria-label="Language Picker"
|
||||
onClick={() => setDropdownOpen(true)}
|
||||
>
|
||||
<TranslateIcon className="w-6 h-6" />
|
||||
<TranslateIcon className="h-6 w-6" />
|
||||
</button>
|
||||
</div>
|
||||
<Transition
|
||||
@@ -43,10 +43,10 @@ const LanguagePicker: React.FC = () => {
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<div
|
||||
className="absolute right-0 w-56 mt-2 origin-top-right rounded-md shadow-lg"
|
||||
className="absolute right-0 mt-2 w-56 origin-top-right rounded-md shadow-lg"
|
||||
ref={dropdownRef}
|
||||
>
|
||||
<div className="px-3 py-2 bg-gray-700 rounded-md ring-1 ring-black ring-opacity-5">
|
||||
<div className="rounded-md bg-gray-700 px-3 py-2 ring-1 ring-black ring-opacity-5">
|
||||
<div>
|
||||
<label
|
||||
htmlFor="language"
|
||||
|
@@ -4,10 +4,10 @@ import React from 'react';
|
||||
const Notifications: React.FC = () => {
|
||||
return (
|
||||
<button
|
||||
className="p-1 text-gray-400 rounded-full hover:bg-gray-500 hover:text-white focus:outline-none focus:ring focus:text-white"
|
||||
className="rounded-full p-1 text-gray-400 hover:bg-gray-500 hover:text-white focus:text-white focus:outline-none focus:ring"
|
||||
aria-label="Notifications"
|
||||
>
|
||||
<BellIcon className="w-6 h-6" />
|
||||
<BellIcon className="h-6 w-6" />
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
@@ -17,14 +17,14 @@ const SearchInput: React.FC = () => {
|
||||
<label htmlFor="search_field" className="sr-only">
|
||||
Search
|
||||
</label>
|
||||
<div className="relative flex items-center w-full text-white focus-within:text-gray-200">
|
||||
<div className="absolute inset-y-0 flex items-center pointer-events-none left-4">
|
||||
<SearchIcon className="w-5 h-5" />
|
||||
<div className="relative flex w-full items-center text-white focus-within:text-gray-200">
|
||||
<div className="pointer-events-none absolute inset-y-0 left-4 flex items-center">
|
||||
<SearchIcon className="h-5 w-5" />
|
||||
</div>
|
||||
<input
|
||||
id="search_field"
|
||||
style={{ paddingRight: searchValue.length > 0 ? '1.75rem' : '' }}
|
||||
className="block w-full py-2 pl-10 text-white placeholder-gray-300 bg-gray-900 border border-gray-600 rounded-full bg-opacity-80 focus:bg-opacity-100 focus:border-gray-500 hover:border-gray-500 focus:outline-none focus:ring-0 focus:placeholder-gray-400 sm:text-base"
|
||||
className="block w-full rounded-full border border-gray-600 bg-gray-900 bg-opacity-80 py-2 pl-10 text-white placeholder-gray-300 hover:border-gray-500 focus:border-gray-500 focus:bg-opacity-100 focus:placeholder-gray-400 focus:outline-none focus:ring-0 sm:text-base"
|
||||
placeholder={intl.formatMessage(messages.searchPlaceholder)}
|
||||
type="search"
|
||||
value={searchValue}
|
||||
@@ -44,10 +44,10 @@ const SearchInput: React.FC = () => {
|
||||
/>
|
||||
{searchValue.length > 0 && (
|
||||
<button
|
||||
className="absolute inset-y-0 p-1 m-auto text-gray-400 transition border-none outline-none right-2 h-7 w-7 focus:outline-none focus:border-none hover:text-white"
|
||||
className="absolute inset-y-0 right-2 m-auto h-7 w-7 border-none p-1 text-gray-400 outline-none transition hover:text-white focus:border-none focus:outline-none"
|
||||
onClick={() => clear()}
|
||||
>
|
||||
<XCircleIcon className="w-5 h-5" />
|
||||
<XCircleIcon className="h-5 w-5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
@@ -42,20 +42,20 @@ const SidebarLinks: SidebarLinkProps[] = [
|
||||
{
|
||||
href: '/',
|
||||
messagesKey: 'dashboard',
|
||||
svgIcon: <SparklesIcon className="w-6 h-6 mr-3" />,
|
||||
svgIcon: <SparklesIcon className="mr-3 h-6 w-6" />,
|
||||
activeRegExp: /^\/(discover\/?(movies|tv)?)?$/,
|
||||
},
|
||||
{
|
||||
href: '/requests',
|
||||
messagesKey: 'requests',
|
||||
svgIcon: <ClockIcon className="w-6 h-6 mr-3" />,
|
||||
svgIcon: <ClockIcon className="mr-3 h-6 w-6" />,
|
||||
activeRegExp: /^\/requests/,
|
||||
},
|
||||
{
|
||||
href: '/issues',
|
||||
messagesKey: 'issues',
|
||||
svgIcon: (
|
||||
<ExclamationIcon className="w-6 h-6 mr-3 text-gray-300 transition duration-150 ease-in-out group-hover:text-gray-100 group-focus:text-gray-300" />
|
||||
<ExclamationIcon className="mr-3 h-6 w-6 text-gray-300 transition duration-150 ease-in-out group-hover:text-gray-100 group-focus:text-gray-300" />
|
||||
),
|
||||
activeRegExp: /^\/issues/,
|
||||
requiredPermission: [
|
||||
@@ -68,14 +68,14 @@ const SidebarLinks: SidebarLinkProps[] = [
|
||||
{
|
||||
href: '/users',
|
||||
messagesKey: 'users',
|
||||
svgIcon: <UsersIcon className="w-6 h-6 mr-3" />,
|
||||
svgIcon: <UsersIcon className="mr-3 h-6 w-6" />,
|
||||
activeRegExp: /^\/users/,
|
||||
requiredPermission: Permission.MANAGE_USERS,
|
||||
},
|
||||
{
|
||||
href: '/settings',
|
||||
messagesKey: 'settings',
|
||||
svgIcon: <CogIcon className="w-6 h-6 mr-3" />,
|
||||
svgIcon: <CogIcon className="mr-3 h-6 w-6" />,
|
||||
activeRegExp: /^\/settings/,
|
||||
requiredPermission: Permission.MANAGE_SETTINGS,
|
||||
},
|
||||
@@ -114,28 +114,28 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
|
||||
leaveTo="-translate-x-full"
|
||||
>
|
||||
<>
|
||||
<div className="relative flex flex-col flex-1 w-full max-w-xs bg-gray-800 sidebar">
|
||||
<div className="absolute top-0 right-0 p-1 sidebar-close-button -mr-14">
|
||||
<div className="sidebar relative flex w-full max-w-xs flex-1 flex-col bg-gray-800">
|
||||
<div className="sidebar-close-button absolute top-0 right-0 -mr-14 p-1">
|
||||
<button
|
||||
className="flex items-center justify-center w-12 h-12 rounded-full focus:outline-none focus:bg-gray-600"
|
||||
className="flex h-12 w-12 items-center justify-center rounded-full focus:bg-gray-600 focus:outline-none"
|
||||
aria-label="Close sidebar"
|
||||
onClick={() => setClosed()}
|
||||
>
|
||||
<XIcon className="w-6 h-6 text-white" />
|
||||
<XIcon className="h-6 w-6 text-white" />
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
ref={navRef}
|
||||
className="flex flex-col flex-1 h-0 pt-8 pb-8 overflow-y-auto sm:pb-4"
|
||||
className="flex h-0 flex-1 flex-col overflow-y-auto pt-8 pb-8 sm:pb-4"
|
||||
>
|
||||
<div className="flex items-center flex-shrink-0 px-2">
|
||||
<div className="flex flex-shrink-0 items-center px-2">
|
||||
<span className="px-4 text-xl text-gray-50">
|
||||
<a href="/">
|
||||
<img src="/logo_full.svg" alt="Logo" />
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<nav className="flex-1 px-4 mt-16 space-y-4">
|
||||
<nav className="mt-16 flex-1 space-y-4 px-4">
|
||||
{SidebarLinks.filter((link) =>
|
||||
link.requiredPermission
|
||||
? hasPermission(link.requiredPermission, {
|
||||
@@ -158,7 +158,7 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
|
||||
}}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
className={`flex items-center px-2 py-2 text-base leading-6 font-medium rounded-md text-white focus:outline-none transition ease-in-out duration-150
|
||||
className={`flex items-center rounded-md px-2 py-2 text-base font-medium leading-6 text-white transition duration-150 ease-in-out focus:outline-none
|
||||
${
|
||||
router.pathname.match(
|
||||
sidebarLink.activeRegExp
|
||||
@@ -184,7 +184,7 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-shrink-0 w-14">
|
||||
<div className="w-14 flex-shrink-0">
|
||||
{/* <!-- Force sidebar to shrink to fit close icon --> */}
|
||||
</div>
|
||||
</>
|
||||
@@ -194,17 +194,17 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
|
||||
</div>
|
||||
|
||||
<div className="fixed top-0 bottom-0 left-0 z-30 hidden lg:flex lg:flex-shrink-0">
|
||||
<div className="flex flex-col w-64 sidebar">
|
||||
<div className="flex flex-col flex-1 h-0">
|
||||
<div className="flex flex-col flex-1 pt-8 pb-4 overflow-y-auto">
|
||||
<div className="flex items-center flex-shrink-0">
|
||||
<div className="sidebar flex w-64 flex-col">
|
||||
<div className="flex h-0 flex-1 flex-col">
|
||||
<div className="flex flex-1 flex-col overflow-y-auto pt-8 pb-4">
|
||||
<div className="flex flex-shrink-0 items-center">
|
||||
<span className="px-4 text-2xl text-gray-50">
|
||||
<a href="/">
|
||||
<img src="/logo_full.svg" alt="Logo" />
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<nav className="flex-1 px-4 mt-16 space-y-4">
|
||||
<nav className="mt-16 flex-1 space-y-4 px-4">
|
||||
{SidebarLinks.filter((link) =>
|
||||
link.requiredPermission
|
||||
? hasPermission(link.requiredPermission, {
|
||||
@@ -219,7 +219,7 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
|
||||
as={sidebarLink.as}
|
||||
>
|
||||
<a
|
||||
className={`flex group items-center px-2 py-2 text-lg leading-6 font-medium rounded-md text-white focus:outline-none transition ease-in-out duration-150
|
||||
className={`group flex items-center rounded-md px-2 py-2 text-lg font-medium leading-6 text-white transition duration-150 ease-in-out focus:outline-none
|
||||
${
|
||||
router.pathname.match(
|
||||
sidebarLink.activeRegExp
|
||||
|
@@ -33,14 +33,14 @@ const UserDropdown: React.FC = () => {
|
||||
<div className="relative ml-3">
|
||||
<div>
|
||||
<button
|
||||
className="flex items-center max-w-xs text-sm rounded-full ring-1 ring-gray-700 focus:outline-none focus:ring-gray-500 hover:ring-gray-500"
|
||||
className="flex max-w-xs items-center rounded-full text-sm ring-1 ring-gray-700 hover:ring-gray-500 focus:outline-none focus:ring-gray-500"
|
||||
id="user-menu"
|
||||
aria-label="User menu"
|
||||
aria-haspopup="true"
|
||||
onClick={() => setDropdownOpen(true)}
|
||||
>
|
||||
<img
|
||||
className="w-8 h-8 rounded-full sm:w-10 sm:h-10"
|
||||
className="h-8 w-8 rounded-full sm:h-10 sm:w-10"
|
||||
src={user?.avatar}
|
||||
alt=""
|
||||
/>
|
||||
@@ -56,11 +56,11 @@ const UserDropdown: React.FC = () => {
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<div
|
||||
className="absolute right-0 w-48 mt-2 origin-top-right rounded-md shadow-lg"
|
||||
className="absolute right-0 mt-2 w-48 origin-top-right rounded-md shadow-lg"
|
||||
ref={dropdownRef}
|
||||
>
|
||||
<div
|
||||
className="py-1 bg-gray-700 rounded-md ring-1 ring-black ring-opacity-5"
|
||||
className="rounded-md bg-gray-700 py-1 ring-1 ring-black ring-opacity-5"
|
||||
role="menu"
|
||||
aria-orientation="vertical"
|
||||
aria-labelledby="user-menu"
|
||||
@@ -77,7 +77,7 @@ const UserDropdown: React.FC = () => {
|
||||
}}
|
||||
onClick={() => setDropdownOpen(false)}
|
||||
>
|
||||
<UserIcon className="inline w-5 h-5 mr-2" />
|
||||
<UserIcon className="mr-2 inline h-5 w-5" />
|
||||
<span>{intl.formatMessage(messages.myprofile)}</span>
|
||||
</a>
|
||||
</Link>
|
||||
@@ -93,7 +93,7 @@ const UserDropdown: React.FC = () => {
|
||||
}}
|
||||
onClick={() => setDropdownOpen(false)}
|
||||
>
|
||||
<CogIcon className="inline w-5 h-5 mr-2" />
|
||||
<CogIcon className="mr-2 inline h-5 w-5" />
|
||||
<span>{intl.formatMessage(messages.settings)}</span>
|
||||
</a>
|
||||
</Link>
|
||||
@@ -103,7 +103,7 @@ const UserDropdown: React.FC = () => {
|
||||
role="menuitem"
|
||||
onClick={() => logout()}
|
||||
>
|
||||
<LogoutIcon className="inline w-5 h-5 mr-2" />
|
||||
<LogoutIcon className="mr-2 inline h-5 w-5" />
|
||||
<span>{intl.formatMessage(messages.signout)}</span>
|
||||
</a>
|
||||
</div>
|
||||
|
@@ -50,20 +50,20 @@ const VersionStatus: React.FC<VersionStatusProps> = ({ onClick }) => {
|
||||
}}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
className={`flex items-center p-2 mx-2 text-xs transition duration-300 rounded-lg ring-1 ring-gray-700 ${
|
||||
className={`mx-2 flex items-center rounded-lg p-2 text-xs ring-1 ring-gray-700 transition duration-300 ${
|
||||
data.updateAvailable
|
||||
? 'bg-yellow-500 text-white hover:bg-yellow-400'
|
||||
: 'bg-gray-900 text-gray-300 hover:bg-gray-800'
|
||||
}`}
|
||||
>
|
||||
{data.commitTag === 'local' ? (
|
||||
<CodeIcon className="w-6 h-6" />
|
||||
<CodeIcon className="h-6 w-6" />
|
||||
) : data.version.startsWith('develop-') ? (
|
||||
<BeakerIcon className="w-6 h-6" />
|
||||
<BeakerIcon className="h-6 w-6" />
|
||||
) : (
|
||||
<ServerIcon className="w-6 h-6" />
|
||||
<ServerIcon className="h-6 w-6" />
|
||||
)}
|
||||
<div className="flex flex-col flex-1 min-w-0 px-2 truncate last:pr-0">
|
||||
<div className="flex min-w-0 flex-1 flex-col truncate px-2 last:pr-0">
|
||||
<span className="font-bold">{versionStream}</span>
|
||||
<span className="truncate">
|
||||
{data.commitTag === 'local' ? (
|
||||
@@ -75,13 +75,13 @@ const VersionStatus: React.FC<VersionStatusProps> = ({ onClick }) => {
|
||||
) : data.commitsBehind === -1 ? (
|
||||
intl.formatMessage(messages.outofdate)
|
||||
) : (
|
||||
<code className="p-0 bg-transparent">
|
||||
<code className="bg-transparent p-0">
|
||||
{data.version.replace('develop-', '')}
|
||||
</code>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
{data.updateAvailable && <ArrowCircleUpIcon className="w-6 h-6" />}
|
||||
{data.updateAvailable && <ArrowCircleUpIcon className="h-6 w-6" />}
|
||||
</a>
|
||||
</Link>
|
||||
);
|
||||
|
@@ -45,14 +45,14 @@ const Layout: React.FC = ({ children }) => {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="flex h-full min-w-0 min-h-full bg-gray-900">
|
||||
<div className="fixed inset-0 z-20 w-full h-1 border-gray-700 md:border-t pwa-only" />
|
||||
<div className="absolute top-0 w-full h-64 from-gray-800 to-gray-900 bg-gradient-to-bl">
|
||||
<div className="relative inset-0 w-full h-full from-gray-900 to-transparent bg-gradient-to-t" />
|
||||
<div className="flex h-full min-h-full min-w-0 bg-gray-900">
|
||||
<div className="pwa-only fixed inset-0 z-20 h-1 w-full border-gray-700 md:border-t" />
|
||||
<div className="absolute top-0 h-64 w-full bg-gradient-to-bl from-gray-800 to-gray-900">
|
||||
<div className="relative inset-0 h-full w-full bg-gradient-to-t from-gray-900 to-transparent" />
|
||||
</div>
|
||||
<Sidebar open={isSidebarOpen} setClosed={() => setSidebarOpen(false)} />
|
||||
|
||||
<div className="relative flex flex-col flex-1 w-0 min-w-0 mb-16 lg:ml-64">
|
||||
<div className="relative mb-16 flex w-0 min-w-0 flex-1 flex-col lg:ml-64">
|
||||
<div
|
||||
className={`searchbar fixed left-0 right-0 top-0 z-10 flex flex-shrink-0 bg-opacity-80 transition duration-300 ${
|
||||
isScrolled ? 'bg-gray-700' : 'bg-transparent'
|
||||
@@ -65,17 +65,17 @@ const Layout: React.FC = ({ children }) => {
|
||||
<button
|
||||
className={`px-4 text-white ${
|
||||
isScrolled ? 'opacity-90' : 'opacity-70'
|
||||
} focus:outline-none lg:hidden transition duration-300`}
|
||||
} transition duration-300 focus:outline-none lg:hidden`}
|
||||
aria-label="Open sidebar"
|
||||
onClick={() => setSidebarOpen(true)}
|
||||
>
|
||||
<MenuAlt2Icon className="w-6 h-6" />
|
||||
<MenuAlt2Icon className="h-6 w-6" />
|
||||
</button>
|
||||
<div className="flex items-center justify-between flex-1 pr-4 md:pr-4 md:pl-4">
|
||||
<div className="flex flex-1 items-center justify-between pr-4 md:pr-4 md:pl-4">
|
||||
<button
|
||||
className={`mr-2 text-white ${
|
||||
isScrolled ? 'opacity-90' : 'opacity-70'
|
||||
} transition duration-300 hover:text-white pwa-only focus:outline-none focus:text-white`}
|
||||
} pwa-only transition duration-300 hover:text-white focus:text-white focus:outline-none`}
|
||||
onClick={() => router.back()}
|
||||
>
|
||||
<ArrowLeftIcon className="w-7" />
|
||||
@@ -87,9 +87,9 @@ const Layout: React.FC = ({ children }) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main className="relative z-0 top-16 focus:outline-none" tabIndex={0}>
|
||||
<main className="relative top-16 z-0 focus:outline-none" tabIndex={0}>
|
||||
<div className="mb-6">
|
||||
<div className="px-4 mx-auto max-w-8xl">{children}</div>
|
||||
<div className="max-w-8xl mx-auto px-4">{children}</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
Reference in New Issue
Block a user