idanoo/autobrr
1
0
Fork 0
mirror of https://github.com/idanoo/autobrr synced 2025-07-26 18:29:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

enhancement(web): ui overhaul (#1155)

Browse source 
* 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 2023-11-18 13:46:16 +00:00 • committed by GitHub
parent a274d9ddce
commit e842a7bd42
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
84 changed files with 4378 additions and 4361 deletions
Download patch file Download diff file Expand all files Collapse all files

8
web/src/components/alerts/ErrorPage.tsx
View file

@ -20,10 +20,10 @@ export const ErrorPage = ({ error, resetErrorBoundary }: FallbackProps) => {
const parseTitle = () => {
switch (error?.cause) {
case "OFFLINE":
return "Connection to Autobrr failed! Check the application state and verify your connectivity.";
default:
return "We caught an unrecoverable error!";
case "OFFLINE":
return "Connection to Autobrr failed! Check the application state and verify your connectivity.";
default:
return "We caught an unrecoverable error!";
}
};

35
web/src/components/alerts/Warning.tsx Normal file
View file

@ -0,0 +1,35 @@
/*
* Copyright (c) 2021 - 2023, Ludvig Lundgren and the autobrr contributors.
* SPDX-License-Identifier: GPL-2.0-or-later
*/
import { classNames } from "@utils";
interface WarningAlertProps {
text: string | JSX.Element;
alert?: string;
colors?: string;
className?: string;
}
export const WarningAlert = ({ text, alert, colors, className }: WarningAlertProps) => (
<div
className={classNames(
className ?? "",
"col-span-12 flex items-center px-4 py-3 text-md font-medium rounded-lg",
colors ?? "text-amber-800 bg-amber-100 border border-amber-700 dark:border-none dark:bg-amber-200 dark:text-amber-800"
)}
role="alert">
<svg aria-hidden="true" className="flex-shrink-0 inline w-5 h-5 mr-3" fill="currentColor"
viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clipRule="evenodd"></path>
</svg>
<span className="sr-only">Info</span>
<div>
<span className="font-extrabold">{alert ?? "Warning!"}</span>
{" "}{text}
</div>
</div>
);

33
web/src/components/alerts/index.tsx
View file

@ -3,34 +3,5 @@
* SPDX-License-Identifier: GPL-2.0-or-later
*/
import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
interface props {
title?: string;
text: string;
}
export function AlertWarning({ title, text }: props) {
return (
<div className="my-4 rounded-md bg-yellow-50 dark:bg-yellow-100 p-4 border border-yellow-300 dark:border-none">
<div className="flex">
<div className="flex-shrink-0">
<ExclamationTriangleIcon
className="h-5 w-5 text-yellow-400 dark:text-yellow-600"
aria-hidden="true"
/>
</div>
<div className="ml-3">
{title ? (
<h3 className="mb-1 text-md font-medium text-yellow-800">{title}</h3>
) : null}
<div className="text-sm text-yellow-800">
<p>{text}</p>
</div>
</div>
</div>
</div>
);
}
export { ErrorPage } from "./ErrorPage";
export * from "./ErrorPage";
export * from "./Warning";