enhancement(web): ui overhaul (#1155)

* 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>

web/src/components/inputs/common.tsx

@@ -4,73 +4,87 @@
  */
 
 import { Field, FieldProps } from "formik";
+import { components } from "react-select";
+import type {
+  InputProps,
+  ControlProps,
+  MenuProps,
+  OptionProps,
+  IndicatorSeparatorProps,
+  DropdownIndicatorProps
+} from "react-select";
+
 import { classNames } from "@utils";
-import { DocsTooltip } from "@components/tooltips/DocsTooltip";
 
 interface ErrorFieldProps {
-    name: string;
-    classNames?: string;
+  name: string;
+  classNames?: string;
 }
 
-const ErrorField = ({ name, classNames }: ErrorFieldProps) => (
-  <div>
-    <Field name={name} subscribe={{ touched: true, error: true }}>
-      {({ meta: { touched, error } }: FieldProps) =>
-        touched && error ? <span className={classNames}>{error}</span> : null
-      }
-    </Field>
-  </div>
+export const ErrorField = ({ name, classNames }: ErrorFieldProps) => (
+  <Field name={name} subscribe={{ touched: true, error: true }}>
+    {({ meta: { touched, error } }: FieldProps) =>
+      touched && error ? <span className={classNames}>{error}</span> : null
+    }
+  </Field>
 );
 
 interface RequiredFieldProps {
   required?: boolean
 }
 
-const RequiredField = ({ required }: RequiredFieldProps) => (
+export const RequiredField = ({ required }: RequiredFieldProps) => (
   <>
     {required && <span className="ml-1 text-red-500">*</span>}
   </>
 );
 
-interface CheckboxFieldProps {
-    name: string;
-    label: string;
-    sublabel?: string;
-    disabled?: boolean;
-    tooltip?: JSX.Element;
-}
-
-const CheckboxField = ({
-  name,
-  label,
-  sublabel,
-  tooltip,
-  disabled
-}: CheckboxFieldProps) => (
-  <div className="relative flex items-start">
-    <div className="flex items-center h-5">
-      <Field
-        id={name}
-        name={name}
-        type="checkbox" 
-        className={classNames(
-          "focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded", 
-          disabled ? "bg-gray-200 dark:bg-gray-700 dark:border-gray-700" : ""
-        )}
-        disabled={disabled}
-      />
-    </div>
-    <div className="ml-3 text-sm">
-      <label htmlFor={name} className="flex mb-2 text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide">
-        <div className="flex">
-          {tooltip ? (
-            <DocsTooltip label={label}>{tooltip}</DocsTooltip>
-          ) : label}
-        </div>
-      </label>
-      <p className="text-gray-500">{sublabel}</p>
-    </div>
-  </div>
+export const SelectInput = (props: InputProps) => (
+  <components.Input
+    {...props}
+    inputClassName="outline-none border-none shadow-none focus:ring-transparent"
+    className="text-gray-400 dark:text-gray-100"
+    children={props.children}
+  />
 );
 
-export { ErrorField, RequiredField, CheckboxField };
+export const SelectControl = (props: ControlProps) => (
+  <components.Control
+    {...props}
+    className="p-1 block w-full !bg-gray-100 dark:!bg-gray-850 border border-gray-300 dark:border-gray-775 dark:hover:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:text-gray-100 sm:text-sm"
+    children={props.children}
+  />
+);
+
+export const SelectMenu = (props: MenuProps) => (
+  <components.Menu
+    {...props}
+    className="dark:bg-gray-800 border border-gray-300 dark:border-gray-700 dark:text-gray-400 rounded-md shadow-sm cursor-pointer"
+    children={props.children}
+  />
+);
+
+export const SelectOption = (props: OptionProps) => (
+  <components.Option
+    {...props}
+    className={classNames(
+      "transition dark:hover:bg-gray-900 dark:focus:bg-gray-900",
+      props.isSelected ? "dark:bg-gray-875 dark:text-gray-200" : "dark:bg-gray-800 dark:text-gray-400"
+    )}
+    children={props.children}
+  />
+);
+
+export const IndicatorSeparator = (props: IndicatorSeparatorProps) => (
+  <components.IndicatorSeparator
+    {...props}
+    className="!bg-gray-400 dark:!bg-gray-700"
+  />
+);
+
+export const DropdownIndicator = (props: DropdownIndicatorProps) => (
+  <components.DropdownIndicator
+    {...props}
+    className="!text-gray-400 dark:!text-gray-300"
+  />
+);