mirror of
https://github.com/idanoo/autobrr
synced 2025-07-25 09:49:13 +00:00
refactor(web): update deprecated HeadlessUI v2 components (#1580)
* refactor(web): move away from old headless UI dot notation * refactor(web): refactor `Disclosure` component * refactor(web): rename formik's `Field` to `FormikField` and keep original HeadlessUI component names
This commit is contained in:
martylukyy
GitHub
parent
21a8e27260
commit
7d7bf9ed4c
13 changed files with 185 additions and 176 deletions
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
import { Fragment, useEffect, useRef, useState } from "react";
|
||||
import { useSuspenseQuery } from "@tanstack/react-query";
|
||||
import { Menu, Transition } from "@headlessui/react";
|
||||
import { Menu, MenuButton, MenuItem, MenuItems, Transition } from "@headlessui/react";
|
||||
import { DebounceInput } from "react-debounce-input";
|
||||
import {
|
||||
Cog6ToothIcon,
|
||||
|
|
@ -307,12 +307,12 @@ const LogsDropdown = () => {
|
|||
|
||||
return (
|
||||
<Menu as="div">
|
||||
<Menu.Button className="px-4 py-2">
|
||||
<MenuButton className="px-4 py-2">
|
||||
<Cog6ToothIcon
|
||||
className="w-5 h-5 text-gray-700 hover:text-gray-900 dark:text-gray-100 dark:hover:text-gray-400"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</Menu.Button>
|
||||
</MenuButton>
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
|
|
@ -322,11 +322,11 @@ const LogsDropdown = () => {
|
|||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items
|
||||
<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"
|
||||
>
|
||||
<div className="p-3">
|
||||
<Menu.Item>
|
||||
<MenuItem>
|
||||
{() => (
|
||||
<Checkbox
|
||||
label="Scroll to bottom on new message"
|
||||
|
|
@ -334,8 +334,8 @@ const LogsDropdown = () => {
|
|||
setValue={(newValue) => onSetValue("scrollOnNewLog", newValue)}
|
||||
/>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
{() => (
|
||||
<Checkbox
|
||||
label="Indent log lines"
|
||||
|
|
@ -344,8 +344,8 @@ const LogsDropdown = () => {
|
|||
setValue={(newValue) => onSetValue("indentLogLines", newValue)}
|
||||
/>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
{() => (
|
||||
<Checkbox
|
||||
label="Hide wrapped text"
|
||||
|
|
@ -354,9 +354,9 @@ const LogsDropdown = () => {
|
|||
setValue={(newValue) => onSetValue("hideWrappedText", newValue)}
|
||||
/>
|
||||
)}
|
||||
</Menu.Item>
|
||||
</MenuItem>
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</MenuItems>
|
||||
</Transition>
|
||||
</Menu>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -6,7 +6,16 @@
|
|||
import { Dispatch, FC, Fragment, MouseEventHandler, useCallback, useEffect, useReducer, useRef, useState } from "react";
|
||||
import { Link } from '@tanstack/react-router'
|
||||
import { toast } from "react-hot-toast";
|
||||
import { Listbox, Menu, Transition } from "@headlessui/react";
|
||||
import {
|
||||
Listbox,
|
||||
ListboxButton,
|
||||
ListboxOption, ListboxOptions,
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuItem,
|
||||
MenuItems,
|
||||
Transition
|
||||
} from "@headlessui/react";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import {
|
||||
ArrowsRightLeftIcon,
|
||||
|
|
@ -114,9 +123,9 @@ export function Filters() {
|
|||
<PlusIcon className="h-5 w-5 mr-1" />
|
||||
Create Filter
|
||||
</button>
|
||||
<Menu.Button 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-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">
|
||||
<ChevronDownIcon className="h-5 w-5" />
|
||||
</Menu.Button>
|
||||
</MenuButton>
|
||||
<Transition
|
||||
show={open}
|
||||
as={Fragment}
|
||||
|
|
@ -127,8 +136,8 @@ export function Filters() {
|
|||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items className="absolute z-10 right-0 mt-0.5 bg-white dark:bg-gray-700 rounded-md shadow-lg">
|
||||
<Menu.Item>
|
||||
<MenuItems className="absolute z-10 right-0 mt-0.5 bg-white dark:bg-gray-700 rounded-md shadow-lg">
|
||||
<MenuItem>
|
||||
{({ active }) => (
|
||||
<button
|
||||
type="button"
|
||||
|
|
@ -142,8 +151,8 @@ export function Filters() {
|
|||
<span>Import filter</span>
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
</Menu.Items>
|
||||
</MenuItem>
|
||||
</MenuItems>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
|
|
@ -380,12 +389,12 @@ const FilterItemDropdown = ({ filter, onToggle }: FilterItemDropdownProps) => {
|
|||
title={`Remove filter: ${filter.name}`}
|
||||
text="Are you sure you want to remove this filter? This action cannot be undone."
|
||||
/>
|
||||
<Menu.Button className="px-4 py-2">
|
||||
<MenuButton className="px-4 py-2">
|
||||
<EllipsisHorizontalIcon
|
||||
className="w-5 h-5 text-gray-700 hover:text-gray-900 dark:text-gray-100 dark:hover:text-gray-400"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</Menu.Button>
|
||||
</MenuButton>
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
|
|
@ -395,12 +404,12 @@ const FilterItemDropdown = ({ filter, onToggle }: FilterItemDropdownProps) => {
|
|||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items
|
||||
<MenuItems
|
||||
anchor={{ to: 'bottom end', padding: '8px' }} // padding: '8px' === m-2
|
||||
className="absolute w-56 bg-white dark:bg-gray-825 divide-y divide-gray-200 dark:divide-gray-750 rounded-md shadow-lg border border-gray-250 dark:border-gray-750 focus:outline-none z-10"
|
||||
>
|
||||
<div className="px-1 py-1">
|
||||
<Menu.Item>
|
||||
<MenuItem>
|
||||
{({ active }) => (
|
||||
<Link
|
||||
// to={filter.id.toString()}
|
||||
|
|
@ -423,8 +432,8 @@ const FilterItemDropdown = ({ filter, onToggle }: FilterItemDropdownProps) => {
|
|||
Edit
|
||||
</Link>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
{({ active }) => (
|
||||
<button
|
||||
className={classNames(
|
||||
|
|
@ -442,8 +451,8 @@ const FilterItemDropdown = ({ filter, onToggle }: FilterItemDropdownProps) => {
|
|||
Export JSON
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
{({ active }) => (
|
||||
<button
|
||||
className={classNames(
|
||||
|
|
@ -462,8 +471,8 @@ const FilterItemDropdown = ({ filter, onToggle }: FilterItemDropdownProps) => {
|
|||
Export JSON to Discord
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
{({ active }) => (
|
||||
<button
|
||||
className={classNames(
|
||||
|
|
@ -482,8 +491,8 @@ const FilterItemDropdown = ({ filter, onToggle }: FilterItemDropdownProps) => {
|
|||
Toggle
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
{({ active }) => (
|
||||
<button
|
||||
className={classNames(
|
||||
|
|
@ -502,10 +511,10 @@ const FilterItemDropdown = ({ filter, onToggle }: FilterItemDropdownProps) => {
|
|||
Duplicate
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
</MenuItem>
|
||||
</div>
|
||||
<div className="px-1 py-1">
|
||||
<Menu.Item>
|
||||
<MenuItem>
|
||||
{({ active }) => (
|
||||
<button
|
||||
className={classNames(
|
||||
|
|
@ -524,9 +533,9 @@ const FilterItemDropdown = ({ filter, onToggle }: FilterItemDropdownProps) => {
|
|||
Delete
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
</MenuItem>
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</MenuItems>
|
||||
</Transition>
|
||||
</Menu>
|
||||
);
|
||||
|
|
@ -712,7 +721,7 @@ const ListboxFilter = ({
|
|||
onChange={onChange}
|
||||
>
|
||||
<div className="relative">
|
||||
<Listbox.Button className="relative w-full py-2 pr-4 text-left dark:text-gray-400 text-sm">
|
||||
<ListboxButton className="relative w-full py-2 pr-4 text-left dark:text-gray-400 text-sm">
|
||||
<span className="block truncate">{label}</span>
|
||||
<span className="absolute inset-y-0 right-0 flex items-center pointer-events-none">
|
||||
<ChevronDownIcon
|
||||
|
|
@ -720,18 +729,18 @@ const ListboxFilter = ({
|
|||
aria-hidden="true"
|
||||
/>
|
||||
</span>
|
||||
</Listbox.Button>
|
||||
</ListboxButton>
|
||||
<Transition
|
||||
as={Fragment}
|
||||
leave="transition ease-in duration-100"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Listbox.Options
|
||||
<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"
|
||||
>
|
||||
{children}
|
||||
</Listbox.Options>
|
||||
</ListboxOptions>
|
||||
</Transition>
|
||||
</div>
|
||||
</Listbox>
|
||||
|
|
@ -774,7 +783,7 @@ interface FilterOptionProps {
|
|||
}
|
||||
|
||||
const FilterOption = ({ label, value }: FilterOptionProps) => (
|
||||
<Listbox.Option
|
||||
<ListboxOption
|
||||
className={({ active }) => classNames(
|
||||
"cursor-pointer select-none relative py-2 px-4",
|
||||
active ? "text-black dark:text-gray-200 bg-gray-100 dark:bg-gray-900" : "text-gray-700 dark:text-gray-400"
|
||||
|
|
@ -798,7 +807,7 @@ const FilterOption = ({ label, value }: FilterOptionProps) => (
|
|||
) : null}
|
||||
</div>
|
||||
)}
|
||||
</Listbox.Option>
|
||||
</ListboxOption>
|
||||
);
|
||||
|
||||
export const SortSelectFilter = ({ dispatch }: any) => {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
import * as React from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Listbox, Transition } from "@headlessui/react";
|
||||
import { Listbox, ListboxButton, ListboxOption, ListboxOptions, Transition } from "@headlessui/react";
|
||||
import { CheckIcon, ChevronDownIcon } from "@heroicons/react/24/solid";
|
||||
|
||||
import { classNames } from "@utils";
|
||||
|
|
@ -36,7 +36,7 @@ const ListboxFilter = ({
|
|||
onChange={onChange}
|
||||
>
|
||||
<div className="relative mt-1">
|
||||
<Listbox.Button className="relative w-full py-2 pl-3 pr-10 text-left bg-white dark:bg-gray-800 rounded-lg shadow-md cursor-pointer dark:text-gray-400 sm:text-sm">
|
||||
<ListboxButton className="relative w-full py-2 pl-3 pr-10 text-left bg-white dark:bg-gray-800 rounded-lg shadow-md cursor-pointer dark:text-gray-400 sm:text-sm">
|
||||
<span className="block truncate">{label}</span>
|
||||
<span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
|
||||
<ChevronDownIcon
|
||||
|
|
@ -44,19 +44,19 @@ const ListboxFilter = ({
|
|||
aria-hidden="true"
|
||||
/>
|
||||
</span>
|
||||
</Listbox.Button>
|
||||
</ListboxButton>
|
||||
<Transition
|
||||
as={React.Fragment}
|
||||
leave="transition ease-in duration-100"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Listbox.Options
|
||||
<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"
|
||||
>
|
||||
<FilterOption label="All" value="" />
|
||||
{children}
|
||||
</Listbox.Options>
|
||||
</ListboxOptions>
|
||||
</Transition>
|
||||
</div>
|
||||
</Listbox>
|
||||
|
|
@ -91,7 +91,7 @@ interface FilterOptionProps {
|
|||
}
|
||||
|
||||
const FilterOption = ({ label, value }: FilterOptionProps) => (
|
||||
<Listbox.Option
|
||||
<ListboxOption
|
||||
className={({ active }) => classNames(
|
||||
"cursor-pointer select-none relative py-2 pl-10 pr-4",
|
||||
active ? "text-black dark:text-gray-200 bg-gray-100 dark:bg-gray-900" : "text-gray-700 dark:text-gray-400"
|
||||
|
|
@ -115,7 +115,7 @@ const FilterOption = ({ label, value }: FilterOptionProps) => (
|
|||
) : null}
|
||||
</>
|
||||
)}
|
||||
</Listbox.Option>
|
||||
</ListboxOption>
|
||||
);
|
||||
|
||||
export const PushStatusSelectColumnFilter = ({
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
import { Fragment, useMemo, useRef, useState } from "react";
|
||||
import { useMutation, useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
|
||||
import { Menu, Transition } from "@headlessui/react";
|
||||
import { Menu, MenuButton, MenuItem, MenuItems, Transition } from "@headlessui/react";
|
||||
import { toast } from "react-hot-toast";
|
||||
import {
|
||||
ArrowsRightLeftIcon,
|
||||
|
|
@ -302,12 +302,12 @@ const FeedItemDropdown = ({
|
|||
title={`Force run feed: ${feed.name}`}
|
||||
text={`Are you sure you want to force run the ${feed.name} feed? Respecting RSS interval rules is crucial to avoid potential IP bans.`}
|
||||
/>
|
||||
<Menu.Button className="px-4 py-2">
|
||||
<MenuButton className="px-4 py-2">
|
||||
<EllipsisHorizontalIcon
|
||||
className="w-5 h-5 text-gray-700 hover:text-gray-900 dark:text-gray-100 dark:hover:text-gray-400"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</Menu.Button>
|
||||
</MenuButton>
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
|
|
@ -317,11 +317,11 @@ const FeedItemDropdown = ({
|
|||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items
|
||||
<MenuItems
|
||||
className="absolute right-0 w-56 mt-2 origin-top-right 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"
|
||||
>
|
||||
<div className="px-1 py-1">
|
||||
<Menu.Item>
|
||||
<MenuItem>
|
||||
{({ active }) => (
|
||||
<button
|
||||
className={classNames(
|
||||
|
|
@ -340,8 +340,8 @@ const FeedItemDropdown = ({
|
|||
Edit
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
{({ active }) => (
|
||||
<button
|
||||
className={classNames(
|
||||
|
|
@ -360,10 +360,10 @@ const FeedItemDropdown = ({
|
|||
Toggle
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
</MenuItem>
|
||||
</div>
|
||||
<div className="px-1 py-1">
|
||||
<Menu.Item>
|
||||
<MenuItem>
|
||||
{({ active }) => (
|
||||
<button
|
||||
onClick={() => toggleForceRunModal()}
|
||||
|
|
@ -382,8 +382,8 @@ const FeedItemDropdown = ({
|
|||
Force run
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
<ExternalLink
|
||||
href={`${baseUrl()}api/feeds/${feed.id}/latest`}
|
||||
className="font-medium group flex rounded-md items-center w-full px-2 py-2 text-sm text-gray-900 dark:text-gray-300 hover:bg-blue-600 hover:text-white"
|
||||
|
|
@ -394,8 +394,8 @@ const FeedItemDropdown = ({
|
|||
/>
|
||||
View latest run
|
||||
</ExternalLink>
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
{({ active }) => (
|
||||
<button
|
||||
className={classNames(
|
||||
|
|
@ -415,10 +415,10 @@ const FeedItemDropdown = ({
|
|||
Clear feed cache
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
</MenuItem>
|
||||
</div>
|
||||
<div className="px-1 py-1">
|
||||
<Menu.Item>
|
||||
<MenuItem>
|
||||
{({ active }) => (
|
||||
<button
|
||||
className={classNames(
|
||||
|
|
@ -437,9 +437,9 @@ const FeedItemDropdown = ({
|
|||
Delete
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
</MenuItem>
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</MenuItems>
|
||||
</Transition>
|
||||
</Menu>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
import { Fragment, MouseEvent, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { useMutation, useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
|
||||
import { ArrowPathIcon, LockClosedIcon, LockOpenIcon, PlusIcon } from "@heroicons/react/24/solid";
|
||||
import { Menu, Transition } from "@headlessui/react";
|
||||
import { Menu, MenuButton, MenuItem, MenuItems, Transition } from "@headlessui/react";
|
||||
import { toast } from "react-hot-toast";
|
||||
import {
|
||||
ArrowsPointingInIcon,
|
||||
|
|
@ -462,12 +462,12 @@ const ListItemDropdown = ({
|
|||
title={`Remove network: ${network.name}`}
|
||||
text="Are you sure you want to remove this network? This action cannot be undone."
|
||||
/>
|
||||
<Menu.Button className="px-4 py-2">
|
||||
<MenuButton className="px-4 py-2">
|
||||
<EllipsisHorizontalIcon
|
||||
className="w-5 h-5 text-gray-700 hover:text-gray-900 dark:text-gray-100 dark:hover:text-gray-400"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</Menu.Button>
|
||||
</MenuButton>
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
|
|
@ -477,11 +477,11 @@ const ListItemDropdown = ({
|
|||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items
|
||||
<MenuItems
|
||||
className="absolute right-0 w-56 mt-2 origin-top-right 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"
|
||||
>
|
||||
<div className="px-1 py-1">
|
||||
<Menu.Item>
|
||||
<MenuItem>
|
||||
{({ active }) => (
|
||||
<button
|
||||
className={classNames(
|
||||
|
|
@ -500,8 +500,8 @@ const ListItemDropdown = ({
|
|||
Edit
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
{/*<Menu.Item>*/}
|
||||
</MenuItem>
|
||||
{/*<MenuItem>*/}
|
||||
{/* {({ active }) => (*/}
|
||||
{/* <button*/}
|
||||
{/* className={classNames(*/}
|
||||
|
|
@ -520,8 +520,8 @@ const ListItemDropdown = ({
|
|||
{/* {network.enabled ? "Disable" : "Enable"}*/}
|
||||
{/* </button>*/}
|
||||
{/* )}*/}
|
||||
{/*</Menu.Item>*/}
|
||||
<Menu.Item>
|
||||
{/*</MenuItem>*/}
|
||||
<MenuItem>
|
||||
{({ active }) => (
|
||||
<button
|
||||
className={classNames(
|
||||
|
|
@ -546,10 +546,10 @@ const ListItemDropdown = ({
|
|||
Restart
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
</MenuItem>
|
||||
</div>
|
||||
<div className="px-1 py-1">
|
||||
<Menu.Item>
|
||||
<MenuItem>
|
||||
{({ active }) => (
|
||||
<button
|
||||
className={classNames(
|
||||
|
|
@ -568,9 +568,9 @@ const ListItemDropdown = ({
|
|||
Delete
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
</MenuItem>
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</MenuItems>
|
||||
</Transition>
|
||||
</Menu>
|
||||
);
|
||||
|
|
@ -776,9 +776,9 @@ const IRCLogsDropdown = () => {
|
|||
// at IRCLogsDropdown (http://localhost:3000/src/screens/settings/Irc.tsx?t=1694269937935:1354:53)
|
||||
return (
|
||||
<Menu as="div" className="relative">
|
||||
<Menu.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">
|
||||
<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">
|
||||
<span className="flex items-center">Options <Cog6ToothIcon className="ml-1 w-4 h-4" /></span>
|
||||
</Menu.Button>
|
||||
</MenuButton>
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
|
|
@ -788,10 +788,10 @@ const IRCLogsDropdown = () => {
|
|||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items
|
||||
<MenuItems
|
||||
className="absolute z-10 right-0 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"
|
||||
>
|
||||
<Menu.Item>
|
||||
<MenuItem>
|
||||
{() => (
|
||||
<Checkbox
|
||||
label="Scroll to bottom on new message"
|
||||
|
|
@ -799,8 +799,8 @@ const IRCLogsDropdown = () => {
|
|||
setValue={(newValue) => onSetValue("scrollOnNewLog", newValue)}
|
||||
/>
|
||||
)}
|
||||
</Menu.Item>
|
||||
</Menu.Items>
|
||||
</MenuItem>
|
||||
</MenuItems>
|
||||
</Transition>
|
||||
</Menu>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue