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

feat: add filter dropdown #26 (#142)

Browse source 
feat(FilterItemDropdown): added a filter dropdown component from #26 

* fix(react-multi-select-component): adjusted the component to fit in with other components when comparing across multiple browsers. (where firefox consistently handles pixels and rem's, chromium doesn't agree).

refactor(input): removed shadow from input components to match react-multi-select-component look where needed.

refactor(SwitchGroup): added a small top margin for a less dense look. cleaned up surrounding code.

refactor(DeleteModal): adjusted the background color to fit more nicely across dark/light themes. made the exclamation icon bigger and removed the circle container.

refactor(Logs): adjusted text color on the light theme. cleaned up the code.

refactor(FilterAddForm): adapted to conform with the changes.

feat(FilterItemDropdown): added a dropdown component to the filter list as proposed in #26. could use a better look, though. also, cleaned up surrounding code and got rid of pesky negative margins.

refactor(FilterListItem): made the table striped when using the dark theme. adapter for the dropdown component.

refactor(filters/details):
- removed needless border properties from remove button, which left artifacts after de-focusing the button. also, removed the shadow from the cancel button.
- added invalidation of the filter list on a delete mutation before redirecting to /filters.
- modified certain group descriptions a bit in order to make them a bit more concise.
- overall, cleaned up the surrounding code further.
This commit is contained in:
stacksmash76 2022-02-17 20:59:06 +01:00 • committed by GitHub
parent d4d9169210
commit 279d4ff7a3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 356 additions and 206 deletions
Download patch file Download diff file Expand all files Collapse all files

10
web/src/components/modals/index.tsx
View file

@ -31,7 +31,7 @@ export const DeleteModal: FC<DeleteModalProps> = ({ isOpen, buttonRef, toggle, d
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
<Dialog.Overlay className="fixed inset-0 bg-gray-700/60 dark:bg-black/60 transition-opacity" />
</Transition.Child>
<span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
@ -46,12 +46,10 @@ export const DeleteModal: FC<DeleteModalProps> = ({ isOpen, buttonRef, toggle, d
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
<div className="bg-white dark:bg-gray-700 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div className="inline-block align-bottom rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
<div className="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div className="sm:flex sm:items-start">
<div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 dark:bg-red-400 sm:mx-0 sm:h-10 sm:w-10">
<ExclamationIcon className="h-6 w-6 text-red-600 dark:text-red-600" aria-hidden="true" />
</div>
<ExclamationIcon className="h-16 w-16 text-red-500 dark:text-red-500" aria-hidden="true" />
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<Dialog.Title as="h3" className="text-lg leading-6 font-medium text-gray-900 dark:text-white">
{title}