mirror of
https://github.com/idanoo/autobrr
synced 2025-07-23 16:59:12 +00:00
feat(web): settings cosmetic improvements (#621)
* Minor cosmetic changes - Changed Feeds paragraph to include regular RSS feeds - Centered "Danger Zone" header on Settings/Releases - Added punctuations to subtitles and sublabes that were missing them - Removed some subtitles over "Create new" buttons in Settings * settings(releases) Added paragraph below header * Changed user and docs icons * Fixed Notifications table for narrow screens * Made Notifications-page dynamic like the IRC-page - Hiding notification type and events on smaller screens * Made API table look better on smaller screens - Adjusted col-spans - overflow-auto on name * overflow-hidden on name * Made Feeds dynamic like Notifications * Made Clients dynamic like Feeds and Notifications * name field will now truncate instead of span itself over multiple lines mouseovering the name will now show the full value mitigated scrollbars changes to col-span to move the name column closer to enabled switch adjusted paddings in desktop and mobile layout Co-authored-by: martylukyy <35452459+martylukyy@users.noreply.github.com>
This commit is contained in:
soup
GitHub
parent
409dc236ff
commit
ca4ad498a4
9 changed files with 62 additions and 62 deletions
|
|
@ -1,8 +1,8 @@
|
|||
import { Fragment } from "react";
|
||||
import { Link, NavLink, Outlet } from "react-router-dom";
|
||||
import { Disclosure, Menu, Transition } from "@headlessui/react";
|
||||
import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/solid";
|
||||
import { Bars3Icon, ChevronDownIcon, XMarkIcon } from "@heroicons/react/24/outline";
|
||||
import { BookOpenIcon, UserIcon } from "@heroicons/react/24/solid";
|
||||
import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
|
||||
|
||||
import { AuthContext } from "../utils/Context";
|
||||
|
||||
|
|
@ -77,7 +77,7 @@ export default function Base() {
|
|||
)}
|
||||
>
|
||||
Docs
|
||||
<ArrowTopRightOnSquareIcon className="inline ml-1 h-5 w-5" aria-hidden="true" />
|
||||
<BookOpenIcon className="inline ml-1 h-5 w-5" aria-hidden="true" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -90,7 +90,7 @@ export default function Base() {
|
|||
<Menu.Button
|
||||
className={classNames(
|
||||
open ? "bg-gray-200 dark:bg-gray-800" : "",
|
||||
"text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800",
|
||||
"text-gray-600 dark:text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-2xl text-sm font-medium",
|
||||
"max-w-xs rounded-full flex items-center text-sm px-3 py-2",
|
||||
"transition-colors duration-200"
|
||||
)}
|
||||
|
|
@ -99,8 +99,8 @@ export default function Base() {
|
|||
<span className="sr-only">Open user menu for </span>
|
||||
{authContext.username}
|
||||
</span>
|
||||
<ChevronDownIcon
|
||||
className="hidden flex-shrink-0 ml-1 h-5 w-5 text-gray-800 dark:text-gray-300 sm:block"
|
||||
<UserIcon
|
||||
className="inline ml-1 h-5 w-5"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</Menu.Button>
|
||||
|
|
|
|||
|
|
@ -340,7 +340,7 @@ export function General() {
|
|||
</div>
|
||||
|
||||
<div className="mt-6 lg:pb-8">
|
||||
<TitleSubtitle title="Rules" subtitle="Specify rules on how torrents should be handled/selected" />
|
||||
<TitleSubtitle title="Rules" subtitle="Specify rules on how torrents should be handled/selected." />
|
||||
|
||||
<div className="mt-6 grid grid-cols-12 gap-6">
|
||||
<TextField name="min_size" label="Min size" columns={6} placeholder="eg. 100MiB, 80GB" />
|
||||
|
|
@ -354,7 +354,7 @@ export function General() {
|
|||
</div>
|
||||
|
||||
<div className="border-t dark:border-gray-700">
|
||||
<SwitchGroup name="enabled" label="Enabled" description="Enable or disable this filter" />
|
||||
<SwitchGroup name="enabled" label="Enabled" description="Enable or disable this filter." />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -370,7 +370,7 @@ export function MoviesTv() {
|
|||
</div>
|
||||
|
||||
<div className="mt-6 lg:pb-8">
|
||||
<TitleSubtitle title="Seasons and Episodes" subtitle="Set season and episode match constraints" />
|
||||
<TitleSubtitle title="Seasons and Episodes" subtitle="Set season and episode match constraints." />
|
||||
|
||||
<div className="mt-6 grid grid-cols-12 gap-6">
|
||||
<TextField name="seasons" label="Seasons" columns={8} placeholder="eg. 1,3,2-6" />
|
||||
|
|
@ -383,7 +383,7 @@ export function MoviesTv() {
|
|||
</div>
|
||||
|
||||
<div className="mt-6 lg:pb-8">
|
||||
<TitleSubtitle title="Quality" subtitle="Set resolution, source, codec and related match constraints" />
|
||||
<TitleSubtitle title="Quality" subtitle="Set resolution, source, codec and related match constraints." />
|
||||
|
||||
<div className="mt-6 grid grid-cols-12 gap-6">
|
||||
<MultiSelect name="resolutions" options={RESOLUTION_OPTIONS} label="resolutions" columns={6} creatable={true} />
|
||||
|
|
@ -448,9 +448,9 @@ export function Music({ values }: AdvancedProps) {
|
|||
</div> */}
|
||||
<div className="mt-4 sm:mt-0 sm:col-span-2">
|
||||
<div className="max-w-lg space-y-4">
|
||||
<CheckboxField name="log" label="Log" sublabel="Must include Log" disabled={values.perfect_flac} />
|
||||
<CheckboxField name="cue" label="Cue" sublabel="Must include Cue" disabled={values.perfect_flac} />
|
||||
<CheckboxField name="perfect_flac" label="Perfect FLAC" sublabel="Override all options about quality, source, format, and cue/log/log score"/>
|
||||
<CheckboxField name="log" label="Log" sublabel="Must include Log." disabled={values.perfect_flac} />
|
||||
<CheckboxField name="cue" label="Cue" sublabel="Must include Cue." disabled={values.perfect_flac} />
|
||||
<CheckboxField name="perfect_flac" label="Perfect FLAC" sublabel="Override all options about quality, source, format, and cue/log/log score."/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -468,7 +468,7 @@ interface AdvancedProps {
|
|||
export function Advanced({ values }: AdvancedProps) {
|
||||
return (
|
||||
<div>
|
||||
<CollapsableSection defaultOpen={true} title="Releases" subtitle="Match only certain release names and/or ignore other release names">
|
||||
<CollapsableSection defaultOpen={true} title="Releases" subtitle="Match only certain release names and/or ignore other release names.">
|
||||
<div className="grid col-span-12 gap-6">
|
||||
<WarningAlert text="autobrr has extensive filtering built-in - only use this if nothing else works. If you need help please ask." />
|
||||
|
||||
|
|
@ -498,12 +498,12 @@ export function Advanced({ values }: AdvancedProps) {
|
|||
</div>
|
||||
</CollapsableSection>
|
||||
|
||||
<CollapsableSection defaultOpen={true} title="Groups" subtitle="Match only certain groups and/or ignore other groups">
|
||||
<CollapsableSection defaultOpen={true} title="Groups" subtitle="Match only certain groups and/or ignore other groups.">
|
||||
<TextField name="match_release_groups" label="Match release groups" columns={6} placeholder="eg. group1,group2" />
|
||||
<TextField name="except_release_groups" label="Except release groups" columns={6} placeholder="eg. badgroup1,badgroup2" />
|
||||
</CollapsableSection>
|
||||
|
||||
<CollapsableSection defaultOpen={true} title="Categories and tags" subtitle="Match or ignore categories or tags">
|
||||
<CollapsableSection defaultOpen={true} title="Categories and tags" subtitle="Match or ignore categories or tags.">
|
||||
<TextField name="match_categories" label="Match categories" columns={6} placeholder="eg. *category*,category1" />
|
||||
<TextField name="except_categories" label="Except categories" columns={6} placeholder="eg. *category*" />
|
||||
|
||||
|
|
@ -511,17 +511,17 @@ export function Advanced({ values }: AdvancedProps) {
|
|||
<TextField name="except_tags" label="Except tags" columns={6} placeholder="eg. tag1,tag2" />
|
||||
</CollapsableSection>
|
||||
|
||||
<CollapsableSection defaultOpen={true} title="Uploaders" subtitle="Match or ignore uploaders">
|
||||
<CollapsableSection defaultOpen={true} title="Uploaders" subtitle="Match or ignore uploaders.">
|
||||
<TextField name="match_uploaders" label="Match uploaders" columns={6} placeholder="eg. uploader1" />
|
||||
<TextField name="except_uploaders" label="Except uploaders" columns={6} placeholder="eg. anonymous" />
|
||||
</CollapsableSection>
|
||||
|
||||
<CollapsableSection defaultOpen={true} title="Origins" subtitle="Match Internals, scene, p2p etc if announced">
|
||||
<CollapsableSection defaultOpen={true} title="Origins" subtitle="Match Internals, scene, p2p etc. if announced.">
|
||||
<MultiSelect name="origins" options={ORIGIN_OPTIONS} label="Match Origins" columns={6} creatable={true} />
|
||||
<MultiSelect name="except_origins" options={ORIGIN_OPTIONS} label="Except Origins" columns={6} creatable={true} />
|
||||
</CollapsableSection>
|
||||
|
||||
<CollapsableSection defaultOpen={true} title="Release Tags" subtitle="This is the non-parsed releaseTags string from the announce">
|
||||
<CollapsableSection defaultOpen={true} title="Release Tags" subtitle="This is the non-parsed releaseTags string from the announce.">
|
||||
<div className="grid col-span-12 gap-6">
|
||||
<WarningAlert text="These might not be what you think they are. For advanced users who know how things are parsed." />
|
||||
|
||||
|
|
@ -533,7 +533,7 @@ export function Advanced({ values }: AdvancedProps) {
|
|||
</div>
|
||||
</CollapsableSection>
|
||||
|
||||
<CollapsableSection defaultOpen={true} title="Freeleech" subtitle="Match only freeleech and freeleech percent">
|
||||
<CollapsableSection defaultOpen={true} title="Freeleech" subtitle="Match only freeleech and freeleech percent.">
|
||||
<div className="col-span-6">
|
||||
<SwitchGroup name="freeleech" label="Freeleech" />
|
||||
</div>
|
||||
|
|
@ -615,7 +615,7 @@ export function External() {
|
|||
<div>
|
||||
|
||||
<div className="mt-6">
|
||||
<SwitchGroup name="external_script_enabled" heading={true} label="Script" description="Run external script and check status as part of filtering" />
|
||||
<SwitchGroup name="external_script_enabled" heading={true} label="Script" description="Run external script and check status as part of filtering." />
|
||||
|
||||
<div className="mt-6 grid grid-cols-12 gap-6">
|
||||
<TextField
|
||||
|
|
@ -643,7 +643,7 @@ export function External() {
|
|||
|
||||
<div className="mt-6">
|
||||
<div className="border-t dark:border-gray-700">
|
||||
<SwitchGroup name="external_webhook_enabled" heading={true} label="Webhook" description="Run external webhook and check status as part of filtering" />
|
||||
<SwitchGroup name="external_webhook_enabled" heading={true} label="Webhook" description="Run external webhook and check status as part of filtering." />
|
||||
</div>
|
||||
|
||||
<div className="mt-6 grid grid-cols-12 gap-6">
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ function APISettings() {
|
|||
<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-5 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Name
|
||||
className="col-span-4 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
|
||||
|
|
@ -65,7 +65,7 @@ function APISettings() {
|
|||
))}
|
||||
</ol>
|
||||
</section>
|
||||
: <EmptySimple title="No API keys" subtitle="Create a new" buttonAction={toggleAddForm}
|
||||
: <EmptySimple title="No API keys" subtitle="" buttonAction={toggleAddForm}
|
||||
buttonText="Create API key"/>}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -107,14 +107,14 @@ function APIListItem({ apikey }: ApiKeyItemProps) {
|
|||
/>
|
||||
|
||||
<div className="grid grid-cols-12 gap-4 items-center py-2">
|
||||
<div className="col-span-5 flex items-center text-sm font-medium text-gray-900 dark:text-white">
|
||||
<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-1 flex items-center justify-end text-sm font-medium text-gray-900 dark:text-white">
|
||||
<div className="col-span-2 flex items-center justify-end text-sm font-medium text-gray-900 dark:text-white">
|
||||
<button
|
||||
className={classNames(
|
||||
"text-gray-900 dark:text-gray-300",
|
||||
|
|
|
|||
|
|
@ -37,13 +37,13 @@ function DownloadClientSettingsListItem({ client, idx }: DLSettingsItemProps) {
|
|||
|
||||
return (
|
||||
<li key={client.name}>
|
||||
<div className="grid grid-cols-12 gap-2 lg:gap-4 items-center py-2">
|
||||
<div className="grid grid-cols-12 gap-4 items-center py-3">
|
||||
<DownloadClientUpdateForm
|
||||
client={client}
|
||||
isOpen={updateClientIsOpen}
|
||||
toggle={toggleUpdateClient}
|
||||
/>
|
||||
<div className="col-span-3 sm:col-span-2 px-4 sm:px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
<div className="col-span-3 px-6 flex items-center sm:px-6">
|
||||
<Switch
|
||||
checked={client.enabled}
|
||||
onChange={onToggleMutation}
|
||||
|
|
@ -62,9 +62,9 @@ function DownloadClientSettingsListItem({ client, idx }: DLSettingsItemProps) {
|
|||
/>
|
||||
</Switch>
|
||||
</div>
|
||||
<div className="col-span-7 sm:col-span-3 px-1 sm:px-0 whitespace-nowrap 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 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 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">{DownloadClientTypeNameMap[client.type]}</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">
|
||||
<span className="text-blue-600 dark:text-gray-300 hover:text-blue-900 cursor-pointer" onClick={toggleUpdateClient}>
|
||||
Edit
|
||||
|
|
@ -117,16 +117,16 @@ function DownloadClientSettings() {
|
|||
<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 gap-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="col-span-3 sm:col-span-2 px-2 sm: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 px-6 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 sm:col-span-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||
<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
|
||||
</div>
|
||||
<div className="hidden sm:block col-span-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||
<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">
|
||||
Host
|
||||
</div>
|
||||
<div className="hidden sm:block col-span-2 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||
<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">
|
||||
Type
|
||||
</div>
|
||||
</li>
|
||||
|
|
@ -135,7 +135,7 @@ function DownloadClientSettings() {
|
|||
))}
|
||||
</ol>
|
||||
</section>
|
||||
: <EmptySimple title="No download clients" subtitle="Add a new client" buttonText="New client" buttonAction={toggleAddClient} />
|
||||
: <EmptySimple title="No download clients" subtitle="" buttonText="Add new client" buttonAction={toggleAddClient} />
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ function FeedSettings() {
|
|||
<div className="ml-4 mt-4">
|
||||
<h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">Feeds</h3>
|
||||
<p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
|
||||
Manage Torznab feeds.
|
||||
Manage RSS and Torznab feeds.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -44,16 +44,16 @@ function FeedSettings() {
|
|||
<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-2 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Enabled
|
||||
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
|
||||
</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">Name
|
||||
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
|
||||
</div>
|
||||
<div
|
||||
className="col-span-2 px-6 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-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Type
|
||||
</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">Last run
|
||||
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>
|
||||
|
|
@ -101,8 +101,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 py-4">
|
||||
<div className="col-span-2 flex items-center sm:px-6 ">
|
||||
<div className="grid grid-cols-12 gap-4 items-center">
|
||||
<div className="col-span-3 px-6 flex items-center sm:px-6 ">
|
||||
<Switch
|
||||
checked={feed.enabled}
|
||||
onChange={toggleActive}
|
||||
|
|
@ -121,16 +121,16 @@ function ListItem({ feed }: ListItemProps) {
|
|||
/>
|
||||
</Switch>
|
||||
</div>
|
||||
<div className="col-span-4 flex flex-col sm:px-6 text-sm font-medium text-gray-900 dark:text-white">
|
||||
<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">
|
||||
<span>{feed.name}</span>
|
||||
<span className="text-gray-900 dark:text-gray-500 text-xs">
|
||||
{feed.indexer}
|
||||
</span>
|
||||
</div>
|
||||
<div className="col-span-2 flex items-center sm:px-6">
|
||||
<div className="hidden md:flex col-span-3 py-3 flex items-center">
|
||||
{ImplementationBadges[feed.type.toLowerCase()]}
|
||||
</div>
|
||||
<div className="col-span-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-2 py-3 flex 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>
|
||||
|
|
|
|||
|
|
@ -154,7 +154,7 @@ function IndexerSettings() {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
: <EmptySimple title="No indexers" subtitle="Add a new indexer" buttonText="New indexer" buttonAction={toggleAddIndexer} />
|
||||
: <EmptySimple title="No indexers" subtitle="" buttonText="Add new indexer" buttonAction={toggleAddIndexer} />
|
||||
}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -119,8 +119,8 @@ export const IrcSettings = () => {
|
|||
) : (
|
||||
<EmptySimple
|
||||
title="No networks"
|
||||
subtitle="Add a new network"
|
||||
buttonText="New network"
|
||||
subtitle="Normally set up via Indexers"
|
||||
buttonText="Add new network"
|
||||
buttonAction={toggleAddNetwork}
|
||||
/>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -43,10 +43,10 @@ function NotificationSettings() {
|
|||
<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 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Enabled</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">Name</div>
|
||||
<div className="col-span-2 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Type</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">Events</div>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
{data && data.map((n: Notification) => (
|
||||
|
|
@ -54,7 +54,7 @@ function NotificationSettings() {
|
|||
))}
|
||||
</ol>
|
||||
</section>
|
||||
: <EmptySimple title="No notifications setup" subtitle="Add a new notification" buttonText="New notification" buttonAction={toggleAddNotifications} />}
|
||||
: <EmptySimple title="No notifications" subtitle="" buttonText="Create new notification" buttonAction={toggleAddNotifications} />}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -96,7 +96,7 @@ function ListItem({ notification }: ListItemProps) {
|
|||
<NotificationUpdateForm isOpen={updateFormIsOpen} toggle={toggleUpdateForm} notification={notification} />
|
||||
|
||||
<div className="grid grid-cols-12 gap-4 items-center py-3">
|
||||
<div className="col-span-2 flex items-center sm:px-6">
|
||||
<div className="col-span-2 md:col-span-2 pl-6 flex items-center sm:pl-6">
|
||||
<Switch
|
||||
checked={notification.enabled}
|
||||
onChange={toggleUpdateForm}
|
||||
|
|
@ -115,13 +115,13 @@ function ListItem({ notification }: ListItemProps) {
|
|||
/>
|
||||
</Switch>
|
||||
</div>
|
||||
<div className="col-span-4 flex items-center sm:px-6">
|
||||
<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}>
|
||||
{notification.name}
|
||||
</div>
|
||||
<div className="col-span-2 flex items-center sm:px-6">
|
||||
<div className="hidden md:flex col-span-2 items-center">
|
||||
{iconComponentMap[notification.type]}
|
||||
</div>
|
||||
<div className="col-span-3 flex items-center sm:px-6">
|
||||
<div className="hidden md:flex col-span-2 px-6 items-center sm:px-6">
|
||||
<span
|
||||
className="mr-2 inline-flex items-center px-2.5 py-1 rounded-md text-sm font-medium bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-400"
|
||||
title={notification.events.join(", ")}
|
||||
|
|
@ -129,7 +129,7 @@ function ListItem({ notification }: ListItemProps) {
|
|||
{notification.events.length}
|
||||
</span>
|
||||
</div>
|
||||
<div className="col-span-1 flex items-center">
|
||||
<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}>
|
||||
Edit
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -57,12 +57,12 @@ function ReleaseSettings() {
|
|||
<div className="px-4 py-5 sm:p-0">
|
||||
<div className="px-4 py-5 sm:p-6">
|
||||
<div>
|
||||
<h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">
|
||||
<h3 style={{ textAlign: "center" }} className="text-lg leading-6 font-medium text-gray-900 dark:text-white">
|
||||
Danger Zone
|
||||
</h3>
|
||||
<p style={{ textAlign: "center" }} className="mt-1 text-sm text-gray-900 dark:text-white">This will clear all release history in your database.</p>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center p-4 mt-6 max-w-sm m-auto">
|
||||
<div className="flex justify-between items-center p-2 mt-2 max-w-sm m-auto">
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggleDeleteModal}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue