mirror of
https://github.com/idanoo/autobrr
synced 2025-07-23 16:59:12 +00:00
feat: overhaul webui (#135)
feat: Added Inter Variable as the default font feat: Added a pattern to the page background. fix(react-multi-select-component): Made the multiselect components theme-agnostic, so it works properly with the light theme now. fix(react-select): Made the components fix the default 30px height of the rest of the input components. fix(useToggle): Fixed a bug where the toggle didn't work due to useCallback memoizing a callback with the old value. refactor(Base): - Added small theme-primary gradient to the beginning of the header. - Made the splitter border theme-agnostic. - Increased logo size a bit. - Moved the links a bit closer to the logo. - Updated the default link style to look more stylish. - Added a link to the autobrr Docs section (currently defaults to the Indexers sections, but this should lead to an "Overview" page for configuring autobrr) - Adapted the user dropdown to match the other header links' stylesheets and removed the annoying ring focus. - Adapted the header for theme-agnostic mobile usage. - Removed the negative padding/margin hacks. refactor(StatsItem): Increased shadow size/strength and made the description text a bit lighter on the dark theme. refactor(Dashboard): Increased the heading text sizes. refactor(Logs, Releases, Settings, Login, filters/details, filters/list): Adapted to match the previous changes and improved theme compatibility with regards to text. refactor(RegexPlayground): Fixed match highlight for JS regex.
This commit is contained in:
stacksmash76
GitHub
parent
c3687b8fa5
commit
ac37bd4d9c
17 changed files with 371 additions and 342 deletions
|
|
@ -5,6 +5,7 @@
|
|||
"proxy": "http://127.0.0.1:8989",
|
||||
"homepage": ".",
|
||||
"dependencies": {
|
||||
"@fontsource/inter": "^4.5.4",
|
||||
"@headlessui/react": "^1.2.0",
|
||||
"@heroicons/react": "^1.0.1",
|
||||
"date-fns": "^2.25.0",
|
||||
|
|
|
|||
|
|
@ -28,6 +28,6 @@
|
|||
</head>
|
||||
<body class="bg-gray-100 dark:bg-gray-900">
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<div id="root" class="pattern"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -38,5 +38,5 @@ export function App() {
|
|||
<ReactQueryDevtools initialIsOpen={false} />
|
||||
) : null}
|
||||
</QueryClientProvider>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
@ -1,9 +1,11 @@
|
|||
import { Fragment } from "react";
|
||||
import { MultiSelect as RMSC} from "react-multi-select-component";
|
||||
import { Transition, Listbox } from "@headlessui/react";
|
||||
import { CheckIcon, SelectorIcon } from '@heroicons/react/solid';
|
||||
import { classNames, COL_WIDTHS } from "../../utils";
|
||||
import { Field } from "formik";
|
||||
import { Transition, Listbox } from "@headlessui/react";
|
||||
import { CheckIcon, SelectorIcon } from "@heroicons/react/solid";
|
||||
import { MultiSelect as RMSC } from "react-multi-select-component";
|
||||
|
||||
import { classNames, COL_WIDTHS } from "../../utils";
|
||||
import { SettingsContext } from "../../utils/Context";
|
||||
|
||||
interface MultiSelectProps {
|
||||
label?: string;
|
||||
|
|
@ -17,80 +19,87 @@ export const MultiSelect = ({
|
|||
label,
|
||||
options,
|
||||
columns,
|
||||
}: MultiSelectProps) => (
|
||||
<div
|
||||
className={classNames(
|
||||
columns ? `col-span-${columns}` : "col-span-12"
|
||||
)}
|
||||
>
|
||||
<label
|
||||
className="block mb-2 text-xs font-bold tracking-wide text-gray-700 uppercase dark:text-gray-200"
|
||||
htmlFor={label}
|
||||
>
|
||||
{label}
|
||||
</label>
|
||||
|
||||
<Field name={name} type="select" multiple={true}>
|
||||
{({
|
||||
field,
|
||||
form: { setFieldValue },
|
||||
}: any) => (
|
||||
<RMSC
|
||||
{...field}
|
||||
type="select"
|
||||
options={options}
|
||||
labelledBy={name}
|
||||
value={field.value && field.value.map((item: any) => options.find((o: any) => o.value === item))}
|
||||
onChange={(values: any) => {
|
||||
const am = values && values.map((i: any) => i.value);
|
||||
setFieldValue(field.name, am);
|
||||
}}
|
||||
className="dark:bg-gray-700 dark"
|
||||
/>
|
||||
}: MultiSelectProps) => {
|
||||
const settingsContext = SettingsContext.useValue();
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
columns ? `col-span-${columns}` : "col-span-12"
|
||||
)}
|
||||
</Field>
|
||||
</div>
|
||||
);
|
||||
>
|
||||
<label
|
||||
className="block mb-2 text-xs font-bold tracking-wide text-gray-700 uppercase dark:text-gray-200"
|
||||
htmlFor={label}
|
||||
>
|
||||
{label}
|
||||
</label>
|
||||
|
||||
<Field name={name} type="select" multiple={true}>
|
||||
{({
|
||||
field,
|
||||
form: { setFieldValue },
|
||||
}: any) => (
|
||||
<RMSC
|
||||
{...field}
|
||||
type="select"
|
||||
options={options}
|
||||
labelledBy={name}
|
||||
value={field.value && field.value.map((item: any) => options.find((o: any) => o.value === item))}
|
||||
onChange={(values: any) => {
|
||||
const am = values && values.map((i: any) => i.value);
|
||||
setFieldValue(field.name, am);
|
||||
}}
|
||||
className={settingsContext.darkTheme ? "dark" : ""}
|
||||
/>
|
||||
)}
|
||||
</Field>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export const IndexerMultiSelect = ({
|
||||
name,
|
||||
label,
|
||||
options,
|
||||
columns,
|
||||
}: MultiSelectProps) => (
|
||||
<div
|
||||
className={classNames(
|
||||
columns ? `col-span-${columns}` : "col-span-12"
|
||||
)}
|
||||
>
|
||||
<label
|
||||
className="block mb-2 text-xs font-bold tracking-wide text-gray-700 uppercase dark:text-gray-200"
|
||||
htmlFor={label}
|
||||
>
|
||||
{label}
|
||||
</label>
|
||||
}: MultiSelectProps) => {
|
||||
const settingsContext = SettingsContext.useValue();
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
columns ? `col-span-${columns}` : "col-span-12"
|
||||
)}
|
||||
>
|
||||
<label
|
||||
className="block mb-2 text-xs font-bold tracking-wide text-gray-700 uppercase dark:text-gray-200"
|
||||
htmlFor={label}
|
||||
>
|
||||
{label}
|
||||
</label>
|
||||
|
||||
<Field name={name} type="select" multiple={true}>
|
||||
{({
|
||||
field,
|
||||
form: { setFieldValue },
|
||||
}: any) => (
|
||||
<RMSC
|
||||
{...field}
|
||||
type="select"
|
||||
options={options}
|
||||
labelledBy={name}
|
||||
value={field.value && field.value.map((item: any) => options.find((o: any) => o.value?.id === item.id))}
|
||||
onChange={(values: any) => {
|
||||
const am = values && values.map((i: any) => i.value);
|
||||
setFieldValue(field.name, am);
|
||||
}}
|
||||
className="dark:bg-gray-700 dark"
|
||||
/>
|
||||
)}
|
||||
</Field>
|
||||
</div>
|
||||
);
|
||||
<Field name={name} type="select" multiple={true}>
|
||||
{({
|
||||
field,
|
||||
form: { setFieldValue },
|
||||
}: any) => (
|
||||
<RMSC
|
||||
{...field}
|
||||
type="select"
|
||||
options={options}
|
||||
labelledBy={name}
|
||||
value={field.value && field.value.map((item: any) => options.find((o: any) => o.value?.id === item.id))}
|
||||
onChange={(values: any) => {
|
||||
const am = values && values.map((i: any) => i.value);
|
||||
setFieldValue(field.name, am);
|
||||
}}
|
||||
className={settingsContext.darkTheme ? "dark" : ""}
|
||||
itemHeight={50}
|
||||
/>
|
||||
)}
|
||||
</Field>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface DownloadClientSelectProps {
|
||||
name: string;
|
||||
|
|
|
|||
|
|
@ -254,6 +254,14 @@ export function IndexerAddForm({ isOpen, toggle }: AddProps) {
|
|||
color: "unset"
|
||||
})
|
||||
}}
|
||||
theme={(theme) => ({
|
||||
...theme,
|
||||
spacing: {
|
||||
...theme.spacing,
|
||||
controlHeight: 30,
|
||||
baseUnit: 2,
|
||||
}
|
||||
})}
|
||||
value={field?.value && field.value.value}
|
||||
onChange={(option: any) => {
|
||||
setFieldValue("name", option?.label ?? "")
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import { useState, useCallback } from "react";
|
||||
import { useState } from "react";
|
||||
|
||||
export function useToggle(initialValue = false): [boolean, () => void] {
|
||||
const [value, setValue] = useState(initialValue);
|
||||
const toggle = useCallback(() => setValue(v => !v), []);
|
||||
const toggle = () => setValue(v => !v);
|
||||
|
||||
return [value, toggle];
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,5 +1,7 @@
|
|||
import { StrictMode } from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
|
||||
import "@fontsource/inter/variable.css";
|
||||
import "./index.css";
|
||||
|
||||
import { App } from "./App";
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import { Fragment } from "react";
|
||||
import { NavLink, Link, Route, Switch } from "react-router-dom";
|
||||
import type { match } from "react-router-dom";
|
||||
import { Disclosure, Menu, Transition } from "@headlessui/react";
|
||||
import { ExternalLinkIcon } from "@heroicons/react/solid";
|
||||
import { ChevronDownIcon, MenuIcon, XIcon } from "@heroicons/react/outline";
|
||||
|
||||
import Logs from "./Logs";
|
||||
|
|
@ -13,13 +15,35 @@ import { AuthContext } from '../utils/Context';
|
|||
|
||||
import logo from '../logo.png';
|
||||
|
||||
interface NavItem {
|
||||
name: string;
|
||||
path: string;
|
||||
}
|
||||
|
||||
function classNames(...classes: string[]) {
|
||||
return classes.filter(Boolean).join(' ')
|
||||
}
|
||||
|
||||
const isActiveMatcher = (
|
||||
match: match<any> | null,
|
||||
location: { pathname: string },
|
||||
item: NavItem
|
||||
) => {
|
||||
if (!match)
|
||||
return false;
|
||||
|
||||
if (match?.url === "/" && item.path === "/" && location.pathname === "/")
|
||||
return true
|
||||
|
||||
if (match.url === "/")
|
||||
return false;
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
export default function Base() {
|
||||
const authContext = AuthContext.useValue();
|
||||
const nav = [
|
||||
const nav: Array<NavItem> = [
|
||||
{ name: 'Dashboard', path: "/" },
|
||||
{ name: 'Filters', path: "/filters" },
|
||||
{ name: 'Releases', path: "/releases" },
|
||||
|
|
@ -28,56 +52,58 @@ export default function Base() {
|
|||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Disclosure as="nav" className="bg-gray-900 pb-48">
|
||||
<div className="min-h-screen">
|
||||
<Disclosure
|
||||
as="nav"
|
||||
className="bg-gradient-to-b from-gray-100 dark:from-[#141414]"
|
||||
>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
|
||||
<div className="border-b border-gray-700">
|
||||
<div className="border-b border-gray-300 dark:border-gray-700">
|
||||
<div className="flex items-center justify-between h-16 px-4 sm:px-0">
|
||||
<div className="flex items-center">
|
||||
<div className="flex-shrink-0 flex items-center">
|
||||
<img
|
||||
className="block lg:hidden h-8 w-auto"
|
||||
className="block lg:hidden h-10 w-auto"
|
||||
src={logo}
|
||||
alt="Logo"
|
||||
/>
|
||||
<img
|
||||
className="hidden lg:block h-8 w-auto"
|
||||
className="hidden lg:block h-10 w-auto"
|
||||
src={logo}
|
||||
alt="Logo"
|
||||
/>
|
||||
</div>
|
||||
<div className="sm:ml-6 hidden sm:block">
|
||||
<div className="sm:ml-3 hidden sm:block">
|
||||
<div className="flex items-baseline space-x-4">
|
||||
{nav.map((item, itemIdx) =>
|
||||
<NavLink
|
||||
key={item.name + itemIdx}
|
||||
to={item.path}
|
||||
strict={true}
|
||||
isActive={(match, location) => {
|
||||
if (match?.url === "/" && item.path === "/" && location.pathname === "/") {
|
||||
return true
|
||||
}
|
||||
|
||||
if (!match) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (match.url === "/") {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}}
|
||||
activeClassName="bg-gray-900 dark:bg-gray-700 text-white "
|
||||
strict
|
||||
className={classNames(
|
||||
"text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
|
||||
"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",
|
||||
"transition-colors duration-200"
|
||||
)}
|
||||
activeClassName="text-black dark:text-gray-50 font-bold"
|
||||
isActive={(match, location) => isActiveMatcher(match, location, item)}
|
||||
>
|
||||
{item.name}
|
||||
</NavLink>
|
||||
)}
|
||||
<a
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
href="https://autobrr.com/docs/configuration/indexers"
|
||||
className={classNames(
|
||||
"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",
|
||||
"transition-colors duration-200 flex items-center justify-center"
|
||||
)}
|
||||
>
|
||||
Docs
|
||||
<ExternalLinkIcon className="inline ml-1 h-5 w-5" aria-hidden="true" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -86,19 +112,21 @@ export default function Base() {
|
|||
<Menu as="div" className="ml-3 relative">
|
||||
{({ open }) => (
|
||||
<>
|
||||
<div>
|
||||
<Menu.Button
|
||||
className="max-w-xs rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
|
||||
<span
|
||||
className="hidden text-gray-300 text-sm font-medium sm:block">
|
||||
<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-400 sm:block"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</Menu.Button>
|
||||
</div>
|
||||
<Menu.Button
|
||||
className={classNames(
|
||||
open ? "bg-gray-200 dark:bg-gray-800" : "",
|
||||
"text-gray-800 dark:text-gray-300 max-w-xs rounded-full flex items-center text-sm px-3 py-2 hover:bg-gray-200 dark:hover:bg-gray-800"
|
||||
)}
|
||||
>
|
||||
<span className="hidden text-sm font-medium sm:block">
|
||||
<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"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</Menu.Button>
|
||||
<Transition
|
||||
show={open}
|
||||
as={Fragment}
|
||||
|
|
@ -149,7 +177,7 @@ export default function Base() {
|
|||
<div className="-mr-2 flex sm:hidden">
|
||||
{/* Mobile menu button */}
|
||||
<Disclosure.Button
|
||||
className="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
|
||||
className="bg-gray-200 dark:bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-600 dark:text-gray-400 hover:text-white hover:bg-gray-700">
|
||||
<span className="sr-only">Open main menu</span>
|
||||
{open ? (
|
||||
<XIcon className="block h-6 w-6" aria-hidden="true" />
|
||||
|
|
@ -162,48 +190,28 @@ export default function Base() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<Disclosure.Panel className="border-b border-gray-700 md:hidden">
|
||||
<Disclosure.Panel className="border-b border-gray-300 dark:border-gray-700 md:hidden">
|
||||
<div className="px-2 py-3 space-y-1 sm:px-3">
|
||||
{nav.map((item, itemIdx) =>
|
||||
itemIdx === 0 ? (
|
||||
<Fragment key={item.path}>
|
||||
<Link to={item.path}
|
||||
className="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium">
|
||||
{item.name}
|
||||
</Link>
|
||||
</Fragment>
|
||||
) : (
|
||||
<Link
|
||||
key={item.path}
|
||||
to={item.path}
|
||||
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
)
|
||||
{nav.map((item) =>
|
||||
<NavLink
|
||||
key={item.path}
|
||||
to={item.path}
|
||||
strict
|
||||
className="dark:bg-gray-900 dark:text-white block px-3 py-2 rounded-md text-base font-medium"
|
||||
activeClassName="font-bold bg-gray-300 text-black"
|
||||
isActive={(match, location) => isActiveMatcher(match, location, item)}
|
||||
>
|
||||
{item.name}
|
||||
</NavLink>
|
||||
)}
|
||||
<Link
|
||||
to="/logout"
|
||||
className="dark:bg-gray-900 dark:text-white block px-3 py-2 rounded-md text-base font-medium"
|
||||
>
|
||||
Logout
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pt-4 pb-3 border-t border-gray-700">
|
||||
<div className="flex items-center px-5">
|
||||
<div>
|
||||
<div className="text-base font-medium leading-none text-white">User</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3 px-2 space-y-1">
|
||||
<Link
|
||||
to="/settings"
|
||||
className="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700"
|
||||
>
|
||||
Settings
|
||||
</Link>
|
||||
<Link
|
||||
to="/logout"
|
||||
className="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700"
|
||||
>
|
||||
Logout
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</Disclosure.Panel>
|
||||
</>
|
||||
)}
|
||||
|
|
@ -236,4 +244,4 @@ export default function Base() {
|
|||
</Switch>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ import { ReleaseStatusCell } from "./Releases";
|
|||
|
||||
export function Dashboard() {
|
||||
return (
|
||||
<main className="py-10 -mt-48">
|
||||
<main className="py-10">
|
||||
<div className="px-4 pb-8 mx-auto max-w-7xl sm:px-6 lg:px-8">
|
||||
<Stats />
|
||||
<DataTable />
|
||||
|
|
@ -26,15 +26,15 @@ export function Dashboard() {
|
|||
|
||||
const StatsItem = ({ name, stat }: any) => (
|
||||
<div
|
||||
className="relative px-4 pt-5 pb-2 overflow-hidden bg-white rounded-lg shadow dark:bg-gray-800 sm:pt-6 sm:px-6"
|
||||
className="relative px-4 pt-5 pb-2 overflow-hidden bg-white rounded-lg shadow-lg dark:bg-gray-800 sm:pt-6 sm:px-6"
|
||||
title="All time"
|
||||
>
|
||||
<dt>
|
||||
<p className="pb-1 text-sm font-medium text-gray-500 truncate dark:text-gray-600">{name}</p>
|
||||
<p className="pb-1 text-sm font-medium text-gray-500 truncate">{name}</p>
|
||||
</dt>
|
||||
|
||||
<dd className="flex items-baseline pb-6 sm:pb-7">
|
||||
<p className="text-2xl font-semibold text-gray-900 dark:text-gray-300">{stat}</p>
|
||||
<p className="text-2xl font-semibold text-gray-900 dark:text-gray-200">{stat}</p>
|
||||
</dd>
|
||||
</div>
|
||||
)
|
||||
|
|
@ -51,7 +51,9 @@ function Stats() {
|
|||
|
||||
return (
|
||||
<div>
|
||||
<h3 className="text-lg font-medium leading-6 text-gray-900 dark:text-gray-600">Stats</h3>
|
||||
<h3 className="text-2xl font-medium leading-6 text-gray-900 dark:text-gray-200">
|
||||
Stats
|
||||
</h3>
|
||||
|
||||
<dl className="grid grid-cols-1 gap-5 mt-5 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<StatsItem name="Filtered Releases" stat={data?.filtered_count} />
|
||||
|
|
@ -311,7 +313,7 @@ function DataTable() {
|
|||
|
||||
return (
|
||||
<div className="flex flex-col mt-12">
|
||||
<h3 className="text-lg font-medium leading-6 text-gray-900 dark:text-gray-600">
|
||||
<h3 className="text-2xl font-medium leading-6 text-gray-900 dark:text-gray-200">
|
||||
Recent activity
|
||||
</h3>
|
||||
|
||||
|
|
|
|||
|
|
@ -30,15 +30,15 @@ export default function Logs() {
|
|||
}, [setLogs]);
|
||||
|
||||
return (
|
||||
<main className="-mt-48">
|
||||
<main>
|
||||
<header className="py-10">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h1 className="text-3xl font-bold text-white capitalize">Logs</h1>
|
||||
<h1 className="text-3xl font-bold text-black dark:text-white capitalize">Logs</h1>
|
||||
</div>
|
||||
</header>
|
||||
<div className="max-w-7xl mx-auto pb-12 px-2 sm:px-4 lg:px-8">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow px-2 sm:px-4 py-3 sm:py-4">
|
||||
<div className=" overflow-y-auto p-2 rounded-lg h-96 bg-gray-900">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg px-2 sm:px-4 py-3 sm:py-4">
|
||||
<div className=" overflow-y-auto p-2 rounded-lg h-96 bg-gray-100 dark:bg-gray-900">
|
||||
{logs.map((a, idx) => (
|
||||
<p key={idx}>
|
||||
<span className="font-mono text-gray-600 mr-2">{a.time}</span>
|
||||
|
|
|
|||
|
|
@ -21,11 +21,10 @@ import { classNames, simplifyDate } from "../utils";
|
|||
|
||||
export function Releases() {
|
||||
return (
|
||||
<main className="-mt-48">
|
||||
|
||||
<main>
|
||||
<header className="py-10">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between">
|
||||
<h1 className="text-3xl font-bold text-white capitalize">Releases</h1>
|
||||
<h1 className="text-3xl font-bold text-black dark:text-white capitalize">Releases</h1>
|
||||
</div>
|
||||
</header>
|
||||
<div className="px-4 pb-8 mx-auto max-w-7xl sm:px-6 lg:px-8">
|
||||
|
|
@ -305,156 +304,138 @@ function Table() {
|
|||
return (
|
||||
<>
|
||||
{isSuccess && data ? (
|
||||
<div className="flex flex-col mt-4">
|
||||
{/* <GlobalFilter
|
||||
preGlobalFilteredRows={preGlobalFilteredRows}
|
||||
globalFilter={state.globalFilter}
|
||||
setGlobalFilter={setGlobalFilter}
|
||||
/> */}
|
||||
{/* {headerGroups.map((headerGroup: { headers: any[] }) =>
|
||||
headerGroup.headers.map((column) =>
|
||||
column.Filter ? (
|
||||
<div className="mt-2 sm:mt-0" key={column.id}>
|
||||
{column.render("Filter")}
|
||||
</div>
|
||||
) : null
|
||||
)
|
||||
)} */}
|
||||
<div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
|
||||
<div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
|
||||
<div className="overflow-hidden bg-white shadow dark:bg-gray-800 sm:rounded-lg">
|
||||
<table {...getTableProps()} className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
|
||||
<thead className="bg-gray-50 dark:bg-gray-800">
|
||||
{headerGroups.map((headerGroup) => {
|
||||
const { key: rowKey, ...rowRest } = headerGroup.getHeaderGroupProps();
|
||||
return (
|
||||
<tr key={rowKey} {...rowRest}>
|
||||
{headerGroup.headers.map((column) => {
|
||||
const { key: columnKey, ...columnRest } = column.getHeaderProps(column.getSortByToggleProps());
|
||||
return (
|
||||
// Add the sorting props to control sorting. For this example
|
||||
// we can add them into the header props
|
||||
<th
|
||||
key={`${rowKey}-${columnKey}`}
|
||||
scope="col"
|
||||
className="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase group"
|
||||
{...columnRest}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
{column.render('Header')}
|
||||
{/* Add a sort direction indicator */}
|
||||
<span>
|
||||
{column.isSorted ? (
|
||||
column.isSortedDesc ? (
|
||||
<SortDownIcon className="w-4 h-4 text-gray-400" />
|
||||
) : (
|
||||
<SortUpIcon className="w-4 h-4 text-gray-400" />
|
||||
)
|
||||
) : (
|
||||
<SortIcon className="w-4 h-4 text-gray-400 opacity-0 group-hover:opacity-100" />
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</th>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</thead>
|
||||
<tbody
|
||||
{...getTableBodyProps()}
|
||||
className="divide-y divide-gray-200 dark:divide-gray-700"
|
||||
>
|
||||
{page.map((row: any) => { // new
|
||||
prepareRow(row)
|
||||
const { key: bodyRowKey, ...bodyRowRest } = row.getRowProps();
|
||||
return (
|
||||
<tr key={bodyRowKey} {...bodyRowRest}>
|
||||
{row.cells.map((cell: any) => {
|
||||
const { key: cellRowKey, ...cellRowRest } = cell.getCellProps();
|
||||
return (
|
||||
<td
|
||||
key={cellRowKey}
|
||||
className="px-6 py-4 whitespace-nowrap"
|
||||
role="cell"
|
||||
{...cellRowRest}
|
||||
>
|
||||
{cell.column.Cell.name === "defaultRenderer"
|
||||
? <div className="text-sm text-gray-500">{cell.render('Cell')}</div>
|
||||
: cell.render('Cell')
|
||||
}
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
<div className="flex flex-col">
|
||||
<div className="overflow-hidden bg-white shadow-lg dark:bg-gray-800 sm:rounded-lg">
|
||||
<table {...getTableProps()} className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
|
||||
<thead className="bg-gray-50 dark:bg-gray-800">
|
||||
{headerGroups.map((headerGroup) => {
|
||||
const { key: rowKey, ...rowRest } = headerGroup.getHeaderGroupProps();
|
||||
return (
|
||||
<tr key={rowKey} {...rowRest}>
|
||||
{headerGroup.headers.map((column) => {
|
||||
const { key: columnKey, ...columnRest } = column.getHeaderProps(column.getSortByToggleProps());
|
||||
return (
|
||||
// Add the sorting props to control sorting. For this example
|
||||
// we can add them into the header props
|
||||
<th
|
||||
key={`${rowKey}-${columnKey}`}
|
||||
scope="col"
|
||||
className="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase group"
|
||||
{...columnRest}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
{column.render('Header')}
|
||||
{/* Add a sort direction indicator */}
|
||||
<span>
|
||||
{column.isSorted ? (
|
||||
column.isSortedDesc ? (
|
||||
<SortDownIcon className="w-4 h-4 text-gray-400" />
|
||||
) : (
|
||||
<SortUpIcon className="w-4 h-4 text-gray-400" />
|
||||
)
|
||||
) : (
|
||||
<SortIcon className="w-4 h-4 text-gray-400 opacity-0 group-hover:opacity-100" />
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</th>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</thead>
|
||||
<tbody
|
||||
{...getTableBodyProps()}
|
||||
className="divide-y divide-gray-200 dark:divide-gray-700"
|
||||
>
|
||||
{page.map((row: any) => { // new
|
||||
prepareRow(row)
|
||||
const { key: bodyRowKey, ...bodyRowRest } = row.getRowProps();
|
||||
return (
|
||||
<tr key={bodyRowKey} {...bodyRowRest}>
|
||||
{row.cells.map((cell: any) => {
|
||||
const { key: cellRowKey, ...cellRowRest } = cell.getCellProps();
|
||||
return (
|
||||
<td
|
||||
key={cellRowKey}
|
||||
className="px-6 py-4 whitespace-nowrap"
|
||||
role="cell"
|
||||
{...cellRowRest}
|
||||
>
|
||||
{cell.column.Cell.name === "defaultRenderer"
|
||||
? <div className="text-sm text-gray-500">{cell.render('Cell')}</div>
|
||||
: cell.render('Cell')
|
||||
}
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{/* Pagination */}
|
||||
<div className="flex items-center justify-between px-6 py-3 border-t border-gray-200 dark:border-gray-700">
|
||||
<div className="flex justify-between flex-1 sm:hidden">
|
||||
<Button onClick={() => previousPage()} disabled={!canPreviousPage}>Previous</Button>
|
||||
<Button onClick={() => nextPage()} disabled={!canNextPage}>Next</Button>
|
||||
</div>
|
||||
<div className="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
|
||||
<div className="flex items-baseline gap-x-2">
|
||||
<span className="text-sm text-gray-700">
|
||||
Page <span className="font-medium">{pageIndex + 1}</span> of <span className="font-medium">{pageOptions.length}</span>
|
||||
</span>
|
||||
<label>
|
||||
<span className="sr-only">Items Per Page</span>
|
||||
<select
|
||||
className="block w-full border-gray-300 rounded-md shadow-sm cursor-pointer dark:bg-gray-800 dark:border-gray-800 dark:text-gray-600 dark:hover:text-gray-500 focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
|
||||
value={pageSize}
|
||||
onChange={e => {
|
||||
setPageSize(Number(e.target.value))
|
||||
}}
|
||||
>
|
||||
{[5, 10, 20, 50].map(pageSize => (
|
||||
<option key={pageSize} value={pageSize}>
|
||||
Show {pageSize}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<nav className="relative z-0 inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
|
||||
<PageButton
|
||||
className="rounded-l-md"
|
||||
onClick={() => gotoPage(0)}
|
||||
disabled={!canPreviousPage}
|
||||
>
|
||||
<span className="sr-only">First</span>
|
||||
<ChevronDoubleLeftIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
|
||||
</PageButton>
|
||||
<PageButton
|
||||
onClick={() => previousPage()}
|
||||
disabled={!canPreviousPage}
|
||||
>
|
||||
<span className="sr-only">Previous</span>
|
||||
<ChevronLeftIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
|
||||
</PageButton>
|
||||
<PageButton
|
||||
onClick={() => nextPage()}
|
||||
disabled={!canNextPage}>
|
||||
<span className="sr-only">Next</span>
|
||||
<ChevronRightIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
|
||||
</PageButton>
|
||||
<PageButton
|
||||
className="rounded-r-md"
|
||||
onClick={() => gotoPage(pageCount - 1)}
|
||||
disabled={!canNextPage}
|
||||
>
|
||||
<span className="sr-only">Last</span>
|
||||
<ChevronDoubleRightIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
|
||||
</PageButton>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
{/* Pagination */}
|
||||
<div className="flex items-center justify-between px-6 py-3 border-t border-gray-200 dark:border-gray-700">
|
||||
<div className="flex justify-between flex-1 sm:hidden">
|
||||
<Button onClick={() => previousPage()} disabled={!canPreviousPage}>Previous</Button>
|
||||
<Button onClick={() => nextPage()} disabled={!canNextPage}>Next</Button>
|
||||
</div>
|
||||
<div className="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
|
||||
<div className="flex items-baseline gap-x-2">
|
||||
<span className="text-sm text-gray-700">
|
||||
Page <span className="font-medium">{pageIndex + 1}</span> of <span className="font-medium">{pageOptions.length}</span>
|
||||
</span>
|
||||
<label>
|
||||
<span className="sr-only">Items Per Page</span>
|
||||
<select
|
||||
className="block w-full border-gray-300 rounded-md shadow-sm cursor-pointer dark:bg-gray-800 dark:border-gray-800 dark:text-gray-600 dark:hover:text-gray-500 focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
|
||||
value={pageSize}
|
||||
onChange={e => {
|
||||
setPageSize(Number(e.target.value))
|
||||
}}
|
||||
>
|
||||
{[5, 10, 20, 50].map(pageSize => (
|
||||
<option key={pageSize} value={pageSize}>
|
||||
Show {pageSize}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<nav className="relative z-0 inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
|
||||
<PageButton
|
||||
className="rounded-l-md"
|
||||
onClick={() => gotoPage(0)}
|
||||
disabled={!canPreviousPage}
|
||||
>
|
||||
<span className="sr-only">First</span>
|
||||
<ChevronDoubleLeftIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
|
||||
</PageButton>
|
||||
<PageButton
|
||||
onClick={() => previousPage()}
|
||||
disabled={!canPreviousPage}
|
||||
>
|
||||
<span className="sr-only">Previous</span>
|
||||
<ChevronLeftIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
|
||||
</PageButton>
|
||||
<PageButton
|
||||
onClick={() => nextPage()}
|
||||
disabled={!canNextPage}>
|
||||
<span className="sr-only">Next</span>
|
||||
<ChevronRightIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
|
||||
</PageButton>
|
||||
<PageButton
|
||||
className="rounded-r-md"
|
||||
onClick={() => gotoPage(pageCount - 1)}
|
||||
disabled={!canNextPage}
|
||||
>
|
||||
<span className="sr-only">Last</span>
|
||||
<ChevronDoubleRightIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
|
||||
</PageButton>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -62,15 +62,15 @@ function SidebarNav({subNavigation, url}: any) {
|
|||
export default function Settings() {
|
||||
const { url } = useRouteMatch();
|
||||
return (
|
||||
<main className="relative -mt-48">
|
||||
<main>
|
||||
<header className="py-10">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h1 className="text-3xl font-bold text-white capitalize">Settings</h1>
|
||||
<h1 className="text-3xl font-bold text-black dark:text-white capitalize">Settings</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="max-w-screen-xl mx-auto pb-6 px-4 sm:px-6 lg:pb-16 lg:px-8">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
|
||||
<div className="divide-y divide-gray-200 dark:divide-gray-700 lg:grid lg:grid-cols-12 lg:divide-y-0 lg:divide-x">
|
||||
<SidebarNav url={url} subNavigation={subNavigation}/>
|
||||
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ function Login() {
|
|||
const handleSubmit = (data: any) => mutation.mutate(data);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
|
||||
<div className="min-h-screen flex flex-col justify-center py-12 sm:px-6 lg:px-8">
|
||||
<div className="sm:mx-auto sm:w-full sm:max-w-md mb-6">
|
||||
<img
|
||||
className="mx-auto h-12 w-auto"
|
||||
|
|
@ -41,8 +41,8 @@ function Login() {
|
|||
alt="logo"
|
||||
/>
|
||||
</div>
|
||||
<div className="sm:mx-auto sm:w-full sm:max-w-md">
|
||||
<div className="bg-white dark:bg-gray-800 py-8 px-4 shadow sm:rounded-lg sm:px-10">
|
||||
<div className="sm:mx-auto sm:w-full sm:max-w-md shadow-lg">
|
||||
<div className="bg-white dark:bg-gray-800 py-8 px-4 sm:rounded-lg sm:px-10">
|
||||
|
||||
<Formik
|
||||
initialValues={{ username: "", password: "" }}
|
||||
|
|
@ -71,4 +71,4 @@ function Login() {
|
|||
)
|
||||
}
|
||||
|
||||
export default Login;
|
||||
export default Login;
|
||||
|
|
|
|||
|
|
@ -186,16 +186,16 @@ export default function FilterDetails() {
|
|||
}
|
||||
|
||||
return (
|
||||
<main className="-mt-48 ">
|
||||
<main>
|
||||
<header className="py-10">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center">
|
||||
<h1 className="text-3xl font-bold text-white capitalize">
|
||||
<h1 className="text-3xl font-bold text-black dark:text-white capitalize">
|
||||
<NavLink to="/filters" exact={true}>
|
||||
Filters
|
||||
</NavLink>
|
||||
</h1>
|
||||
<ChevronRightIcon className="h-6 w-6 text-gray-500" aria-hidden="true" />
|
||||
<h1 className="text-3xl font-bold text-white capitalize">{filter.name}</h1>
|
||||
<h1 className="text-3xl font-bold text-black dark:text-white capitalize">{filter.name}</h1>
|
||||
</div>
|
||||
</header>
|
||||
<div className="max-w-7xl mx-auto pb-12 px-4 sm:px-6 lg:px-8">
|
||||
|
|
|
|||
|
|
@ -29,12 +29,12 @@ export default function Filters() {
|
|||
return (<p>An error has occurred: </p>);
|
||||
|
||||
return (
|
||||
<main className="-mt-48 ">
|
||||
<main>
|
||||
<FilterAddForm isOpen={createFilterIsOpen} toggle={toggleCreateFilter} />
|
||||
|
||||
<header className="py-10">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between">
|
||||
<h1 className="text-3xl font-bold text-white capitalize">Filters</h1>
|
||||
<h1 className="text-3xl font-bold text-black dark:text-white capitalize">Filters</h1>
|
||||
|
||||
<div className="flex-shrink-0">
|
||||
<button
|
||||
|
|
@ -49,7 +49,7 @@ export default function Filters() {
|
|||
</header>
|
||||
|
||||
<div className="max-w-7xl mx-auto pb-12 px-4 sm:px-6 lg:px-8">
|
||||
<div className="bg-white dark:bg-gray-800 light:rounded-lg light:shadow">
|
||||
<div className="bg-white dark:bg-gray-800 light:rounded-lg shadow-lg">
|
||||
<div className="relative inset-0 light:py-3 light:px-3 light:sm:px-3 light:lg:px-3 h-full">
|
||||
{data && data.length > 0 ? <FilterList filters={data} /> :
|
||||
<EmptyListState text="No filters here.." buttonText="Add new" buttonOnClick={toggleCreateFilter} />}
|
||||
|
|
|
|||
|
|
@ -20,16 +20,23 @@ export const RegexPlayground = () => {
|
|||
if (match.index === undefined)
|
||||
continue;
|
||||
|
||||
if (!match.length)
|
||||
continue;
|
||||
|
||||
const start = match.index;
|
||||
|
||||
let length = 0;
|
||||
match.forEach((group) => length += group.length);
|
||||
|
||||
results.push(
|
||||
<span key={`match=${start}`}>
|
||||
<span key={`match-${start}`}>
|
||||
{line.substring(lastIndex, start)}
|
||||
<span className="bg-green-200 text-black font-bold">
|
||||
{line.substring(start, start + match.length)}
|
||||
<span className="bg-blue-300 text-black font-bold">
|
||||
{line.substring(start, start + length)}
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
lastIndex = start + match.length;
|
||||
lastIndex = start + length;
|
||||
}
|
||||
|
||||
if (lastIndex < line.length) {
|
||||
|
|
@ -60,7 +67,7 @@ export const RegexPlayground = () => {
|
|||
<div className="px-6 py-4">
|
||||
<label
|
||||
htmlFor="input-regex"
|
||||
className="block text-sm font-medium text-gray-300"
|
||||
className="block text-sm font-medium text-gray-600 dark:text-gray-300"
|
||||
>
|
||||
RegExp filter
|
||||
</label>
|
||||
|
|
@ -73,7 +80,7 @@ export const RegexPlayground = () => {
|
|||
/>
|
||||
<label
|
||||
htmlFor="input-lines"
|
||||
className="block text-sm font-medium text-gray-300"
|
||||
className="block text-sm font-medium text-gray-600 dark:text-gray-300"
|
||||
>
|
||||
Lines to match
|
||||
</label>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue