idanoo/autobrr
1
0
Fork 0
mirror of https://github.com/idanoo/autobrr synced 2025-07-26 10:19:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

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

* chore(web): cleanup unused compatibility styles code

* fix(web): application settings border

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

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

* fix(web): select text input color

* fix(web): indexer form paddings

* fix(web): feed and notification update form

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

* fix(web): fix proxy forms

* deps(web): remove PostCSS dependency

* web: remove hover animation on release tables

* fix(web): filter tab transitions

* fix(web): linting

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

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

@ -65,7 +65,7 @@ export const Checkbox = ({
className={classNames(
value ? "translate-x-6" : "translate-x-[0.15rem]",
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

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

@ -38,7 +38,7 @@ export const ErrorPage = ({ error, reset }: ErrorPageProps) => {
return (
<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">
{pageTitle}
</h1>
@ -47,14 +47,14 @@ export const ErrorPage = ({ error, reset }: ErrorPageProps) => {
{" "}
<ExternalLink
href="https://github.com/autobrr/autobrr"
className="text-gray-700 dark:text-gray-200 underline font-semibold underline-offset-2 decoration-sky-500 hover:decoration-2 hover:text-black hover:dark:text-gray-100"
className="text-gray-700 dark:text-gray-200 underline font-semibold underline-offset-2 decoration-sky-500 hover:decoration-2 hover:text-black dark:hover:text-gray-100"
>
GitHub page
</ExternalLink>
{" or to "}
<ExternalLink
href="https://discord.gg/WQ2eUycxyT"
className="text-gray-700 dark:text-gray-200 underline font-semibold underline-offset-2 decoration-purple-500 hover:decoration-2 hover:text-black hover:dark:text-gray-100"
className="text-gray-700 dark:text-gray-200 underline font-semibold underline-offset-2 decoration-purple-500 hover:decoration-2 hover:text-black dark:hover:text-gray-100"
>
our official Discord channel
</ExternalLink>
@ -87,7 +87,7 @@ export const ErrorPage = ({ error, reset }: ErrorPageProps) => {
</span>
<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) => {
event.preventDefault();
reset();

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

@ -28,14 +28,14 @@ export const NotFound = () => {
{" "}
<ExternalLink
href="https://github.com/autobrr/autobrr"
className="text-gray-700 dark:text-gray-200 underline font-semibold underline-offset-2 decoration-sky-500 hover:decoration-2 hover:text-black hover:dark:text-gray-100"
className="text-gray-700 dark:text-gray-200 underline font-semibold underline-offset-2 decoration-sky-500 hover:decoration-2 hover:text-black dark:hover:text-gray-100"
>
GitHub page
</ExternalLink>
{" or to "}
<ExternalLink
href="https://discord.gg/WQ2eUycxyT"
className="text-gray-700 dark:text-gray-200 underline font-semibold underline-offset-2 decoration-purple-500 hover:decoration-2 hover:text-black hover:dark:text-gray-100"
className="text-gray-700 dark:text-gray-200 underline font-semibold underline-offset-2 decoration-purple-500 hover:decoration-2 hover:text-black dark:hover:text-gray-100"
>
our official Discord channel
</ExternalLink>
@ -47,7 +47,7 @@ export const NotFound = () => {
<div className="flex justify-center">
<Link to="/">
<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
</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"
)}
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">
<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"

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

@ -179,7 +179,7 @@ const RetryActionButton = ({ status }: RetryActionButtonProps) => {
};
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>
{mutation.isPending
? <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}
className={classNames(
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

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

@ -28,7 +28,7 @@ export const EmptySimple = ({
<button
type="button"
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" />
{buttonText}
@ -51,7 +51,7 @@ export function EmptyListState({ text, buttonText, buttonOnClick }: EmptyListSta
{buttonText && buttonOnClick && (
<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}
>
{buttonText}

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

@ -60,19 +60,19 @@ export const KeyField = ({ value }: KeyFieldProps) => {
return (
<div className="sm:col-span-2 w-full">
<div className="flex rounded-md shadow-sm">
<div className="relative flex items-stretch flex-grow focus-within:z-10">
<div className="flex rounded-md shadow-xs">
<div className="relative flex items-stretch grow focus-within:z-10">
<input
id="keyfield"
type={isVisible ? "text" : "password"}
value={value}
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>
<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}
title="show"
>
@ -80,7 +80,7 @@ export const KeyField = ({ value }: KeyFieldProps) => {
</button>
<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}
title="Copy to clipboard"
>

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

@ -51,11 +51,11 @@ export const Header = () => {
return (
<Disclosure
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 }) => (
<>
<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="flex items-center justify-between h-16 px-4 sm:px-0">
<LeftNav />
@ -82,7 +82,7 @@ export const Header = () => {
{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" />
<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>

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

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

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

@ -26,7 +26,7 @@ export const MobileNav = (props: RightNavProps) => (
return (
<span className={
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
? "underline underline-offset-2 decoration-2 decoration-sky-500 font-bold text-black"
: "font-medium"
@ -43,7 +43,7 @@ export const MobileNav = (props: RightNavProps) => (
e.preventDefault();
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
</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">
<button
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)"}
>
{settings.darkTheme ? (
@ -89,7 +89,7 @@ export const RightNav = (props: RightNavProps) => {
>
<MenuItems
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>
{({ active }) => (

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

@ -42,8 +42,8 @@ export const RequiredField = ({ required }: RequiredFieldProps) => (
export const SelectInput = (props: InputProps) => (
<components.Input
{...props}
inputClassName="outline-none border-none shadow-none focus:ring-transparent"
className="text-gray-400 dark:text-gray-100"
inputClassName="outline-hidden border-none shadow-none focus:ring-transparent"
className="text-gray-400! dark:text-gray-100!"
children={props.children}
/>
);
@ -51,7 +51,7 @@ export const SelectInput = (props: InputProps) => (
export const SelectControl = (props: ControlProps) => (
<components.Control
{...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}
/>
);
@ -59,7 +59,7 @@ export const SelectControl = (props: ControlProps) => (
export const SelectMenu = (props: MenuProps) => (
<components.Menu
{...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}
/>
);
@ -68,8 +68,8 @@ export const SelectOption = (props: OptionProps) => (
<components.Option
{...props}
className={classNames(
"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"
"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"
)}
children={props.children}
/>
@ -78,13 +78,13 @@ export const SelectOption = (props: OptionProps) => (
export const IndicatorSeparator = (props: IndicatorSeparatorProps) => (
<components.IndicatorSeparator
{...props}
className="!bg-gray-400 dark:!bg-gray-700"
className="bg-gray-400! dark:bg-gray-700!"
/>
);
export const DropdownIndicator = (props: DropdownIndicatorProps) => (
<components.DropdownIndicator
{...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
? "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",
"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 "
)}
placeholder={placeholder}
@ -161,7 +161,7 @@ export const PasswordFieldWide = ({
meta.touched && meta.error
? "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",
"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}
required={required}
@ -232,7 +232,7 @@ export const NumberFieldWide = ({
meta.touched && meta.error
? "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",
"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) => {
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
? "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",
"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
? "bg-blue-600 dark:bg-blue-500 border-transparent"
: "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"
/>
@ -91,7 +91,7 @@ function RadioFieldsetWide({ name, legend, options }: props) {
>
<div className="flex justify-between">
{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>
</Label>
<Description

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

@ -170,7 +170,7 @@ export function DownloadClientSelect({
Client
</Label>
<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">
{field.value
? clients.find((c) => c.id === field.value)?.name
@ -192,7 +192,7 @@ export function DownloadClientSelect({
>
<ListboxOptions
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
.filter((c) => c.type === action.type)
@ -300,7 +300,7 @@ export const Select = ({
) : label}
</Label>
<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">
{field.value
? options.find((c) => c.value === field.value)?.label
@ -324,7 +324,7 @@ export const Select = ({
>
<ListboxOptions
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) => (
<ListboxOption
@ -399,7 +399,7 @@ export const SelectWide = ({
{label}
</Label>
<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">
{field.value
? options.find((c) => c.value === field.value)?.label
@ -423,7 +423,7 @@ export const SelectWide = ({
>
<ListboxOptions
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) => (
<ListboxOption
@ -512,7 +512,7 @@ export const AgeSelect = ({
{({ open }) => (
<div>
<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">
{duration ? options.find(opt => opt.value === duration)?.label : 'Select...'}
</span>
@ -527,7 +527,7 @@ export const AgeSelect = ({
leaveFrom="opacity-100"
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) => (
<ListboxOption
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}
aria-invalid={hasError}
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
? "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"
@ -175,7 +175,7 @@ export const PasswordInput = <TFormValues extends Record<string, unknown>>({
aria-invalid={hasError}
type={isVisible ? "text" : "password"}
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
? "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"

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

@ -63,7 +63,7 @@ const ModalLower = ({ isOpen, isLoading, toggle, deleteAction }: ModalLowerProps
<>
<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) => {
e.preventDefault();
if (isOpen) {
@ -76,7 +76,7 @@ const ModalLower = ({ isOpen, isLoading, toggle, deleteAction }: ModalLowerProps
</button>
<button
type="button"
className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-sm px-4 py-2 bg-white dark:bg-gray-700 text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-xs px-4 py-2 bg-white dark:bg-gray-700 text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
onClick={(e) => {
e.preventDefault();
toggle();
@ -183,7 +183,7 @@ export const ForceRunModal: FC<ForceRunModalProps> = (props: ForceRunModalProps)
<input
type="text"
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"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
@ -205,14 +205,14 @@ export const ForceRunModal: FC<ForceRunModalProps> = (props: ForceRunModalProps)
disabled={!isInputCorrect}
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"
} 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}
>
Force Run
</button>
<button
type="button"
className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-sm px-4 py-2 bg-white dark:bg-gray-700 text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-xs px-4 py-2 bg-white dark:bg-gray-700 text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
onClick={handleCancel}
>
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="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 === "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" />}
@ -38,9 +38,9 @@ const Toast: FC<Props> = ({ type, body, t }) => (
</p>
<span className="mt-1 text-sm text-gray-500 dark:text-gray-400">{body}</span>
</div>
<div className="ml-4 flex-shrink-0 flex">
<div className="ml-4 shrink-0 flex">
<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={() => {
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"
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
initialValues={initialValues}
@ -113,7 +113,7 @@ function SlideOver<DataType extends FormikValues>({
<div className="h-7 flex items-center">
<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}
>
<span className="sr-only">Close panel</span>
@ -128,12 +128,12 @@ function SlideOver<DataType extends FormikValues>({
) : null}
</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")}>
{type === "UPDATE" && (
<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}
>
Remove
@ -154,7 +154,7 @@ function SlideOver<DataType extends FormikValues>({
? "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",
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}
onClick={(e) => {
@ -195,7 +195,7 @@ function SlideOver<DataType extends FormikValues>({
<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) => {
e.preventDefault();
toggle();
@ -205,7 +205,7 @@ function SlideOver<DataType extends FormikValues>({
</button>
<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) => {
e.preventDefault();
formRef.current?.submitForm();