enhancement(web): make settings pages uniform for desktop and mobile (#634)

* enhancement(web): make settings pages uniform for desktop and mobile
removed var 'idx' from line 17:51 since it is defined but never used
converted the indexer table in to a responsive grid

* fix missing col-span adjustment for mobile

Co-authored-by: ze0s <43699394+zze0s@users.noreply.github.com>
This commit is contained in:
martylukyy 2023-01-17 23:43:49 +01:00 committed by GitHub
parent 14b7bc2fe2
commit 05edb7c7a7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 169 additions and 153 deletions

View file

@ -15,24 +15,22 @@ import { EmptySimple } from "../../components/emptystates";
function APISettings() {
const [addFormIsOpen, toggleAddForm] = useToggle(false);
const { data } = useQuery(
["apikeys"],
() => APIClient.apikeys.getAll(),
{
const { data } = useQuery(["apikeys"], () => APIClient.apikeys.getAll(), {
retry: false,
refetchOnWindowFocus: false,
onError: err => console.log(err)
}
);
onError: (err) => console.log(err)
});
return (
<div className="divide-y divide-gray-200 dark:divide-gray-700 lg:col-span-9">
<div className="pb-6 py-6 px-4 sm:p-6 lg:pb-8">
<APIKeyAddForm isOpen={addFormIsOpen} toggle={toggleAddForm}/>
<APIKeyAddForm isOpen={addFormIsOpen} toggle={toggleAddForm} />
<div className="-ml-4 -mt-4 flex justify-between items-center flex-wrap sm:flex-nowrap">
<div className="ml-4 mt-4">
<h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">API keys</h3>
<h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">
API keys
</h3>
<p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
Manage API keys.
</p>
@ -48,32 +46,36 @@ function APISettings() {
</div>
</div>
{data && data.length > 0 ?
{data && data.length > 0 ? (
<section className="mt-6 light:bg-white dark:bg-gray-800 light:shadow sm:rounded-md">
<ol className="min-w-full relative">
<li className="grid grid-cols-12 gap-4 mb-2 border-b border-gray-200 dark:border-gray-700">
<div
className="col-span-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Name
<li className="hidden sm:grid grid-cols-12 gap-4 mb-2 border-b border-gray-200 dark:border-gray-700">
<div className="col-span-5 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
Name
</div>
<div
className="col-span-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Key
<div className="col-span-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
Key
</div>
</li>
{data && data.map((k) => (
<APIListItem key={k.key} apikey={k}/>
))}
{data && data.map((k) => <APIListItem key={k.key} apikey={k} />)}
</ol>
</section>
: <EmptySimple title="No API keys" subtitle="" buttonAction={toggleAddForm}
buttonText="Create API key"/>}
) : (
<EmptySimple
title="No API keys"
subtitle=""
buttonAction={toggleAddForm}
buttonText="Create API key"
/>
)}
</div>
</div>
);
}
interface ApiKeyItemProps {
apikey: APIKey
apikey: APIKey;
}
function APIListItem({ apikey }: ApiKeyItemProps) {
@ -87,7 +89,13 @@ function APIListItem({ apikey }: ApiKeyItemProps) {
queryClient.invalidateQueries(["apikeys"]);
queryClient.invalidateQueries(["apikeys", apikey.key]);
toast.custom((t) => <Toast type="success" body={`API key ${apikey?.name} was deleted`} t={t}/>);
toast.custom((t) => (
<Toast
type="success"
body={`API key ${apikey?.name} was deleted`}
t={t}
/>
));
}
}
);
@ -106,19 +114,15 @@ function APIListItem({ apikey }: ApiKeyItemProps) {
text="Are you sure you want to remove this API key? This action cannot be undone."
/>
<div className="grid grid-cols-12 gap-4 items-center py-2">
<div className="col-span-4 overflow-auto flex items-center text-sm font-medium text-gray-900 dark:text-white">
{apikey.name}
</div>
<div className="col-span-6 flex items-center text-sm font-medium text-gray-900 dark:text-white">
<KeyField value={apikey.key}/>
</div>
<div className="col-span-2 flex items-center justify-end text-sm font-medium text-gray-900 dark:text-white">
<div className="sm:grid grid-cols-12 gap-4 items-center py-2">
<div className="col-span-5 px-2 sm:px-6 py-2 sm:py-0 truncate block sm:text-sm text-md font-medium text-gray-900 dark:text-white">
<div className="flex justify-between">
<div className="pl-1 py-2">{apikey.name}</div>
<div>
<button
className={classNames(
"text-gray-900 dark:text-gray-300",
"font-medium group flex rounded-md items-center px-2 py-2 text-sm"
"sm:hidden font-medium group rounded-md items-center px-2 py-2 text-sm"
)}
onClick={toggleDeleteModal}
title="Delete key"
@ -130,6 +134,24 @@ function APIListItem({ apikey }: ApiKeyItemProps) {
</button>
</div>
</div>
</div>
<div className="col-span-6 flex items-center text-sm font-medium text-gray-900 dark:text-white">
<KeyField value={apikey.key} />
</div>
<div className="col-span-1 hidden sm:flex items-center text-sm font-medium text-gray-900 dark:text-white">
<button
className={classNames(
"text-gray-900 dark:text-gray-300",
"font-medium group flex rounded-md items-center px-2 py-2 text-sm"
)}
onClick={toggleDeleteModal}
title="Delete key"
>
<TrashIcon className="text-red-500 w-5 h-5" aria-hidden="true" />
</button>
</div>
</div>
</li>
);
}

View file

@ -14,7 +14,7 @@ interface DLSettingsItemProps {
idx: number;
}
function DownloadClientSettingsListItem({ client, idx }: DLSettingsItemProps) {
function DownloadClientSettingsListItem({ client }: DLSettingsItemProps) {
const [updateClientIsOpen, toggleUpdateClient] = useToggle(false);
const queryClient = useQueryClient();
@ -37,13 +37,13 @@ function DownloadClientSettingsListItem({ client, idx }: DLSettingsItemProps) {
return (
<li key={client.name}>
<div className="grid grid-cols-12 gap-4 items-center py-3">
<div className="grid grid-cols-12 items-center py-2">
<DownloadClientUpdateForm
client={client}
isOpen={updateClientIsOpen}
toggle={toggleUpdateClient}
/>
<div className="col-span-3 px-6 flex items-center sm:px-6">
<div className="col-span-2 sm:col-span-1 px-6 flex items-center sm:px-6">
<Switch
checked={client.enabled}
onChange={onToggleMutation}
@ -62,10 +62,10 @@ function DownloadClientSettingsListItem({ client, idx }: DLSettingsItemProps) {
/>
</Switch>
</div>
<div className="col-span-6 md:col-span-3 lg:col-span-3 px-6 py-3 flex flex-col px-6 text-sm font-medium text-gray-900 dark:text-white truncate" title={client.name}>{client.name}</div>
<div className="hidden md:flex col-span-3 py-3 flex items-center whitespace-nowrap text-sm text-gray-500 dark:text-gray-400 truncate" title={client.host}>{client.host}</div>
<div className="hidden md:flex col-span-2 py-3 flex items-center sm:px-6 text-sm text-gray-500 dark:text-gray-400">{DownloadClientTypeNameMap[client.type]}</div>
<div className="col-span-1 whitespace-nowrap text-center text-sm font-medium">
<div className="col-span-8 sm:col-span-4 lg:col-span-4 pl-12 pr-6 py-3 block flex-col text-sm font-medium text-gray-900 dark:text-white truncate" title={client.name}>{client.name}</div>
<div className="hidden sm:block col-span-4 pr-6 py-3 text-left items-center whitespace-nowrap text-sm text-gray-500 dark:text-gray-400 truncate" title={client.host}>{client.host}</div>
<div className="hidden sm:block col-span-2 py-3 text-left items-center text-sm text-gray-500 dark:text-gray-400">{DownloadClientTypeNameMap[client.type]}</div>
<div className="col-span-1 pl-0.5 whitespace-nowrap text-center text-sm font-medium">
<span className="text-blue-600 dark:text-gray-300 hover:text-blue-900 cursor-pointer" onClick={toggleUpdateClient}>
Edit
</span>
@ -104,7 +104,7 @@ function DownloadClientSettings() {
<div className="ml-4 mt-4 flex-shrink-0">
<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-sm text-sm font-medium rounded-sm 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"
onClick={toggleAddClient}
>
Add new
@ -114,19 +114,19 @@ function DownloadClientSettings() {
<div className="flex flex-col mt-6 px-4">
{data && data.length > 0 ?
<section className="light:bg-white dark:bg-gray-800 light:shadow sm:rounded-md">
<section className="light:bg-white dark:bg-gray-800 light:shadow sm:rounded-sm">
<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="col-span-3 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
<li className="grid grid-cols-12 border-b border-gray-200 dark:border-gray-700">
<div className="col-span-2 sm:col-span-1 px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
Enabled
</div>
<div className="col-span-6 md:col-span-3 lg: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-6 sm:col-span-4 lg:col-span-4 pl-12 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
Name
</div>
<div className="hidden md:flex col-span-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
<div className="hidden sm:flex col-span-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
Host
</div>
<div className="hidden md:flex 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="hidden sm:flex col-span-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
Type
</div>
</li>

View file

@ -42,22 +42,20 @@ function FeedSettings() {
{data && data.length > 0 ?
<section className="mt-6 light:bg-white dark:bg-gray-800 light:shadow sm: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">
<li className="grid grid-cols-12 border-b border-gray-200 dark:border-gray-700">
<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">Enabled
className="col-span-2 sm:col-span-1 px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Enabled
</div>
<div
className="col-span-6 md:col-span-3 lg:col-span-3 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Name
className="col-span-6 pl-12 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Name
</div>
<div
className="hidden md:flex col-span-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Type
className="hidden md:flex col-span-1 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Type
</div>
<div
className="hidden md:flex col-span-3 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Last run
</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">Events</div>*/}
</li>
{data && data.map((f) => (
<ListItem key={f.id} feed={f}/>
))}
@ -101,8 +99,8 @@ function ListItem({ feed }: ListItemProps) {
<li key={feed.id} className="text-gray-500 dark:text-gray-400">
<FeedUpdateForm isOpen={updateFormIsOpen} toggle={toggleUpdateForm} feed={feed}/>
<div className="grid grid-cols-12 gap-4 items-center">
<div className="col-span-3 px-6 flex items-center sm:px-6 ">
<div className="grid grid-cols-12 items-center">
<div className="col-span-2 sm:col-span-1 px-6 flex items-center">
<Switch
checked={feed.enabled}
onChange={toggleActive}
@ -121,16 +119,16 @@ function ListItem({ feed }: ListItemProps) {
/>
</Switch>
</div>
<div className="col-span-6 md:col-span-3 lg:col-span-3 px-6 py-3 flex flex-col px-6 text-sm font-medium text-gray-900 dark:text-white">
<div className="col-span-8 sm:col-span-6 pl-12 py-3 flex flex-col text-sm font-medium text-gray-900 dark:text-white">
<span>{feed.name}</span>
<span className="text-gray-900 dark:text-gray-500 text-xs">
{feed.indexer}
</span>
</div>
<div className="hidden md:flex col-span-3 py-3 flex items-center">
<div className="hidden md:flex col-span-1 py-3 items-center">
{ImplementationBadges[feed.type.toLowerCase()]}
</div>
<div className="hidden md:flex col-span-2 py-3 flex items-center sm:px-6 text-sm font-medium text-gray-900 dark:text-gray-500">
<div className="hidden md:flex col-span-3 py-3 items-center sm:px-6 text-sm font-medium text-gray-900 dark:text-gray-500">
<span title={simplifyDate(feed.last_run)}>
{IsEmptyDate(feed.last_run)}
</span>

View file

@ -8,33 +8,27 @@ import { APIClient } from "../../api/APIClient";
import { componentMapType } from "../../forms/settings/DownloadClientForms";
const ImplementationBadgeIRC = () => (
<span
className="mr-2 inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-green-200 dark:bg-green-400 text-green-800 dark:text-green-800"
>
<span className="mr-2 inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-green-200 dark:bg-green-400 text-green-800 dark:text-green-800">
IRC
</span>
);
const ImplementationBadgeTorznab = () => (
<span
className="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-orange-200 dark:bg-orange-400 text-orange-800 dark:text-orange-800"
>
<span className="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-orange-200 dark:bg-orange-400 text-orange-800 dark:text-orange-800">
Torznab
</span>
);
const ImplementationBadgeRSS = () => (
<span
className="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-amber-200 dark:bg-amber-400 text-amber-800 dark:text-amber-800"
>
<span className="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-amber-200 dark:bg-amber-400 text-amber-800 dark:text-amber-800">
RSS
</span>
);
export const ImplementationBadges: componentMapType = {
"irc": <ImplementationBadgeIRC/>,
"torznab": <ImplementationBadgeTorznab />,
"rss": <ImplementationBadgeRSS />
irc: <ImplementationBadgeIRC />,
torznab: <ImplementationBadgeTorznab />,
rss: <ImplementationBadgeRSS />
};
interface ListItemProps {
@ -45,10 +39,14 @@ const ListItem = ({ indexer }: ListItemProps) => {
const [updateIsOpen, toggleUpdate] = useToggle(false);
return (
<tr key={indexer.name}>
<IndexerUpdateForm isOpen={updateIsOpen} toggle={toggleUpdate} indexer={indexer} />
<td className="px-6 py-4 whitespace-nowrap">
<li key={indexer.name}>
<div className="grid grid-cols-12 items-center py-1.5">
<IndexerUpdateForm
isOpen={updateIsOpen}
toggle={toggleUpdate}
indexer={indexer}
/>
<div className="col-span-2 sm:col-span-1 flex px-6 items-center sm:px-6">
<Switch
checked={indexer.enabled ?? false}
onChange={toggleUpdate}
@ -66,15 +64,23 @@ const ListItem = ({ indexer }: ListItemProps) => {
)}
/>
</Switch>
</td>
<td className="px-6 py-4 w-full whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">{indexer.name}</td>
<td className="px-6 py-4 w-full whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">{ImplementationBadges[indexer.implementation]}</td>
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<span className="text-blue-600 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-500 cursor-pointer" onClick={toggleUpdate}>
</div>
<div className="col-span-7 sm:col-span-8 pl-12 sm:pr-6 py-3 block flex-col text-sm font-medium text-gray-900 dark:text-white truncate">
{indexer.name}
</div>
<div className="hidden md:block col-span-2 pr-6 py-3 text-left items-center whitespace-nowrap text-sm text-gray-500 dark:text-gray-400 truncate">
{ImplementationBadges[indexer.implementation]}
</div>
<div className="col-span-1 flex first-letter:px-6 py-3 whitespace-nowrap text-right text-sm font-medium">
<span
className="col-span-1 px-6 text-blue-600 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-500 cursor-pointer"
onClick={toggleUpdate}
>
Edit
</span>
</td>
</tr>
</div>
</div>
</li>
);
};
@ -92,13 +98,14 @@ function IndexerSettings() {
return (
<div className="lg:col-span-9">
<IndexerAddForm isOpen={addIndexerIsOpen} toggle={toggleAddIndexer} />
<div className="py-6 px-4 sm:p-6 lg:pb-8">
<div className="-ml-4 -mt-4 flex justify-between items-center flex-wrap sm:flex-nowrap">
<div className="ml-4 mt-4">
<h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">Indexers</h3>
<h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">
Indexers
</h3>
<p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
Indexer settings.
</p>
@ -115,51 +122,36 @@ function IndexerSettings() {
</div>
<div className="flex flex-col mt-6">
{data && data.length > 0 ?
<div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
<div className="light:shadow overflow-hidden light:border-b light:border-gray-200 dark:border-gray-700 sm:rounded-lg">
<table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead className="light:bg-gray-50">
<tr>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
>
{data && data.length > 0 ? (
<section className="light:bg-white dark:bg-gray-800 light:shadow sm:rounded-md">
<ol className="min-w-full relative">
<li className="grid grid-cols-12 border-b border-gray-200 dark:border-gray-700">
<div className="col-span-2 sm:col-span-1 px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
Enabled
</th>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
>
</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 uppercase tracking-wider">
Name
</th>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
>
</div>
<div className="hidden md:flex col-span-1 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
Implementation
</th>
<th scope="col" className="relative px-6 py-3">
<span className="sr-only">Edit</span>
</th>
</tr>
</thead>
<tbody className="light:bg-white divide-y divide-gray-200 dark:divide-gray-700">
</div>
</li>
{data.map((indexer, idx) => (
<ListItem indexer={indexer} key={idx} />
))}
</tbody>
</table>
</ol>
</section>
) : (
<EmptySimple
title="No indexers"
subtitle=""
buttonText="Add new indexer"
buttonAction={toggleAddIndexer}
/>
)}
</div>
</div>
</div>
: <EmptySimple title="No indexers" subtitle="" buttonText="Add new indexer" buttonAction={toggleAddIndexer} />
}
</div>
</div>
</div>
);
}

View file

@ -42,9 +42,9 @@ function NotificationSettings() {
{data && data.length > 0 ?
<section className="mt-6 light:bg-white dark:bg-gray-800 light:shadow sm:rounded-md">
<ol className="min-w-full">
<li className="grid grid-cols-12 gap-4 border-b border-gray-200 dark:border-gray-700">
<div className="col-span-2 pl-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Enabled</div>
<div className="col-span-6 md:col-span-5 pl-10 md:pl-0 pr-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Name</div>
<li className="grid grid-cols-12 border-b border-gray-200 dark:border-gray-700">
<div className="col-span-2 sm:col-span-1 pl-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Enabled</div>
<div className="col-span-6 pl-10 md:pl-12 pr-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Name</div>
<div className="hidden md:flex col-span-2 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Type</div>
<div className="hidden md:flex col-span-3 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Events</div>
</li>
@ -95,8 +95,8 @@ function ListItem({ notification }: ListItemProps) {
<li key={notification.id} className="text-gray-500 dark:text-gray-400">
<NotificationUpdateForm isOpen={updateFormIsOpen} toggle={toggleUpdateForm} notification={notification} />
<div className="grid grid-cols-12 gap-4 items-center py-3">
<div className="col-span-2 md:col-span-2 pl-6 flex items-center sm:pl-6">
<div className="grid grid-cols-12 items-center py-4">
<div className="col-span-2 sm:col-span-1 px-6 flex items-center ">
<Switch
checked={notification.enabled}
onChange={toggleUpdateForm}
@ -115,7 +115,7 @@ function ListItem({ notification }: ListItemProps) {
/>
</Switch>
</div>
<div className="col-span-8 md:col-span-5 pl-10 md:pl-0 pr-2 sm:pr-6 truncate block items-center" title={notification.name}>
<div className="col-span-8 md:col-span-6 pl-10 md:pl-12 pr-2 sm:pr-6 truncate block items-center text-sm font-medium text-gray-900 dark:text-white" title={notification.name}>
{notification.name}
</div>
<div className="hidden md:flex col-span-2 items-center">
@ -129,11 +129,15 @@ function ListItem({ notification }: ListItemProps) {
{notification.events.length}
</span>
</div>
<div className="col-span-2 md:col-span-1 flex items-center">
<span className="text-blue-600 dark:text-gray-300 hover:text-blue-900 cursor-pointer" onClick={toggleUpdateForm}>
<div className="col-span-1 flex first-letter:px-6 whitespace-nowrap text-right text-sm font-medium">
<span
className="col-span-1 px-6 text-blue-600 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-500 cursor-pointer"
onClick={toggleUpdateForm}
>
Edit
</span>
</div>
</div>
</li>
);