feat: overhaul webui (#135)

feat: Added Inter Variable as the default font

feat: Added a pattern to the page background.

fix(react-multi-select-component): Made the multiselect components theme-agnostic, so it works properly with the light theme now.

fix(react-select): Made the components fix the default 30px height of the rest of the input components.

fix(useToggle): Fixed a bug where the toggle didn't work due to useCallback memoizing a callback with the old value.
refactor(Base):
- Added small theme-primary gradient to the beginning of the header.
- Made the splitter border theme-agnostic.
- Increased logo size a bit.
- Moved the links a bit closer to the logo.
- Updated the default link style to look more stylish.
- Added a link to the autobrr Docs section (currently defaults to the Indexers sections, but this should lead to an "Overview" page for configuring autobrr)
- Adapted the user dropdown to match the other header links' stylesheets and removed the annoying ring focus.
- Adapted the header for theme-agnostic mobile usage.
- Removed the negative padding/margin hacks.

refactor(StatsItem): Increased shadow size/strength and made the description text a bit lighter on the dark theme.

refactor(Dashboard): Increased the heading text sizes.

refactor(Logs, Releases, Settings, Login, filters/details, filters/list): Adapted to match the previous changes and improved theme compatibility with regards to text.

refactor(RegexPlayground): Fixed match highlight for JS regex.

web/src/screens/Dashboard.tsx

@@ -15,7 +15,7 @@ import { ReleaseStatusCell } from "./Releases";
 
 export function Dashboard() {
     return (
-        <main className="py-10 -mt-48">
+        <main className="py-10">
             <div className="px-4 pb-8 mx-auto max-w-7xl sm:px-6 lg:px-8">
                 <Stats />
                 <DataTable />
@@ -26,15 +26,15 @@ export function Dashboard() {
 
 const StatsItem = ({ name, stat }: any) => (
     <div
-        className="relative px-4 pt-5 pb-2 overflow-hidden bg-white rounded-lg shadow dark:bg-gray-800 sm:pt-6 sm:px-6"
+        className="relative px-4 pt-5 pb-2 overflow-hidden bg-white rounded-lg shadow-lg dark:bg-gray-800 sm:pt-6 sm:px-6"
         title="All time"
     >
         <dt>
-            <p className="pb-1 text-sm font-medium text-gray-500 truncate dark:text-gray-600">{name}</p>
+            <p className="pb-1 text-sm font-medium text-gray-500 truncate">{name}</p>
         </dt>
 
         <dd className="flex items-baseline pb-6 sm:pb-7">
-            <p className="text-2xl font-semibold text-gray-900 dark:text-gray-300">{stat}</p>
+            <p className="text-2xl font-semibold text-gray-900 dark:text-gray-200">{stat}</p>
         </dd>
     </div>
 )
@@ -51,7 +51,9 @@ function Stats() {
 
     return (
         <div>
-            <h3 className="text-lg font-medium leading-6 text-gray-900 dark:text-gray-600">Stats</h3>
+            <h3 className="text-2xl font-medium leading-6 text-gray-900 dark:text-gray-200">
+              Stats
+            </h3>
 
             <dl className="grid grid-cols-1 gap-5 mt-5 sm:grid-cols-2 lg:grid-cols-3">
                 <StatsItem name="Filtered Releases" stat={data?.filtered_count} />
@@ -311,7 +313,7 @@ function DataTable() {
 
     return (
         <div className="flex flex-col mt-12">
-            <h3 className="text-lg font-medium leading-6 text-gray-900 dark:text-gray-600">
+            <h3 className="text-2xl font-medium leading-6 text-gray-900 dark:text-gray-200">
                 Recent activity
             </h3>