idanoo/autobrr
1
0
Fork 0
mirror of https://github.com/idanoo/autobrr synced 2025-07-25 17:59:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(web): upgrade to tailwind v4 (#1946)

Browse source 
* feat(web): tailwind v4 and removal of PostCSS

* chore(web): cleanup unused compatibility styles code

* fix(web): application settings border

* fix(web): indexer, list, notification and proxy forms including selects

* fix(web): apikey, download client, filter add form

* fix(web): select text input color

* fix(web): indexer form paddings

* fix(web): feed and notification update form

* fix(web): fix margins and paddings in various forms

* fix(web): fix proxy forms

* deps(web): remove PostCSS dependency

* web: remove hover animation on release tables

* fix(web): filter tab transitions

* fix(web): linting

* feat(web): drop filter tab transitions
This commit is contained in:
martylukyy 2025-01-27 19:38:28 +01:00 • committed by GitHub
parent 024371e4eb
commit 5e2769639f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
64 changed files with 686 additions and 403 deletions
Download patch file Download diff file Expand all files Collapse all files

2
web/src/screens/Dashboard.tsx
View file

@ -8,7 +8,7 @@ import { ActivityTable } from "./dashboard/ActivityTable";
export const Dashboard = () => (
<main>
<div className="my-6 max-w-screen-xl mx-auto pb-6 px-2 sm:px-6 lg:pb-16 lg:px-8">
<div className="my-6 max-w-(--breakpoint-xl) mx-auto pb-6 px-2 sm:px-6 lg:pb-16 lg:px-8">
<Stats />
<ActivityTable />
</div>

10
web/src/screens/Logs.tsx
View file

@ -100,11 +100,11 @@ export const Logs = () => {
return (
<main>
<div className="my-6 max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="my-6 max-w-(--breakpoint-xl) mx-auto px-4 sm:px-6 lg:px-8">
<h1 className="text-3xl font-bold text-black dark:text-white">Logs</h1>
</div>
<div className="max-w-screen-xl mx-auto pb-12 px-2 sm:px-4 lg:px-8">
<div className="max-w-(--breakpoint-xl) mx-auto pb-12 px-2 sm:px-4 lg:px-8">
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-250 dark:border-gray-775 px-2 sm:px-4 pt-3 sm:pt-4 pb-3 sm:pb-4">
<div className="flex relative mb-3">
<DebounceInput
@ -116,7 +116,7 @@ export const Logs = () => {
}}
className={classNames(
"focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700",
"block w-full dark:bg-gray-900 shadow-sm dark:text-gray-100 sm:text-sm rounded-md"
"block w-full dark:bg-gray-900 shadow-xs dark:text-gray-100 sm:text-sm rounded-md"
)}
placeholder="Enter a regex pattern to filter logs by..."
/>
@ -162,7 +162,7 @@ export const Logs = () => {
</div>
</div>
<div className="max-w-screen-xl mx-auto pb-10 px-2 sm:px-4 lg:px-8">
<div className="max-w-(--breakpoint-xl) mx-auto pb-10 px-2 sm:px-4 lg:px-8">
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-250 dark:border-gray-775 px-4 sm:px-6 pt-3 sm:pt-4">
<LogFiles />
</div>
@ -323,7 +323,7 @@ const LogsDropdown = () => {
leaveTo="transform opacity-0 scale-95"
>
<MenuItems
className="absolute right-0 mt-1 origin-top-right bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700 rounded-md shadow-lg ring-1 ring-black ring-opacity-10 focus:outline-none"
className="absolute right-0 mt-1 origin-top-right bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700 rounded-md shadow-lg ring-1 ring-black ring-opacity-10 focus:outline-hidden"
>
<div className="p-3">
<MenuItem>

6
web/src/screens/Releases.tsx
View file

@ -19,7 +19,7 @@ export const Releases = () => {
const [isHintOpen, setIsHintOpen] = useState(false);
return (
<main>
<div className="mt-6 mb-4 mx-auto flex flex-col max-w-screen-xl px-4 sm:px-6 lg:px-8">
<div className="mt-6 mb-4 mx-auto flex flex-col max-w-(--breakpoint-xl) px-4 sm:px-6 lg:px-8">
<h1 className="text-3xl font-bold text-black dark:text-white">Releases</h1>
<p className="flex-row items-start mt-1 text-sm text-gray-800 dark:text-gray-200">
The search engine uses a special pattern-matching engine to filter out results.
@ -79,7 +79,7 @@ export const Releases = () => {
{"As always, please refer to our "}
<ExternalLink
href="https://autobrr.com/usage/search/"
className="text-gray-700 dark:text-gray-200 underline font-semibold underline-offset-2 decoration-purple-500 decoration-2 hover:text-black hover:dark:text-gray-100"
className="text-gray-700 dark:text-gray-200 underline font-semibold underline-offset-2 decoration-purple-500 decoration-2 hover:text-black dark:hover:text-gray-100"
>
Search function usage
</ExternalLink>
@ -88,7 +88,7 @@ export const Releases = () => {
</div>
) : null}
</div>
<div className="max-w-screen-xl mx-auto pb-6 px-2 sm:px-6 lg:pb-16 lg:px-8">
<div className="max-w-(--breakpoint-xl) mx-auto pb-6 px-2 sm:px-6 lg:pb-16 lg:px-8">
<ReleaseTable />
</div>
</main>

6
web/src/screens/Settings.tsx
View file

@ -73,7 +73,7 @@ function SubNavLink({ item }: NavLinkProps) {
)
}>
<item.icon
className="text-gray-500 dark:text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300 flex-shrink-0 -ml-1 mr-3 h-6 w-6"
className="text-gray-500 dark:text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300 shrink-0 -ml-1 mr-3 h-6 w-6"
aria-hidden="true"
/>
<span className="truncate">{item.name}</span>
@ -103,11 +103,11 @@ function SidebarNav({ subNavigation }: SidebarNavProps) {
export function Settings() {
return (
<main>
<div className="my-6 max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="my-6 max-w-(--breakpoint-xl) mx-auto px-4 sm:px-6 lg:px-8">
<h1 className="text-3xl font-bold text-black dark:text-white">Settings</h1>
</div>
<div className="max-w-screen-xl mx-auto pb-6 px-2 sm:px-6 lg:pb-16 lg:px-8">
<div className="max-w-(--breakpoint-xl) mx-auto pb-6 px-2 sm:px-6 lg:pb-16 lg:px-8">
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-table border border-gray-250 dark:border-gray-775">
<div className="lg:grid lg:grid-cols-12">
<SidebarNav subNavigation={subNavigation}/>

11
web/src/screens/auth/Login.tsx
View file

@ -143,7 +143,7 @@ export const Login = () => {
{/* Wait for OIDC config to load before rendering any login forms */}
{typeof oidcConfig !== 'undefined' && (
<div className="mt-10 sm:mx-auto sm:w-full sm:max-w-[480px]">
<div className={`px-6 ${(!canOnboard && (!oidcConfig?.enabled || !oidcConfig?.disableBuiltInLogin)) ? 'py-12 bg-white dark:bg-gray-800 shadow sm:rounded-lg sm:px-12 border border-gray-150 dark:border-gray-775' : ''}`}>
<div className={`px-6 ${(!canOnboard && (!oidcConfig?.enabled || !oidcConfig?.disableBuiltInLogin)) ? 'py-12 bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg sm:px-12 border border-gray-150 dark:border-gray-775' : ''}`}>
{/* Built-in login form */}
{!canOnboard && (!oidcConfig?.enabled || !oidcConfig?.disableBuiltInLogin) && (
<>
@ -173,7 +173,8 @@ export const Login = () => {
<Tooltip
label={
<div className="flex flex-row items-center cursor-pointer text-gray-700 dark:text-gray-200">
Forgot password? <svg className="ml-1 w-3 h-3 text-gray-500 dark:text-gray-400 fill-current" viewBox="0 0 72 72"><path d="M32 2C15.432 2 2 15.432 2 32s13.432 30 30 30s30-13.432 30-30S48.568 2 32 2m5 49.75H27v-24h10v24m-5-29.5a5 5 0 1 1 0-10a5 5 0 0 1 0 10" /></svg>
Forgot password? <svg className="ml-1 w-3 h-3 text-gray-500 dark:text-gray-400 fill-current" viewBox="0 0 72 72">
<path d="M32 2C15.432 2 2 15.432 2 32s13.432 30 30 30s30-13.432 30-30S48.568 2 32 2m5 49.75H27v-24h10v24m-5-29.5a5 5 0 1 1 0-10a5 5 0 0 1 0 10" /></svg>
</div>
}
>
@ -184,9 +185,9 @@ export const Login = () => {
<button
type="submit"
className="w-full flex items-center justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
className="w-full flex items-center justify-center py-2 px-4 border border-transparent rounded-md shadow-xs text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
>
<RocketLaunchIcon className="w-4 h-4 mr-1.5" />
<RocketLaunchIcon className="w-4 h-4 mr-1.5"/>
Sign in
</button>
</form>
@ -210,7 +211,7 @@ export const Login = () => {
<button
type="button"
onClick={handleOIDCLogin}
className="w-full flex items-center justify-center gap-3 py-2 px-4 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-900 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700"
className="w-full flex items-center justify-center gap-3 py-2 px-4 border border-gray-300 dark:border-gray-700 rounded-md shadow-xs text-sm font-medium text-gray-900 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700"
>
<FontAwesomeIcon icon={faOpenid} className="h-5 w-5" />
<span>OpenID Connect</span>

2
web/src/screens/auth/Onboarding.tsx
View file

@ -85,7 +85,7 @@ export const Onboarding = () => {
</div>
<button
type="submit"
className="mt-6 w-full flex items-center justify-center py-2 px-4 border border-transparent transition rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
className="mt-6 w-full flex items-center justify-center py-2 px-4 border border-transparent transition rounded-md shadow-xs text-sm font-medium text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
>
<UserPlusIcon className="w-4 h-4 mr-1.5" />
Create account

2
web/src/screens/dashboard/ActivityTable.tsx
View file

@ -53,7 +53,7 @@ function Table({ columns, data }: TableProps) {
<th
key={header.id}
scope="col"
className="first:pl-5 first:rounded-tl-md last:rounded-tr-md pl-3 pr-3 py-3 text-xs font-medium tracking-wider text-left uppercase group text-gray-600 dark:text-gray-400 transition hover:bg-gray-200 dark:hover:bg-gray-775"
className="first:pl-5 first:rounded-tl-md last:rounded-tr-md pl-3 pr-3 py-3 text-xs font-medium tracking-wider text-left uppercase group text-gray-600 dark:text-gray-400"
colSpan={header.colSpan}
>
<div className="flex items-center justify-between">

2
web/src/screens/dashboard/Stats.tsx
View file

@ -27,7 +27,7 @@ const StatsItem = ({ name, placeholder, value, to, eventType }: StatsItemProps)
params={{}}
>
<dt>
<div className="flex items-center text-sm font-medium text-gray-500 group-hover:dark:text-gray-475 group-hover:text-gray-600 transition-colors duration-200 ease-in-out">
<div className="flex items-center text-sm font-medium text-gray-500 dark:group-hover:text-gray-475 group-hover:text-gray-600 transition-colors duration-200 ease-in-out">
<p className="pb-0.5 truncate">{name}</p>
<LinkIcon className="h-3 w-3 ml-2" aria-hidden="true" />
</div>

12
web/src/screens/filters/Details.tsx
View file

@ -63,7 +63,7 @@ function TabNavLink({ item }: NavLinkProps) {
<span
className={
classNames(
"transition border-b-2 whitespace-nowrap py-4 duration-3000 px-1 font-medium text-sm first:rounded-tl-lg last:rounded-tr-lg",
"border-b-2 whitespace-nowrap py-4 px-1 font-medium text-sm first:rounded-tl-lg last:rounded-tr-lg",
isActive
? "text-blue-600 dark:text-white border-blue-600 dark:border-blue-500"
: "text-gray-550 hover:text-blue-500 dark:hover:text-white border-transparent"
@ -105,7 +105,7 @@ const FormButtonsGroup = ({ values, deleteAction, reset, isLoading }: FormButton
<div className="px-0.5 mt-8 flex flex-col-reverse sm:flex-row flex-wrap-reverse justify-between">
<button
type="button"
className="flex items-center justify-center px-4 py-2 rounded-md sm:text-sm transition bg-red-700 dark:bg-red-900 hover:dark:bg-red-700 hover:bg-red-800 text-white focus:outline-none"
className="flex items-center justify-center px-4 py-2 rounded-md sm:text-sm transition bg-red-700 dark:bg-red-900 dark:hover:bg-red-700 hover:bg-red-800 text-white focus:outline-hidden"
onClick={toggleDeleteModal}
>
Delete Filter
@ -115,7 +115,7 @@ const FormButtonsGroup = ({ values, deleteAction, reset, isLoading }: FormButton
{/* {dirty && <span className="mr-4 text-sm text-gray-500">Unsaved changes..</span>} */}
<button
type="button"
className="bg-white dark:bg-gray-700 py-2 px-4 border border-gray-300 dark:border-gray-600 transition rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
className="bg-white dark:bg-gray-700 py-2 px-4 border border-gray-300 dark:border-gray-600 transition rounded-md shadow-xs text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
onClick={(e) => {
e.preventDefault();
reset();
@ -127,7 +127,7 @@ const FormButtonsGroup = ({ values, deleteAction, reset, isLoading }: FormButton
</button>
<button
type="submit"
className="ml-1 sm:ml-4 flex items-center px-4 py-2 border border-transparent transition shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
className="ml-1 sm:ml-4 flex items-center px-4 py-2 border border-transparent transition shadow-xs text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
>
Save
</button>
@ -367,7 +367,7 @@ export const FilterDetails = () => {
return (
<main>
<div className="my-6 max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center text-black dark:text-white">
<div className="my-6 max-w-(--breakpoint-xl) mx-auto px-4 sm:px-6 lg:px-8 flex items-center text-black dark:text-white">
<h1 className="text-3xl font-bold">
<Link to="/filters">
Filters
@ -376,7 +376,7 @@ export const FilterDetails = () => {
<ChevronRightIcon className="h-6 w-4 shrink-0 sm:shrink sm:h-6 sm:w-6 mx-1" aria-hidden="true" />
<h1 className="text-3xl font-bold truncate" title={filter.name}>{filter.name}</h1>
</div>
<div className="max-w-screen-xl mx-auto pb-12 px-2 sm:px-6 lg:px-8">
<div className="max-w-(--breakpoint-xl) mx-auto pb-12 px-2 sm:px-6 lg:px-8">
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-250 dark:border-gray-775">
<div className="rounded-t-lg bg-gray-125 dark:bg-gray-850 border-b border-gray-200 dark:border-gray-750">
<nav className="px-4 py-4 -mb-px flex space-x-6 sm:space-x-8 overflow-x-auto">

6
web/src/screens/filters/Importer.tsx
View file

@ -39,7 +39,7 @@ const ModalLower = ({ isOpen, setIsOpen, onImportClick }: ModalLowerProps) => (
<div className="bg-gray-50 dark:bg-gray-800 border-t border-gray-300 dark:border-gray-700 px-4 py-3 sm:px-4 sm:flex sm:flex-row-reverse">
<button
type="button"
className="w-full inline-flex justify-center rounded-md border border-blue-500 shadow-sm px-4 py-2 bg-blue-700 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
className="w-full inline-flex justify-center rounded-md border border-blue-500 shadow-xs px-4 py-2 bg-blue-700 text-base font-medium text-white hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
onClick={(e) => {
e.preventDefault();
if (isOpen) {
@ -52,7 +52,7 @@ const ModalLower = ({ isOpen, setIsOpen, onImportClick }: ModalLowerProps) => (
</button>
<button
type="button"
className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-sm px-4 py-2 bg-white dark:bg-gray-700 text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-xs px-4 py-2 bg-white dark:bg-gray-700 text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
onClick={(e) => {
e.preventDefault();
setIsOpen(false);
@ -246,7 +246,7 @@ export const Importer = ({
<DialogPanel className="inline-block align-bottom border border-transparent dark:border-gray-700 rounded-lg text-left overflow-hidden shadow-xl transform transition sm:my-8 sm:align-middle w-full sm:max-w-6xl">
<ModalUpper>
<textarea
className="form-input resize-y block w-full shadow-sm sm:text-sm rounded-md border py-2.5 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-gray-100"
className="form-input resize-y block w-full shadow-xs sm:text-sm rounded-md border py-2.5 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-gray-100"
placeholder="Paste your filter data here (either autobrr JSON format or your entire autodl-irssi config)"
value={inputFilterText}
onChange={(event) => {

14
web/src/screens/filters/List.tsx
View file

@ -106,13 +106,13 @@ export function Filters() {
setIsOpen={setShowImportModal}
/>
<div className="flex justify-between items-center flex-row flex-wrap my-6 max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center flex-row flex-wrap my-6 max-w-(--breakpoint-xl) mx-auto px-4 sm:px-6 lg:px-8">
<h1 className="text-3xl font-bold text-black dark:text-white">Filters</h1>
<Menu as="div" className="relative">
{({ open }) => (
<>
<button
className="relative inline-flex items-center px-4 py-2 shadow-sm text-sm font-medium rounded-l-md transition text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
className="relative inline-flex items-center px-4 py-2 shadow-xs text-sm font-medium rounded-l-md transition text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
onClick={(e: { stopPropagation: () => void; }) => {
if (!open) {
e.stopPropagation();
@ -123,7 +123,7 @@ export function Filters() {
<PlusIcon className="h-5 w-5 mr-1" />
Create Filter
</button>
<MenuButton className="relative inline-flex items-center px-2 py-2 border-l border-spacing-1 dark:border-black shadow-sm text-sm font-medium rounded-r-md transition text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500">
<MenuButton className="relative inline-flex items-center px-2 py-2 border-l border-spacing-1 dark:border-black shadow-xs text-sm font-medium rounded-r-md transition text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500">
<ChevronDownIcon className="h-5 w-5" />
</MenuButton>
<Transition
@ -143,7 +143,7 @@ export function Filters() {
type="button"
className={classNames(
active ? "bg-gray-50 dark:bg-gray-600" : "",
"flex items-center w-full text-left py-2 px-3 text-sm font-medium text-gray-700 dark:text-gray-200 rounded-md focus:outline-none"
"flex items-center w-full text-left py-2 px-3 text-sm font-medium text-gray-700 dark:text-gray-200 rounded-md focus:outline-hidden"
)}
onClick={() => setShowImportModal(true)}
>
@ -207,7 +207,7 @@ function FilterList({ toggleCreateFilter }: any) {
const filtered = filteredData(data ?? [], status);
return (
<div className="max-w-screen-xl mx-auto pb-12 px-2 sm:px-6 lg:px-8 relative">
<div className="max-w-(--breakpoint-xl) mx-auto pb-12 px-2 sm:px-6 lg:px-8 relative">
<div className="align-middle min-w-full rounded-t-lg rounded-b-lg shadow-table bg-gray-50 dark:bg-gray-800 border border-gray-250 dark:border-gray-775">
<div className="rounded-t-lg flex justify-between px-4 bg-gray-125 dark:bg-gray-850 border-b border-gray-200 dark:border-gray-750">
<div className="flex gap-4">
@ -406,7 +406,7 @@ const FilterItemDropdown = ({ filter, onToggle }: FilterItemDropdownProps) => {
>
<MenuItems
anchor={{ to: 'bottom end', padding: '8px' }} // padding: '8px' === m-2
className="absolute w-56 bg-white dark:bg-gray-825 divide-y divide-gray-200 dark:divide-gray-750 rounded-md shadow-lg border border-gray-250 dark:border-gray-750 focus:outline-none z-10"
className="absolute w-56 bg-white dark:bg-gray-825 divide-y divide-gray-200 dark:divide-gray-750 rounded-md shadow-lg border border-gray-250 dark:border-gray-750 focus:outline-hidden z-10"
>
<div className="px-1 py-1">
<MenuItem>
@ -737,7 +737,7 @@ const ListboxFilter = ({
leaveTo="opacity-0"
>
<ListboxOptions
className="w-52 absolute z-10 mt-1 right-0 overflow-auto text-base bg-white dark:bg-gray-800 rounded-md shadow-lg max-h-60 border border-opacity-5 border-black dark:border-gray-700 dark:border-opacity-40 focus:outline-none sm:text-sm"
className="w-52 absolute z-10 mt-1 right-0 overflow-auto text-base bg-white dark:bg-gray-800 rounded-md shadow-lg max-h-60 border border-opacity-5 border-black dark:border-gray-700 dark:border-opacity-40 focus:outline-hidden sm:text-sm"
>
{children}
</ListboxOptions>

6
web/src/screens/filters/NotFound.tsx
View file

@ -31,14 +31,14 @@ export const FilterNotFound = () => {
{" "}
<ExternalLink
href="https://github.com/autobrr/autobrr"
className="text-gray-700 dark:text-gray-200 underline font-semibold underline-offset-2 decoration-sky-500 hover:decoration-2 hover:text-black hover:dark:text-gray-100"
className="text-gray-700 dark:text-gray-200 underline font-semibold underline-offset-2 decoration-sky-500 hover:decoration-2 hover:text-black dark:hover:text-gray-100"
>
GitHub page
</ExternalLink>
{" or to "}
<ExternalLink
href="https://discord.gg/WQ2eUycxyT"
className="text-gray-700 dark:text-gray-200 underline font-semibold underline-offset-2 decoration-purple-500 hover:decoration-2 hover:text-black hover:dark:text-gray-100"
className="text-gray-700 dark:text-gray-200 underline font-semibold underline-offset-2 decoration-purple-500 hover:decoration-2 hover:text-black dark:hover:text-gray-100"
>
our official Discord channel
</ExternalLink>
@ -50,7 +50,7 @@ export const FilterNotFound = () => {
<div className="flex justify-center">
<Link to="/filters">
<button
className="w-48 flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
className="w-48 flex justify-center py-2 px-4 border border-transparent rounded-md shadow-xs text-sm font-medium text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
>
Back to filters
</button>

12
web/src/screens/filters/sections/Actions.tsx
View file

@ -93,10 +93,10 @@ export function Actions() {
title="Actions"
subtitle="Add to download clients or run custom commands."
/>
<div className="ml-4 mt-4 flex-shrink-0">
<div className="ml-4 mt-4 shrink-0">
<button
type="button"
className="relative inline-flex items-center px-4 py-2 border border-transparent transition shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
className="relative inline-flex items-center px-4 py-2 border border-transparent transition shadow-xs text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
onClick={() => push(newAction)}
>
<BoltIcon
@ -247,7 +247,7 @@ function FilterActionsItem({ action, clients, idx, initialEdit, remove }: Filter
{action.name}
</p>
</div>
<div className="flex-shrink-0 sm:mt-0 sm:ml-5">
<div className="shrink-0 sm:mt-0 sm:ml-5">
<div className="flex overflow-hidden -space-x-1">
<span className="text-sm font-normal text-gray-500 dark:text-gray-400">
{ActionTypeNameMap[action.type]}
@ -255,7 +255,7 @@ function FilterActionsItem({ action, clients, idx, initialEdit, remove }: Filter
</div>
</div>
</div>
<div className="ml-5 flex-shrink-0">
<div className="ml-5 shrink-0">
<ChevronRightIcon
className="h-5 w-5 text-gray-400"
aria-hidden="true"
@ -303,7 +303,7 @@ function FilterActionsItem({ action, clients, idx, initialEdit, remove }: Filter
<div className="pt-6 pb-4 flex space-x-2 justify-between">
<button
type="button"
className="inline-flex items-center justify-center px-4 py-2 rounded-md sm:text-sm bg-red-700 dark:bg-red-900 hover:dark:bg-red-700 hover:bg-red-800 text-white focus:outline-none"
className="inline-flex items-center justify-center px-4 py-2 rounded-md sm:text-sm bg-red-700 dark:bg-red-900 dark:hover:bg-red-700 hover:bg-red-800 text-white focus:outline-hidden"
onClick={toggleDeleteModal}
>
Remove Action
@ -311,7 +311,7 @@ function FilterActionsItem({ action, clients, idx, initialEdit, remove }: Filter
<button
type="button"
className="bg-white dark:bg-gray-700 py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none"
className="bg-white dark:bg-gray-700 py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-xs text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-hidden"
onClick={toggleEdit}
>
Close

12
web/src/screens/filters/sections/External.tsx
View file

@ -47,10 +47,10 @@ export function External() {
title="External filters"
subtitle="Run external scripts or webhooks and check status as part of filtering."
/>
<div className="ml-4 mt-4 flex-shrink-0">
<div className="ml-4 mt-4 shrink-0">
<button
type="button"
className="relative inline-flex items-center px-4 py-2 transition border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
className="relative inline-flex items-center px-4 py-2 transition border border-transparent shadow-xs text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
onClick={() => push(newItem)}
>
<SquaresPlusIcon
@ -170,7 +170,7 @@ function FilterExternalItem({ idx, external, initialEdit, remove, move }: Filter
</p>
</div>
</div>
<div className="flex-shrink-0 sm:mt-0 sm:ml-5">
<div className="shrink-0 sm:mt-0 sm:ml-5">
<div className="flex overflow-hidden -space-x-1">
<span className="text-sm font-normal text-gray-500 dark:text-gray-400">
{ExternalFilterTypeNameMap[external.type]}
@ -178,7 +178,7 @@ function FilterExternalItem({ idx, external, initialEdit, remove, move }: Filter
</div>
</div>
</div>
<div className="ml-5 flex-shrink-0">
<div className="ml-5 shrink-0">
<ChevronRightIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
</div>
</button>
@ -223,7 +223,7 @@ function FilterExternalItem({ idx, external, initialEdit, remove, move }: Filter
<div className="pt-6 pb-4 space-x-2 flex justify-between">
<button
type="button"
className="inline-flex items-center justify-center px-4 py-2 rounded-md sm:text-sm bg-red-700 dark:bg-red-900 hover:dark:bg-red-700 hover:bg-red-800 text-white focus:outline-none"
className="inline-flex items-center justify-center px-4 py-2 rounded-md sm:text-sm bg-red-700 dark:bg-red-900 dark:hover:bg-red-700 hover:bg-red-800 text-white focus:outline-hidden"
onClick={toggleDeleteModal}
>
Remove External
@ -231,7 +231,7 @@ function FilterExternalItem({ idx, external, initialEdit, remove, move }: Filter
<button
type="button"
className="bg-white dark:bg-gray-700 py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none"
className="bg-white dark:bg-gray-700 py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-xs text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-hidden"
onClick={toggleEdit}
>
Close

4
web/src/screens/filters/sections/Music.tsx
View file

@ -149,7 +149,7 @@ export const Music = () => {
/>
</FilterLayout>
<FilterLayout className="items-end sm:!gap-x-6">
<FilterLayout className="items-end sm:gap-x-6!">
<FilterRow className="sm:col-span-4">
<SwitchGroup
name="cue"
@ -197,7 +197,7 @@ export const Music = () => {
<span className="border-b border-gray-150 dark:border-gray-750 w-full" />
</div>
<FilterLayout className="sm:!gap-x-6">
<FilterLayout className="sm:gap-x-6!">
<SwitchGroup
name="perfect_flac"
label="Perfect FLAC"

2
web/src/screens/releases/ReleaseFilters.tsx
View file

@ -52,7 +52,7 @@ const ListboxFilter = ({
leaveTo="opacity-0"
>
<ListboxOptions
className="absolute z-10 w-full mt-1 overflow-auto text-base bg-white dark:bg-gray-800 rounded-md shadow-lg max-h-60 border border-opacity-5 border-black dark:border-gray-700 dark:border-opacity-40 focus:outline-none sm:text-sm"
className="absolute z-10 w-full mt-1 overflow-auto text-base bg-white dark:bg-gray-800 rounded-md shadow-lg max-h-60 border border-opacity-5 border-black dark:border-gray-700 dark:border-opacity-40 focus:outline-hidden sm:text-sm"
>
<FilterOption label="All" value="" />
{children}

6
web/src/screens/releases/ReleaseTable.tsx
View file

@ -267,7 +267,7 @@ export const ReleaseTable = () => {
key={header.id}
scope="col"
colSpan={header.colSpan}
className="first:pl-5 first:rounded-tl-md last:rounded-tr-md pl-3 pr-3 py-3 text-xs font-medium tracking-wider text-left uppercase group text-gray-600 dark:text-gray-400 transition hover:bg-gray-200 dark:hover:bg-gray-775"
className="first:pl-5 first:rounded-tl-md last:rounded-tr-md pl-3 pr-3 py-3 text-xs font-medium tracking-wider text-left uppercase group text-gray-600 dark:text-gray-400"
>
<div className="flex items-center justify-between">
{header.isPlaceholder
@ -333,7 +333,7 @@ export const ReleaseTable = () => {
<label>
<span className="sr-only bg-gray-700">Items Per Page</span>
<select
className="py-1 pl-2 pr-8 text-sm block w-full border-gray-300 rounded-md shadow-sm cursor-pointer transition-colors dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400 dark:hover:text-gray-200 focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
className="py-1 pl-2 pr-8 text-sm block w-full border-gray-300 rounded-md shadow-xs cursor-pointer transition-colors dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400 dark:hover:text-gray-200 focus:border-blue-300 focus:ring-3 focus:ring-blue-200 focus:ring-opacity-50"
value={tableInstance.getState().pagination.pageSize}
onChange={e => {
tableInstance.setPageSize(Number(e.target.value));
@ -348,7 +348,7 @@ export const ReleaseTable = () => {
</label>
</div>
<div>
<nav className="inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
<nav className="inline-flex -space-x-px rounded-md shadow-xs" aria-label="Pagination">
<TablePageButton
className="rounded-l-md"
onClick={() => tableInstance.firstPage()}

2
web/src/screens/settings/Account.tsx
View file

@ -145,7 +145,7 @@ function Credentials() {
<div className="flex justify-end">
<button
type="submit"
className="mt-4 w-auto flex items-center py-2 px-4 transition rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
className="mt-4 w-auto flex items-center py-2 px-4 transition rounded-md shadow-xs text-sm font-medium text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
>
<UserIcon className="w-4 h-4 mr-1" />
Save

2
web/src/screens/settings/Api.tsx
View file

@ -34,7 +34,7 @@ function APISettings() {
rightSide={
<button
type="button"
className="relative inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
className="relative inline-flex items-center px-4 py-2 border border-transparent shadow-xs text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
onClick={toggleAddForm}
>
<PlusIcon className="h-5 w-5 mr-1" />

2
web/src/screens/settings/Application.tsx
View file

@ -55,7 +55,7 @@ function ApplicationSettings() {
description="Application settings. Change in config.toml and restart to take effect."
>
<div className="-mx-4 divide-y divide-gray-150 dark:divide-gray-750">
<form className="mt-6 mb-4" action="#" method="POST">
<form className="mt-6 pb-4" action="#" method="POST">
{data && (
<div className="grid grid-cols-12 gap-2 sm:gap-6 px-4 sm:px-6">
<div className="col-span-12 sm:col-span-4">

2
web/src/screens/settings/DownloadClient.tsx
View file

@ -145,7 +145,7 @@ function DownloadClientSettings() {
rightSide={
<button
type="button"
className="relative inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
className="relative inline-flex items-center px-4 py-2 border border-transparent shadow-xs text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
onClick={toggleAddClient}
>
<PlusIcon className="h-5 w-5 mr-1" />

2
web/src/screens/settings/Feed.tsx
View file

@ -319,7 +319,7 @@ const FeedItemDropdown = ({
>
<MenuItems
anchor={{ to: 'bottom end', padding: '8px' }} // padding: '8px' === m-2
className="absolute w-56 bg-white dark:bg-gray-825 divide-y divide-gray-200 dark:divide-gray-750 rounded-md shadow-lg border border-gray-250 dark:border-gray-750 focus:outline-none z-10"
className="absolute w-56 bg-white dark:bg-gray-825 divide-y divide-gray-200 dark:divide-gray-750 rounded-md shadow-lg border border-gray-250 dark:border-gray-750 focus:outline-hidden z-10"
>
<div className="px-1 py-1">
<MenuItem>

8
web/src/screens/settings/Indexer.tsx
View file

@ -184,7 +184,7 @@ function IndexerSettings() {
<button
type="button"
onClick={toggleAddIndexer}
className="relative inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
className="relative inline-flex items-center px-4 py-2 border border-transparent shadow-xs text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
>
<PlusIcon className="h-5 w-5 mr-1" />
Add new
@ -198,19 +198,19 @@ function IndexerSettings() {
<ul className="min-w-full relative">
<li className="grid grid-cols-12 border-b border-gray-200 dark:border-gray-700">
<div
className="flex col-span-2 sm:col-span-1 pl-0 sm:pl-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-gray-800 hover:dark:text-gray-250 transition-colors uppercase tracking-wider cursor-pointer"
className="flex col-span-2 sm:col-span-1 pl-0 sm:pl-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-250 transition-colors uppercase tracking-wider cursor-pointer"
onClick={() => sortedIndexers.requestSort("enabled")}
>
Enabled <span className="sort-indicator">{sortedIndexers.getSortIndicator("enabled")}</span>
</div>
<div
className="col-span-7 sm:col-span-8 pl-12 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-gray-800 hover:dark:text-gray-250 transition-colors uppercase tracking-wider cursor-pointer"
className="col-span-7 sm:col-span-8 pl-12 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-250 transition-colors uppercase tracking-wider cursor-pointer"
onClick={() => sortedIndexers.requestSort("name")}
>
Name <span className="sort-indicator">{sortedIndexers.getSortIndicator("name")}</span>
</div>
<div
className="hidden md:flex col-span-1 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-gray-800 hover:dark:text-gray-250 transition-colors uppercase tracking-wider cursor-pointer"
className="hidden md:flex col-span-1 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-250 transition-colors uppercase tracking-wider cursor-pointer"
onClick={() => sortedIndexers.requestSort("implementation")}
>
Implementation <span className="sort-indicator">{sortedIndexers.getSortIndicator("implementation")}</span>

18
web/src/screens/settings/Irc.tsx
View file

@ -104,7 +104,7 @@ const IrcSettings = () => {
<button
type="button"
onClick={toggleAddNetwork}
className="relative inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
className="relative inline-flex items-center px-4 py-2 border border-transparent shadow-xs text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
>
<PlusIcon className="h-5 w-5 mr-1" />
Add new
@ -145,7 +145,7 @@ const IrcSettings = () => {
</ul>
<div className="flex gap-x-2">
<button
className="flex items-center text-gray-800 dark:text-gray-400 p-1 px-2 rounded shadow bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600"
className="flex items-center text-gray-800 dark:text-gray-400 p-1 px-2 rounded-sm shadow-sm bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600"
onClick={toggleExpand}
title={expandNetworks ? "collapse" : "expand"}
>
@ -390,7 +390,7 @@ const ChannelItem = ({ network, channel }: ChannelItemProps) => {
</span>
</div>
<div className="col-span-1 flex items-center justify-end">
<button className="hover:text-gray-500 px-2 mx-2 py-1 dark:bg-gray-800 rounded dark:border-gray-900">
<button className="hover:text-gray-500 px-2 mx-2 py-1 dark:bg-gray-800 rounded-sm dark:border-gray-900">
{viewChannel ? "Hide" : "View"}
</button>
</div>
@ -479,7 +479,7 @@ const ListItemDropdown = ({
>
<MenuItems
anchor={{ to: 'bottom end', padding: '8px' }} // padding: '8px' === m-2
className="absolute w-56 bg-white dark:bg-gray-825 divide-y divide-gray-200 dark:divide-gray-750 rounded-md shadow-lg border border-gray-250 dark:border-gray-750 focus:outline-none z-10"
className="absolute w-56 bg-white dark:bg-gray-825 divide-y divide-gray-200 dark:divide-gray-750 rounded-md shadow-lg border border-gray-250 dark:border-gray-750 focus:outline-hidden z-10"
>
<div className="px-1 py-1">
<MenuItem>
@ -609,7 +609,7 @@ const ReprocessAnnounceButton = ({ networkId, channel, msg }: ReprocessAnnounceP
return (
<div className="block">
<button className="flex items-center justify-center size-5 mr-1 p-1 rounded transition border-gray-500 bg-gray-250 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600" onClick={reprocessAnnounce} title="Re-process announce">
<button className="flex items-center justify-center size-5 mr-1 p-1 rounded-sm transition border-gray-500 bg-gray-250 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600" onClick={reprocessAnnounce} title="Re-process announce">
{mutation.isPending
? <RingResizeSpinner className="text-blue-500 iconHeight" aria-hidden="true" />
: <ArrowPathIcon />
@ -720,7 +720,7 @@ export const Events = ({ network, channel }: EventsProps) => {
<div
className={classNames(
"overflow-y-auto rounded-lg min-w-full bg-gray-100 dark:bg-gray-900 overflow-auto",
isFullscreen ? "max-w-full h-full p-2 border-gray-300 dark:border-gray-700" : "px-2 py-1 aspect-[2/1]"
isFullscreen ? "max-w-full h-full p-2 border-gray-300 dark:border-gray-700" : "px-2 py-1 aspect-2/1"
)}
ref={messagesEndRef}
>
@ -730,7 +730,7 @@ export const Events = ({ network, channel }: EventsProps) => {
className={classNames(
settings.indentLogLines ? "grid justify-start grid-flow-col" : "",
settings.hideWrappedText ? "truncate hover:text-ellipsis hover:whitespace-normal" : "",
"flex items-center hover:bg-gray-200 hover:dark:bg-gray-800"
"flex items-center hover:bg-gray-200 dark:hover:bg-gray-800"
)}
>
<ReprocessAnnounceButton networkId={network.id} channel={channel} msg={entry.msg} />
@ -777,7 +777,7 @@ const IRCLogsDropdown = () => {
// at IRCLogsDropdown (http://localhost:3000/src/screens/settings/Irc.tsx?t=1694269937935:1354:53)
return (
<Menu as="div" className="relative">
<MenuButton className="flex items-center text-gray-800 dark:text-gray-400 p-1 px-2 rounded shadow bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600">
<MenuButton className="flex items-center text-gray-800 dark:text-gray-400 p-1 px-2 rounded-sm shadow-sm bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600">
<span className="flex items-center">Options <Cog6ToothIcon className="ml-1 w-4 h-4" /></span>
</MenuButton>
<Transition
@ -791,7 +791,7 @@ const IRCLogsDropdown = () => {
>
<MenuItems
anchor={{ to: 'bottom end', padding: '8px' }} // padding: '8px' === m-2
className="absolute z-10 mt-2 px-3 py-2 bg-white dark:bg-gray-825 divide-y divide-gray-200 dark:divide-gray-750 rounded-md shadow-lg border border-gray-750 focus:outline-none"
className="absolute z-10 mt-2 px-3 py-2 bg-white dark:bg-gray-825 divide-y divide-gray-200 dark:divide-gray-750 rounded-md shadow-lg border border-gray-750 focus:outline-hidden"
>
<MenuItem>
{() => (

4
web/src/screens/settings/Lists.tsx
View file

@ -34,7 +34,7 @@ function ListsSettings() {
<button
type="button"
onClick={toggleAddList}
className="relative inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
className="relative inline-flex items-center px-4 py-2 border border-transparent shadow-xs text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
>
<PlusIcon className="h-5 w-5 mr-1"/>
Add new
@ -91,7 +91,7 @@ interface FilterPillProps {
const FilterPill: FC<FilterPillProps> = ({ filter }) => (
<Link
className="hidden sm:inline-flex items-center px-2 py-0.5 rounded-md text-sm font-medium bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-400 hover:dark:bg-gray-750 hover:bg-gray-700"
className="hidden sm:inline-flex items-center px-2 py-0.5 rounded-md text-sm font-medium bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-400 dark:hover:bg-gray-750 hover:bg-gray-700"
to={`/filters/$filterId`}
params={{ filterId: filter.id }}
>

4
web/src/screens/settings/Notifications.tsx
View file

@ -40,7 +40,7 @@ function NotificationSettings() {
<button
type="button"
onClick={toggleAddNotifications}
className="relative inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
className="relative inline-flex items-center px-4 py-2 border border-transparent shadow-xs text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
>
<PlusIcon className="h-5 w-5 mr-1" />
Add new
@ -67,7 +67,7 @@ function NotificationSettings() {
);
}
const iconStyle = "flex items-center px-2 py-0.5 rounded bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-400";
const iconStyle = "flex items-center px-2 py-0.5 rounded-sm bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-400";
const iconComponentMap: componentMapType = {
DISCORD: <span className={iconStyle}><DiscordIcon /> Discord</span>,
NOTIFIARR: <span className={iconStyle}><NotifiarrIcon /> Notifiarr</span>,

8
web/src/screens/settings/Proxy.tsx
View file

@ -86,7 +86,7 @@ function ProxySettings() {
<button
type="button"
onClick={toggleAddProxy}
className="relative inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
className="relative inline-flex items-center px-4 py-2 border border-transparent shadow-xs text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
>
<PlusIcon className="h-5 w-5 mr-1"/>
Add new
@ -100,21 +100,21 @@ function ProxySettings() {
<ul className="min-w-full relative">
<li className="grid grid-cols-12 border-b border-gray-200 dark:border-gray-700">
<div
className="flex col-span-2 sm:col-span-1 pl-0 sm:pl-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-gray-800 hover:dark:text-gray-250 transition-colors uppercase tracking-wider cursor-pointer"
className="flex col-span-2 sm:col-span-1 pl-0 sm:pl-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-250 transition-colors uppercase tracking-wider cursor-pointer"
// onClick={() => sortedIndexers.requestSort("enabled")}
>
Enabled
{/*<span className="sort-indicator">{sortedIndexers.getSortIndicator("enabled")}</span>*/}
</div>
<div
className="col-span-7 sm:col-span-8 pl-12 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-gray-800 hover:dark:text-gray-250 transition-colors uppercase tracking-wider cursor-pointer"
className="col-span-7 sm:col-span-8 pl-12 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-250 transition-colors uppercase tracking-wider cursor-pointer"
// onClick={() => sortedIndexers.requestSort("name")}
>
Name
{/*<span className="sort-indicator">{sortedIndexers.getSortIndicator("name")}</span>*/}
</div>
<div
className="hidden md:flex col-span-1 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-gray-800 hover:dark:text-gray-250 transition-colors uppercase tracking-wider cursor-pointer"
className="hidden md:flex col-span-1 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-250 transition-colors uppercase tracking-wider cursor-pointer"
// onClick={() => sortedIndexers.requestSort("implementation")}
>
Type

4
web/src/screens/settings/RegexPlayground.tsx
View file

@ -80,7 +80,7 @@ const RegexPlayground = () => {
id="input-regex"
type="text"
autoComplete="true"
className="mt-1 mb-4 block w-full border rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-gray-100 sm:text-sm"
className="mt-1 mb-4 block w-full border rounded-md shadow-xs py-2 px-3 focus:outline-hidden focus:ring-blue-500 focus:border-blue-500 border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-gray-100 sm:text-sm"
/>
<label
htmlFor="input-lines"
@ -90,7 +90,7 @@ const RegexPlayground = () => {
</label>
<div
id="input-lines"
className="mt-1 mb-4 block w-full dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:text-gray-100 sm:text-sm"
className="mt-1 mb-4 block w-full dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md shadow-xs py-2 px-3 focus:outline-hidden focus:ring-blue-500 focus:border-blue-500 dark:text-gray-100 sm:text-sm"
onInput={(e) => onInput(e.currentTarget.innerText ?? "")}
contentEditable
></div>

6
web/src/screens/settings/Releases.tsx
View file

@ -26,7 +26,7 @@ const ReleaseSettings = () => (
<ReleaseProfileDuplicates/>
<div className="py-6 px-4 sm:p-6">
<div className="border border-red-500 rounded">
<div className="border border-red-500 rounded-sm">
<div className="py-6 px-4 sm:p-6">
<DeleteReleases/>
</div>
@ -111,7 +111,7 @@ function ReleaseProfileDuplicates() {
rightSide={
<button
type="button"
className="relative inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
className="relative inline-flex items-center px-4 py-2 border border-transparent shadow-xs text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
onClick={toggleAdd}
>
<PlusIcon className="h-5 w-5 mr-1"/>
@ -320,7 +320,7 @@ function DeleteReleases() {
toggleDeleteModal();
}
}}
className="inline-flex justify-center sm:w-1/5 md:w-1/5 w-full px-4 py-2 sm:mt-6 border border-transparent text-sm font-medium rounded-md text-red-700 hover:text-red-800 dark:text-white bg-red-200 dark:bg-red-700 hover:bg-red-300 dark:hover:bg-red-800 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-red-600"
className="inline-flex justify-center sm:w-1/5 md:w-1/5 w-full px-4 py-2 sm:mt-6 border border-transparent text-sm font-medium rounded-md text-red-700 hover:text-red-800 dark:text-white bg-red-200 dark:bg-red-700 hover:bg-red-300 dark:hover:bg-red-800 focus:outline-hidden focus:ring-1 focus:ring-inset focus:ring-red-600"
>
Delete
</button>

4
web/src/screens/settings/_components.tsx
View file

@ -41,7 +41,7 @@ export const Section = ({
{titleElement ?? <h2 className="text-lg leading-4 font-bold text-gray-900 dark:text-white">{title}</h2>}
<p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{description}</p>
</div>
<div className="flex-shrink-0">
<div className="shrink-0">
{rightSide ?? null}
</div>
</div>
@ -80,7 +80,7 @@ export const RowItem = ({
? (
<>
{typeof (value) === "string" ? (
<span className="px-1.5 py-1 bg-gray-200 dark:bg-gray-700 rounded shadow text-ellipsis leading-7">
<span className="px-1.5 py-1 bg-gray-200 dark:bg-gray-700 rounded-sm shadow-sm text-ellipsis leading-7">
{value}
</span>
) : value}