feat: add filter dropdown #26 (#142)

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.

web/src/forms/filters/FilterAddForm.tsx

@@ -12,14 +12,17 @@ import DEBUG from "../../components/debug";
 import Toast from '../../components/notifications/Toast';
 
 function FilterAddForm({ isOpen, toggle }: any) {
-    const mutation = useMutation((filter: Filter) => APIClient.filters.create(filter), {
-        onSuccess: () => {
-            queryClient.invalidateQueries('filter');
-            toast.custom((t) => <Toast type="success" body="Filter was added" t={t} />)
+    const mutation = useMutation(
+        (filter: Filter) => APIClient.filters.create(filter),
+        {
+            onSuccess: (_, filter) => {
+                queryClient.invalidateQueries("filters");
+                toast.custom((t) => <Toast type="success" body={`Filter ${filter.name} was added`} t={t} />);
 
-            toggle()
+                toggle();
+            }
         }
-    })
+    )
 
     const handleSubmit = (data: any) => mutation.mutate(data);
     const validate = (values: any) => values.name ? {} : { name: "Required" };