mirror of
https://github.com/idanoo/autobrr
synced 2025-07-23 16:59:12 +00:00
enhancement(web): ui overhaul (#1155)
* Various WebUI changes and fixes. * feat(tooltip): make tooltip display upwards * fix(tooltip): place tooltip to the right * fix(web): add missing ml-px to SwitchGroup header current: https://i.imgur.com/2WXstPV.png new: https://i.imgur.com/QGQ49mP.png * fix(web): collapse sections * fix(web): improve freeleech section * fix(web): rename action to action_components Renamed the 'action' folder to 'action_components' to resolve import issues due to case sensitivity. * fix(web): align CollapsibleSection Old Advanced tab: https://i.imgur.com/MXaJ5eJ.png New Advanced tab: https://i.imgur.com/4nPJJRw.png Music tab for comparison: https://i.imgur.com/I59X7ot.png * fix(web): remove invalid CSS class * revert: vertical padding on switchgroup added py-0 on the freeleech part instead * feat(settings): add back log files * fix(settings): irc channels and font sizes * fix(components): radio select roundness * fix(styling): various minor changes * fix(filters): remove jitter fields --------- Co-authored-by: ze0s <43699394+zze0s@users.noreply.github.com> Co-authored-by: soup <soup@r4tio.dev> Co-authored-by: ze0s <ze0s@riseup.net>
This commit is contained in:
stacksmash76
GitHub
parent
a274d9ddce
commit
e842a7bd42
84 changed files with 4378 additions and 4361 deletions
|
|
@ -5,8 +5,8 @@
|
|||
|
||||
import { Fragment, useRef, useState, useMemo, useEffect, MouseEvent } from "react";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { LockClosedIcon, LockOpenIcon } from "@heroicons/react/24/solid";
|
||||
import { Menu, Switch, Transition } from "@headlessui/react";
|
||||
import { LockClosedIcon, LockOpenIcon, PlusIcon } from "@heroicons/react/24/solid";
|
||||
import { Menu, Transition } from "@headlessui/react";
|
||||
import { toast } from "react-hot-toast";
|
||||
import {
|
||||
ArrowsPointingInIcon,
|
||||
|
|
@ -29,6 +29,8 @@ import { SettingsContext } from "@utils/Context";
|
|||
import { Checkbox } from "@components/Checkbox";
|
||||
// import { useForm } from "react-hook-form";
|
||||
|
||||
import { Section } from "./_components";
|
||||
|
||||
export const ircKeys = {
|
||||
all: ["irc_networks"] as const,
|
||||
lists: () => [...ircKeys.all, "list"] as const,
|
||||
|
|
@ -106,112 +108,99 @@ const IrcSettings = () => {
|
|||
const sortedNetworks = useSort(data || []);
|
||||
|
||||
return (
|
||||
<div className="text-sm lg:col-span-9">
|
||||
<Section
|
||||
title="IRC"
|
||||
description="IRC networks and channels. Click on a network to view channel status."
|
||||
rightSide={
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggleAddNetwork}
|
||||
className="relative inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
|
||||
>
|
||||
<PlusIcon className="h-5 w-5 mr-1" />
|
||||
Add new
|
||||
</button>
|
||||
}
|
||||
>
|
||||
<IrcNetworkAddForm isOpen={addNetworkIsOpen} toggle={toggleAddNetwork} />
|
||||
|
||||
<div className="py-6 px-4 md:p-6 lg:pb-8">
|
||||
<div className="-ml-4 -mt-4 flex justify-between items-center flex-wrap md:flex-nowrap">
|
||||
<div className="ml-4 mt-4">
|
||||
<h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">
|
||||
IRC
|
||||
</h3>
|
||||
<p className="mt-1 text-gray-500 dark:text-gray-400">
|
||||
IRC networks and channels. Click on a network to view channel
|
||||
status.
|
||||
</p>
|
||||
</div>
|
||||
<div className="ml-4 mt-4 flex-shrink-0">
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggleAddNetwork}
|
||||
className="relative inline-flex items-center px-4 py-2 border border-transparent shadow-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"
|
||||
<div className="flex justify-between flex-col md:flex-row px-1">
|
||||
<ul className="flex flex-col md:flex-row md:gap-2 pb-4 md:pb-0 md:divide-x md:divide-gray-200 md:dark:divide-gray-700">
|
||||
<li className="flex items-center">
|
||||
<span
|
||||
className="mr-2 flex h-4 w-4 relative"
|
||||
title="Network healthy"
|
||||
>
|
||||
Add new
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<span className="animate-ping inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
|
||||
<span className="inline-flex absolute rounded-full h-4 w-4 bg-green-500" />
|
||||
</span>
|
||||
<span className="text-sm text-gray-800 dark:text-gray-500">Network healthy</span>
|
||||
</li>
|
||||
|
||||
<div className="flex justify-between flex-col md:flex-row mt-10 px-1">
|
||||
<ol className="flex flex-col md:flex-row md:gap-2 pb-4 md:pb-0 md:divide-x md:divide-gray-200 md:dark:divide-gray-700">
|
||||
<li className="flex items-center">
|
||||
<span
|
||||
className="mr-2 flex h-4 w-4 relative"
|
||||
title="Network healthy"
|
||||
>
|
||||
<span className="animate-ping inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
|
||||
<span className="inline-flex absolute rounded-full h-4 w-4 bg-green-500" />
|
||||
</span>
|
||||
<span className="text-gray-800 dark:text-gray-500">Network healthy</span>
|
||||
</li>
|
||||
<li className="flex items-center md:pl-2">
|
||||
<span
|
||||
className="mr-2 flex h-4 w-4 rounded-full opacity-75 bg-yellow-400 over:text-yellow-600"
|
||||
title="Network unhealthy"
|
||||
/>
|
||||
<span className="text-sm text-gray-800 dark:text-gray-500">Network unhealthy</span>
|
||||
</li>
|
||||
|
||||
<li className="flex items-center md:pl-2">
|
||||
<span
|
||||
className="mr-2 flex h-4 w-4 rounded-full opacity-75 bg-yellow-400 over:text-yellow-600"
|
||||
title="Network unhealthy"
|
||||
/>
|
||||
<span className="text-gray-800 dark:text-gray-500">Network unhealthy</span>
|
||||
</li>
|
||||
|
||||
<li className="flex items-center md:pl-2">
|
||||
<span
|
||||
className="mr-2 flex h-4 w-4 rounded-full opacity-75 bg-gray-500"
|
||||
title="Network disabled"
|
||||
>
|
||||
</span>
|
||||
<span className="text-gray-800 dark:text-gray-500">Network disabled</span>
|
||||
</li>
|
||||
</ol>
|
||||
<div className="flex gap-x-2">
|
||||
<button
|
||||
className="flex items-center text-gray-800 dark:text-gray-400 p-1 px-2 rounded shadow bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600"
|
||||
onClick={toggleExpand}
|
||||
title={expandNetworks ? "collapse" : "expand"}
|
||||
<li className="flex items-center md:pl-2">
|
||||
<span
|
||||
className="mr-2 flex h-4 w-4 rounded-full opacity-75 bg-gray-500"
|
||||
title="Network disabled"
|
||||
>
|
||||
{expandNetworks
|
||||
? <span className="flex items-center">Collapse <ArrowsPointingInIcon className="ml-1 w-4 h-4"/></span>
|
||||
: <span className="flex items-center">Expand <ArrowsPointingOutIcon className="ml-1 w-4 h-4"/></span>
|
||||
}</button>
|
||||
<IRCLogsDropdown/>
|
||||
</div>
|
||||
</span>
|
||||
<span className="text-sm text-gray-800 dark:text-gray-500">Network disabled</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="flex gap-x-2">
|
||||
<button
|
||||
className="flex items-center text-gray-800 dark:text-gray-400 p-1 px-2 rounded shadow bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600"
|
||||
onClick={toggleExpand}
|
||||
title={expandNetworks ? "collapse" : "expand"}
|
||||
>
|
||||
{expandNetworks
|
||||
? <span className="flex items-center text-sm">Collapse <ArrowsPointingInIcon className="ml-1 w-4 h-4" /></span>
|
||||
: <span className="flex items-center text-sm">Expand <ArrowsPointingOutIcon className="ml-1 w-4 h-4" /></span>
|
||||
}</button>
|
||||
<IRCLogsDropdown />
|
||||
</div>
|
||||
|
||||
{data && data.length > 0 ? (
|
||||
<section className="mt-6 light:bg-white dark:bg-gray-800 light:shadow md:rounded-md">
|
||||
<ol className="min-w-full relative">
|
||||
<li className="grid grid-cols-12 gap-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="flex col-span-2 md:col-span-1 px-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer"
|
||||
onClick={() => sortedNetworks.requestSort("enabled")}>
|
||||
Enabled <span className="sort-indicator">{sortedNetworks.getSortIndicator("enabled")}</span>
|
||||
</div>
|
||||
<div className="col-span-10 md:col-span-3 px-8 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer"
|
||||
onClick={() => sortedNetworks.requestSort("name")}>
|
||||
Network <span className="sort-indicator">{sortedNetworks.getSortIndicator("name")}</span>
|
||||
</div>
|
||||
<div className="hidden md:flex col-span-4 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer"
|
||||
onClick={() => sortedNetworks.requestSort("server")}>
|
||||
Server <span className="sort-indicator">{sortedNetworks.getSortIndicator("server")}</span>
|
||||
</div>
|
||||
<div className="hidden md:flex col-span-3 px-5 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer"
|
||||
onClick={() => sortedNetworks.requestSort("nick")}>
|
||||
Nick <span className="sort-indicator">{sortedNetworks.getSortIndicator("nick")}</span>
|
||||
</div>
|
||||
</li>
|
||||
{data &&
|
||||
sortedNetworks.items.map((network) => (
|
||||
<ListItem key={network.id} expanded={expandNetworks} network={network} />
|
||||
))}
|
||||
</ol>
|
||||
</section>
|
||||
) : (
|
||||
<EmptySimple
|
||||
title="No networks"
|
||||
subtitle="Normally set up via Indexers"
|
||||
buttonText="Add new network"
|
||||
buttonAction={toggleAddNetwork}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{data && data.length > 0 ? (
|
||||
<ul className="mt-6 min-w-full relative">
|
||||
<li className="grid grid-cols-12 gap-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="flex col-span-2 md:col-span-1 pl-0 sm:px-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer"
|
||||
onClick={() => sortedNetworks.requestSort("enabled")}>
|
||||
Enabled <span className="sort-indicator">{sortedNetworks.getSortIndicator("enabled")}</span>
|
||||
</div>
|
||||
<div className="col-span-10 md:col-span-3 px-8 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer"
|
||||
onClick={() => sortedNetworks.requestSort("name")}>
|
||||
Network <span className="sort-indicator">{sortedNetworks.getSortIndicator("name")}</span>
|
||||
</div>
|
||||
<div className="hidden md:flex col-span-4 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer"
|
||||
onClick={() => sortedNetworks.requestSort("server")}>
|
||||
Server <span className="sort-indicator">{sortedNetworks.getSortIndicator("server")}</span>
|
||||
</div>
|
||||
<div className="hidden md:flex col-span-3 px-5 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer"
|
||||
onClick={() => sortedNetworks.requestSort("nick")}>
|
||||
Nick <span className="sort-indicator">{sortedNetworks.getSortIndicator("nick")}</span>
|
||||
</div>
|
||||
</li>
|
||||
{sortedNetworks.items.map((network) => (
|
||||
<ListItem key={network.id} expanded={expandNetworks} network={network} />
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<EmptySimple
|
||||
title="No networks"
|
||||
subtitle="Normally set up via Indexers"
|
||||
buttonText="Add new network"
|
||||
buttonAction={toggleAddNetwork}
|
||||
/>
|
||||
)}
|
||||
</Section>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -245,7 +234,7 @@ const ListItem = ({ network, expanded }: ListItemProps) => {
|
|||
<li>
|
||||
<div
|
||||
className={classNames(
|
||||
"grid grid-cols-12 gap-2 lg:gap-4 items-center py-2 cursor-pointer",
|
||||
"grid grid-cols-12 gap-2 lg:gap-4 items-center mt-0.5 py-2.5 cursor-pointer first:rounded-t-md last:rounded-b-md transition",
|
||||
network.enabled && !network.healthy ? "bg-red-50 dark:bg-red-900 hover:bg-red-100 dark:hover:bg-red-800" : "hover:bg-gray-50 dark:hover:bg-gray-700"
|
||||
)}
|
||||
onClick={(e) => {
|
||||
|
|
@ -261,25 +250,11 @@ const ListItem = ({ network, expanded }: ListItemProps) => {
|
|||
toggle={toggleUpdate}
|
||||
network={network}
|
||||
/>
|
||||
<div className="col-span-2 md:col-span-1 flex pl-5 text-gray-500 dark:text-gray-400">
|
||||
<Switch
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
checked={network.enabled}
|
||||
onChange={onToggleMutation}
|
||||
className={classNames(
|
||||
network.enabled ? "bg-blue-500" : "bg-gray-200 dark:bg-gray-600",
|
||||
"items-center relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
||||
)}
|
||||
>
|
||||
<span className="sr-only">Enable</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className={classNames(
|
||||
network.enabled ? "translate-x-5" : "translate-x-0",
|
||||
"inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
|
||||
)}
|
||||
/>
|
||||
</Switch>
|
||||
<div className="col-span-2 md:col-span-1 flex pl-1 sm:pl-5 text-gray-500 dark:text-gray-400">
|
||||
<Checkbox
|
||||
value={network.enabled}
|
||||
setValue={onToggleMutation}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-8 xs:col-span-3 md:col-span-3 items-center pl-8 font-medium text-gray-900 dark:text-white cursor-pointer">
|
||||
<div className="flex">
|
||||
|
|
@ -305,7 +280,7 @@ const ListItem = ({ network, expanded }: ListItemProps) => {
|
|||
<span className="mr-3 flex h-3 w-3 rounded-full opacity-75 bg-gray-500" />
|
||||
)}
|
||||
</span>
|
||||
<div className="block truncate">
|
||||
<div className="block text-sm truncate">
|
||||
{network.name}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -330,13 +305,13 @@ const ListItem = ({ network, expanded }: ListItemProps) => {
|
|||
)} />
|
||||
)}
|
||||
</div>
|
||||
<p className="block truncate">
|
||||
<p className="block text-sm truncate">
|
||||
{network.server}:{network.port}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden md:flex col-span-3 items-center md:pl-6 text-gray-500 dark:text-gray-400">
|
||||
<div className="block truncate">
|
||||
<div className="block text-sm truncate">
|
||||
{network.nick}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -345,25 +320,25 @@ const ListItem = ({ network, expanded }: ListItemProps) => {
|
|||
</div>
|
||||
</div>
|
||||
{(edit || expanded) && (
|
||||
<div className="px-4 py-4 flex border-b border-x-0 dark:border-gray-600 dark:bg-gray-700">
|
||||
<div className="px-4 py-4 flex border-b border-x-0 dark:border-gray-600 dark:bg-gray-775">
|
||||
<div className="min-w-full">
|
||||
{network.channels.length > 0 ? (
|
||||
<ol>
|
||||
<ul>
|
||||
<li className="grid grid-cols-12 gap-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="col-span-4 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||
<div className="col-span-4 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||
Channel
|
||||
</div>
|
||||
<div className="col-span-4 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||
<div className="col-span-4 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||
Monitoring since
|
||||
</div>
|
||||
<div className="col-span-3 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||
<div className="col-span-3 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||
Last announce
|
||||
</div>
|
||||
</li>
|
||||
{network.channels.map((c) => (
|
||||
<ChannelItem key={`${network.id}.${c.id}`} network={network} channel={c} />
|
||||
))}
|
||||
</ol>
|
||||
</ul>
|
||||
) : (
|
||||
<div className="flex text-center justify-center py-4 dark:text-gray-500">
|
||||
<p>No channels!</p>
|
||||
|
|
@ -387,12 +362,12 @@ const ChannelItem = ({ network, channel }: ChannelItemProps) => {
|
|||
return (
|
||||
<li
|
||||
className={classNames(
|
||||
"mb-2 text-gray-500 dark:text-gray-400",
|
||||
viewChannel ? "bg-gray-200 dark:bg-gray-800 rounded-md" : ""
|
||||
"mb-2 text-gray-500 dark:text-gray-400 hover:cursor-pointer rounded-md",
|
||||
viewChannel ? "bg-gray-200 dark:bg-gray-800 rounded-md" : "hover:bg-gray-300 dark:hover:bg-gray-800"
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className="grid grid-cols-12 gap-4 items-center py-4 hover:bg-gray-300 dark:hover:bg-gray-800 hover:cursor-pointer rounded-md"
|
||||
className="grid grid-cols-12 gap-4 items-center py-4 "
|
||||
onClick={toggleView}
|
||||
>
|
||||
<div className="col-span-4 flex items-center md:px-6">
|
||||
|
|
@ -403,14 +378,14 @@ const ChannelItem = ({ network, channel }: ChannelItemProps) => {
|
|||
className="mr-3 flex h-3 w-3 relative"
|
||||
title="monitoring"
|
||||
>
|
||||
<span className="animate-ping inline-flex h-full w-full rounded-full bg-green-400 opacity-75"/>
|
||||
<span className="inline-flex absolute rounded-full h-3 w-3 bg-green-500"/>
|
||||
<span className="animate-ping inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
|
||||
<span className="inline-flex absolute rounded-full h-3 w-3 bg-green-500" />
|
||||
</span>
|
||||
) : (
|
||||
<span className="mr-3 flex h-3 w-3 rounded-full opacity-75 bg-red-400"/>
|
||||
<span className="mr-3 flex h-3 w-3 rounded-full opacity-75 bg-red-400" />
|
||||
)
|
||||
) : (
|
||||
<span className="mr-3 flex h-3 w-3 rounded-full opacity-75 bg-gray-500"/>
|
||||
<span className="mr-3 flex h-3 w-3 rounded-full opacity-75 bg-gray-500" />
|
||||
)}
|
||||
{channel.name}
|
||||
</span>
|
||||
|
|
@ -432,7 +407,7 @@ const ChannelItem = ({ network, channel }: ChannelItemProps) => {
|
|||
</div>
|
||||
</div>
|
||||
{viewChannel && (
|
||||
<Events network={network} channel={channel.name}/>
|
||||
<Events network={network} channel={channel.name} />
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
|
|
@ -459,7 +434,7 @@ const ListItemDropdown = ({
|
|||
queryClient.invalidateQueries({ queryKey: ircKeys.lists() });
|
||||
queryClient.invalidateQueries({ queryKey: ircKeys.detail(network.id) });
|
||||
|
||||
toast.custom((t) => <Toast type="success" body={`Network ${network.name} was deleted`} t={t}/>);
|
||||
toast.custom((t) => <Toast type="success" body={`Network ${network.name} was deleted`} t={t} />);
|
||||
|
||||
toggleDeleteModal();
|
||||
}
|
||||
|
|
@ -471,7 +446,7 @@ const ListItemDropdown = ({
|
|||
queryClient.invalidateQueries({ queryKey: ircKeys.lists() });
|
||||
queryClient.invalidateQueries({ queryKey: ircKeys.detail(network.id) });
|
||||
|
||||
toast.custom((t) => <Toast type="success" body={`${network.name} was successfully restarted`} t={t}/>);
|
||||
toast.custom((t) => <Toast type="success" body={`${network.name} was successfully restarted`} t={t} />);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -514,7 +489,7 @@ const ListItemDropdown = ({
|
|||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items
|
||||
className="absolute right-0 w-32 md:w-56 mt-2 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 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>
|
||||
|
|
@ -623,7 +598,6 @@ interface EventsProps {
|
|||
}
|
||||
|
||||
export const Events = ({ network, channel }: EventsProps) => {
|
||||
|
||||
const [logs, setLogs] = useState<IrcEvent[]>([]);
|
||||
const [settings] = SettingsContext.use();
|
||||
|
||||
|
|
@ -700,8 +674,8 @@ export const Events = ({ network, channel }: EventsProps) => {
|
|||
onClick={toggleFullscreen}
|
||||
>
|
||||
{isFullscreen
|
||||
? <span className="flex items-center"><ArrowsPointingInIcon className="w-5 h-5"/></span>
|
||||
: <span className="flex items-center"><ArrowsPointingOutIcon className="w-5 h-5"/></span>}
|
||||
? <span className="flex items-center"><ArrowsPointingInIcon className="w-5 h-5" /></span>
|
||||
: <span className="flex items-center"><ArrowsPointingOutIcon className="w-5 h-5" /></span>}
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -759,7 +733,7 @@ const IRCLogsDropdown = () => {
|
|||
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">
|
||||
<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>
|
||||
</Menu.Button>
|
||||
<Transition
|
||||
as={Fragment}
|
||||
|
|
@ -771,7 +745,7 @@ const IRCLogsDropdown = () => {
|
|||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items
|
||||
className="absolute z-10 right-0 mt-2 px-3 py-2 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 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>
|
||||
{() => (
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue