style: add new tailwind prettier plugin (#2465)

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

View File

@@ -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"

View File

@@ -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>
);
};

View File

@@ -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>

View File

@@ -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

View File

@@ -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>

View File

@@ -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>
);

View File

@@ -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>