Multiple theme support & fixes

src/components/generic/Blur.tsx

@@ -0,0 +1,3 @@
+export const Blur = (): JSX.Element => {
+  return <div className="fixed inset-0 backdrop-blur-md" aria-hidden="true" />;
+};

src/components/generic/Dialog.tsx

@@ -3,6 +3,8 @@ import type React from "react";
 import { IconButton } from "@components/form/IconButton.js";
 import { Dialog as DialogUI } from "@headlessui/react";
 import { XMarkIcon } from "@heroicons/react/24/outline";
+import { ThemeController } from "./ThemeController.js";
+import { Blur } from "./Blur.js";
 
 export interface DialogProps {
   title: string;
@@ -21,28 +23,27 @@ export const Dialog = ({
 }: DialogProps): JSX.Element => {
   return (
     <DialogUI open={isOpen} onClose={close}>
-      <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
-      <div className="fixed inset-0 flex items-center justify-center p-4">
-        <DialogUI.Panel>
-          <div className="divide-y divide-gray-200 overflow-hidden rounded-lg bg-white shadow">
-            <div className="flex px-4 py-5 sm:px-6">
+      <ThemeController>
+        <Blur />
+        <div className="fixed inset-0 flex items-center justify-center p-4">
+          <DialogUI.Panel>
+            <div className="flex bg-backgroundPrimary px-4 py-5 sm:px-6">
               <div>
-                <h1 className="text-lg font-bold">{title}</h1>
-                <h5 className="text-sm text-slate-600">{description}</h5>
+                <h1 className="text-lg font-bold text-textPrimary">{title}</h1>
+                <h5 className="text-sm text-textSecondary">{description}</h5>
               </div>
               <IconButton
                 onClick={close}
                 className="my-auto ml-auto"
                 size="sm"
-                variant="secondary"
                 icon={<XMarkIcon className="h-4" />}
               />
             </div>
 
-            <div className="p-4">{children}</div>
-          </div>
-        </DialogUI.Panel>
-      </div>
+            <div className="bg-backgroundSecondary p-4">{children}</div>
+          </DialogUI.Panel>
+        </div>
+      </ThemeController>
     </DialogUI>
   );
 };

src/components/generic/Mono.tsx

@@ -7,7 +7,7 @@ export const Mono = ({
 }: JSX.IntrinsicElements["span"]): JSX.Element => {
   return (
     <span
-      className={`font-mono text-sm text-slate-500 ${className ?? ""}`}
+      className={`font-mono text-sm text-textSecondary ${className ?? ""}`}
       {...rest}
     >
       {children}

src/components/generic/TabbedContent.tsx

@@ -23,21 +23,25 @@ export const TabbedContent = ({
   actions
 }: TabbedContentProps): JSX.Element => {
   return (
-    <Tab.Group as="div" className="flex flex-grow flex-col gap-2 p-4">
-      <Tab.List className="flex gap-4 border-b pb-3">
+    <Tab.Group as="div" className="flex flex-grow flex-col gap-2">
+      <Tab.List className="flex bg-backgroundPrimary">
         {tabs.map((entry, index) => (
-          <Tab key={index}>
+          <Tab key={index} disabled={entry.disabled}>
             {({ selected }) => (
               <div
-                className={`flex h-10 cursor-pointer gap-3 rounded-md px-3 text-sm font-medium ${
+                className={`flex h-10 gap-3 truncate border-b-2 px-3 text-sm font-medium ${
                   selected
-                    ? "bg-gray-100 text-gray-700"
-                    : "text-gray-500 hover:text-gray-700"
+                    ? "border-accent text-textPrimary"
+                    : "border-backgroundPrimary text-textSecondary hover:text-textPrimary"
+                } ${
+                  entry.disabled
+                    ? "cursor-not-allowed hover:text-textSecondary"
+                    : "cursor-pointer"
                 }
                    `}
               >
                 {entry.icon && (
-                  <div className="m-auto text-slate-500">{entry.icon}</div>
+                  <div className="text-slate-500 m-auto">{entry.icon}</div>
                 )}
                 <span className="m-auto">{entry.name}</span>
               </div>

src/components/generic/ThemeController.tsx

@@ -0,0 +1,18 @@
+import { useAppStore } from "@app/core/stores/appStore.js";
+import type React from "react";
+
+export interface ThemeControllerProps {
+  children: React.ReactNode;
+}
+
+export const ThemeController = ({
+  children
+}: ThemeControllerProps): JSX.Element => {
+  const { darkMode, accent } = useAppStore();
+
+  return (
+    <div data-theme={darkMode ? "dark" : "light"} data-accent={accent}>
+      {children}
+    </div>
+  );
+};