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/screens/settings/_components.tsx

@@ -0,0 +1,84 @@
+/*
+ * Copyright (c) 2021 - 2023, Ludvig Lundgren and the autobrr contributors.
+ * SPDX-License-Identifier: GPL-2.0-or-later
+ */
+
+import { classNames } from "@utils";
+
+type SectionProps = {
+  title: string;
+  description: string | React.ReactNode;
+  rightSide?: React.ReactNode;
+  children?: React.ReactNode;
+};
+
+export const Section = ({
+  title,
+  description,
+  rightSide,
+  children
+}: SectionProps) => (
+  <div className="pb-6 px-4 lg:col-span-9">
+    <div
+      className={classNames(
+        "mt-6 mb-4",
+        rightSide
+          ? "flex justify-between items-start flex-wrap sm:flex-nowrap gap-2"
+          : ""
+      )}
+    >
+      <div className="sm:px-2">
+        <h2 className="text-lg leading-4 font-bold text-gray-900 dark:text-white">{title}</h2>
+        <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{description}</p>
+      </div>
+      <div className="flex-shrink-0">
+        {rightSide ?? null}
+      </div>
+    </div>
+    {children}
+  </div>
+);
+
+interface RowItemProps {
+  label: string;
+  value?: string | React.ReactNode;
+  title?: string;
+  emptyText?: string;
+  rightSide?: React.ReactNode;
+  className?: string;
+}
+
+export const RowItem = ({
+  label,
+  value,
+  title,
+  emptyText,
+  rightSide,
+  className = "sm:col-span-3"
+}: RowItemProps) => (
+  <div className="p-4 sm:px-6 sm:grid sm:grid-cols-4 sm:gap-4">
+    <div className="font-medium text-gray-900 dark:text-white text-sm self-center" title={title}>
+      {label}
+    </div>
+    <div
+      className={classNames(
+        className,
+        "mt-1 text-gray-900 dark:text-gray-300 text-sm break-all sm:mt-0"
+      )}
+    >
+      {value
+        ? (
+          <>
+            {typeof (value) === "string" ? (
+              <span className="px-1.5 py-1 bg-gray-200 dark:bg-gray-700 rounded shadow text-ellipsis leading-7">
+                {value}
+              </span>
+            ) : value}
+            {rightSide ?? null}
+          </>
+        )
+        : (emptyText ?? null)
+      }
+    </div>
+  </div>
+);