idanoo/autobrr
1
0
Fork 0
mirror of https://github.com/idanoo/autobrr synced 2025-07-22 16:29:12 +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

4
web/package.json
View file

@ -29,6 +29,7 @@
"@hookform/error-message": "^2.0.1", "@hookform/error-message": "^2.0.1",
"@popperjs/core": "^2.11.8", "@popperjs/core": "^2.11.8",
"@tailwindcss/forms": "^0.5.9", "@tailwindcss/forms": "^0.5.9",
"@tailwindcss/vite": "^4.0.0",
"@tanstack/react-query": "^5.62.11", "@tanstack/react-query": "^5.62.11",
"@tanstack/react-query-devtools": "^5.29.2", "@tanstack/react-query-devtools": "^5.29.2",
"@tanstack/react-router": "^1.92.13", "@tanstack/react-router": "^1.92.13",
@ -45,7 +46,6 @@
"formik": "^2.4.6", "formik": "^2.4.6",
"goober": "^2.1.16", "goober": "^2.1.16",
"http-proxy-middleware": "^3.0.3", "http-proxy-middleware": "^3.0.3",
"postcss": "^8.4.49",
"react": "^19.0.0", "react": "^19.0.0",
"react-debounce-input": "^3.3.0", "react-debounce-input": "^3.3.0",
"react-dom": "^19.0.0", "react-dom": "^19.0.0",
@ -57,7 +57,7 @@
"react-textarea-autosize": "^8.5.6", "react-textarea-autosize": "^8.5.6",
"stacktracey": "^2.1.8", "stacktracey": "^2.1.8",
"tailwind-lerp-colors": "1.2.6", "tailwind-lerp-colors": "1.2.6",
"tailwindcss": "^3.4.17", "tailwindcss": "^4.0.0",
"workbox-window": "^7.3.0", "workbox-window": "^7.3.0",
"zod": "^3.24.1", "zod": "^3.24.1",
"zod-formik-adapter": "^1.3.0" "zod-formik-adapter": "^1.3.0"

377
web/pnpm-lock.yaml generated
View file

