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

@@ -20,16 +20,23 @@ export const RegexPlayground = () => {
                 if (match.index === undefined)
                     continue;
 
+                if (!match.length)
+                    continue;
+
                 const start = match.index;
+
+                let length = 0;
+                match.forEach((group) => length += group.length);
+
                 results.push(
-                    <span key={`match=${start}`}>
+                    <span key={`match-${start}`}>
                         {line.substring(lastIndex, start)}
-                        <span className="bg-green-200 text-black font-bold">
-                        {line.substring(start, start + match.length)}
+                        <span className="bg-blue-300 text-black font-bold">
+                            {line.substring(start, start + length)}
                         </span>
                     </span>
                 );
-                lastIndex = start + match.length;
+                lastIndex = start + length;
             }
 
             if (lastIndex < line.length) {
@@ -60,7 +67,7 @@ export const RegexPlayground = () => {
             <div className="px-6 py-4">
                 <label
                     htmlFor="input-regex"
-                    className="block text-sm font-medium text-gray-300"
+                    className="block text-sm font-medium text-gray-600 dark:text-gray-300"
                 >
                     RegExp filter
                 </label>
@@ -73,7 +80,7 @@ export const RegexPlayground = () => {
                 />
                 <label
                     htmlFor="input-lines"
-                    className="block text-sm font-medium text-gray-300"
+                    className="block text-sm font-medium text-gray-600 dark:text-gray-300"
                 >
                     Lines to match
                 </label>