@ -36,7 +36,10 @@ importers:
version: 2.11.8 version: 2.11.8
'@tailwindcss/forms': '@tailwindcss/forms':
specifier: ^0.5.9 specifier: ^0.5.9
version: 0.5.9(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.9.3(@swc/helpers@0.5.15))(@types/node@22.10.3)(typescript@5.7.2))) version: 0.5.9(tailwindcss@4.0.0)
'@tailwindcss/vite':
specifier: ^4.0.0
version: 4.0.0(vite@6.0.6(@types/node@22.10.3)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.37.0)(yaml@2.6.1))
'@tanstack/react-query': '@tanstack/react-query':
specifier: ^5.62.11 specifier: ^5.62.11
version: 5.62.11(react@19.0.0) version: 5.62.11(react@19.0.0)
@ -66,7 +69,7 @@ importers:
version: 8.19.0(eslint@8.57.1)(typescript@5.7.2) version: 8.19.0(eslint@8.57.1)(typescript@5.7.2)
'@vitejs/plugin-react-swc': '@vitejs/plugin-react-swc':
specifier: ^3.7.2 specifier: ^3.7.2
version: 3.7.2(@swc/helpers@0.5.15)(vite@6.0.6(@types/node@22.10.3)(jiti@1.21.7)(terser@5.37.0)(yaml@2.6.1)) version: 3.7.2(@swc/helpers@0.5.15)(vite@6.0.6(@types/node@22.10.3)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.37.0)(yaml@2.6.1))
autoprefixer: autoprefixer:
specifier: ^10.4.20 specifier: ^10.4.20
version: 10.4.20(postcss@8.4.49) version: 10.4.20(postcss@8.4.49)
@ -85,9 +88,6 @@ importers:
http-proxy-middleware: http-proxy-middleware:
specifier: ^3.0.3 specifier: ^3.0.3
version: 3.0.3 version: 3.0.3
postcss:
specifier: ^8.4.49
version: 8.4.49
react: react:
specifier: ^19.0.0 specifier: ^19.0.0
version: 19.0.0 version: 19.0.0
@ -122,8 +122,8 @@ importers:
specifier: 1.2.6 specifier: 1.2.6
version: 1.2.6(ts-node@10.9.2(@swc/core@1.9.3(@swc/helpers@0.5.15))(@types/node@22.10.3)(typescript@5.7.2)) version: 1.2.6(ts-node@10.9.2(@swc/core@1.9.3(@swc/helpers@0.5.15))(@types/node@22.10.3)(typescript@5.7.2))
tailwindcss: tailwindcss:
specifier: ^3.4.17 specifier: ^4.0.0
version: 3.4.17(ts-node@10.9.2(@swc/core@1.9.3(@swc/helpers@0.5.15))(@types/node@22.10.3)(typescript@5.7.2)) version: 4.0.0
workbox-window: workbox-window:
specifier: ^7.3.0 specifier: ^7.3.0
version: 7.3.0 version: 7.3.0
@ -169,13 +169,13 @@ importers:
version: 5.7.2 version: 5.7.2
vite: vite:
specifier: ^6.0.6 specifier: ^6.0.6
version: 6.0.6(@types/node@22.10.3)(jiti@1.21.7)(terser@5.37.0)(yaml@2.6.1) version: 6.0.6(@types/node@22.10.3)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.37.0)(yaml@2.6.1)
vite-plugin-pwa: vite-plugin-pwa:
specifier: ^0.21.1 specifier: ^0.21.1
version: 0.21.1(vite@6.0.6(@types/node@22.10.3)(jiti@1.21.7)(terser@5.37.0)(yaml@2.6.1))(workbox-build@7.0.0)(workbox-window@7.3.0) version: 0.21.1(vite@6.0.6(@types/node@22.10.3)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.37.0)(yaml@2.6.1))(workbox-build@7.0.0)(workbox-window@7.3.0)
vite-plugin-svgr: vite-plugin-svgr:
specifier: ^4.3.0 specifier: ^4.3.0
version: 4.3.0(@rollup/wasm-node@4.29.1)(typescript@5.7.2)(vite@6.0.6(@types/node@22.10.3)(jiti@1.21.7)(terser@5.37.0)(yaml@2.6.1)) version: 4.3.0(@rollup/wasm-node@4.31.0)(typescript@5.7.2)(vite@6.0.6(@types/node@22.10.3)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.37.0)(yaml@2.6.1))
packages: packages:
@ -1128,6 +1128,11 @@ packages:
engines: {node: '>=18.0.0', npm: '>=8.0.0'} engines: {node: '>=18.0.0', npm: '>=8.0.0'}
hasBin: true hasBin: true
'@rollup/wasm-node@4.31.0':
resolution: {integrity: sha512-4N3ttsYqUIjCVHXRZ/AMJoaEONWhXFop8h6tOkX+n+PyuYAZFp+QRNRfD+VAn5NmUnLzwwmT4GaKFu5RAQSEvg==}
engines: {node: '>=18.0.0', npm: '>=8.0.0'}
hasBin: true
'@rtsao/scc@1.1.0': '@rtsao/scc@1.1.0':
resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==} resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
@ -1285,6 +1290,84 @@ packages:
peerDependencies: peerDependencies:
tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20' tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20'
'@tailwindcss/node@4.0.0':
resolution: {integrity: sha512-tfG2uBvo6j6kDIPmntxwXggCOZAt7SkpAXJ6pTIYirNdk5FBqh/CZZ9BZPpgcl/tNFLs6zc4yghM76sqiELG9g==}
'@tailwindcss/oxide-android-arm64@4.0.0':
resolution: {integrity: sha512-EAhjU0+FIdyGPR+7MbBWubLLPtmOu+p7c2egTTFBRk/n//zYjNvVK0WhcBK5Y7oUB5mo4EjA2mCbY7dcEMWSRw==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [android]
'@tailwindcss/oxide-darwin-arm64@4.0.0':
resolution: {integrity: sha512-hdz4xnSWS11cIp+7ye+3dGHqs0X33z+BXXTtgPOguDWVa+TdXUzwxonklSzf5wlJFuot3dv5eWzhlNai0oYYQg==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [darwin]
'@tailwindcss/oxide-darwin-x64@4.0.0':
resolution: {integrity: sha512-+dOUUaXTkPKKhtUI9QtVaYg+MpmLh2CN0dHohiYXaBirEyPMkjaT0zbRgzQlNnQWjCVVXPQluIEb0OMEjSTH+Q==}
engines: {node: '>= 10'}
cpu: [x64]
os: [darwin]
'@tailwindcss/oxide-freebsd-x64@4.0.0':
resolution: {integrity: sha512-CJhGDhxnrmu4SwyC62fA+wP24MhA/TZlIhRHqg1kRuIHoGoVR2uSSm1qxTxU37tSSZj8Up0q6jsBJCAP4k7rgQ==}
engines: {node: '>= 10'}
cpu: [x64]
os: [freebsd]
'@tailwindcss/oxide-linux-arm-gnueabihf@4.0.0':
resolution: {integrity: sha512-Wy7Av0xzXfY2ujZBcYy4+7GQm25/J1iHvlQU2CfwdDCuPWfIjYzR6kggz+uVdSJyKV2s64znchBxRE8kV4uXSA==}
engines: {node: '>= 10'}
cpu: [arm]
os: [linux]
'@tailwindcss/oxide-linux-arm64-gnu@4.0.0':
resolution: {integrity: sha512-srwBo2l6pvM0swBntc1ucuhGsfFOLkqPRFQ3dWARRTfSkL1U9nAsob2MKc/n47Eva/W9pZZgMOuf7rDw8pK1Ew==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
'@tailwindcss/oxide-linux-arm64-musl@4.0.0':
resolution: {integrity: sha512-abhusswkduYWuezkBmgo0K0/erGq3M4Se5xP0fhc/0dKs0X/rJUYYCFWntHb3IGh3aVzdQ0SXJs93P76DbUqtw==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
'@tailwindcss/oxide-linux-x64-gnu@4.0.0':
resolution: {integrity: sha512-hGtRYIUEx377/HlU49+jvVKKwU1MDSKYSMMs0JFO2Wp7LGxk5+0j5+RBk9NFnmp/lbp32yPTgIOO5m1BmDq36A==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
'@tailwindcss/oxide-linux-x64-musl@4.0.0':
resolution: {integrity: sha512-7xgQgSAThs0I14VAgmxpJnK6XFSZBxHMGoDXkLyYkEnu+8WRQMbCP93dkCUn2PIv+Q+JulRgc00PJ09uORSLXQ==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
'@tailwindcss/oxide-win32-arm64-msvc@4.0.0':
resolution: {integrity: sha512-qEcgTIPcWY5ZE7f6VxQ/JPrSFMcehzVIlZj7sGE3mVd5YWreAT+Fl1vSP8q2pjnWXn0avZG3Iw7a2hJQAm+fTQ==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [win32]
'@tailwindcss/oxide-win32-x64-msvc@4.0.0':
resolution: {integrity: sha512-bqT0AY8RXb8GMDy28JtngvqaOSB2YixbLPLvUo6I6lkvvUwA6Eqh2Tj60e2Lh7O/k083f8tYiB0WEK4wmTI7Jg==}
engines: {node: '>= 10'}
cpu: [x64]
os: [win32]
'@tailwindcss/oxide@4.0.0':
resolution: {integrity: sha512-W3FjpJgy4VV1JiL7iBYDf2n/WkeDg1Il+0Q7eWnqPyvkPPCo/Mbwc5BiaT7dfBNV6tQKAhVE34rU5xl8pSl50w==}
engines: {node: '>= 10'}
'@tailwindcss/vite@4.0.0':
resolution: {integrity: sha512-4uukMiU9gHui8KMPMdWic5SP1O/tmQ1NFSRNrQWmcop5evAVl/LZ6/LuWL3quEiecp2RBcRWwqJrG+mFXlRlew==}
peerDependencies:
vite: ^5.2.0 || ^6
'@tanstack/history@1.90.0': '@tanstack/history@1.90.0':
resolution: {integrity: sha512-riNhDGm+fAwxgZRJ0J/36IZis1UDHsDCNIxfEodbw6BgTWJr0ah+G20V4HT91uBXiCqYFvX3somlfTLhS5yHDA==} resolution: {integrity: sha512-riNhDGm+fAwxgZRJ0J/36IZis1UDHsDCNIxfEodbw6BgTWJr0ah+G20V4HT91uBXiCqYFvX3somlfTLhS5yHDA==}
engines: {node: '>=12'} engines: {node: '>=12'}
@ -1868,6 +1951,11 @@ packages:
resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==} resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
engines: {node: '>= 0.4'} engines: {node: '>= 0.4'}
detect-libc@1.0.3:
resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==}
engines: {node: '>=0.10'}
hasBin: true
didyoumean@1.2.2: didyoumean@1.2.2:
resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==} resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
@ -1919,6 +2007,10 @@ packages:
emoji-regex@9.2.2: emoji-regex@9.2.2:
resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==} resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
enhanced-resolve@5.18.0:
resolution: {integrity: sha512-0/r0MySGYG8YqlayBZ6MuCfECmHFdJ5qyPh8s8wa5Hnm6SaFLSK1VYCbj+NKp090Nm1caZhD+QTnmxO7esYGyQ==}
engines: {node: '>=10.13.0'}
entities@4.5.0: entities@4.5.0:
resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==} resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
engines: {node: '>=0.12'} engines: {node: '>=0.12'}
@ -2550,6 +2642,10 @@ packages:
resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==} resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
hasBin: true hasBin: true
jiti@2.4.2:
resolution: {integrity: sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==}
hasBin: true
js-tokens@4.0.0: js-tokens@4.0.0:
resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==} resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
@ -2623,6 +2719,70 @@ packages:
resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==} resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
engines: {node: '>= 0.8.0'} engines: {node: '>= 0.8.0'}
lightningcss-darwin-arm64@1.29.1:
resolution: {integrity: sha512-HtR5XJ5A0lvCqYAoSv2QdZZyoHNttBpa5EP9aNuzBQeKGfbyH5+UipLWvVzpP4Uml5ej4BYs5I9Lco9u1fECqw==}
engines: {node: '>= 12.0.0'}
cpu: [arm64]
os: [darwin]
lightningcss-darwin-x64@1.29.1:
resolution: {integrity: sha512-k33G9IzKUpHy/J/3+9MCO4e+PzaFblsgBjSGlpAaFikeBFm8B/CkO3cKU9oI4g+fjS2KlkLM/Bza9K/aw8wsNA==}
engines: {node: '>= 12.0.0'}
cpu: [x64]
os: [darwin]
lightningcss-freebsd-x64@1.29.1:
resolution: {integrity: sha512-0SUW22fv/8kln2LnIdOCmSuXnxgxVC276W5KLTwoehiO0hxkacBxjHOL5EtHD8BAXg2BvuhsJPmVMasvby3LiQ==}
engines: {node: '>= 12.0.0'}
cpu: [x64]
os: [freebsd]
lightningcss-linux-arm-gnueabihf@1.29.1:
resolution: {integrity: sha512-sD32pFvlR0kDlqsOZmYqH/68SqUMPNj+0pucGxToXZi4XZgZmqeX/NkxNKCPsswAXU3UeYgDSpGhu05eAufjDg==}
engines: {node: '>= 12.0.0'}
cpu: [arm]
os: [linux]
lightningcss-linux-arm64-gnu@1.29.1:
resolution: {integrity: sha512-0+vClRIZ6mmJl/dxGuRsE197o1HDEeeRk6nzycSy2GofC2JsY4ifCRnvUWf/CUBQmlrvMzt6SMQNMSEu22csWQ==}
engines: {node: '>= 12.0.0'}
cpu: [arm64]
os: [linux]
lightningcss-linux-arm64-musl@1.29.1:
resolution: {integrity: sha512-UKMFrG4rL/uHNgelBsDwJcBqVpzNJbzsKkbI3Ja5fg00sgQnHw/VrzUTEc4jhZ+AN2BvQYz/tkHu4vt1kLuJyw==}
engines: {node: '>= 12.0.0'}
cpu: [arm64]
os: [linux]
lightningcss-linux-x64-gnu@1.29.1:
resolution: {integrity: sha512-u1S+xdODy/eEtjADqirA774y3jLcm8RPtYztwReEXoZKdzgsHYPl0s5V52Tst+GKzqjebkULT86XMSxejzfISw==}
engines: {node: '>= 12.0.0'}
cpu: [x64]
os: [linux]
lightningcss-linux-x64-musl@1.29.1:
resolution: {integrity: sha512-L0Tx0DtaNUTzXv0lbGCLB/c/qEADanHbu4QdcNOXLIe1i8i22rZRpbT3gpWYsCh9aSL9zFujY/WmEXIatWvXbw==}
engines: {node: '>= 12.0.0'}
cpu: [x64]
os: [linux]
lightningcss-win32-arm64-msvc@1.29.1:
resolution: {integrity: sha512-QoOVnkIEFfbW4xPi+dpdft/zAKmgLgsRHfJalEPYuJDOWf7cLQzYg0DEh8/sn737FaeMJxHZRc1oBreiwZCjog==}
engines: {node: '>= 12.0.0'}
cpu: [arm64]
os: [win32]
lightningcss-win32-x64-msvc@1.29.1:
resolution: {integrity: sha512-NygcbThNBe4JElP+olyTI/doBNGJvLs3bFCRPdvuCcxZCcCZ71B858IHpdm7L1btZex0FvCmM17FK98Y9MRy1Q==}
engines: {node: '>= 12.0.0'}
cpu: [x64]
os: [win32]
lightningcss@1.29.1:
resolution: {integrity: sha512-FmGoeD4S05ewj+AkhTY+D+myDvXI6eL27FjHIjoyUkO/uw7WZD1fBVs0QxeYWa7E17CUHJaYX/RUGISCtcrG4Q==}
engines: {node: '>= 12.0.0'}
lilconfig@3.1.3: lilconfig@3.1.3:
resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==} resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
engines: {node: '>=14'} engines: {node: '>=14'}
@ -3304,6 +3464,13 @@ packages:
engines: {node: '>=14.0.0'} engines: {node: '>=14.0.0'}
hasBin: true hasBin: true
tailwindcss@4.0.0:
resolution: {integrity: sha512-ULRPI3A+e39T7pSaf1xoi58AqqJxVCLg8F/uM5A3FadUbnyDTgltVnXJvdkTjwCOGA6NazqHVcwPJC5h2vRYVQ==}
tapable@2.2.1:
resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
engines: {node: '>=6'}
temp-dir@2.0.0: temp-dir@2.0.0:
resolution: {integrity: sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==} resolution: {integrity: sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==}
engines: {node: '>=8'} engines: {node: '>=8'}
@ -4750,45 +4917,45 @@ snapshots:
dependencies: dependencies:
react: 19.0.0 react: 19.0.0
'@rollup/plugin-babel@5.3.1(@babel/core@7.26.0)(@rollup/wasm-node@4.29.1)': '@rollup/plugin-babel@5.3.1(@babel/core@7.26.0)(@rollup/wasm-node@4.31.0)':
dependencies: dependencies:
'@babel/core': 7.26.0 '@babel/core': 7.26.0
'@babel/helper-module-imports': 7.25.9 '@babel/helper-module-imports': 7.25.9
'@rollup/pluginutils': 3.1.0(@rollup/wasm-node@4.29.1) '@rollup/pluginutils': 3.1.0(@rollup/wasm-node@4.31.0)
rollup: '@rollup/wasm-node@4.29.1' rollup: '@rollup/wasm-node@4.31.0'
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
'@rollup/plugin-node-resolve@11.2.1(@rollup/wasm-node@4.29.1)': '@rollup/plugin-node-resolve@11.2.1(@rollup/wasm-node@4.31.0)':
dependencies: dependencies:
'@rollup/pluginutils': 3.1.0(@rollup/wasm-node@4.29.1) '@rollup/pluginutils': 3.1.0(@rollup/wasm-node@4.31.0)
'@types/resolve': 1.17.1 '@types/resolve': 1.17.1
builtin-modules: 3.3.0 builtin-modules: 3.3.0
deepmerge: 4.3.1 deepmerge: 4.3.1
is-module: 1.0.0 is-module: 1.0.0
resolve: 1.22.10 resolve: 1.22.10
rollup: '@rollup/wasm-node@4.29.1' rollup: '@rollup/wasm-node@4.31.0'
'@rollup/plugin-replace@2.4.2(@rollup/wasm-node@4.29.1)': '@rollup/plugin-replace@2.4.2(@rollup/wasm-node@4.31.0)':
dependencies: dependencies:
'@rollup/pluginutils': 3.1.0(@rollup/wasm-node@4.29.1) '@rollup/pluginutils': 3.1.0(@rollup/wasm-node@4.31.0)
magic-string: 0.25.9 magic-string: 0.25.9
rollup: '@rollup/wasm-node@4.29.1' rollup: '@rollup/wasm-node@4.31.0'
'@rollup/pluginutils@3.1.0(@rollup/wasm-node@4.29.1)': '@rollup/pluginutils@3.1.0(@rollup/wasm-node@4.31.0)':
dependencies: dependencies:
'@types/estree': 0.0.39 '@types/estree': 0.0.39
estree-walker: 1.0.1 estree-walker: 1.0.1
picomatch: 2.3.1 picomatch: 2.3.1
rollup: '@rollup/wasm-node@4.29.1' rollup: '@rollup/wasm-node@4.31.0'
'@rollup/pluginutils@5.1.3(@rollup/wasm-node@4.29.1)': '@rollup/pluginutils@5.1.3(@rollup/wasm-node@4.31.0)':
dependencies: dependencies:
'@types/estree': 1.0.6 '@types/estree': 1.0.6
estree-walker: 2.0.2 estree-walker: 2.0.2
picomatch: 4.0.2 picomatch: 4.0.2
optionalDependencies: optionalDependencies:
rollup: '@rollup/wasm-node@4.29.1' rollup: '@rollup/wasm-node@4.31.0'
'@rollup/wasm-node@4.29.1': '@rollup/wasm-node@4.29.1':
dependencies: dependencies:
@ -4796,6 +4963,12 @@ snapshots:
optionalDependencies: optionalDependencies:
fsevents: 2.3.3 fsevents: 2.3.3
'@rollup/wasm-node@4.31.0':
dependencies:
'@types/estree': 1.0.6
optionalDependencies:
fsevents: 2.3.3
'@rtsao/scc@1.1.0': {} '@rtsao/scc@1.1.0': {}
'@surma/rollup-plugin-off-main-thread@2.2.3': '@surma/rollup-plugin-off-main-thread@2.2.3':
@ -4932,10 +5105,71 @@ snapshots:
dependencies: dependencies:
'@swc/counter': 0.1.3 '@swc/counter': 0.1.3
'@tailwindcss/forms@0.5.9(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.9.3(@swc/helpers@0.5.15))(@types/node@22.10.3)(typescript@5.7.2)))': '@tailwindcss/forms@0.5.9(tailwindcss@4.0.0)':
dependencies: dependencies:
mini-svg-data-uri: 1.4.4 mini-svg-data-uri: 1.4.4
tailwindcss: 3.4.17(ts-node@10.9.2(@swc/core@1.9.3(@swc/helpers@0.5.15))(@types/node@22.10.3)(typescript@5.7.2)) tailwindcss: 4.0.0
'@tailwindcss/node@4.0.0':
dependencies:
enhanced-resolve: 5.18.0
jiti: 2.4.2
tailwindcss: 4.0.0
'@tailwindcss/oxide-android-arm64@4.0.0':
optional: true
'@tailwindcss/oxide-darwin-arm64@4.0.0':
optional: true
'@tailwindcss/oxide-darwin-x64@4.0.0':
optional: true
'@tailwindcss/oxide-freebsd-x64@4.0.0':
optional: true
'@tailwindcss/oxide-linux-arm-gnueabihf@4.0.0':
optional: true
'@tailwindcss/oxide-linux-arm64-gnu@4.0.0':
optional: true
'@tailwindcss/oxide-linux-arm64-musl@4.0.0':
optional: true
'@tailwindcss/oxide-linux-x64-gnu@4.0.0':
optional: true
'@tailwindcss/oxide-linux-x64-musl@4.0.0':
optional: true
'@tailwindcss/oxide-win32-arm64-msvc@4.0.0':
optional: true
'@tailwindcss/oxide-win32-x64-msvc@4.0.0':
optional: true
'@tailwindcss/oxide@4.0.0':
optionalDependencies:
'@tailwindcss/oxide-android-arm64': 4.0.0
'@tailwindcss/oxide-darwin-arm64': 4.0.0
'@tailwindcss/oxide-darwin-x64': 4.0.0
'@tailwindcss/oxide-freebsd-x64': 4.0.0
'@tailwindcss/oxide-linux-arm-gnueabihf': 4.0.0
'@tailwindcss/oxide-linux-arm64-gnu': 4.0.0
'@tailwindcss/oxide-linux-arm64-musl': 4.0.0
'@tailwindcss/oxide-linux-x64-gnu': 4.0.0
'@tailwindcss/oxide-linux-x64-musl': 4.0.0
'@tailwindcss/oxide-win32-arm64-msvc': 4.0.0
'@tailwindcss/oxide-win32-x64-msvc': 4.0.0
'@tailwindcss/vite@4.0.0(vite@6.0.6(@types/node@22.10.3)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.37.0)(yaml@2.6.1))':
dependencies:
'@tailwindcss/node': 4.0.0
'@tailwindcss/oxide': 4.0.0
lightningcss: 1.29.1
tailwindcss: 4.0.0
vite: 6.0.6(@types/node@22.10.3)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.37.0)(yaml@2.6.1)
'@tanstack/history@1.90.0': {} '@tanstack/history@1.90.0': {}
@ -5132,10 +5366,10 @@ snapshots:
'@ungap/structured-clone@1.2.0': {} '@ungap/structured-clone@1.2.0': {}
'@vitejs/plugin-react-swc@3.7.2(@swc/helpers@0.5.15)(vite@6.0.6(@types/node@22.10.3)(jiti@1.21.7)(terser@5.37.0)(yaml@2.6.1))': '@vitejs/plugin-react-swc@3.7.2(@swc/helpers@0.5.15)(vite@6.0.6(@types/node@22.10.3)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.37.0)(yaml@2.6.1))':
dependencies: dependencies:
'@swc/core': 1.9.3(@swc/helpers@0.5.15) '@swc/core': 1.9.3(@swc/helpers@0.5.15)
vite: 6.0.6(@types/node@22.10.3)(jiti@1.21.7)(terser@5.37.0)(yaml@2.6.1) vite: 6.0.6(@types/node@22.10.3)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.37.0)(yaml@2.6.1)
transitivePeerDependencies: transitivePeerDependencies:
- '@swc/helpers' - '@swc/helpers'
@ -5590,6 +5824,8 @@ snapshots:
has-property-descriptors: 1.0.2 has-property-descriptors: 1.0.2
object-keys: 1.1.1 object-keys: 1.1.1
detect-libc@1.0.3: {}
didyoumean@1.2.2: {} didyoumean@1.2.2: {}
diff@4.0.2: {} diff@4.0.2: {}
@ -5636,6 +5872,11 @@ snapshots:
emoji-regex@9.2.2: {} emoji-regex@9.2.2: {}
enhanced-resolve@5.18.0:
dependencies:
graceful-fs: 4.2.11
tapable: 2.2.1
entities@4.5.0: {} entities@4.5.0: {}
error-ex@1.3.2: error-ex@1.3.2:
@ -6490,6 +6731,8 @@ snapshots:
jiti@1.21.7: {} jiti@1.21.7: {}
jiti@2.4.2: {}
js-tokens@4.0.0: {} js-tokens@4.0.0: {}
js-yaml@4.1.0: js-yaml@4.1.0:
@ -6548,6 +6791,51 @@ snapshots:
prelude-ls: 1.2.1 prelude-ls: 1.2.1
type-check: 0.4.0 type-check: 0.4.0
lightningcss-darwin-arm64@1.29.1:
optional: true
lightningcss-darwin-x64@1.29.1:
optional: true
lightningcss-freebsd-x64@1.29.1:
optional: true
lightningcss-linux-arm-gnueabihf@1.29.1:
optional: true
lightningcss-linux-arm64-gnu@1.29.1:
optional: true
lightningcss-linux-arm64-musl@1.29.1:
optional: true
lightningcss-linux-x64-gnu@1.29.1:
optional: true
lightningcss-linux-x64-musl@1.29.1:
optional: true
lightningcss-win32-arm64-msvc@1.29.1:
optional: true
lightningcss-win32-x64-msvc@1.29.1:
optional: true
lightningcss@1.29.1:
dependencies:
detect-libc: 1.0.3
optionalDependencies:
lightningcss-darwin-arm64: 1.29.1
lightningcss-darwin-x64: 1.29.1
lightningcss-freebsd-x64: 1.29.1
lightningcss-linux-arm-gnueabihf: 1.29.1
lightningcss-linux-arm64-gnu: 1.29.1
lightningcss-linux-arm64-musl: 1.29.1
lightningcss-linux-x64-gnu: 1.29.1
lightningcss-linux-x64-musl: 1.29.1
lightningcss-win32-arm64-msvc: 1.29.1
lightningcss-win32-x64-msvc: 1.29.1
lilconfig@3.1.3: {} lilconfig@3.1.3: {}
lines-and-columns@1.2.4: {} lines-and-columns@1.2.4: {}
@ -7015,11 +7303,11 @@ snapshots:
dependencies: dependencies:
glob: 7.2.3 glob: 7.2.3
rollup-plugin-terser@7.0.2(@rollup/wasm-node@4.29.1): rollup-plugin-terser@7.0.2(@rollup/wasm-node@4.31.0):
dependencies: dependencies:
'@babel/code-frame': 7.26.2 '@babel/code-frame': 7.26.2
jest-worker: 26.6.2 jest-worker: 26.6.2
rollup: '@rollup/wasm-node@4.29.1' rollup: '@rollup/wasm-node@4.31.0'
serialize-javascript: 4.0.0 serialize-javascript: 4.0.0
terser: 5.37.0 terser: 5.37.0
@ -7292,6 +7580,10 @@ snapshots:
transitivePeerDependencies: transitivePeerDependencies:
- ts-node - ts-node
tailwindcss@4.0.0: {}
tapable@2.2.1: {}
temp-dir@2.0.0: {} temp-dir@2.0.0: {}
tempy@0.6.0: tempy@0.6.0:
@ -7525,37 +7817,38 @@ snapshots:
v8-compile-cache-lib@3.0.1: {} v8-compile-cache-lib@3.0.1: {}
vite-plugin-pwa@0.21.1(vite@6.0.6(@types/node@22.10.3)(jiti@1.21.7)(terser@5.37.0)(yaml@2.6.1))(workbox-build@7.0.0)(workbox-window@7.3.0): vite-plugin-pwa@0.21.1(vite@6.0.6(@types/node@22.10.3)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.37.0)(yaml@2.6.1))(workbox-build@7.0.0)(workbox-window@7.3.0):
dependencies: dependencies:
debug: 4.4.0 debug: 4.4.0
pretty-bytes: 6.1.1 pretty-bytes: 6.1.1
tinyglobby: 0.2.10 tinyglobby: 0.2.10
vite: 6.0.6(@types/node@22.10.3)(jiti@1.21.7)(terser@5.37.0)(yaml@2.6.1) vite: 6.0.6(@types/node@22.10.3)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.37.0)(yaml@2.6.1)
workbox-build: 7.0.0 workbox-build: 7.0.0
workbox-window: 7.3.0 workbox-window: 7.3.0
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
vite-plugin-svgr@4.3.0(@rollup/wasm-node@4.29.1)(typescript@5.7.2)(vite@6.0.6(@types/node@22.10.3)(jiti@1.21.7)(terser@5.37.0)(yaml@2.6.1)): vite-plugin-svgr@4.3.0(@rollup/wasm-node@4.31.0)(typescript@5.7.2)(vite@6.0.6(@types/node@22.10.3)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.37.0)(yaml@2.6.1)):
dependencies: dependencies:
'@rollup/pluginutils': 5.1.3(@rollup/wasm-node@4.29.1) '@rollup/pluginutils': 5.1.3(@rollup/wasm-node@4.31.0)
'@svgr/core': 8.1.0(typescript@5.7.2) '@svgr/core': 8.1.0(typescript@5.7.2)
'@svgr/plugin-jsx': 8.1.0(@svgr/core@8.1.0(typescript@5.7.2)) '@svgr/plugin-jsx': 8.1.0(@svgr/core@8.1.0(typescript@5.7.2))
vite: 6.0.6(@types/node@22.10.3)(jiti@1.21.7)(terser@5.37.0)(yaml@2.6.1) vite: 6.0.6(@types/node@22.10.3)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.37.0)(yaml@2.6.1)
transitivePeerDependencies: transitivePeerDependencies:
- rollup - rollup
- supports-color - supports-color
- typescript - typescript
vite@6.0.6(@types/node@22.10.3)(jiti@1.21.7)(terser@5.37.0)(yaml@2.6.1): vite@6.0.6(@types/node@22.10.3)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.37.0)(yaml@2.6.1):
dependencies: dependencies:
esbuild: 0.24.2 esbuild: 0.24.2
postcss: 8.4.49 postcss: 8.4.49
rollup: '@rollup/wasm-node@4.29.1' rollup: '@rollup/wasm-node@4.31.0'
optionalDependencies: optionalDependencies:
'@types/node': 22.10.3 '@types/node': 22.10.3
fsevents: 2.3.3 fsevents: 2.3.3
jiti: 1.21.7 jiti: 2.4.2
lightningcss: 1.29.1
terser: 5.37.0 terser: 5.37.0
yaml: 2.6.1 yaml: 2.6.1
@ -7648,9 +7941,9 @@ snapshots:
'@babel/core': 7.26.0 '@babel/core': 7.26.0
'@babel/preset-env': 7.26.0(@babel/core@7.26.0) '@babel/preset-env': 7.26.0(@babel/core@7.26.0)
'@babel/runtime': 7.26.0 '@babel/runtime': 7.26.0
'@rollup/plugin-babel': 5.3.1(@babel/core@7.26.0)(@rollup/wasm-node@4.29.1) '@rollup/plugin-babel': 5.3.1(@babel/core@7.26.0)(@rollup/wasm-node@4.31.0)
'@rollup/plugin-node-resolve': 11.2.1(@rollup/wasm-node@4.29.1) '@rollup/plugin-node-resolve': 11.2.1(@rollup/wasm-node@4.31.0)
'@rollup/plugin-replace': 2.4.2(@rollup/wasm-node@4.29.1) '@rollup/plugin-replace': 2.4.2(@rollup/wasm-node@4.31.0)
'@surma/rollup-plugin-off-main-thread': 2.2.3 '@surma/rollup-plugin-off-main-thread': 2.2.3
ajv: 8.17.1 ajv: 8.17.1
common-tags: 1.8.2 common-tags: 1.8.2
@ -7659,8 +7952,8 @@ snapshots:
glob: 7.2.3 glob: 7.2.3
lodash: 4.17.21 lodash: 4.17.21
pretty-bytes: 5.6.0 pretty-bytes: 5.6.0
rollup: '@rollup/wasm-node@4.29.1' rollup: '@rollup/wasm-node@4.31.0'
rollup-plugin-terser: 7.0.2(@rollup/wasm-node@4.29.1) rollup-plugin-terser: 7.0.2(@rollup/wasm-node@4.31.0)
source-map: 0.8.0-beta.0 source-map: 0.8.0-beta.0
stringify-object: 3.3.0 stringify-object: 3.3.0
strip-comments: 2.0.1 strip-comments: 2.0.1

7
web/postcss.config.cjs
View file

@ -1,7 +0,0 @@
module.exports = {
plugins: {
"tailwindcss/nesting": {},
tailwindcss: {},
autoprefixer: {},
},
};

2
web/src/components/Checkbox.tsx
View file

@ -65,7 +65,7 @@ export const Checkbox = ({
className={classNames( className={classNames(
value ? "translate-x-6" : "translate-x-[0.15rem]", value ? "translate-x-6" : "translate-x-[0.15rem]",
disabled ? "bg-gray-650 dark:bg-gray-800" : "bg-white", disabled ? "bg-gray-650 dark:bg-gray-800" : "bg-white",
"inline-flex items-center align-center h-4 w-4 transform rounded-full transition ring-0 shadow" "inline-flex items-center align-center h-4 w-4 transform rounded-full transition ring-0 shadow-sm"
)} )}
> >
{value {value

8
web/src/components/alerts/ErrorPage.tsx
View file

@ -38,7 +38,7 @@ export const ErrorPage = ({ error, reset }: ErrorPageProps) => {
return ( return (
<div className="min-h-screen flex flex-col justify-center py-12 px-2 sm:px-6 lg:px-8"> <div className="min-h-screen flex flex-col justify-center py-12 px-2 sm:px-6 lg:px-8">
<div className="sm:mx-auto sm:w-full sm:max-w-screen-md md:max-w-screen-lg lg:max-w-screen-xl"> <div className="sm:mx-auto sm:w-full sm:max-w-(--breakpoint-md) md:max-w-(--breakpoint-lg) lg:max-w-(--breakpoint-xl)">
<h1 className="text-3xl font-bold leading-6 text-gray-900 dark:text-gray-200 mt-4 mb-3"> <h1 className="text-3xl font-bold leading-6 text-gray-900 dark:text-gray-200 mt-4 mb-3">
{pageTitle} {pageTitle}
</h1> </h1>
@ -47,14 +47,14 @@ export const ErrorPage = ({ error, reset }: ErrorPageProps) => {
{" "} {" "}
<ExternalLink <ExternalLink
href="https://github.com/autobrr/autobrr" 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 GitHub page
</ExternalLink> </ExternalLink>
{" or to "} {" or to "}
<ExternalLink <ExternalLink
href="https://discord.gg/WQ2eUycxyT" 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 our official Discord channel
</ExternalLink> </ExternalLink>
@ -87,7 +87,7 @@ export const ErrorPage = ({ error, reset }: ErrorPageProps) => {
</span> </span>
<button <button
type="button" type="button"
className="text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-red-800 dark:hover:bg-red-900" className="text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:outline-hidden focus:ring-red-300 font-medium rounded-lg text-sm px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-red-800 dark:hover:bg-red-900"
onClick={(event) => { onClick={(event) => {
event.preventDefault(); event.preventDefault();
reset(); reset();

6
web/src/components/alerts/NotFound.tsx
View file

@ -28,14 +28,14 @@ export const NotFound = () => {
{" "} {" "}
<ExternalLink <ExternalLink
href="https://github.com/autobrr/autobrr" 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 GitHub page
</ExternalLink> </ExternalLink>
{" or to "} {" or to "}
<ExternalLink <ExternalLink
href="https://discord.gg/WQ2eUycxyT" 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 our official Discord channel
</ExternalLink> </ExternalLink>
@ -47,7 +47,7 @@ export const NotFound = () => {
<div className="flex justify-center"> <div className="flex justify-center">
<Link to="/"> <Link to="/">
<button <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 Dashboard Back to Dashboard
</button> </button>

2
web/src/components/alerts/Warning.tsx
View file

@ -20,7 +20,7 @@ export const WarningAlert = ({ text, alert, colors, className }: WarningAlertPro
colors ?? "text-amber-800 bg-amber-100 border border-amber-700 dark:border-none dark:bg-amber-200 dark:text-amber-800" colors ?? "text-amber-800 bg-amber-100 border border-amber-700 dark:border-none dark:bg-amber-200 dark:text-amber-800"
)} )}
role="alert"> role="alert">
<svg aria-hidden="true" className="flex-shrink-0 inline w-5 h-5 mr-3" fill="currentColor" <svg aria-hidden="true" className="shrink-0 inline w-5 h-5 mr-3" fill="currentColor"
viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" <path fillRule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"

4
web/src/components/data-table/Cells.tsx
View file

@ -179,7 +179,7 @@ const RetryActionButton = ({ status }: RetryActionButtonProps) => {
}; };
return ( return (
<button className="flex items-center px-1.5 py-1 ml-2 rounded transition border-gray-500 bg-gray-250 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600" onClick={replayAction}> <button className="flex items-center px-1.5 py-1 ml-2 rounded-sm transition border-gray-500 bg-gray-250 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600" onClick={replayAction}>
<span className="mr-1.5">Retry</span> <span className="mr-1.5">Retry</span>
{mutation.isPending {mutation.isPending
? <RingResizeSpinner className="text-blue-500 w-4 h-4 iconHeight" aria-hidden="true" /> ? <RingResizeSpinner className="text-blue-500 w-4 h-4 iconHeight" aria-hidden="true" />
@ -299,7 +299,7 @@ export const ReleaseStatusCell = ({ row }: CellContext<Release, unknown>) => (
key={idx} key={idx}
className={classNames( className={classNames(
StatusCellMap[v.status].colors, StatusCellMap[v.status].colors,
"mr-1 inline-flex items-center rounded text-xs cursor-pointer" "mr-1 inline-flex items-center rounded-sm text-xs cursor-pointer"
)} )}
> >
<Tooltip <Tooltip

4
web/src/components/emptystates/index.tsx
View file

@ -28,7 +28,7 @@ export const EmptySimple = ({
<button <button
type="button" type="button"
onClick={buttonAction} onClick={buttonAction}
className="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="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="-ml-1 mr-2 h-5 w-5" aria-hidden="true" /> <PlusIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
{buttonText} {buttonText}
@ -51,7 +51,7 @@ export function EmptyListState({ text, buttonText, buttonOnClick }: EmptyListSta
{buttonText && buttonOnClick && ( {buttonText && buttonOnClick && (
<button <button
type="button" type="button"
className="relative inline-flex items-center px-4 py-2 mt-4 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 mt-4 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={buttonOnClick} onClick={buttonOnClick}
> >
{buttonText} {buttonText}

10
web/src/components/fields/text.tsx
View file

@ -60,19 +60,19 @@ export const KeyField = ({ value }: KeyFieldProps) => {
return ( return (
<div className="sm:col-span-2 w-full"> <div className="sm:col-span-2 w-full">
<div className="flex rounded-md shadow-sm"> <div className="flex rounded-md shadow-xs">
<div className="relative flex items-stretch flex-grow focus-within:z-10"> <div className="relative flex items-stretch grow focus-within:z-10">
<input <input
id="keyfield" id="keyfield"
type={isVisible ? "text" : "password"} type={isVisible ? "text" : "password"}
value={value} value={value}
readOnly={true} readOnly={true}
className="focus:outline-none dark:focus:border-blue-500 focus:border-blue-500 dark:focus:ring-blue-500 block w-full rounded-none rounded-l-md sm:text-sm border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-gray-100" className="focus:outline-hidden dark:focus:border-blue-500 focus:border-blue-500 dark:focus:ring-blue-500 block w-full rounded-none rounded-l-md sm:text-sm border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-gray-100"
/> />
</div> </div>
<button <button
type="button" type="button"
className="-ml-px relative inline-flex items-center space-x-2 px-4 py-2 border border-gray-300 dark:border-gray-700 hover:bg-gray-100 text-sm font-medium text-gray-700 bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 focus:outline-none" className="-ml-px relative inline-flex items-center space-x-2 px-4 py-2 border border-gray-300 dark:border-gray-700 hover:bg-gray-100 text-sm font-medium text-gray-700 bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 focus:outline-hidden"
onClick={toggleVisibility} onClick={toggleVisibility}
title="show" title="show"
> >
@ -80,7 +80,7 @@ export const KeyField = ({ value }: KeyFieldProps) => {
</button> </button>
<button <button
type="button" type="button"
className="-ml-px relative inline-flex items-center space-x-2 px-4 py-2 border border-gray-300 dark:border-gray-700 hover:bg-gray-100 text-sm font-medium rounded-r-md text-gray-700 dark:text-gray-100 bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 focus:outline-none" className="-ml-px relative inline-flex items-center space-x-2 px-4 py-2 border border-gray-300 dark:border-gray-700 hover:bg-gray-100 text-sm font-medium rounded-r-md text-gray-700 dark:text-gray-100 bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 focus:outline-hidden"
onClick={handleCopyClick} onClick={handleCopyClick}
title="Copy to clipboard" title="Copy to clipboard"
> >

6
web/src/components/header/Header.tsx
View file

@ -51,11 +51,11 @@ export const Header = () => {
return ( return (
<Disclosure <Disclosure
as="nav" as="nav"
className="bg-gradient-to-b from-gray-100 dark:from-gray-925" className="bg-linear-to-b from-gray-100 dark:from-gray-925"
> >
{({ open }) => ( {({ open }) => (
<> <>
<div className="max-w-screen-xl mx-auto sm:px-6 lg:px-8"> <div className="max-w-(--breakpoint-xl) mx-auto sm:px-6 lg:px-8">
<div className="border-b border-gray-300 dark:border-gray-775"> <div className="border-b border-gray-300 dark:border-gray-775">
<div className="flex items-center justify-between h-16 px-4 sm:px-0"> <div className="flex items-center justify-between h-16 px-4 sm:px-0">
<LeftNav /> <LeftNav />
@ -82,7 +82,7 @@ export const Header = () => {
{data?.html_url && ( {data?.html_url && (
<ExternalLink href={data.html_url}> <ExternalLink href={data.html_url}>
<div className="flex mt-4 py-2 bg-blue-500 rounded justify-center"> <div className="flex mt-4 py-2 bg-blue-500 rounded-sm justify-center">
<MegaphoneIcon className="h-6 w-6 text-blue-100" /> <MegaphoneIcon className="h-6 w-6 text-blue-100" />
<span className="text-blue-100 font-medium mx-3">New update available!</span> <span className="text-blue-100 font-medium mx-3">New update available!</span>
<span className="inline-flex items-center rounded-md bg-blue-100 px-2.5 py-0.5 text-sm font-medium text-blue-800">{data?.name}</span> <span className="inline-flex items-center rounded-md bg-blue-100 px-2.5 py-0.5 text-sm font-medium text-blue-800">{data?.name}</span>

2
web/src/components/header/LeftNav.tsx
View file

@ -18,7 +18,7 @@ import Logo from "@app/logo.svg?react";
export const LeftNav = () => ( export const LeftNav = () => (
<div className="flex items-center"> <div className="flex items-center">
<div className="flex-shrink-0 flex items-center"> <div className="shrink-0 flex items-center">
<Link to="/"> <Link to="/">
<Logo className="h-10" /> <Logo className="h-10" />
</Link> </Link>

4
web/src/components/header/MobileNav.tsx
View file

@ -26,7 +26,7 @@ export const MobileNav = (props: RightNavProps) => (
return ( return (
<span className={ <span className={
classNames( classNames(
"shadow-sm border bg-gray-100 border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white block px-3 py-2 rounded-md text-base", "shadow-xs border bg-gray-100 border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white block px-3 py-2 rounded-md text-base",
isActive isActive
? "underline underline-offset-2 decoration-2 decoration-sky-500 font-bold text-black" ? "underline underline-offset-2 decoration-2 decoration-sky-500 font-bold text-black"
: "font-medium" : "font-medium"
@ -43,7 +43,7 @@ export const MobileNav = (props: RightNavProps) => (
e.preventDefault(); e.preventDefault();
props.logoutMutation(); props.logoutMutation();
}} }}
className="w-full shadow-sm border bg-gray-100 border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white block px-3 py-2 rounded-md text-base font-medium text-left" className="w-full shadow-xs border bg-gray-100 border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white block px-3 py-2 rounded-md text-base font-medium text-left"
> >
Logout Logout
</button> </button>

4
web/src/components/header/RightNav.tsx
View file

@ -35,7 +35,7 @@ export const RightNav = (props: RightNavProps) => {
<div className="mt-1 items-center"> <div className="mt-1 items-center">
<button <button
onClick={toggleTheme} onClick={toggleTheme}
className="p-1 rounded-full focus:outline-none focus:none transition duration-100 ease-out transform hover:bg-gray-200 dark:hover:bg-gray-800 hover:scale-100" className="p-1 rounded-full focus:outline-hidden focus:none transition duration-100 ease-out transform hover:bg-gray-200 dark:hover:bg-gray-800 hover:scale-100"
title={settings.darkTheme ? "Switch to light mode (currently dark mode)" : "Switch to dark mode (currently light mode)"} title={settings.darkTheme ? "Switch to light mode (currently dark mode)" : "Switch to dark mode (currently light mode)"}
> >
{settings.darkTheme ? ( {settings.darkTheme ? (
@ -89,7 +89,7 @@ export const RightNav = (props: RightNavProps) => {
> >
<MenuItems <MenuItems
static static
className="origin-top-right absolute right-0 mt-2 w-48 z-10 divide-y divide-gray-100 dark:divide-gray-750 rounded-md shadow-lg bg-white dark:bg-gray-800 border border-gray-250 dark:border-gray-775 focus:outline-none" className="origin-top-right absolute right-0 mt-2 w-48 z-10 divide-y divide-gray-100 dark:divide-gray-750 rounded-md shadow-lg bg-white dark:bg-gray-800 border border-gray-250 dark:border-gray-775 focus:outline-hidden"
> >
<MenuItem> <MenuItem>
{({ active }) => ( {({ active }) => (

16
web/src/components/inputs/common.tsx
View file

@ -42,8 +42,8 @@ export const RequiredField = ({ required }: RequiredFieldProps) => (
export const SelectInput = (props: InputProps) => ( export const SelectInput = (props: InputProps) => (
<components.Input <components.Input
{...props} {...props}
inputClassName="outline-none border-none shadow-none focus:ring-transparent" inputClassName="outline-hidden border-none shadow-none focus:ring-transparent"
className="text-gray-400 dark:text-gray-100" className="text-gray-400! dark:text-gray-100!"
children={props.children} children={props.children}
/> />
); );
@ -51,7 +51,7 @@ export const SelectInput = (props: InputProps) => (
export const SelectControl = (props: ControlProps) => ( export const SelectControl = (props: ControlProps) => (
<components.Control <components.Control
{...props} {...props}
className="p-1 block w-full !bg-gray-100 dark:!bg-gray-850 border border-gray-300 dark:border-gray-700 dark:hover:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:text-gray-100 sm:text-sm" className="p-1 block w-full bg-gray-100! dark:bg-gray-850! border border-gray-300 dark:border-gray-700! dark:hover:border-gray-600 rounded-md shadow-xs focus:outline-hidden focus:ring-blue-500 focus:border-blue-500 dark:text-gray-100 sm:text-sm"
children={props.children} children={props.children}
/> />
); );
@ -59,7 +59,7 @@ export const SelectControl = (props: ControlProps) => (
export const SelectMenu = (props: MenuProps) => ( export const SelectMenu = (props: MenuProps) => (
<components.Menu <components.Menu
{...props} {...props}
className="dark:bg-gray-800 border border-gray-300 dark:border-gray-700 dark:text-gray-400 rounded-md shadow-sm cursor-pointer" className="dark:bg-gray-800! border border-gray-300 dark:border-gray-700 dark:text-gray-400 rounded-md shadow-xs cursor-pointer"
children={props.children} children={props.children}
/> />
); );
@ -68,8 +68,8 @@ export const SelectOption = (props: OptionProps) => (
<components.Option <components.Option
{...props} {...props}
className={classNames( className={classNames(
"transition dark:hover:bg-gray-900 dark:focus:bg-gray-900", "transition dark:hover:bg-gray-900! dark:focus:bg-gray-900!",
props.isSelected ? "dark:bg-gray-875 dark:text-gray-200" : "dark:bg-gray-800 dark:text-gray-400" props.isSelected ? "dark:bg-gray-875! dark:text-gray-200" : "dark:bg-gray-800! dark:text-gray-400"
)} )}
children={props.children} children={props.children}
/> />
@ -78,13 +78,13 @@ export const SelectOption = (props: OptionProps) => (
export const IndicatorSeparator = (props: IndicatorSeparatorProps) => ( export const IndicatorSeparator = (props: IndicatorSeparatorProps) => (
<components.IndicatorSeparator <components.IndicatorSeparator
{...props} {...props}
className="!bg-gray-400 dark:!bg-gray-700" className="bg-gray-400! dark:bg-gray-700!"
/> />
); );
export const DropdownIndicator = (props: DropdownIndicatorProps) => ( export const DropdownIndicator = (props: DropdownIndicatorProps) => (
<components.DropdownIndicator <components.DropdownIndicator
{...props} {...props}
className="!text-gray-400 dark:!text-gray-300" className="text-gray-400! dark:text-gray-300!"
/> />
); );

6
web/src/components/inputs/input_wide.tsx
View file

@ -85,7 +85,7 @@ export const TextFieldWide = ({
meta.touched && meta.error meta.touched && meta.error
? "border-red-500 focus:ring-red-500 focus:border-red-500" ? "border-red-500 focus:ring-red-500 focus:border-red-500"
: "border-gray-300 dark:border-gray-700 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 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500",
"block w-full shadow-sm sm:text-sm rounded-md border py-2.5 dark:text-gray-100", "block w-full shadow-xs sm:text-sm rounded-md border py-2.5 dark:text-gray-100",
disabled ? "bg-gray-200 dark:bg-gray-700" : "bg-gray-100 dark:bg-gray-850 " disabled ? "bg-gray-200 dark:bg-gray-700" : "bg-gray-100 dark:bg-gray-850 "
)} )}
placeholder={placeholder} placeholder={placeholder}
@ -161,7 +161,7 @@ export const PasswordFieldWide = ({
meta.touched && meta.error meta.touched && meta.error
? "border-red-500 focus:ring-red-500 focus:border-red-500" ? "border-red-500 focus:ring-red-500 focus:border-red-500"
: "border-gray-300 dark:border-gray-700 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 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500",
"block w-full shadow-sm sm:text-sm rounded-md border py-2.5 bg-gray-100 dark:bg-gray-850 dark:text-gray-100 overflow-hidden pr-8" "block w-full shadow-xs sm:text-sm rounded-md border py-2.5 bg-gray-100 dark:bg-gray-850 dark:text-gray-100 overflow-hidden pr-8"
)} )}
placeholder={placeholder} placeholder={placeholder}
required={required} required={required}
@ -232,7 +232,7 @@ export const NumberFieldWide = ({
meta.touched && meta.error meta.touched && meta.error
? "border-red-500 focus:ring-red-500 focus:border-red-500" ? "border-red-500 focus:ring-red-500 focus:border-red-500"
: "border-gray-300 dark:border-gray-700 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 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500",
"block w-full shadow-sm sm:text-sm rounded-md border py-2.5 bg-gray-100 dark:bg-gray-850 dark:text-gray-100" "block w-full shadow-xs sm:text-sm rounded-md border py-2.5 bg-gray-100 dark:bg-gray-850 dark:text-gray-100"
)} )}
onWheel={(event) => { onWheel={(event) => {
if (event.currentTarget === document.activeElement) { if (event.currentTarget === document.activeElement) {

6
web/src/components/inputs/radio.tsx
View file

@ -66,7 +66,7 @@ function RadioFieldsetWide({ name, legend, options }: props) {
checked checked
? "border-1 bg-blue-100 dark:bg-blue-900 border-blue-400 dark:border-blue-600 z-10" ? "border-1 bg-blue-100 dark:bg-blue-900 border-blue-400 dark:border-blue-600 z-10"
: "border-gray-200 dark:border-gray-700", : "border-gray-200 dark:border-gray-700",
"relative border p-4 flex cursor-pointer focus:outline-none" "relative border p-4 flex cursor-pointer focus:outline-hidden"
) )
} }
> >
@ -77,7 +77,7 @@ function RadioFieldsetWide({ name, legend, options }: props) {
checked checked
? "bg-blue-600 dark:bg-blue-500 border-transparent" ? "bg-blue-600 dark:bg-blue-500 border-transparent"
: "bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-300", : "bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-300",
"h-6 w-6 mt-1 cursor-pointer rounded-full border flex items-center justify-center flex-shrink-0" "h-6 w-6 mt-1 cursor-pointer rounded-full border flex items-center justify-center shrink-0"
)} )}
aria-hidden="true" aria-hidden="true"
/> />
@ -91,7 +91,7 @@ function RadioFieldsetWide({ name, legend, options }: props) {
> >
<div className="flex justify-between"> <div className="flex justify-between">
{setting.label} {setting.label}
{setting.type && <span className="rounded bg-orange-500 text-orange-900 px-1 ml-2 text-sm">{setting.type}</span>} {setting.type && <span className="rounded-sm bg-orange-500 text-orange-900 px-1 ml-2 text-sm">{setting.type}</span>}
</div> </div>
</Label> </Label>
<Description <Description

16
web/src/components/inputs/select.tsx
View file

@ -170,7 +170,7 @@ export function DownloadClientSelect({
Client Client
</Label> </Label>
<div className="mt-1 relative"> <div className="mt-1 relative">
<ListboxButton className="block w-full shadow-sm sm:text-sm rounded-md border py-2 pl-3 pr-10 text-left 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"> <ListboxButton className="block w-full shadow-xs sm:text-sm rounded-md border py-2 pl-3 pr-10 text-left 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">
<span className="block truncate"> <span className="block truncate">
{field.value {field.value
? clients.find((c) => c.id === field.value)?.name ? clients.find((c) => c.id === field.value)?.name
@ -192,7 +192,7 @@ export function DownloadClientSelect({
> >
<ListboxOptions <ListboxOptions
static static
className="absolute z-10 mt-1 w-full border border-gray-400 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-lg max-h-60 rounded-md py-1 text-base overflow-auto focus:outline-none sm:text-sm" className="absolute z-10 mt-1 w-full border border-gray-400 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-lg max-h-60 rounded-md py-1 text-base overflow-auto focus:outline-hidden sm:text-sm"
> >
{clients {clients
.filter((c) => c.type === action.type) .filter((c) => c.type === action.type)
@ -300,7 +300,7 @@ export const Select = ({
) : label} ) : label}
</Label> </Label>
<div className="mt-1 relative"> <div className="mt-1 relative">
<ListboxButton className="block w-full relative shadow-sm sm:text-sm text-left rounded-md border pl-3 pr-10 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"> <ListboxButton className="block w-full relative shadow-xs sm:text-sm text-left rounded-md border pl-3 pr-10 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">
<span className="block truncate"> <span className="block truncate">
{field.value {field.value
? options.find((c) => c.value === field.value)?.label ? options.find((c) => c.value === field.value)?.label
@ -324,7 +324,7 @@ export const Select = ({
> >
<ListboxOptions <ListboxOptions
static static
className="absolute z-10 mt-1 w-full shadow-lg max-h-60 rounded-md py-1 text-base overflow-auto border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-gray-100 focus:outline-none sm:text-sm" className="absolute z-10 mt-1 w-full shadow-lg max-h-60 rounded-md py-1 text-base overflow-auto border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-gray-100 focus:outline-hidden sm:text-sm"
> >
{options.map((opt) => ( {options.map((opt) => (
<ListboxOption <ListboxOption
@ -399,7 +399,7 @@ export const SelectWide = ({
{label} {label}
</Label> </Label>
<div className="w-full"> <div className="w-full">
<ListboxButton className="bg-white dark:bg-gray-800 relative w-full border border-gray-300 dark:border-gray-700 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 dark:text-gray-200 sm:text-sm"> <ListboxButton className="bg-white dark:bg-gray-800 relative w-full border border-gray-300 dark:border-gray-700 rounded-md shadow-xs pl-3 pr-10 py-2 text-left cursor-default focus:outline-hidden focus:ring-1 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 dark:text-gray-200 sm:text-sm">
<span className="block truncate"> <span className="block truncate">
{field.value {field.value
? options.find((c) => c.value === field.value)?.label ? options.find((c) => c.value === field.value)?.label
@ -423,7 +423,7 @@ export const SelectWide = ({
> >
<ListboxOptions <ListboxOptions
static static
className="absolute z-10 mt-1 w-full bg-white dark:bg-gray-800 shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" className="absolute z-10 mt-1 w-full bg-white dark:bg-gray-800 shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-hidden sm:text-sm"
> >
{options.map((opt) => ( {options.map((opt) => (
<ListboxOption <ListboxOption
@ -512,7 +512,7 @@ export const AgeSelect = ({
{({ open }) => ( {({ open }) => (
<div> <div>
<div className="mt-0 relative"> <div className="mt-0 relative">
<ListboxButton className="block w-full relative shadow-sm text-sm text-left rounded-md border pl-3 pr-10 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-400"> <ListboxButton className="block w-full relative shadow-xs text-sm text-left rounded-md border pl-3 pr-10 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-400">
<span className="block truncate text-gray-500 dark:text-white"> <span className="block truncate text-gray-500 dark:text-white">
{duration ? options.find(opt => opt.value === duration)?.label : 'Select...'} {duration ? options.find(opt => opt.value === duration)?.label : 'Select...'}
</span> </span>
@ -527,7 +527,7 @@ export const AgeSelect = ({
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<ListboxOptions className="absolute z-10 mt-1 w-full shadow-lg max-h-60 rounded-md py-1 overflow-auto border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-white focus:outline-none text-sm"> <ListboxOptions className="absolute z-10 mt-1 w-full shadow-lg max-h-60 rounded-md py-1 overflow-auto border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-white focus:outline-hidden text-sm">
{options.map((option) => ( {options.map((option) => (
<ListboxOption <ListboxOption
key={option.value} key={option.value}

4
web/src/components/inputs/text.tsx
View file

@ -121,7 +121,7 @@ export const TextInput = <TFormValues extends Record<string, unknown>>({
name={name} name={name}
aria-invalid={hasError} aria-invalid={hasError}
className={classNames( className={classNames(
"block mt-1 w-full shadow-sm sm:text-sm rounded-md py-2.5 bg-gray-100 dark:bg-gray-850 dark:text-gray-100", "block mt-1 w-full shadow-xs sm:text-sm rounded-md py-2.5 bg-gray-100 dark:bg-gray-850 dark:text-gray-100",
hasError hasError
? "border-red-500 focus:ring-red-500 focus:border-red-500" ? "border-red-500 focus:ring-red-500 focus:border-red-500"
: "border-gray-300 dark:border-gray-700 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 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500"
@ -175,7 +175,7 @@ export const PasswordInput = <TFormValues extends Record<string, unknown>>({
aria-invalid={hasError} aria-invalid={hasError}
type={isVisible ? "text" : "password"} type={isVisible ? "text" : "password"}
className={classNames( className={classNames(
"block mt-1 w-full shadow-sm sm:text-sm rounded-md border py-2.5 bg-gray-100 dark:bg-gray-850 dark:text-gray-100", "block mt-1 w-full shadow-xs sm:text-sm rounded-md border py-2.5 bg-gray-100 dark:bg-gray-850 dark:text-gray-100",
hasError hasError
? "border-red-500 focus:ring-red-500 focus:border-red-500" ? "border-red-500 focus:ring-red-500 focus:border-red-500"
: "border-gray-300 dark:border-gray-700 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 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500"

10
web/src/components/modals/index.tsx
View file

@ -63,7 +63,7 @@ const ModalLower = ({ isOpen, isLoading, toggle, deleteAction }: ModalLowerProps
<> <>
<button <button
type="button" type="button"
className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm" className="w-full inline-flex justify-center rounded-md border border-transparent shadow-xs px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
if (isOpen) { if (isOpen) {
@ -76,7 +76,7 @@ const ModalLower = ({ isOpen, isLoading, toggle, deleteAction }: ModalLowerProps
</button> </button>
<button <button
type="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) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
toggle(); toggle();
@ -183,7 +183,7 @@ export const ForceRunModal: FC<ForceRunModalProps> = (props: ForceRunModalProps)
<input <input
type="text" type="text"
data-autofocus data-autofocus
className="w-96 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-400 dark:border-gray-700 bg-gray-100 dark:bg-gray-900 dark:text-gray-100" className="w-96 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-400 dark:border-gray-700 bg-gray-100 dark:bg-gray-900 dark:text-gray-100"
placeholder="Type 'I understand' to enable the button" placeholder="Type 'I understand' to enable the button"
value={inputValue} value={inputValue}
onChange={(e) => setInputValue(e.target.value)} onChange={(e) => setInputValue(e.target.value)}
@ -205,14 +205,14 @@ export const ForceRunModal: FC<ForceRunModalProps> = (props: ForceRunModalProps)
disabled={!isInputCorrect} disabled={!isInputCorrect}
className={`w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 ${ className={`w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 ${
isInputCorrect ? "bg-red-600 text-white hover:bg-red-700" : "bg-gray-300" isInputCorrect ? "bg-red-600 text-white hover:bg-red-700" : "bg-gray-300"
} text-base font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm`} } text-base font-medium focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm`}
onClick={handleForceRun} onClick={handleForceRun}
> >
Force Run Force Run
</button> </button>
<button <button
type="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={handleCancel} onClick={handleCancel}
> >
Cancel Cancel

6
web/src/components/notifications/Toast.tsx
View file

@ -23,7 +23,7 @@ const Toast: FC<Props> = ({ type, body, t }) => (
> >
<div className="p-4"> <div className="p-4">
<div className="flex items-start"> <div className="flex items-start">
<div className="flex-shrink-0"> <div className="shrink-0">
{type === "success" && <CheckCircleIcon className="h-6 w-6 text-green-400" aria-hidden="true" />} {type === "success" && <CheckCircleIcon className="h-6 w-6 text-green-400" aria-hidden="true" />}
{type === "error" && <ExclamationCircleIcon className="h-6 w-6 text-red-400" aria-hidden="true" />} {type === "error" && <ExclamationCircleIcon className="h-6 w-6 text-red-400" aria-hidden="true" />}
{type === "warning" && <ExclamationTriangleIcon className="h-6 w-6 text-yellow-400" aria-hidden="true" />} {type === "warning" && <ExclamationTriangleIcon className="h-6 w-6 text-yellow-400" aria-hidden="true" />}
@ -38,9 +38,9 @@ const Toast: FC<Props> = ({ type, body, t }) => (
</p> </p>
<span className="mt-1 text-sm text-gray-500 dark:text-gray-400">{body}</span> <span className="mt-1 text-sm text-gray-500 dark:text-gray-400">{body}</span>
</div> </div>
<div className="ml-4 flex-shrink-0 flex"> <div className="ml-4 shrink-0 flex">
<button <button
className="bg-white dark:bg-gray-700 rounded-md inline-flex text-gray-400 hover:text-gray-500 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 rounded-md inline-flex text-gray-400 hover:text-gray-500 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
onClick={() => { onClick={() => {
toast.dismiss(t?.id); toast.dismiss(t?.id);
}} }}

14
web/src/components/panels/index.tsx
View file

@ -84,7 +84,7 @@ function SlideOver<DataType extends FormikValues>({
leaveFrom="translate-x-0" leaveFrom="translate-x-0"
leaveTo="translate-x-full" leaveTo="translate-x-full"
> >
<div className="w-screen max-w-2xl dark:border-gray-700 border-l"> <div className="w-screen max-w-2xl">
<Formik <Formik
initialValues={initialValues} initialValues={initialValues}
@ -113,7 +113,7 @@ function SlideOver<DataType extends FormikValues>({
<div className="h-7 flex items-center"> <div className="h-7 flex items-center">
<button <button
type="button" type="button"
className="bg-white dark:bg-gray-900 rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-500" className="bg-white dark:bg-gray-900 rounded-md text-gray-400 hover:text-gray-500 focus:outline-hidden focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-500"
onClick={toggle} onClick={toggle}
> >
<span className="sr-only">Close panel</span> <span className="sr-only">Close panel</span>
@ -128,12 +128,12 @@ function SlideOver<DataType extends FormikValues>({
) : null} ) : null}
</div> </div>
<div className="flex-shrink-0 px-4 border-t border-gray-200 dark:border-gray-700 py-5 sm:px-6"> <div className="shrink-0 px-4 border-t border-gray-200 dark:border-gray-700 py-5 sm:px-6">
<div className={classNames(type === "CREATE" ? "justify-end" : "justify-between", "space-x-3 flex")}> <div className={classNames(type === "CREATE" ? "justify-end" : "justify-between", "space-x-3 flex")}>
{type === "UPDATE" && ( {type === "UPDATE" && (
<button <button
type="button" type="button"
className="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-red-700 dark:text-white bg-red-100 dark:bg-red-700 hover:bg-red-200 dark:hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:text-sm" className="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-red-700 dark:text-white bg-red-100 dark:bg-red-700 hover:bg-red-200 dark:hover:bg-red-600 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:text-sm"
onClick={toggleDeleteModal} onClick={toggleDeleteModal}
> >
Remove Remove
@ -154,7 +154,7 @@ function SlideOver<DataType extends FormikValues>({
? "text-red-500 border-red-500 bg-red-50" ? "text-red-500 border-red-500 bg-red-50"
: "border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:border-rose-700 active:bg-rose-700", : "border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:border-rose-700 active:bg-rose-700",
isTesting ? "cursor-not-allowed" : "", isTesting ? "cursor-not-allowed" : "",
"mr-2 inline-flex items-center px-4 py-2 border font-medium rounded-md shadow-sm text-sm transition ease-in-out duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500" "mr-2 inline-flex items-center px-4 py-2 border font-medium rounded-md shadow-xs text-sm transition ease-in-out duration-150 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
)} )}
disabled={isTesting} disabled={isTesting}
onClick={(e) => { onClick={(e) => {
@ -195,7 +195,7 @@ function SlideOver<DataType extends FormikValues>({
<button <button
type="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 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 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) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
toggle(); toggle();
@ -205,7 +205,7 @@ function SlideOver<DataType extends FormikValues>({
</button> </button>
<button <button
type="button" type="button"
className="ml-4 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" className="ml-4 inline-flex justify-center py-2 px-4 border border-transparent shadow-xs text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
formRef.current?.submitForm(); formRef.current?.submitForm();

12
web/src/forms/filters/FilterAddForm.tsx
View file

@ -59,7 +59,7 @@ export function FilterAddForm({ isOpen, toggle }: AddFormProps) {
leaveFrom="translate-x-0" leaveFrom="translate-x-0"
leaveTo="translate-x-full" leaveTo="translate-x-full"
> >
<div className="w-screen max-w-2xl border-l dark:border-gray-700"> <div className="w-screen max-w-2xl ">
<Formik <Formik
initialValues={{ initialValues={{
@ -88,7 +88,7 @@ export function FilterAddForm({ isOpen, toggle }: AddFormProps) {
<div className="h-7 flex items-center"> <div className="h-7 flex items-center">
<button <button
type="button" type="button"
className="light:bg-white rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-500" className="light:bg-white rounded-md text-gray-400 hover:text-gray-500 focus:outline-hidden focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-500"
onClick={toggle} onClick={toggle}
> >
<span className="sr-only">Close panel</span> <span className="sr-only">Close panel</span>
@ -124,7 +124,7 @@ export function FilterAddForm({ isOpen, toggle }: AddFormProps) {
data-1p-ignore data-1p-ignore
autoComplete="off" autoComplete="off"
ref={inputRef} ref={inputRef}
className="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="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"
/> />
{meta.touched && meta.error && {meta.touched && meta.error &&
@ -138,18 +138,18 @@ export function FilterAddForm({ isOpen, toggle }: AddFormProps) {
</div> </div>
<div <div
className="flex-shrink-0 px-4 border-t border-gray-200 dark:border-gray-700 py-5 sm:px-6"> className="shrink-0 px-4 border-t border-gray-200 dark:border-gray-700 py-5 sm:px-6">
<div className="space-x-3 flex justify-end"> <div className="space-x-3 flex justify-end">
<button <button
type="button" type="button"
className="bg-white dark:bg-gray-800 py-2 px-4 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 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-800 py-2 px-4 border border-gray-300 dark:border-gray-700 rounded-md shadow-xs text-sm font-medium text-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
onClick={toggle} onClick={toggle}
> >
Cancel Cancel
</button> </button>
<button <button
type="submit" type="submit"
className="inline-flex justify-center py-2 px-4 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="inline-flex justify-center py-2 px-4 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"
> >
Create Create
</button> </button>

12
web/src/forms/settings/APIKeyAddForm.tsx
View file

@ -54,7 +54,7 @@ export function APIKeyAddForm({ isOpen, toggle }: AddFormProps) {
leaveFrom="translate-x-0" leaveFrom="translate-x-0"
leaveTo="translate-x-full" leaveTo="translate-x-full"
> >
<div className="w-screen max-w-2xl border-l dark:border-gray-700"> <div className="w-screen max-w-2xl ">
<Formik <Formik
initialValues={{ initialValues={{
name: "", name: "",
@ -77,7 +77,7 @@ export function APIKeyAddForm({ isOpen, toggle }: AddFormProps) {
<div className="h-7 flex items-center"> <div className="h-7 flex items-center">
<button <button
type="button" type="button"
className="light:bg-white rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-500" className="light:bg-white rounded-md text-gray-400 hover:text-gray-500 focus:outline-hidden focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-500"
onClick={toggle} onClick={toggle}
> >
<span className="sr-only">Close panel</span> <span className="sr-only">Close panel</span>
@ -111,7 +111,7 @@ export function APIKeyAddForm({ isOpen, toggle }: AddFormProps) {
type="text" type="text"
data-1p-ignore data-1p-ignore
autoComplete="off" autoComplete="off"
className="block w-full shadow-sm sm:text-sm focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 rounded-md border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-gray-100" className="block w-full shadow-xs sm:text-sm focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 rounded-md border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-gray-100"
/> />
{meta.touched && meta.error && <span className="block mt-2 text-red-500">{meta.error}</span>} {meta.touched && meta.error && <span className="block mt-2 text-red-500">{meta.error}</span>}
</div> </div>
@ -122,18 +122,18 @@ export function APIKeyAddForm({ isOpen, toggle }: AddFormProps) {
</div> </div>
<div <div
className="flex-shrink-0 px-4 border-t border-gray-200 dark:border-gray-700 py-5 sm:px-6"> className="shrink-0 px-4 border-t border-gray-200 dark:border-gray-700 py-5 sm:px-6">
<div className="space-x-3 flex justify-end"> <div className="space-x-3 flex justify-end">
<button <button
type="button" type="button"
className="bg-white dark:bg-gray-800 py-2 px-4 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 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-800 py-2 px-4 border border-gray-300 dark:border-gray-700 rounded-md shadow-xs text-sm font-medium text-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
onClick={toggle} onClick={toggle}
> >
Cancel Cancel
</button> </button>
<button <button
type="submit" type="submit"
className="inline-flex justify-center py-2 px-4 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="inline-flex justify-center py-2 px-4 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"
> >
Create Create
</button> </button>

26
web/src/forms/settings/DownloadClientForms.tsx
View file

@ -418,7 +418,7 @@ function FormFieldsRulesBasic() {
return ( return (
<div className="border-t border-gray-200 dark:border-gray-700 py-5"> <div className="border-t border-gray-200 dark:border-gray-700 py-5">
<div className="px-4 space-y-1"> <div className="px-4">
<DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">Rules</DialogTitle> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">Rules</DialogTitle>
<p className="text-sm text-gray-500 dark:text-gray-400"> <p className="text-sm text-gray-500 dark:text-gray-400">
Manage max downloads. Manage max downloads.
@ -453,7 +453,7 @@ function FormFieldsRulesArr() {
return ( return (
<div className="border-t border-gray-200 dark:border-gray-700 py-5 px-2"> <div className="border-t border-gray-200 dark:border-gray-700 py-5 px-2">
<div className="px-4 space-y-1"> <div className="px-4">
<DialogTitle className="text-lg font-medium text-gray-900 dark:text-white"> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
Download Client Download Client
</DialogTitle> </DialogTitle>
@ -476,7 +476,7 @@ function FormFieldsRulesQbit() {
return ( return (
<div className="border-t border-gray-200 dark:border-gray-700 py-5 px-2"> <div className="border-t border-gray-200 dark:border-gray-700 py-5 px-2">
<div className="px-4 space-y-1"> <div className="px-4">
<DialogTitle className="text-lg font-medium text-gray-900 dark:text-white"> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
Rules Rules
</DialogTitle> </DialogTitle>
@ -544,7 +544,7 @@ function FormFieldsRulesTransmission() {
return ( return (
<div className="border-t border-gray-200 dark:border-gray-700 py-5 px-2"> <div className="border-t border-gray-200 dark:border-gray-700 py-5 px-2">
<div className="px-4 space-y-1"> <div className="px-4">
<DialogTitle className="text-lg font-medium text-gray-900 dark:text-white"> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
Rules Rules
</DialogTitle> </DialogTitle>
@ -616,12 +616,12 @@ function DownloadClientFormButtons({
}; };
return ( return (
<div className="flex-shrink-0 px-4 border-t border-gray-200 dark:border-gray-700 py-5 sm:px-6"> <div className="shrink-0 px-4 border-t border-gray-200 dark:border-gray-700 py-5 sm:px-6">
<div className={classNames(type === "CREATE" ? "justify-end" : "justify-between", "space-x-3 flex")}> <div className={classNames(type === "CREATE" ? "justify-end" : "justify-between", "space-x-3 flex")}>
{type === "UPDATE" && ( {type === "UPDATE" && (
<button <button
type="button" type="button"
className="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-red-700 dark:text-white bg-red-100 dark:bg-red-700 hover:bg-red-200 dark:hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:text-sm" className="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-red-700 dark:text-white bg-red-100 dark:bg-red-700 hover:bg-red-200 dark:hover:bg-red-600 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:text-sm"
onClick={toggleDeleteModal} onClick={toggleDeleteModal}
> >
Remove Remove
@ -637,7 +637,7 @@ function DownloadClientFormButtons({
? "text-red-500 border-red-500 bg-red-50" ? "text-red-500 border-red-500 bg-red-50"
: "border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-400 bg-white dark:bg-gray-700 hover:bg-gray-50 focus:border-rose-700 active:bg-rose-700", : "border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-400 bg-white dark:bg-gray-700 hover:bg-gray-50 focus:border-rose-700 active:bg-rose-700",
isTesting ? "cursor-not-allowed" : "", isTesting ? "cursor-not-allowed" : "",
"mr-2 inline-flex items-center px-4 py-2 border font-medium rounded-md shadow-sm text-sm transition ease-in-out duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500" "mr-2 inline-flex items-center px-4 py-2 border font-medium rounded-md shadow-xs text-sm transition ease-in-out duration-150 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
)} )}
disabled={isTesting} disabled={isTesting}
// onClick={() => testClient(values)} // onClick={() => testClient(values)}
@ -675,14 +675,14 @@ function DownloadClientFormButtons({
<button <button
type="button" type="button"
className="mr-4 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-400 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="mr-4 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-400 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={cancelFn} onClick={cancelFn}
> >
Cancel Cancel
</button> </button>
<button <button
type="submit" type="submit"
className="inline-flex justify-center py-2 px-4 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="inline-flex justify-center py-2 px-4 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"
> >
{type === "CREATE" ? "Create" : "Save"} {type === "CREATE" ? "Create" : "Save"}
</button> </button>
@ -778,7 +778,7 @@ export function DownloadClientAddForm({ isOpen, toggle }: AddFormProps) {
leaveFrom="translate-x-0" leaveFrom="translate-x-0"
leaveTo="translate-x-full" leaveTo="translate-x-full"
> >
<div className="w-screen max-w-2xl border-l dark:border-gray-700"> <div className="w-screen max-w-2xl ">
<Formik <Formik
initialValues={initialValues} initialValues={initialValues}
onSubmit={onSubmit} onSubmit={onSubmit}
@ -802,7 +802,7 @@ export function DownloadClientAddForm({ isOpen, toggle }: AddFormProps) {
<div className="h-7 flex items-center"> <div className="h-7 flex items-center">
<button <button
type="button" type="button"
className="bg-white dark:bg-gray-800 rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-500" className="bg-white dark:bg-gray-800 rounded-md text-gray-400 hover:text-gray-500 focus:outline-hidden focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-500"
onClick={toggle} onClick={toggle}
> >
<span className="sr-only">Close panel</span> <span className="sr-only">Close panel</span>
@ -964,7 +964,7 @@ export function DownloadClientUpdateForm({ isOpen, toggle, data: client}: Update
leaveFrom="translate-x-0" leaveFrom="translate-x-0"
leaveTo="translate-x-full" leaveTo="translate-x-full"
> >
<div className="w-screen max-w-2xl border-l dark:border-gray-700"> <div className="w-screen max-w-2xl ">
<Formik <Formik
initialValues={initialValues} initialValues={initialValues}
onSubmit={onSubmit} onSubmit={onSubmit}
@ -989,7 +989,7 @@ export function DownloadClientUpdateForm({ isOpen, toggle, data: client}: Update
<div className="h-7 flex items-center"> <div className="h-7 flex items-center">
<button <button
type="button" type="button"
className="bg-white dark:bg-gray-800 rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-500" className="bg-white dark:bg-gray-800 rounded-md text-gray-400 hover:text-gray-500 focus:outline-hidden focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-500"
onClick={toggle} onClick={toggle}
> >
<span className="sr-only">Close panel</span> <span className="sr-only">Close panel</span>

4
web/src/forms/settings/FeedForms.tsx
View file

@ -131,7 +131,7 @@ export function FeedUpdateForm({ isOpen, toggle, data}: UpdateFormProps<Feed>) {
<div> <div>
<TextFieldWide name="name" label="Name" required={true} /> <TextFieldWide name="name" label="Name" required={true} />
<div className="space-y-4 divide-y divide-gray-200 dark:divide-gray-700"> <div className="divide-y divide-gray-200 dark:divide-gray-700">
<div <div
className="py-4 flex items-center justify-between space-y-1 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-4"> className="py-4 flex items-center justify-between space-y-1 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-4">
<div> <div>
@ -161,7 +161,7 @@ export function FeedUpdateForm({ isOpen, toggle, data}: UpdateFormProps<Feed>) {
function WarningLabel() { function WarningLabel() {
return ( return (
<div className="px-4 py-1"> <div className="px-4 py-1">
<span className="w-full block px-2 py-2 bg-red-300 dark:bg-red-400 text-red-900 dark:text-red-900 text-sm rounded"> <span className="w-full block px-2 py-2 bg-red-300 dark:bg-red-400 text-red-900 dark:text-red-900 text-sm rounded-sm">
<span className="font-semibold"> <span className="font-semibold">
Warning: Indexers might ban you for too low interval! Warning: Indexers might ban you for too low interval!
</span> </span>

28
web/src/forms/settings/IndexerForms.tsx
View file

@ -51,7 +51,7 @@ const IrcSettingFields = (ind: IndexerDefinition, indexer: string) => {
<> <>
{ind && ind.irc && ind.irc.settings && ( {ind && ind.irc && ind.irc.settings && (
<div className="border-t border-gray-200 dark:border-gray-700 py-5"> <div className="border-t border-gray-200 dark:border-gray-700 py-5">
<div className="px-4 space-y-1"> <div className="px-4">
<DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">IRC</DialogTitle> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">IRC</DialogTitle>
<p className="text-sm text-gray-500 dark:text-gray-200"> <p className="text-sm text-gray-500 dark:text-gray-200">
Networks and channels are configured automatically in the background. Networks and channels are configured automatically in the background.
@ -101,7 +101,7 @@ const TorznabFeedSettingFields = (ind: IndexerDefinition, indexer: string) => {
<Fragment> <Fragment>
{ind && ind.torznab && ind.torznab.settings && ( {ind && ind.torznab && ind.torznab.settings && (
<div className=""> <div className="">
<div className="px-4 space-y-1"> <div className="pt-4 px-4">
<DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">Torznab</DialogTitle> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">Torznab</DialogTitle>
<p className="text-sm text-gray-500 dark:text-gray-200"> <p className="text-sm text-gray-500 dark:text-gray-200">
Torznab feed Torznab feed
@ -142,7 +142,7 @@ const NewznabFeedSettingFields = (ind: IndexerDefinition, indexer: string) => {
<Fragment> <Fragment>
{ind && ind.newznab && ind.newznab.settings && ( {ind && ind.newznab && ind.newznab.settings && (
<div className=""> <div className="">
<div className="px-4 space-y-1"> <div className="pt-4 px-4">
<DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">Newznab</DialogTitle> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">Newznab</DialogTitle>
<p className="text-sm text-gray-500 dark:text-gray-200"> <p className="text-sm text-gray-500 dark:text-gray-200">
Newznab feed Newznab feed
@ -175,7 +175,7 @@ const RSSFeedSettingFields = (ind: IndexerDefinition, indexer: string) => {
<Fragment> <Fragment>
{ind && ind.rss && ind.rss.settings && ( {ind && ind.rss && ind.rss.settings && (
<div className=""> <div className="">
<div className="px-4 space-y-1"> <div className="pt-4 px-4">
<DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">RSS</DialogTitle> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">RSS</DialogTitle>
<p className="text-sm text-gray-500 dark:text-gray-200"> <p className="text-sm text-gray-500 dark:text-gray-200">
RSS feed RSS feed
@ -432,7 +432,7 @@ export function IndexerAddForm({ isOpen, toggle }: AddFormProps) {
leaveFrom="translate-x-0" leaveFrom="translate-x-0"
leaveTo="translate-x-full" leaveTo="translate-x-full"
> >
<div className="w-screen max-w-2xl dark:border-gray-700 border-l"> <div className="w-screen max-w-2xl">
<Formik <Formik
enableReinitialize={true} enableReinitialize={true}
initialValues={{ initialValues={{
@ -461,7 +461,7 @@ export function IndexerAddForm({ isOpen, toggle }: AddFormProps) {
<div className="h-7 flex items-center"> <div className="h-7 flex items-center">
<button <button
type="button" type="button"
className="bg-white dark:bg-gray-700 rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500" className="bg-white dark:bg-gray-700 rounded-md text-gray-400 hover:text-gray-500 focus:outline-hidden focus:ring-2 focus:ring-blue-500"
onClick={toggle} onClick={toggle}
> >
<span className="sr-only">Close panel</span> <span className="sr-only">Close panel</span>
@ -471,8 +471,8 @@ export function IndexerAddForm({ isOpen, toggle }: AddFormProps) {
</div> </div>
</div> </div>
<div className="py-6 space-y-4 divide-y divide-gray-200 dark:divide-gray-700"> <div className="divide-y divide-gray-200 dark:divide-gray-700">
<div className="py-4 flex items-center justify-between space-y-1 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-4"> <div className="p-4 sm:py-6 flex items-center justify-between sm:grid sm:grid-cols-3 sm:gap-4">
<div> <div>
<label <label
htmlFor="identifier" htmlFor="identifier"
@ -566,18 +566,18 @@ export function IndexerAddForm({ isOpen, toggle }: AddFormProps) {
</div> </div>
<div <div
className="flex-shrink-0 px-4 border-t border-gray-200 dark:border-gray-700 py-5 sm:px-6"> className="shrink-0 px-4 border-t border-gray-200 dark:border-gray-700 py-5 sm:px-6">
<div className="space-x-3 flex justify-end"> <div className="space-x-3 flex justify-end">
<button <button
type="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 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 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={toggle} onClick={toggle}
> >
Cancel Cancel
</button> </button>
<button <button
type="submit" type="submit"
className="inline-flex justify-center py-2 px-4 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="inline-flex justify-center py-2 px-4 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"
> >
Save Save
</button> </button>
@ -670,7 +670,7 @@ function TestApiButton({ values, show }: TestApiButtonProps) {
? "text-red-500 border-red-500 bg-red-50" ? "text-red-500 border-red-500 bg-red-50"
: "border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 focus:border-rose-700 active:bg-rose-700", : "border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 focus:border-rose-700 active:bg-rose-700",
isTesting ? "cursor-not-allowed" : "", isTesting ? "cursor-not-allowed" : "",
"mr-2 float-left items-center px-4 py-2 border font-medium rounded-md shadow-sm text-sm transition ease-in-out duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500" "mr-2 float-left items-center px-4 py-2 border font-medium rounded-md shadow-xs text-sm transition ease-in-out duration-150 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
)} )}
disabled={isTesting} disabled={isTesting}
onClick={testApi} onClick={testApi}
@ -832,7 +832,7 @@ export function IndexerUpdateForm({ isOpen, toggle, data: indexer }: UpdateFormP
> >
{(values) => ( {(values) => (
<div className="py-2 space-y-6 sm:py-0 sm:space-y-0 divide-y divide-gray-200 dark:divide-gray-700"> <div className="py-2 space-y-6 sm:py-0 sm:space-y-0 divide-y divide-gray-200 dark:divide-gray-700">
<div className="space-y-1 p-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4"> <div className="p-4 sm:grid sm:grid-cols-3 sm:gap-4">
<label <label
htmlFor="name" htmlFor="name"
className="block text-sm font-medium text-gray-900 dark:text-white sm:mt-px sm:pt-2" className="block text-sm font-medium text-gray-900 dark:text-white sm:mt-px sm:pt-2"
@ -845,7 +845,7 @@ export function IndexerUpdateForm({ isOpen, toggle, data: indexer }: UpdateFormP
<input <input
type="text" type="text"
{...field} {...field}
className="block w-full shadow-sm sm:text-sm 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 rounded-md" className="block w-full shadow-xs sm:text-sm 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 rounded-md"
/> />
{meta.touched && meta.error && <span>{meta.error}</span>} {meta.touched && meta.error && <span>{meta.error}</span>}
</div> </div>

8
web/src/forms/settings/IrcForms.tsx
View file

@ -48,7 +48,7 @@ const ChannelsFieldArray = ({ channels }: ChannelsFieldArrayProps) => (
meta.touched && meta.error meta.touched && meta.error
? "border-red-500 focus:ring-red-500 focus:border-red-500" ? "border-red-500 focus:ring-red-500 focus:border-red-500"
: "border-gray-300 dark:border-gray-700 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 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500",
"block w-full shadow-sm sm:text-sm rounded-md border py-2.5 bg-gray-100 dark:bg-gray-850 dark:text-gray-100" "block w-full shadow-xs sm:text-sm rounded-md border py-2.5 bg-gray-100 dark:bg-gray-850 dark:text-gray-100"
)} )}
/> />
)} )}
@ -66,7 +66,7 @@ const ChannelsFieldArray = ({ channels }: ChannelsFieldArrayProps) => (
meta.touched && meta.error meta.touched && meta.error
? "border-red-500 focus:ring-red-500 focus:border-red-500" ? "border-red-500 focus:ring-red-500 focus:border-red-500"
: "border-gray-300 dark:border-gray-700 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 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500",
"block w-full shadow-sm sm:text-sm rounded-md border py-2.5 bg-gray-100 dark:bg-gray-850 dark:text-gray-100" "block w-full shadow-xs sm:text-sm rounded-md border py-2.5 bg-gray-100 dark:bg-gray-850 dark:text-gray-100"
)} )}
/> />
)} )}
@ -75,7 +75,7 @@ const ChannelsFieldArray = ({ channels }: ChannelsFieldArrayProps) => (
<button <button
type="button" type="button"
className="bg-white dark:bg-gray-700 rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-500" className="bg-white dark:bg-gray-700 rounded-md text-gray-400 hover:text-gray-500 focus:outline-hidden focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-500"
onClick={() => remove(index)} onClick={() => remove(index)}
> >
<span className="sr-only">Remove</span> <span className="sr-only">Remove</span>
@ -90,7 +90,7 @@ const ChannelsFieldArray = ({ channels }: ChannelsFieldArrayProps) => (
)} )}
<button <button
type="button" type="button"
className="border dark:border-gray-600 dark:bg-gray-700 my-4 px-4 py-2 text-sm text-gray-700 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-600 rounded self-center text-center" className="border dark:border-gray-600 dark:bg-gray-700 my-4 px-4 py-2 text-sm text-gray-700 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-600 rounded-sm self-center text-center"
onClick={() => push({ name: "", password: "" })} onClick={() => push({ name: "", password: "" })}
> >
Add Channel Add Channel

40
web/src/forms/settings/ListForms.tsx
View file

@ -120,7 +120,7 @@ export function ListAddForm({ isOpen, toggle }: AddFormProps) {
leaveFrom="translate-x-0" leaveFrom="translate-x-0"
leaveTo="translate-x-full" leaveTo="translate-x-full"
> >
<div className="w-screen max-w-2xl dark:border-gray-700 border-l"> <div className="w-screen max-w-2xl">
<Formik <Formik
enableReinitialize={true} enableReinitialize={true}
initialValues={{ initialValues={{
@ -157,7 +157,7 @@ export function ListAddForm({ isOpen, toggle }: AddFormProps) {
<div className="h-7 flex items-center"> <div className="h-7 flex items-center">
<button <button
type="button" type="button"
className="bg-white dark:bg-gray-700 rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500" className="bg-white dark:bg-gray-700 rounded-md text-gray-400 hover:text-gray-500 focus:outline-hidden focus:ring-2 focus:ring-blue-500"
onClick={toggle} onClick={toggle}
> >
<span className="sr-only">Close panel</span> <span className="sr-only">Close panel</span>
@ -239,7 +239,7 @@ export function ListAddForm({ isOpen, toggle }: AddFormProps) {
<div className="flex flex-col space-y-4 py-6 sm:py-0 sm:space-y-0"> <div className="flex flex-col space-y-4 py-6 sm:py-0 sm:space-y-0">
<div className="border-t border-gray-200 dark:border-gray-700 py-4"> <div className="border-t border-gray-200 dark:border-gray-700 py-4">
<div className="px-4 space-y-1"> <div className="px-4">
<DialogTitle className="text-lg font-medium text-gray-900 dark:text-white"> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
Filters Filters
</DialogTitle> </DialogTitle>
@ -254,11 +254,11 @@ export function ListAddForm({ isOpen, toggle }: AddFormProps) {
</div> </div>
</div> </div>
<div className="flex-shrink-0 px-4 border-t border-gray-200 dark:border-gray-700 py-4 sm:px-6"> <div className="shrink-0 px-4 border-t border-gray-200 dark:border-gray-700 py-4 sm:px-6">
<div className="space-x-3 flex justify-end"> <div className="space-x-3 flex justify-end">
<button <button
type="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 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 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={toggle} onClick={toggle}
> >
Cancel Cancel
@ -351,7 +351,7 @@ export function ListUpdateForm({ isOpen, toggle, data }: UpdateFormProps<List>)
leaveFrom="translate-x-0" leaveFrom="translate-x-0"
leaveTo="translate-x-full" leaveTo="translate-x-full"
> >
<div className="w-screen max-w-2xl dark:border-gray-700 border-l"> <div className="w-screen max-w-2xl">
<Formik <Formik
enableReinitialize={true} enableReinitialize={true}
initialValues={{ initialValues={{
@ -389,7 +389,7 @@ export function ListUpdateForm({ isOpen, toggle, data }: UpdateFormProps<List>)
<div className="h-7 flex items-center"> <div className="h-7 flex items-center">
<button <button
type="button" type="button"
className="bg-white dark:bg-gray-700 rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500" className="bg-white dark:bg-gray-700 rounded-md text-gray-400 hover:text-gray-500 focus:outline-hidden focus:ring-2 focus:ring-blue-500"
onClick={toggle} onClick={toggle}
> >
<span className="sr-only">Close panel</span> <span className="sr-only">Close panel</span>
@ -413,7 +413,7 @@ export function ListUpdateForm({ isOpen, toggle, data }: UpdateFormProps<List>)
<div className="flex flex-col space-y-4 py-6 sm:py-0 sm:space-y-0"> <div className="flex flex-col space-y-4 py-6 sm:py-0 sm:space-y-0">
<div className="border-t border-gray-200 dark:border-gray-700 py-4"> <div className="border-t border-gray-200 dark:border-gray-700 py-4">
<div className="px-4 space-y-1"> <div className="px-4">
<DialogTitle className="text-lg font-medium text-gray-900 dark:text-white"> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
Filters Filters
</DialogTitle> </DialogTitle>
@ -433,11 +433,11 @@ export function ListUpdateForm({ isOpen, toggle, data }: UpdateFormProps<List>)
</div> </div>
</div> </div>
<div className="flex-shrink-0 px-4 border-t border-gray-200 dark:border-gray-700 py-4"> <div className="shrink-0 px-4 border-t border-gray-200 dark:border-gray-700 py-4">
<div className="space-x-3 flex justify-between"> <div className="space-x-3 flex justify-between">
<button <button
type="button" type="button"
className="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-red-700 dark:text-white bg-red-100 dark:bg-red-700 hover:bg-red-200 dark:hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:text-sm" className="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-red-700 dark:text-white bg-red-100 dark:bg-red-700 hover:bg-red-200 dark:hover:bg-red-600 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:text-sm"
onClick={toggleDeleteModal} onClick={toggleDeleteModal}
> >
Remove Remove
@ -445,7 +445,7 @@ export function ListUpdateForm({ isOpen, toggle, data }: UpdateFormProps<List>)
<div className="flex space-x-3"> <div className="flex space-x-3">
<button <button
type="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 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 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={toggle} onClick={toggle}
> >
Cancel Cancel
@ -485,7 +485,7 @@ const SubmitButton = (props: SubmitButtonProps) => {
// ? "text-red-500 border-red-500 bg-red-50" // ? "text-red-500 border-red-500 bg-red-50"
// : "border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:border-rose-700 active:bg-rose-700", // : "border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:border-rose-700 active:bg-rose-700",
props.isPending ? "cursor-not-allowed" : "", props.isPending ? "cursor-not-allowed" : "",
"mr-2 inline-flex items-center px-4 py-2 border font-medium rounded-md shadow-sm text-sm transition ease-in-out duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:border-blue-700 active:bg-blue-700" "mr-2 inline-flex items-center px-4 py-2 border font-medium rounded-md shadow-xs text-sm transition ease-in-out duration-150 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:border-blue-700 active:bg-blue-700"
)} )}
> >
{props.isPending ? ( {props.isPending ? (
@ -602,7 +602,7 @@ function ListTypeArr({ listType, clients }: ListTypeFormProps) {
return ( return (
<div className="border-t border-gray-200 dark:border-gray-700 py-4"> <div className="border-t border-gray-200 dark:border-gray-700 py-4">
<div className="px-4 space-y-1"> <div className="px-4">
<DialogTitle className="text-lg font-medium text-gray-900 dark:text-white"> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
Source Source
</DialogTitle> </DialogTitle>
@ -643,7 +643,7 @@ function ListTypeTrakt() {
return ( return (
<div className="border-t border-gray-200 dark:border-gray-700 py-4"> <div className="border-t border-gray-200 dark:border-gray-700 py-4">
<div className="px-4 space-y-1"> <div className="px-4">
<DialogTitle className="text-lg font-medium text-gray-900 dark:text-white"> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
Source list Source list
</DialogTitle> </DialogTitle>
@ -680,7 +680,7 @@ function ListTypeTrakt() {
function ListTypePlainText() { function ListTypePlainText() {
return ( return (
<div className="border-t border-gray-200 dark:border-gray-700 py-4"> <div className="border-t border-gray-200 dark:border-gray-700 py-4">
<div className="px-4 space-y-1"> <div className="px-4">
<DialogTitle className="text-lg font-medium text-gray-900 dark:text-white"> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
Source list Source list
</DialogTitle> </DialogTitle>
@ -709,7 +709,7 @@ function ListTypePlainText() {
function ListTypeSteam() { function ListTypeSteam() {
return ( return (
<div className="border-t border-gray-200 dark:border-gray-700 py-4"> <div className="border-t border-gray-200 dark:border-gray-700 py-4">
<div className="px-4 space-y-1"> <div className="px-4">
<DialogTitle className="text-lg font-medium text-gray-900 dark:text-white"> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
Source list Source list
</DialogTitle> </DialogTitle>
@ -726,7 +726,7 @@ function ListTypeSteam() {
function ListTypeMetacritic() { function ListTypeMetacritic() {
return ( return (
<div className="border-t border-gray-200 dark:border-gray-700 py-4"> <div className="border-t border-gray-200 dark:border-gray-700 py-4">
<div className="px-4 space-y-1"> <div className="px-4">
<DialogTitle className="text-lg font-medium text-gray-900 dark:text-white"> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
Source list Source list
</DialogTitle> </DialogTitle>
@ -755,7 +755,7 @@ function ListTypeMetacritic() {
function ListTypeMDBList() { function ListTypeMDBList() {
return ( return (
<div className="border-t border-gray-200 dark:border-gray-700 py-4"> <div className="border-t border-gray-200 dark:border-gray-700 py-4">
<div className="px-4 space-y-1"> <div className="px-4">
<DialogTitle className="text-lg font-medium text-gray-900 dark:text-white"> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
Source list Source list
</DialogTitle> </DialogTitle>
@ -818,7 +818,7 @@ function DownloadClientSelectCustom({ name, clientType, clients }: DownloadClien
{/*</Label>*/} {/*</Label>*/}
<div className="relative"> <div className="relative">
<ListboxButton <ListboxButton
className="block w-full shadow-sm sm:text-sm rounded-md border py-2 pl-3 pr-10 text-left 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="block w-full shadow-xs sm:text-sm rounded-md border py-2 pl-3 pr-10 text-left 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">
<span className="block truncate"> <span className="block truncate">
{field.value {field.value
? clients.find((c) => c.id === field.value)?.name ? clients.find((c) => c.id === field.value)?.name
@ -840,7 +840,7 @@ function DownloadClientSelectCustom({ name, clientType, clients }: DownloadClien
> >
<ListboxOptions <ListboxOptions
static static
className="absolute z-10 mt-1 w-full border border-gray-400 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-lg max-h-60 rounded-md py-1 text-base overflow-auto focus:outline-none sm:text-sm" className="absolute z-10 mt-1 w-full border border-gray-400 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-lg max-h-60 rounded-md py-1 text-base overflow-auto focus:outline-hidden sm:text-sm"
> >
{clients {clients
.filter((c) => c.type === clientType) .filter((c) => c.type === clientType)

46
web/src/forms/settings/NotificationForms.tsx
View file

@ -28,7 +28,7 @@ import { AddFormProps, UpdateFormProps } from "@forms/_shared";
function FormFieldsDiscord() { function FormFieldsDiscord() {
return ( return (
<div className="border-t border-gray-200 dark:border-gray-700 py-4"> <div className="border-t border-gray-200 dark:border-gray-700 py-4">
<div className="px-4 space-y-1"> <div className="px-4">
<DialogTitle className="text-lg font-medium text-gray-900 dark:text-white"> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
Settings Settings
</DialogTitle> </DialogTitle>
@ -57,7 +57,7 @@ function FormFieldsDiscord() {
function FormFieldsNotifiarr() { function FormFieldsNotifiarr() {
return ( return (
<div className="border-t border-gray-200 dark:border-gray-700 py-4"> <div className="border-t border-gray-200 dark:border-gray-700 py-4">
<div className="px-4 space-y-1"> <div className="px-4">
<DialogTitle className="text-lg font-medium text-gray-900 dark:text-white"> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
Settings Settings
</DialogTitle> </DialogTitle>
@ -78,7 +78,7 @@ function FormFieldsNotifiarr() {
function FormFieldsLunaSea() { function FormFieldsLunaSea() {
return ( return (
<div className="border-t border-gray-200 dark:border-gray-700 py-4"> <div className="border-t border-gray-200 dark:border-gray-700 py-4">
<div className="px-4 space-y-1"> <div className="px-4">
<DialogTitle className="text-lg font-medium text-gray-900 dark:text-white"> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
Settings Settings
</DialogTitle> </DialogTitle>
@ -110,7 +110,7 @@ function FormFieldsLunaSea() {
function FormFieldsTelegram() { function FormFieldsTelegram() {
return ( return (
<div className="border-t border-gray-200 dark:border-gray-700 py-4"> <div className="border-t border-gray-200 dark:border-gray-700 py-4">
<div className="px-4 space-y-1"> <div className="px-4">
<DialogTitle className="text-lg font-medium text-gray-900 dark:text-white"> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
Settings Settings
</DialogTitle> </DialogTitle>
@ -160,7 +160,7 @@ function FormFieldsTelegram() {
function FormFieldsPushover() { function FormFieldsPushover() {
return ( return (
<div className="border-t border-gray-200 dark:border-gray-700 py-4"> <div className="border-t border-gray-200 dark:border-gray-700 py-4">
<div className="px-4 space-y-1"> <div className="px-4">
<DialogTitle className="text-lg font-medium text-gray-900 dark:text-white"> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
Settings Settings
</DialogTitle> </DialogTitle>
@ -199,7 +199,7 @@ function FormFieldsPushover() {
function FormFieldsGotify() { function FormFieldsGotify() {
return ( return (
<div className="border-t border-gray-200 dark:border-gray-700 py-4"> <div className="border-t border-gray-200 dark:border-gray-700 py-4">
<div className="px-4 space-y-1"> <div className="px-4">
<DialogTitle className="text-lg font-medium text-gray-900 dark:text-white"> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
Settings Settings
</DialogTitle> </DialogTitle>
@ -225,7 +225,7 @@ function FormFieldsGotify() {
function FormFieldsNtfy() { function FormFieldsNtfy() {
return ( return (
<div className="border-t border-gray-200 dark:border-gray-700 py-4"> <div className="border-t border-gray-200 dark:border-gray-700 py-4">
<div className="px-4 space-y-1"> <div className="px-4">
<DialogTitle className="text-lg font-medium text-gray-900 dark:text-white"> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
Settings Settings
</DialogTitle> </DialogTitle>
@ -269,7 +269,7 @@ function FormFieldsNtfy() {
function FormFieldsShoutrrr() { function FormFieldsShoutrrr() {
return ( return (
<div className="border-t border-gray-200 dark:border-gray-700 py-4"> <div className="border-t border-gray-200 dark:border-gray-700 py-4">
<div className="px-4 space-y-1"> <div className="px-4">
<DialogTitle className="text-lg font-medium text-gray-900 dark:text-white"> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
Settings Settings
</DialogTitle> </DialogTitle>
@ -367,7 +367,7 @@ export function NotificationAddForm({ isOpen, toggle }: AddFormProps) {
leaveFrom="translate-x-0" leaveFrom="translate-x-0"
leaveTo="translate-x-full" leaveTo="translate-x-full"
> >
<div className="w-screen max-w-2xl dark:border-gray-700 border-l"> <div className="w-screen max-w-2xl">
<Formik <Formik
enableReinitialize={true} enableReinitialize={true}
initialValues={{ initialValues={{
@ -397,7 +397,7 @@ export function NotificationAddForm({ isOpen, toggle }: AddFormProps) {
<div className="h-7 flex items-center"> <div className="h-7 flex items-center">
<button <button
type="button" type="button"
className="bg-white dark:bg-gray-700 rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500" className="bg-white dark:bg-gray-700 rounded-md text-gray-400 hover:text-gray-500 focus:outline-hidden focus:ring-2 focus:ring-blue-500"
onClick={toggle} onClick={toggle}
> >
<span className="sr-only">Close panel</span> <span className="sr-only">Close panel</span>
@ -407,7 +407,7 @@ export function NotificationAddForm({ isOpen, toggle }: AddFormProps) {
</div> </div>
</div> </div>
<div className="flex flex-col space-y-4 px-1 py-6 sm:py-0 sm:space-y-0"> <div className="flex flex-col space-y-4 px-1 pt-6 sm:py-0 sm:space-y-0">
<TextFieldWide <TextFieldWide
name="name" name="name"
label="Name" label="Name"
@ -476,8 +476,8 @@ export function NotificationAddForm({ isOpen, toggle }: AddFormProps) {
<SwitchGroupWide name="enabled" label="Enabled" /> <SwitchGroupWide name="enabled" label="Enabled" />
<div className="border-t mt-2 border-gray-200 dark:border-gray-700 py-4"> <div className="border-t border-gray-200 dark:border-gray-700 py-4">
<div className="px-4 space-y-1"> <div className="px-4">
<DialogTitle className="text-lg font-medium text-gray-900 dark:text-white"> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
Events Events
</DialogTitle> </DialogTitle>
@ -486,7 +486,7 @@ export function NotificationAddForm({ isOpen, toggle }: AddFormProps) {
</p> </p>
</div> </div>
<div className="space-y-1 px-4 sm:space-y-0 sm:grid sm:gap-4 sm:py-4"> <div className="p-4 sm:grid sm:gap-4">
<EventCheckBoxes /> <EventCheckBoxes />
</div> </div>
</div> </div>
@ -494,25 +494,25 @@ export function NotificationAddForm({ isOpen, toggle }: AddFormProps) {
{componentMap[values.type]} {componentMap[values.type]}
</div> </div>
<div className="flex-shrink-0 px-4 border-t border-gray-200 dark:border-gray-700 py-4 sm:px-6"> <div className="shrink-0 px-4 border-t border-gray-200 dark:border-gray-700 py-4 sm:px-6">
<div className="space-x-3 flex justify-end"> <div className="space-x-3 flex justify-end">
<button <button
type="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 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 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={() => testNotification(values)} onClick={() => testNotification(values)}
> >
Test Test
</button> </button>
<button <button
type="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 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 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={toggle} onClick={toggle}
> >
Cancel Cancel
</button> </button>
<button <button
type="submit" type="submit"
className="inline-flex justify-center py-2 px-4 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="inline-flex justify-center py-2 px-4 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"
> >
Save Save
</button> </button>
@ -544,7 +544,7 @@ const EventCheckBoxes = () => (
name="events" name="events"
type="checkbox" type="checkbox"
value={e.value} value={e.value}
className="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded" className="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded-sm"
/> />
</div> </div>
<div className="ml-3 text-sm"> <div className="ml-3 text-sm">
@ -645,7 +645,7 @@ export function NotificationUpdateForm({ isOpen, toggle, data: notification }: U
<div> <div>
<TextFieldWide name="name" label="Name" required={true}/> <TextFieldWide name="name" label="Name" required={true}/>
<div className="space-y-2 divide-y divide-gray-200 dark:divide-gray-700"> <div className="divide-y divide-gray-200 dark:divide-gray-700">
<div className="py-4 flex items-center justify-between space-y-1 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-4"> <div className="py-4 flex items-center justify-between space-y-1 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-4">
<div> <div>
<label <label
@ -697,8 +697,8 @@ export function NotificationUpdateForm({ isOpen, toggle, data: notification }: U
</div> </div>
</div> </div>
<SwitchGroupWide name="enabled" label="Enabled"/> <SwitchGroupWide name="enabled" label="Enabled"/>
<div className="border-t border-gray-200 dark:border-gray-700 py-4"> <div className="pb-2">
<div className="px-4 space-y-1"> <div className="p-4">
<DialogTitle className="text-lg font-medium text-gray-900 dark:text-white"> <DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">
Events Events
</DialogTitle> </DialogTitle>
@ -707,7 +707,7 @@ export function NotificationUpdateForm({ isOpen, toggle, data: notification }: U
</p> </p>
</div> </div>
<div className="space-y-1 px-4 sm:space-y-0 sm:grid sm:gap-4 sm:py-2"> <div className="p-4 sm:grid sm:gap-4">
<EventCheckBoxes /> <EventCheckBoxes />
</div> </div>
</div> </div>

26
web/src/forms/settings/ProxyForms.tsx
View file

@ -78,7 +78,7 @@ export function ProxyAddForm({ isOpen, toggle }: AddFormProps) {
leaveFrom="translate-x-0" leaveFrom="translate-x-0"
leaveTo="translate-x-full" leaveTo="translate-x-full"
> >
<div className="w-screen max-w-2xl dark:border-gray-700 border-l"> <div className="w-screen max-w-2xl">
<Formik <Formik
enableReinitialize={true} enableReinitialize={true}
initialValues={initialValues} initialValues={initialValues}
@ -100,7 +100,7 @@ export function ProxyAddForm({ isOpen, toggle }: AddFormProps) {
<div className="h-7 flex items-center"> <div className="h-7 flex items-center">
<button <button
type="button" type="button"
className="bg-white dark:bg-gray-700 rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500" className="bg-white dark:bg-gray-700 rounded-md text-gray-400 hover:text-gray-500 focus:outline-hidden focus:ring-2 focus:ring-blue-500"
onClick={toggle} onClick={toggle}
> >
<span className="sr-only">Close panel</span> <span className="sr-only">Close panel</span>
@ -110,10 +110,9 @@ export function ProxyAddForm({ isOpen, toggle }: AddFormProps) {
</div> </div>
</div> </div>
<div className="py-6 space-y-4 divide-y divide-gray-200 dark:divide-gray-700"> <div className="divide-y divide-gray-200 dark:divide-gray-700">
<SwitchGroupWide name="enabled" label="Enabled" />
<TextFieldWide name="name" label="Name" defaultValue="" required={true} /> <TextFieldWide name="name" label="Name" defaultValue="" required={true} />
<SwitchGroupWide name="enabled" label="Enabled" />
<SelectFieldBasic <SelectFieldBasic
name="type" name="type"
label="Proxy type" label="Proxy type"
@ -121,7 +120,6 @@ export function ProxyAddForm({ isOpen, toggle }: AddFormProps) {
tooltip={<span>Proxy type. Commonly SOCKS5.</span>} tooltip={<span>Proxy type. Commonly SOCKS5.</span>}
help="Usually SOCKS5" help="Usually SOCKS5"
/> />
<TextFieldWide name="addr" label="Addr" required={true} help="Addr: scheme://ip:port or scheme://domain" autoComplete="off"/> <TextFieldWide name="addr" label="Addr" required={true} help="Addr: scheme://ip:port or scheme://domain" autoComplete="off"/>
</div> </div>
@ -132,25 +130,25 @@ export function ProxyAddForm({ isOpen, toggle }: AddFormProps) {
</div> </div>
<div <div
className="flex-shrink-0 px-4 border-t border-gray-200 dark:border-gray-700 py-5 sm:px-6"> className="shrink-0 px-4 border-t border-gray-200 dark:border-gray-700 py-5 sm:px-6">
<div className="space-x-3 flex justify-end"> <div className="space-x-3 flex justify-end">
<button <button
type="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 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 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={() => testProxy(values)} onClick={() => testProxy(values)}
> >
Test Test
</button> </button>
<button <button
type="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 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 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={toggle} onClick={toggle}
> >
Cancel Cancel
</button> </button>
<button <button
type="submit" type="submit"
className="inline-flex justify-center py-2 px-4 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="inline-flex justify-center py-2 px-4 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"
> >
Save Save
</button> </button>
@ -241,12 +239,9 @@ export function ProxyUpdateForm({ isOpen, toggle, data }: UpdateFormProps<Proxy>
> >
{() => ( {() => (
<div> <div>
<div className="py-6 space-y-4 divide-y divide-gray-200 dark:divide-gray-700"> <div className="divide-y divide-gray-200 dark:divide-gray-700">
<SwitchGroupWide name="enabled" label="Enabled"/>
<TextFieldWide name="name" label="Name" defaultValue="" required={true}/> <TextFieldWide name="name" label="Name" defaultValue="" required={true}/>
<SwitchGroupWide name="enabled" label="Enabled"/>
<SelectFieldBasic <SelectFieldBasic
name="type" name="type"
label="Proxy type" label="Proxy type"
@ -255,7 +250,6 @@ export function ProxyUpdateForm({ isOpen, toggle, data }: UpdateFormProps<Proxy>
tooltip={<span>Proxy type. Commonly SOCKS5.</span>} tooltip={<span>Proxy type. Commonly SOCKS5.</span>}
help="Usually SOCKS5" help="Usually SOCKS5"
/> />
<TextFieldWide name="addr" label="Addr" required={true} help="Addr: scheme://ip:port or scheme://domain" autoComplete="off"/> <TextFieldWide name="addr" label="Addr" required={true} help="Addr: scheme://ip:port or scheme://domain" autoComplete="off"/>
</div> </div>

183
web/src/index.css
View file

@ -3,101 +3,101 @@
* SPDX-License-Identifier: GPL-2.0-or-later * SPDX-License-Identifier: GPL-2.0-or-later
*/ */
@tailwind base; @import 'tailwindcss';
@tailwind components; @config '../tailwind.config.ts';
@tailwind utilities;
body { @layer utilities {
margin: 0; body {
} margin: 0;
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
@keyframes enter {
0% {
transform: scale(0.9);
opacity: 0;
} }
to { code {
transform: scale(1); font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
opacity: 1; monospace;
}
}
.animate-enter {
animation: enter 0.2s ease-out;
}
@keyframes leave {
0% {
transform: scale(1);
opacity: 1;
} }
to { @keyframes enter {
transform: scale(0.9); 0% {
opacity: 0; transform: scale(0.9);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
} }
}
.animate-leave { .animate-enter {
animation: leave 0.15s ease-in forwards; animation: enter 0.2s ease-out;
} }
.rmsc { @keyframes leave {
--rmsc-p: 0.75rem !important; 0% {
--rmsc-radius: 0.375rem !important; transform: scale(1);
--rmsc-h: unset !important; opacity: 1;
} }
.rmsc .dropdown-heading { to {
padding: 0.5rem 0.75rem !important; transform: scale(0.9);
} opacity: 0;
}
}
.rmsc .dropdown-heading-value { .animate-leave {
line-height: 1.5rem; animation: leave 0.15s ease-in forwards;
} }
.rmsc .dropdown-heading-dropdown-arrow { .rmsc {
width: 18px; --rmsc-p: 0.75rem !important;
height: 18px; --rmsc-radius: 0.375rem !important;
margin: -6px 0 0 -6px; --rmsc-h: unset !important;
} }
.rmsc .dropdown-search-clear-icon { .rmsc .dropdown-heading {
width: 18px; padding: 0.5rem 0.75rem !important;
height: 18px; }
margin: -6px 10px 0 -6px;
}
.rmsc .search input { .rmsc .dropdown-heading-value {
height: unset !important; line-height: 1.5rem;
padding: 0.5rem 0.75rem !important; }
}
.rmsc .item-renderer { .rmsc .dropdown-heading-dropdown-arrow {
align-items: center !important; width: 18px;
} height: 18px;
margin: -6px 0 0 -6px;
}
.rmsc .item-renderer input { .rmsc .dropdown-search-clear-icon {
margin: 0 0.5rem 0 0 !important; width: 18px;
} height: 18px;
margin: -6px 10px 0 -6px;
}
.rmsc .item-renderer > input[type="checkbox"] { .rmsc .search input {
border: 1px solid var(--rmsc-main); height: unset !important;
} padding: 0.5rem 0.75rem !important;
}
.rmsc.dark .item-renderer > input[type="checkbox"] { .rmsc .item-renderer {
background-color: unset; align-items: center !important;
} }
.rmsc .item-renderer > input[type="checkbox"]:hover { .rmsc .item-renderer input {
border: 1px solid var(--rmsc-main); margin: 0 0.5rem 0 0 !important;
} }
.rmsc .item-renderer > input[type='checkbox'] {
border: 1px solid var(--rmsc-main);
}
.rmsc.dark .item-renderer > input[type='checkbox'] {
background-color: unset;
}
.rmsc .item-renderer > input[type='checkbox']:hover {
border: 1px solid var(--rmsc-main);
}
html:not(.dark) .rmsc { html:not(.dark) .rmsc {
--rmsc-main: theme(colors.blue.500) !important; --rmsc-main: theme(colors.blue.500) !important;
@ -119,24 +119,25 @@ html.dark .rmsc {
color: #fff !important; color: #fff !important;
} }
html:not(.dark) .rmsc input[type="checkbox"] { html:not(.dark) .rmsc input[type='checkbox'] {
@apply border-gray-400; @apply border-gray-400;
} }
html .rmsc input[type="checkbox"]:checked { html .rmsc input[type='checkbox']:checked {
@apply bg-blue-500 border-blue-500; @apply bg-blue-500 border-blue-500;
} }
html.dark .rmsc input[type="checkbox"] { html.dark .rmsc input[type='checkbox'] {
@apply bg-gray-775 border-gray-650; @apply bg-gray-775 border-gray-650;
} }
html .dropdown-content > div.panel-content { html .dropdown-content > div.panel-content {
@apply border border-gray-350 !shadow-2xl; @apply border border-gray-350 shadow-2xl!;
} }
html.dark .dropdown-content > div.panel-content { html.dark .dropdown-content > div.panel-content {
@apply border border-gray-700 !shadow-2xl; @apply border border-gray-700 shadow-2xl!;
}
} }
@layer base { @layer base {

2
web/src/routes.tsx
View file

@ -383,7 +383,7 @@ const routeTree = RootRoute.addChildren([
export const Router = createRouter({ export const Router = createRouter({
routeTree, routeTree,
defaultPendingComponent: () => ( defaultPendingComponent: () => (
<div className="flex flex-grow items-center justify-center col-span-9"> <div className="flex grow items-center justify-center col-span-9">
<RingResizeSpinner className="text-blue-500 size-24" /> <RingResizeSpinner className="text-blue-500 size-24" />
</div> </div>
), ),

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

@ -8,7 +8,7 @@ import { ActivityTable } from "./dashboard/ActivityTable";
export const Dashboard = () => ( export const Dashboard = () => (
<main> <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 /> <Stats />
<ActivityTable /> <ActivityTable />
</div> </div>

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

@ -100,11 +100,11 @@ export const Logs = () => {
return ( return (
<main> <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> <h1 className="text-3xl font-bold text-black dark:text-white">Logs</h1>
</div> </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="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"> <div className="flex relative mb-3">
<DebounceInput <DebounceInput
@ -116,7 +116,7 @@ export const Logs = () => {
}} }}
className={classNames( 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", "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..." placeholder="Enter a regex pattern to filter logs by..."
/> />
@ -162,7 +162,7 @@ export const Logs = () => {
</div> </div>
</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"> <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 /> <LogFiles />
</div> </div>
@ -323,7 +323,7 @@ const LogsDropdown = () => {
leaveTo="transform opacity-0 scale-95" leaveTo="transform opacity-0 scale-95"
> >
<MenuItems <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"> <div className="p-3">
<MenuItem> <MenuItem>

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

@ -19,7 +19,7 @@ export const Releases = () => {
const [isHintOpen, setIsHintOpen] = useState(false); const [isHintOpen, setIsHintOpen] = useState(false);
return ( return (
<main> <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> <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"> <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. 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 "} {"As always, please refer to our "}
<ExternalLink <ExternalLink
href="https://autobrr.com/usage/search/" 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 Search function usage
</ExternalLink> </ExternalLink>
@ -88,7 +88,7 @@ export const Releases = () => {
</div> </div>
) : null} ) : null}
</div> </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 /> <ReleaseTable />
</div> </div>
</main> </main>

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

@ -73,7 +73,7 @@ function SubNavLink({ item }: NavLinkProps) {
) )
}> }>
<item.icon <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" aria-hidden="true"
/> />
<span className="truncate">{item.name}</span> <span className="truncate">{item.name}</span>
@ -103,11 +103,11 @@ function SidebarNav({ subNavigation }: SidebarNavProps) {
export function Settings() { export function Settings() {
return ( return (
<main> <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> <h1 className="text-3xl font-bold text-black dark:text-white">Settings</h1>
</div> </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="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"> <div className="lg:grid lg:grid-cols-12">
<SidebarNav subNavigation={subNavigation}/> <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 */} {/* Wait for OIDC config to load before rendering any login forms */}
{typeof oidcConfig !== 'undefined' && ( {typeof oidcConfig !== 'undefined' && (
<div className="mt-10 sm:mx-auto sm:w-full sm:max-w-[480px]"> <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 */} {/* Built-in login form */}
{!canOnboard && (!oidcConfig?.enabled || !oidcConfig?.disableBuiltInLogin) && ( {!canOnboard && (!oidcConfig?.enabled || !oidcConfig?.disableBuiltInLogin) && (
<> <>
@ -173,7 +173,8 @@ export const Login = () => {
<Tooltip <Tooltip
label={ label={
<div className="flex flex-row items-center cursor-pointer text-gray-700 dark:text-gray-200"> <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> </div>
} }
> >
@ -184,9 +185,9 @@ export const Login = () => {
<button <button
type="submit" 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 Sign in
</button> </button>
</form> </form>
@ -210,7 +211,7 @@ export const Login = () => {
<button <button
type="button" type="button"
onClick={handleOIDCLogin} 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" /> <FontAwesomeIcon icon={faOpenid} className="h-5 w-5" />
<span>OpenID Connect</span> <span>OpenID Connect</span>

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

@ -85,7 +85,7 @@ export const Onboarding = () => {
</div> </div>
<button <button
type="submit" 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" /> <UserPlusIcon className="w-4 h-4 mr-1.5" />
Create account Create account

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

@ -53,7 +53,7 @@ function Table({ columns, data }: TableProps) {
<th <th
key={header.id} key={header.id}
scope="col" 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} colSpan={header.colSpan}
> >
<div className="flex items-center justify-between"> <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={{}} params={{}}
> >
<dt> <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> <p className="pb-0.5 truncate">{name}</p>
<LinkIcon className="h-3 w-3 ml-2" aria-hidden="true" /> <LinkIcon className="h-3 w-3 ml-2" aria-hidden="true" />
</div> </div>

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

@ -63,7 +63,7 @@ function TabNavLink({ item }: NavLinkProps) {
<span <span
className={ className={
classNames( 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 isActive
? "text-blue-600 dark:text-white border-blue-600 dark:border-blue-500" ? "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" : "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"> <div className="px-0.5 mt-8 flex flex-col-reverse sm:flex-row flex-wrap-reverse justify-between">
<button <button
type="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} onClick={toggleDeleteModal}
> >
Delete Filter 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>} */} {/* {dirty && <span className="mr-4 text-sm text-gray-500">Unsaved changes..</span>} */}
<button <button
type="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) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
reset(); reset();
@ -127,7 +127,7 @@ const FormButtonsGroup = ({ values, deleteAction, reset, isLoading }: FormButton
</button> </button>
<button <button
type="submit" 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 Save
</button> </button>
@ -367,7 +367,7 @@ export const FilterDetails = () => {
return ( return (
<main> <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"> <h1 className="text-3xl font-bold">
<Link to="/filters"> <Link to="/filters">
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" /> <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> <h1 className="text-3xl font-bold truncate" title={filter.name}>{filter.name}</h1>
</div> </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="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"> <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"> <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"> <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 <button
type="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) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
if (isOpen) { if (isOpen) {
@ -52,7 +52,7 @@ const ModalLower = ({ isOpen, setIsOpen, onImportClick }: ModalLowerProps) => (
</button> </button>
<button <button
type="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) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
setIsOpen(false); 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"> <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> <ModalUpper>
<textarea <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)" placeholder="Paste your filter data here (either autobrr JSON format or your entire autodl-irssi config)"
value={inputFilterText} value={inputFilterText}
onChange={(event) => { onChange={(event) => {

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

@ -106,13 +106,13 @@ export function Filters() {
setIsOpen={setShowImportModal} 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> <h1 className="text-3xl font-bold text-black dark:text-white">Filters</h1>
<Menu as="div" className="relative"> <Menu as="div" className="relative">
{({ open }) => ( {({ open }) => (
<> <>
<button <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; }) => { onClick={(e: { stopPropagation: () => void; }) => {
if (!open) { if (!open) {
e.stopPropagation(); e.stopPropagation();
@ -123,7 +123,7 @@ export function Filters() {
<PlusIcon className="h-5 w-5 mr-1" /> <PlusIcon className="h-5 w-5 mr-1" />
Create Filter Create Filter
</button> </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" /> <ChevronDownIcon className="h-5 w-5" />
</MenuButton> </MenuButton>
<Transition <Transition
@ -143,7 +143,7 @@ export function Filters() {
type="button" type="button"
className={classNames( className={classNames(
active ? "bg-gray-50 dark:bg-gray-600" : "", 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)} onClick={() => setShowImportModal(true)}
> >
@ -207,7 +207,7 @@ function FilterList({ toggleCreateFilter }: any) {
const filtered = filteredData(data ?? [], status); const filtered = filteredData(data ?? [], status);
return ( 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="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="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"> <div className="flex gap-4">
@ -406,7 +406,7 @@ const FilterItemDropdown = ({ filter, onToggle }: FilterItemDropdownProps) => {
> >
<MenuItems <MenuItems
anchor={{ to: 'bottom end', padding: '8px' }} // padding: '8px' === m-2 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"> <div className="px-1 py-1">
<MenuItem> <MenuItem>
@ -737,7 +737,7 @@ const ListboxFilter = ({
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<ListboxOptions <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} {children}
</ListboxOptions> </ListboxOptions>

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

@ -31,14 +31,14 @@ export const FilterNotFound = () => {
{" "} {" "}
<ExternalLink <ExternalLink
href="https://github.com/autobrr/autobrr" 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 GitHub page
</ExternalLink> </ExternalLink>
{" or to "} {" or to "}
<ExternalLink <ExternalLink
href="https://discord.gg/WQ2eUycxyT" 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 our official Discord channel
</ExternalLink> </ExternalLink>
@ -50,7 +50,7 @@ export const FilterNotFound = () => {
<div className="flex justify-center"> <div className="flex justify-center">
<Link to="/filters"> <Link to="/filters">
<button <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 Back to filters
</button> </button>

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

@ -93,10 +93,10 @@ export function Actions() {
title="Actions" title="Actions"
subtitle="Add to download clients or run custom commands." 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 <button
type="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)} onClick={() => push(newAction)}
> >
<BoltIcon <BoltIcon
@ -247,7 +247,7 @@ function FilterActionsItem({ action, clients, idx, initialEdit, remove }: Filter
{action.name} {action.name}
</p> </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"> <div className="flex overflow-hidden -space-x-1">
<span className="text-sm font-normal text-gray-500 dark:text-gray-400"> <span className="text-sm font-normal text-gray-500 dark:text-gray-400">
{ActionTypeNameMap[action.type]} {ActionTypeNameMap[action.type]}
@ -255,7 +255,7 @@ function FilterActionsItem({ action, clients, idx, initialEdit, remove }: Filter
</div> </div>
</div> </div>
</div> </div>
<div className="ml-5 flex-shrink-0"> <div className="ml-5 shrink-0">
<ChevronRightIcon <ChevronRightIcon
className="h-5 w-5 text-gray-400" className="h-5 w-5 text-gray-400"
aria-hidden="true" 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"> <div className="pt-6 pb-4 flex space-x-2 justify-between">
<button <button
type="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} onClick={toggleDeleteModal}
> >
Remove Action Remove Action
@ -311,7 +311,7 @@ function FilterActionsItem({ action, clients, idx, initialEdit, remove }: Filter
<button <button
type="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} onClick={toggleEdit}
> >
Close Close

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

@ -47,10 +47,10 @@ export function External() {
title="External filters" title="External filters"
subtitle="Run external scripts or webhooks and check status as part of filtering." 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 <button
type="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)} onClick={() => push(newItem)}
> >
<SquaresPlusIcon <SquaresPlusIcon
@ -170,7 +170,7 @@ function FilterExternalItem({ idx, external, initialEdit, remove, move }: Filter
</p> </p>
</div> </div>
</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"> <div className="flex overflow-hidden -space-x-1">
<span className="text-sm font-normal text-gray-500 dark:text-gray-400"> <span className="text-sm font-normal text-gray-500 dark:text-gray-400">
{ExternalFilterTypeNameMap[external.type]} {ExternalFilterTypeNameMap[external.type]}
@ -178,7 +178,7 @@ function FilterExternalItem({ idx, external, initialEdit, remove, move }: Filter
</div> </div>
</div> </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" /> <ChevronRightIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
</div> </div>
</button> </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"> <div className="pt-6 pb-4 space-x-2 flex justify-between">
<button <button
type="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} onClick={toggleDeleteModal}
> >
Remove External Remove External
@ -231,7 +231,7 @@ function FilterExternalItem({ idx, external, initialEdit, remove, move }: Filter
<button <button
type="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} onClick={toggleEdit}
> >
Close Close

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

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

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

@ -52,7 +52,7 @@ const ListboxFilter = ({
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<ListboxOptions <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="" /> <FilterOption label="All" value="" />
{children} {children}

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

@ -267,7 +267,7 @@ export const ReleaseTable = () => {
key={header.id} key={header.id}
scope="col" scope="col"
colSpan={header.colSpan} 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"> <div className="flex items-center justify-between">
{header.isPlaceholder {header.isPlaceholder
@ -333,7 +333,7 @@ export const ReleaseTable = () => {
<label> <label>
<span className="sr-only bg-gray-700">Items Per Page</span> <span className="sr-only bg-gray-700">Items Per Page</span>
<select <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} value={tableInstance.getState().pagination.pageSize}
onChange={e => { onChange={e => {
tableInstance.setPageSize(Number(e.target.value)); tableInstance.setPageSize(Number(e.target.value));
@ -348,7 +348,7 @@ export const ReleaseTable = () => {
</label> </label>
</div> </div>
<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 <TablePageButton
className="rounded-l-md" className="rounded-l-md"
onClick={() => tableInstance.firstPage()} onClick={() => tableInstance.firstPage()}

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

@ -145,7 +145,7 @@ function Credentials() {
<div className="flex justify-end"> <div className="flex justify-end">
<button <button
type="submit" 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" /> <UserIcon className="w-4 h-4 mr-1" />
Save Save

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

@ -34,7 +34,7 @@ function APISettings() {
rightSide={ rightSide={
<button <button
type="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} onClick={toggleAddForm}
> >
<PlusIcon className="h-5 w-5 mr-1" /> <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." 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"> <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 && ( {data && (
<div className="grid grid-cols-12 gap-2 sm:gap-6 px-4 sm:px-6"> <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"> <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={ rightSide={
<button <button
type="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} onClick={toggleAddClient}
> >
<PlusIcon className="h-5 w-5 mr-1" /> <PlusIcon className="h-5 w-5 mr-1" />

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

@ -319,7 +319,7 @@ const FeedItemDropdown = ({
> >
<MenuItems <MenuItems
anchor={{ to: 'bottom end', padding: '8px' }} // padding: '8px' === m-2 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"> <div className="px-1 py-1">
<MenuItem> <MenuItem>

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

@ -184,7 +184,7 @@ function IndexerSettings() {
<button <button
type="button" type="button"
onClick={toggleAddIndexer} 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" /> <PlusIcon className="h-5 w-5 mr-1" />
Add new Add new
@ -198,19 +198,19 @@ function IndexerSettings() {
<ul className="min-w-full relative"> <ul className="min-w-full relative">
<li className="grid grid-cols-12 border-b border-gray-200 dark:border-gray-700"> <li className="grid grid-cols-12 border-b border-gray-200 dark:border-gray-700">
<div <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")} onClick={() => sortedIndexers.requestSort("enabled")}
> >
Enabled <span className="sort-indicator">{sortedIndexers.getSortIndicator("enabled")}</span> Enabled <span className="sort-indicator">{sortedIndexers.getSortIndicator("enabled")}</span>
</div> </div>
<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")} onClick={() => sortedIndexers.requestSort("name")}
> >
Name <span className="sort-indicator">{sortedIndexers.getSortIndicator("name")}</span> Name <span className="sort-indicator">{sortedIndexers.getSortIndicator("name")}</span>
</div> </div>
<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")} onClick={() => sortedIndexers.requestSort("implementation")}
> >
Implementation <span className="sort-indicator">{sortedIndexers.getSortIndicator("implementation")}</span> 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 <button
type="button" type="button"
onClick={toggleAddNetwork} 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" /> <PlusIcon className="h-5 w-5 mr-1" />
Add new Add new
@ -145,7 +145,7 @@ const IrcSettings = () => {
</ul> </ul>
<div className="flex gap-x-2"> <div className="flex gap-x-2">
<button <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} onClick={toggleExpand}
title={expandNetworks ? "collapse" : "expand"} title={expandNetworks ? "collapse" : "expand"}
> >
@ -390,7 +390,7 @@ const ChannelItem = ({ network, channel }: ChannelItemProps) => {
</span> </span>
</div> </div>
<div className="col-span-1 flex items-center justify-end"> <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"} {viewChannel ? "Hide" : "View"}
</button> </button>
</div> </div>
@ -479,7 +479,7 @@ const ListItemDropdown = ({
> >
<MenuItems <MenuItems
anchor={{ to: 'bottom end', padding: '8px' }} // padding: '8px' === m-2 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"> <div className="px-1 py-1">
<MenuItem> <MenuItem>
@ -609,7 +609,7 @@ const ReprocessAnnounceButton = ({ networkId, channel, msg }: ReprocessAnnounceP
return ( return (
<div className="block"> <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 {mutation.isPending
? <RingResizeSpinner className="text-blue-500 iconHeight" aria-hidden="true" /> ? <RingResizeSpinner className="text-blue-500 iconHeight" aria-hidden="true" />
: <ArrowPathIcon /> : <ArrowPathIcon />
@ -720,7 +720,7 @@ export const Events = ({ network, channel }: EventsProps) => {
<div <div
className={classNames( className={classNames(
"overflow-y-auto rounded-lg min-w-full bg-gray-100 dark:bg-gray-900 overflow-auto", "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} ref={messagesEndRef}
> >
@ -730,7 +730,7 @@ export const Events = ({ network, channel }: EventsProps) => {
className={classNames( className={classNames(
settings.indentLogLines ? "grid justify-start grid-flow-col" : "", settings.indentLogLines ? "grid justify-start grid-flow-col" : "",
settings.hideWrappedText ? "truncate hover:text-ellipsis hover:whitespace-normal" : "", 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} /> <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) // at IRCLogsDropdown (http://localhost:3000/src/screens/settings/Irc.tsx?t=1694269937935:1354:53)
return ( return (
<Menu as="div" className="relative"> <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> <span className="flex items-center">Options <Cog6ToothIcon className="ml-1 w-4 h-4" /></span>
</MenuButton> </MenuButton>
<Transition <Transition
@ -791,7 +791,7 @@ const IRCLogsDropdown = () => {
> >
<MenuItems <MenuItems
anchor={{ to: 'bottom end', padding: '8px' }} // padding: '8px' === m-2 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> <MenuItem>
{() => ( {() => (

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

@ -34,7 +34,7 @@ function ListsSettings() {
<button <button
type="button" type="button"
onClick={toggleAddList} 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"/> <PlusIcon className="h-5 w-5 mr-1"/>
Add new Add new
@ -91,7 +91,7 @@ interface FilterPillProps {
const FilterPill: FC<FilterPillProps> = ({ filter }) => ( const FilterPill: FC<FilterPillProps> = ({ filter }) => (
<Link <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`} to={`/filters/$filterId`}
params={{ filterId: filter.id }} params={{ filterId: filter.id }}
> >

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

@ -40,7 +40,7 @@ function NotificationSettings() {
<button <button
type="button" type="button"
onClick={toggleAddNotifications} 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" /> <PlusIcon className="h-5 w-5 mr-1" />
Add new 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 = { const iconComponentMap: componentMapType = {
DISCORD: <span className={iconStyle}><DiscordIcon /> Discord</span>, DISCORD: <span className={iconStyle}><DiscordIcon /> Discord</span>,
NOTIFIARR: <span className={iconStyle}><NotifiarrIcon /> Notifiarr</span>, NOTIFIARR: <span className={iconStyle}><NotifiarrIcon /> Notifiarr</span>,

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

@ -86,7 +86,7 @@ function ProxySettings() {
<button <button
type="button" type="button"
onClick={toggleAddProxy} 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"/> <PlusIcon className="h-5 w-5 mr-1"/>
Add new Add new
@ -100,21 +100,21 @@ function ProxySettings() {
<ul className="min-w-full relative"> <ul className="min-w-full relative">
<li className="grid grid-cols-12 border-b border-gray-200 dark:border-gray-700"> <li className="grid grid-cols-12 border-b border-gray-200 dark:border-gray-700">
<div <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")} // onClick={() => sortedIndexers.requestSort("enabled")}
> >
Enabled Enabled
{/*<span className="sort-indicator">{sortedIndexers.getSortIndicator("enabled")}</span>*/} {/*<span className="sort-indicator">{sortedIndexers.getSortIndicator("enabled")}</span>*/}
</div> </div>
<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")} // onClick={() => sortedIndexers.requestSort("name")}
> >
Name Name
{/*<span className="sort-indicator">{sortedIndexers.getSortIndicator("name")}</span>*/} {/*<span className="sort-indicator">{sortedIndexers.getSortIndicator("name")}</span>*/}
</div> </div>
<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")} // onClick={() => sortedIndexers.requestSort("implementation")}
> >
Type Type

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

@ -80,7 +80,7 @@ const RegexPlayground = () => {
id="input-regex" id="input-regex"
type="text" type="text"
autoComplete="true" 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 <label
htmlFor="input-lines" htmlFor="input-lines"
@ -90,7 +90,7 @@ const RegexPlayground = () => {
</label> </label>
<div <div
id="input-lines" 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 ?? "")} onInput={(e) => onInput(e.currentTarget.innerText ?? "")}
contentEditable contentEditable
></div> ></div>

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

@ -26,7 +26,7 @@ const ReleaseSettings = () => (
<ReleaseProfileDuplicates/> <ReleaseProfileDuplicates/>
<div className="py-6 px-4 sm:p-6"> <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"> <div className="py-6 px-4 sm:p-6">
<DeleteReleases/> <DeleteReleases/>
</div> </div>
@ -111,7 +111,7 @@ function ReleaseProfileDuplicates() {
rightSide={ rightSide={
<button <button
type="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} onClick={toggleAdd}
> >
<PlusIcon className="h-5 w-5 mr-1"/> <PlusIcon className="h-5 w-5 mr-1"/>
@ -320,7 +320,7 @@ function DeleteReleases() {
toggleDeleteModal(); 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 Delete
</button> </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>} {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> <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{description}</p>
</div> </div>
<div className="flex-shrink-0"> <div className="shrink-0">
{rightSide ?? null} {rightSide ?? null}
</div> </div>
</div> </div>
@ -80,7 +80,7 @@ export const RowItem = ({
? ( ? (
<> <>
{typeof (value) === "string" ? ( {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} {value}
</span> </span>
) : value} ) : value}

3
web/vite.config.ts
View file

@ -5,6 +5,7 @@ import react from "@vitejs/plugin-react-swc";
import svgr from "vite-plugin-svgr"; import svgr from "vite-plugin-svgr";
import path from "node:path"; import path from "node:path";
import fs from "node:fs"; import fs from "node:fs";
import tailwindcss from '@tailwindcss/vite'
interface PreRenderedAsset { interface PreRenderedAsset {
name: string | undefined; name: string | undefined;
@ -21,7 +22,7 @@ export default ({ mode }: ConfigEnv) => {
return defineConfig({ return defineConfig({
// __BASE_URL__: "{{.BaseUrl}}", // __BASE_URL__: "{{.BaseUrl}}",
base: "", base: "",
plugins: [react(), svgr(), VitePWA({ plugins: [react(), svgr(), tailwindcss(), VitePWA({
injectRegister: null, injectRegister: null,
selfDestroying: true, selfDestroying: true,
scope: "{{.BaseUrl}}", scope: "{{.BaseUrl}}",