Merge pull request 'Fix: remove daisyui' (#3384) from hsjobeki/clan-core:ui-2 into main

Reviewed-on: https://git.clan.lol/clan/clan-core/pulls/3384
2025-04-22 14:58:53 +00:00
parent bf5bfbdc4d 3970748a42
commit fae5cbd887
25 changed files with 150 additions and 251 deletions
--- a/pkgs/webview-ui/app/package-lock.json
+++ b/pkgs/webview-ui/app/package-lock.json
@@ -31,7 +31,6 @@
        "@typescript-eslint/parser": "^7.10.0",
        "autoprefixer": "^10.4.19",
        "classnames": "^2.5.1",
-        "daisyui": "^4.11.1",
        "eslint": "^8.57.0",
        "eslint-plugin-tailwindcss": "^3.17.0",
        "jsdom": "^24.1.0",
@@ -2837,16 +2836,6 @@
        "url": "https://github.com/sponsors/fb55"
      }
    },
-    "node_modules/css-selector-tokenizer": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz",
-      "integrity": "sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==",
-      "dev": true,
-      "dependencies": {
-        "cssesc": "^3.0.0",
-        "fastparse": "^1.1.2"
-      }
-    },
    "node_modules/css-tree": {
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
@@ -2946,34 +2935,6 @@
      "integrity": "sha512-d4ZVpCW31eWwCMe1YT3ur7mUDnTXbgwyzaL320DrcRT45rfjYxkt5QWLrmOJ+/UEAI2+fQgKe/fCjR8l4TpRgw==",
      "dev": true
    },
-    "node_modules/culori": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/culori/-/culori-3.3.0.tgz",
-      "integrity": "sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==",
-      "dev": true,
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      }
-    },
-    "node_modules/daisyui": {
-      "version": "4.11.1",
-      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.11.1.tgz",
-      "integrity": "sha512-obT9CUbQdW6eoHwSeT5VwaRrWlwrM4OT5qlfdJ0oQlSIEYhwnEl2+L2fwu5PioLbitwuMdYC2X8I1cyy8Pf6LQ==",
-      "dev": true,
-      "dependencies": {
-        "css-selector-tokenizer": "^0.8",
-        "culori": "^3",
-        "picocolors": "^1",
-        "postcss-js": "^4"
-      },
-      "engines": {
-        "node": ">=16.9.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/daisyui"
-      }
-    },
    "node_modules/data-urls": {
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-5.0.0.tgz",
@@ -3626,12 +3587,6 @@
      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw=="
    },
-    "node_modules/fastparse": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
-      "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==",
-      "dev": true
-    },
    "node_modules/fastq": {
      "version": "1.17.1",
      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
--- a/pkgs/webview-ui/app/package.json
+++ b/pkgs/webview-ui/app/package.json
@@ -20,7 +20,6 @@
    "@typescript-eslint/parser": "^7.10.0",
    "autoprefixer": "^10.4.19",
    "classnames": "^2.5.1",
-    "daisyui": "^4.11.1",
    "eslint": "^8.57.0",
    "eslint-plugin-tailwindcss": "^3.17.0",
    "jsdom": "^24.1.0",
--- a/pkgs/webview-ui/app/src/Form/base/label.tsx
+++ b/pkgs/webview-ui/app/src/Form/base/label.tsx
@@ -5,7 +5,7 @@ interface LabelProps {
 }
 export const Label = (props: LabelProps) => (
  <span
-    class="label-text block"
+    class=" block"
    classList={{
      "after:ml-0.5 after:text-primary after:content-['*']": props.required,
    }}
--- a/pkgs/webview-ui/app/src/Form/fields/Select.tsx
+++ b/pkgs/webview-ui/app/src/Form/fields/Select.tsx
@@ -192,7 +192,7 @@ export function SelectInput(props: SelectInputpProps) {
                            {item}
                            <Show when={props.multiple}>
                              <button
-                                class="btn-ghost btn-xs"
+                                class=""
                                type="button"
                                onClick={(_e) => {
                                  // @ts-expect-error: fieldName is not known ahead of time
@@ -247,7 +247,7 @@ export function SelectInput(props: SelectInputpProps) {
          }}
          class="z-[1000] shadow"
        >
-          <ul class="menu flex max-h-96 flex-col gap-1 overflow-x-hidden overflow-y-scroll">
+          <ul class="flex max-h-96 flex-col gap-1 overflow-x-hidden overflow-y-scroll">
            <Show when={!props.loading} fallback={"Loading ...."}>
              <For each={props.options}>
                {(opt) => (
--- a/pkgs/webview-ui/app/src/Form/form/index.tsx
+++ b/pkgs/webview-ui/app/src/Form/form/index.tsx
@@ -305,7 +305,7 @@ export function StringField<T extends FieldValues, R extends ResponseData>(
                // placeholder="foobar"
                // inlineLabel={
                //   <div class="label">
-                //     <span class="label-text"></span>
+                //     <span class=""></span>
                //   </div>
                // }
                // required
@@ -629,7 +629,7 @@ export function ArrayFields<T extends FieldValues, R extends ResponseData>(
                            </ListValueDisplay>
                          )}
                        </For>
-                        <span class="label-text-alt font-bold text-error-700">
+                        <span class=" font-bold text-error-700">
                          {fieldArray.error}
                        </span>

@@ -814,7 +814,7 @@ export function ObjectFields<T extends FieldValues, R extends ResponseData>(
                      <For
                        fallback={
                          <>
-                            <label class="label-text">
+                            <label class="">
                              No{" "}
                              <ObjectFieldPropertyLabel
                                schema={itemSchema()}
--- a/pkgs/webview-ui/app/src/components/FileInput.tsx
+++ b/pkgs/webview-ui/app/src/components/FileInput.tsx
@@ -44,10 +44,10 @@ export function FileInput(props: FileInputProps) {
  );

  return (
-    <div class={cx("form-control w-full", props.class)}>
-      <div class="label">
+    <div class={cx(" w-full", props.class)}>
+      <div class="">
        <span
-          class="label-text block"
+          class=" block"
          classList={{
            "after:ml-0.5 after:text-primary after:content-['*']":
              props.required,
@@ -57,7 +57,7 @@ export function FileInput(props: FileInputProps) {
        </span>
      </div>
      <Show when={props.helperText}>
-        <span class="label-text-alt m-1">{props.helperText}</span>
+        <span class=" m-1">{props.helperText}</span>
      </Show>
      <div
        class={cx(
@@ -92,9 +92,7 @@ export function FileInput(props: FileInputProps) {
          aria-errormessage={`${props.name}-error`}
        />
        {props.error && (
-          <span class="label-text-alt font-bold text-error-700">
-            {props.error}
-          </span>
+          <span class=" font-bold text-error-700">{props.error}</span>
        )}
      </div>
    </div>
--- a/pkgs/webview-ui/app/src/components/MachineListItem.tsx
+++ b/pkgs/webview-ui/app/src/components/MachineListItem.tsx
@@ -108,15 +108,15 @@ export const MachineListItem = (props: MachineListItemProps) => {
    setUpdating(false);
  };
  return (
-    <div class="card card-side m-2">
+    <div class=" m-2">
      <figure class="h-fit rounded-xl border bg-def-2 border-def-5">
        <RndThumbnail name={name} width={220} height={120} />
      </figure>
-      <div class="card-body flex-row justify-between ">
+      <div class=" flex-row justify-between ">
        <div class="flex flex-col">
          <A href={`/machines/${name}`}>
            <h2
-              class="card-title underline"
+              class=" underline"
              classList={{
                "text-neutral-500": nixOnly,
              }}
@@ -168,7 +168,7 @@ export const MachineListItem = (props: MachineListItemProps) => {
        </div>
        <div>
          <Menu popoverid={`menu-${props.name}`} label={<Icon icon={"More"} />}>
-            <ul class="menu z-[1] w-52 rounded-box bg-base-100 p-2 shadow">
+            <ul class="z-[1] w-52 p-2 shadow">
              <li>
                <a
                  onClick={() => {
--- a/pkgs/webview-ui/app/src/components/Menu.tsx
+++ b/pkgs/webview-ui/app/src/components/Menu.tsx
@@ -60,7 +60,7 @@ export const Menu = (props: MenuProps) => {
        popovertarget={props.popoverid}
        popovertargetaction="toggle"
        ref={setReference}
-        class={cx("join-item", props.buttonClass)}
+        class={cx("", props.buttonClass)}
        {...props.buttonProps}
      >
        {props.label}
--- a/pkgs/webview-ui/app/src/components/SelectInput.tsx
+++ b/pkgs/webview-ui/app/src/components/SelectInput.tsx
@@ -20,12 +20,12 @@ export function SelectInput<T extends FieldValues, R extends ResponseData>(
 ) {
  return (
    <label
-      class={cx("form-control w-full", props.class)}
+      class={cx(" w-full", props.class)}
      aria-disabled={props.formStore.submitting}
    >
-      <div class="label">
+      <div class="">
        <span
-          class="label-text block"
+          class=" block"
          classList={{
            "after:ml-0.5 after:text-primary after:content-['*']":
              props.required,
@@ -34,22 +34,20 @@ export function SelectInput<T extends FieldValues, R extends ResponseData>(
          {props.label}
        </span>
        <Show when={props.topRightLabel}>
-          <span class="label-text-alt">{props.topRightLabel}</span>
+          <span class="">{props.topRightLabel}</span>
        </Show>
      </div>
      <select
        {...props.selectProps}
        required={props.required}
-        class="select select-bordered w-full"
+        class="w-full"
        value={props.value}
      >
        {props.options}
      </select>

      {props.error && (
-        <span class="label-text-alt font-bold text-error-700">
-          {props.error}
-        </span>
+        <span class=" font-bold text-error-700">{props.error}</span>
      )}
    </label>
  );
--- a/pkgs/webview-ui/app/src/components/inputBase/index.tsx
+++ b/pkgs/webview-ui/app/src/components/inputBase/index.tsx
@@ -142,7 +142,7 @@ export const InputLabel = (props: InputLabelProps) => {
          )}
          {props.help && (
            <span
-              class="tooltip tooltip-bottom inline px-2"
+              class=" inline px-2"
              data-tip={props.help}
              style={{
                "--tooltip-color": "#EFFFFF",
--- a/pkgs/webview-ui/app/src/layout/header.tsx
+++ b/pkgs/webview-ui/app/src/layout/header.tsx
@@ -9,14 +9,11 @@ interface HeaderProps {
 }
 export const Header = (props: HeaderProps) => {
  return (
-    <div class="navbar border-b px-6 py-4 border-def-3">
+    <div class=" border-b px-6 py-4 border-def-3">
      <div class="flex-none">
        {props.showBack && <BackButton />}
-        <span class="tooltip tooltip-bottom lg:hidden" data-tip="Menu">
-          <label
-            class="btn btn-square btn-ghost drawer-button"
-            for="toplevel-drawer"
-          >
+        <span class=" lg:hidden" data-tip="Menu">
+          <label class=" " for="toplevel-drawer">
            <span class="material-icons">menu</span>
          </label>
        </span>
--- a/pkgs/webview-ui/app/src/layout/layout.tsx
+++ b/pkgs/webview-ui/app/src/layout/layout.tsx
@@ -17,17 +17,13 @@ export const Layout: Component<RouteSectionProps> = (props) => {

  return (
    <div class="h-screen w-full p-4 bg-def-2">
-      <div class="drawer h-full lg:drawer-open ">
-        <input
-          id="toplevel-drawer"
-          type="checkbox"
-          class="drawer-toggle hidden"
-        />
-        <div class="drawer-content my-2 ml-8 overflow-x-hidden overflow-y-scroll rounded-lg border bg-def-1 border-def-3">
+      <div class="h-full ">
+        <input id="toplevel-drawer" type="checkbox" class=" hidden" />
+        <div class=" my-2 ml-8 overflow-x-hidden overflow-y-scroll rounded-lg border bg-def-1 border-def-3">
          {props.children}
        </div>
        <div
-          class="drawer-side z-40 h-full !overflow-hidden"
+          class=" z-40 h-full !overflow-hidden"
          classList={{
            "!hidden":
              props.location.pathname === "welcome" || clanList().length === 0,
@@ -36,7 +32,7 @@ export const Layout: Component<RouteSectionProps> = (props) => {
          <label
            for="toplevel-drawer"
            aria-label="close sidebar"
-            class="drawer-overlay !h-full !overflow-hidden "
+            class=" !h-full !overflow-hidden "
          ></label>
          <Sidebar {...props} />
        </div>
--- a/pkgs/webview-ui/app/src/routes/clans/create.tsx
+++ b/pkgs/webview-ui/app/src/routes/clans/create.tsx
@@ -71,7 +71,7 @@ export const CreateClan = () => {
  };

  return (
-    <div class="card card-normal">
+    <div class="">
      <Form onSubmit={handleSubmit} shouldActive>
        <Field name="icon">
          {(field, props) => (
@@ -97,15 +97,15 @@ export const CreateClan = () => {
            </>
          )}
        </Field>
-        <div class="card-body">
+        <div class="">
          <Field
            name="name"
            validate={[required("Please enter a unique name for the clan.")]}
          >
            {(field, props) => (
-              <label class="form-control w-full">
-                <div class="label">
-                  <span class="label-text block after:ml-0.5 after:text-primary-800 after:content-['*']">
+              <label class=" w-full">
+                <div class="">
+                  <span class=" block after:ml-0.5 after:text-primary-800 after:content-['*']">
                    Name
                  </span>
                </div>
@@ -115,23 +115,20 @@ export const CreateClan = () => {
                  disabled={formStore.submitting}
                  required
                  placeholder="Give your Clan a legendary name"
-                  class="input input-bordered"
-                  classList={{ "input-error": !!field.error }}
+                  classList={{ "": !!field.error }}
                  value={field.value}
                />
-                <div class="label">
-                  {field.error && (
-                    <span class="label-text-alt">{field.error}</span>
-                  )}
+                <div class="">
+                  {field.error && <span class="">{field.error}</span>}
                </div>
              </label>
            )}
          </Field>
          <Field name="description">
            {(field, props) => (
-              <label class="form-control w-full">
-                <div class="label">
-                  <span class="label-text">Description</span>
+              <label class=" w-full">
+                <div class="">
+                  <span class="">Description</span>
                </div>

                <input
@@ -140,24 +137,21 @@ export const CreateClan = () => {
                  required
                  type="text"
                  placeholder="Tell us what makes your Clan legendary"
-                  class="input input-bordered"
-                  classList={{ "input-error": !!field.error }}
+                  classList={{ "": !!field.error }}
                  value={field.value || ""}
                />
-                <div class="label">
-                  {field.error && (
-                    <span class="label-text-alt">{field.error}</span>
-                  )}
+                <div class="">
+                  {field.error && <span class="">{field.error}</span>}
                </div>
              </label>
            )}
          </Field>
          <Field name="template" validate={[required("This is required")]}>
            {(field, props) => (
-              <div class="collapse collapse-arrow" tabindex="0">
+              <div class=" " tabindex="0">
                <input type="checkbox" />
-                <div class="collapse-title link font-medium ">Advanced</div>
-                <div class="collapse-content">
+                <div class="  font-medium ">Advanced</div>
+                <div>
                  <TextInput
                    // adornment={{
                    //   content: (
@@ -176,7 +170,7 @@ export const CreateClan = () => {
            )}
          </Field>
          {
-            <div class="card-actions justify-end">
+            <div class=" justify-end">
              <Button
                type="submit"
                disabled={formStore.submitting}
--- a/pkgs/webview-ui/app/src/routes/clans/details.tsx
+++ b/pkgs/webview-ui/app/src/routes/clans/details.tsx
@@ -78,16 +78,16 @@ const EditClanForm = (props: EditClanFormProps) => {
          </>
        )}
      </Field>
-      <div class="card-body">
+      <div class="">
        <span class="text-xl text-primary-800">General</span>
        <Field
          name="name"
          validate={[required("Please enter a unique name for the clan.")]}
        >
          {(field, props) => (
-            <label class="form-control w-full">
-              <div class="label">
-                <span class="label-text block after:ml-0.5 after:text-primary-800 after:content-['*']">
+            <label class="w-full">
+              <div class="">
+                <span class=" block after:ml-0.5 after:text-primary-800 after:content-['*']">
                  Name
                </span>
              </div>
@@ -97,23 +97,21 @@ const EditClanForm = (props: EditClanFormProps) => {
                disabled={formStore.submitting}
                required
                placeholder="Clan Name"
-                class="input input-bordered"
-                classList={{ "input-error": !!field.error }}
+                class=""
+                classList={{ "": !!field.error }}
                value={field.value}
              />
-              <div class="label">
-                {field.error && (
-                  <span class="label-text-alt">{field.error}</span>
-                )}
+              <div class="">
+                {field.error && <span class="">{field.error}</span>}
              </div>
            </label>
          )}
        </Field>
        <Field name="description">
          {(field, props) => (
-            <label class="form-control w-full">
-              <div class="label">
-                <span class="label-text">Description</span>
+            <label class="w-full">
+              <div class="">
+                <span class="">Description</span>
              </div>

              <input
@@ -122,20 +120,18 @@ const EditClanForm = (props: EditClanFormProps) => {
                required
                type="text"
                placeholder="Some words about your clan"
-                class="input input-bordered"
-                classList={{ "input-error": !!field.error }}
+                class=""
+                classList={{ "": !!field.error }}
                value={field.value || ""}
              />
-              <div class="label">
-                {field.error && (
-                  <span class="label-text-alt">{field.error}</span>
-                )}
+              <div class="">
+                {field.error && <span class="">{field.error}</span>}
              </div>
            </label>
          )}
        </Field>
        {
-          <div class="card-actions justify-end">
+          <div class="justify-end">
            <Button
              type="submit"
              disabled={formStore.submitting || !formStore.dirty}
@@ -203,7 +199,7 @@ const AdminModuleForm = (props: AdminModuleFormProps) => {

  return (
    <Form onSubmit={handleSubmit}>
-      <div class="card-body">
+      <div class="">
        <span class="text-xl text-primary-800">Administration</span>
        <div class="grid grid-cols-12 gap-2">
          <span class="col-span-12 text-lg text-neutral-800">
@@ -241,15 +237,12 @@ const AdminModuleForm = (props: AdminModuleFormProps) => {
                        class="col-span-6"
                        required
                      />
-                      <span
-                        class="tooltip col-span-12 mt-auto"
-                        data-tip="Select file"
-                      >
+                      <span class=" col-span-12 mt-auto" data-tip="Select file">
                        <label
-                          class={"form-control w-full"}
+                          class={"w-full"}
                          aria-disabled={formStore.submitting}
                        >
-                          <div class="btn btn-secondary relative flex items-center justify-center">
+                          <div class="relative flex items-center justify-center">
                            <input
                              value=""
                              // Disable drag n drop
@@ -312,7 +305,7 @@ const AdminModuleForm = (props: AdminModuleFormProps) => {
          </div>
        </div>
        {
-          <div class="card-actions justify-end">
+          <div class=" justify-end">
            <Button
              type="submit"
              disabled={formStore.submitting || !formStore.dirty}
--- a/pkgs/webview-ui/app/src/routes/clans/list.tsx
+++ b/pkgs/webview-ui/app/src/routes/clans/list.tsx
@@ -60,20 +60,20 @@ const ClanItem = (props: ClanItemProps) => {
  };

  return (
-    <div class="stat">
-      <div class="stat-figure text-primary-800">
-        <div class="join">
+    <div class="">
+      <div class=" text-primary-800">
+        <div class="">
          <Button
            size="s"
            variant="light"
-            class="join-item"
+            class=""
            onClick={() => navigate(`/clans/${window.btoa(clan_dir)}`)}
            endIcon={<Icon icon="Settings" />}
          ></Button>
          <Button
            size="s"
            variant="light"
-            class="join-item "
+            class=" "
            onClick={() => {
              setActiveURI(clan_dir);
            }}
@@ -86,7 +86,7 @@ const ClanItem = (props: ClanItemProps) => {
            popovertarget={`clan-delete-popover-${clan_dir}`}
            popovertargetaction="toggle"
            ref={setReference}
-            class="btn btn-ghost btn-outline join-item"
+            class=" "
            endIcon={<Icon icon="Trash" />}
          ></Button>
          <div
@@ -113,24 +113,24 @@ const ClanItem = (props: ClanItemProps) => {
        </div>
      </div>
      <div
-        class="stat-title"
+        class=""
        classList={{
-          "badge badge-primary": activeURI() === clan_dir,
+          "": activeURI() === clan_dir,
        }}
      >
        {clan_dir}
      </div>

      <Show when={details.isLoading}>
-        <div class="skeleton h-12 w-80" />
+        <div class=" h-12 w-80" />
      </Show>
      <Show when={details.isSuccess}>
        <A href={`/clans/${window.btoa(clan_dir)}`}>
-          <div class="stat-value underline">{details.data?.name}</div>
+          <div class=" underline">{details.data?.name}</div>
        </A>
      </Show>
      <Show when={details.isSuccess && details.data?.description}>
-        <div class="stat-desc text-lg">{details.data?.description}</div>
+        <div class=" text-lg">{details.data?.description}</div>
      </Show>
    </div>
  );
@@ -139,19 +139,19 @@ const ClanItem = (props: ClanItemProps) => {
 export const ClanList = () => {
  const navigate = useNavigate();
  return (
-    <div class="card card-normal">
-      <div class="card-body">
-        <div class="label">
-          <div class="label-text text-2xl text-neutral">Registered Clans</div>
+    <div class="">
+      <div class="">
+        <div class="">
+          <div class=" text-2xl">Registered Clans</div>
          <div class="flex gap-2">
-            <span class="tooltip tooltip-top" data-tip="Register clan">
+            <span class="" data-tip="Register clan">
              <Button
                variant="light"
                onClick={registerClan}
                startIcon={<Icon icon="List" />}
              ></Button>
            </span>
-            <span class="tooltip tooltip-top" data-tip="Create new clan">
+            <span class="" data-tip="Create new clan">
              <Button
                onClick={() => {
                  navigate("create");
@@ -161,7 +161,7 @@ export const ClanList = () => {
            </span>
          </div>
        </div>
-        <div class="stats stats-vertical shadow">
+        <div class=" shadow">
          <For each={clanList()}>
            {(value) => <ClanItem clan_dir={value} />}
          </For>
--- a/pkgs/webview-ui/app/src/routes/flash/view.tsx
+++ b/pkgs/webview-ui/app/src/routes/flash/view.tsx
@@ -401,12 +401,12 @@ export const Flash = () => {
            </For>
          </div>

-          <div class="collapse collapse-arrow" tabindex="0">
+          <div class=" " tabindex="0">
            <input type="checkbox" />
-            <div class="collapse-title px-0">
+            <div class=" px-0">
              <InputLabel class="mb-4">Advanced</InputLabel>
            </div>
-            <div class="collapse-content">
+            <div class="">
              <Field
                name="machine.flake"
                validate={[required("This field is required")]}
--- a/pkgs/webview-ui/app/src/routes/hosts/view.tsx
+++ b/pkgs/webview-ui/app/src/routes/hosts/view.tsx
@@ -13,7 +13,7 @@ export const HostList: Component = () => {

  return (
    <div>
-      <div class="tooltip tooltip-bottom" data-tip="Refresh install targets">
+      <div class="" data-tip="Refresh install targets">
        <Button
          variant="light"
          onClick={() => callApi("show_mdns", {})}
@@ -26,27 +26,25 @@ export const HostList: Component = () => {
            <For each={Object.values(services())}>
              {(service) => (
                <div class="w-[30rem] rounded-lg bg-white p-5 shadow-lg">
-                  <div class="stats flex flex-col shadow">
-                    <div class="stat">
-                      <div class="stat-title">Host</div>
-                      <div class="stat-value">{service.host}</div>
-                      <div class="stat-desc"></div>
+                  <div class=" flex flex-col shadow">
+                    <div class="">
+                      <div class="">Host</div>
+                      <div class="">{service.host}</div>
+                      <div class=""></div>
                    </div>

-                    <div class="stat">
-                      <div class="stat-title">IP</div>
-                      <div class="stat-value">{service.ip}</div>
-                      <div class="stat-desc"></div>
+                    <div class="">
+                      <div class="">IP</div>
+                      <div class="">{service.ip}</div>
+                      <div class=""></div>
                    </div>
                  </div>

-                  <div class="join join-vertical w-full px-0">
-                    <div class="collapse join-item collapse-arrow">
+                  <div class=" w-full px-0">
+                    <div class="  ">
                      <input type="radio" name="my-accordion-4" />
-                      <div class="collapse-title text-xl font-medium">
-                        Details
-                      </div>
-                      <div class="collapse-content">
+                      <div class=" text-xl font-medium">Details</div>
+                      <div class="">
                        <p>
                          <span class="font-bold">Interface</span>
                          {service.interface}
--- a/pkgs/webview-ui/app/src/routes/machines/avatar.tsx
+++ b/pkgs/webview-ui/app/src/routes/machines/avatar.tsx
@@ -7,7 +7,7 @@ interface AvatarProps {
 export const MachineAvatar = (props: AvatarProps) => {
  return (
    <figure>
-      <div class="avatar placeholder">
+      <div class="">
        <div
          class={cx(
            "rounded-lg border p-2 bg-def-1 border-def-3 size-36",
--- a/pkgs/webview-ui/app/src/routes/machines/create.tsx
+++ b/pkgs/webview-ui/app/src/routes/machines/create.tsx
@@ -130,12 +130,10 @@ export function CreateMachine() {
                </div>
              )}
            </Field>
-            <div class="collapse collapse-arrow" tabindex="0">
+            <div class=" " tabindex="0">
              <input type="checkbox" />
-              <div class="collapse-title link font-medium ">
-                Deployment Settings
-              </div>
-              <div class="collapse-content">
+              <div class="  font-medium ">Deployment Settings</div>
+              <div class="">
                <Field name="opts.machine.deploy.targetHost">
                  {(field, props) => (
                    <>
--- a/pkgs/webview-ui/app/src/routes/machines/details.tsx
+++ b/pkgs/webview-ui/app/src/routes/machines/details.tsx
@@ -555,12 +555,10 @@ const MachineForm = (props: MachineDetailsProps) => {
            )}
          </Field>

-          <div class="collapse collapse-arrow col-span-full" tabindex="0">
+          <div class="  col-span-full" tabindex="0">
            <input type="checkbox" />
-            <div class="collapse-title link px-0 text-xl ">
-              Connection Settings
-            </div>
-            <div class="collapse-content">
+            <div class="  px-0 text-xl ">Connection Settings</div>
+            <div class="">
              <Field name="machine.deploy.targetHost">
                {(field, props) => (
                  <TextInput
@@ -577,7 +575,7 @@ const MachineForm = (props: MachineDetailsProps) => {
          </div>

          {
-            <div class="card-actions col-span-full justify-end">
+            <div class=" col-span-full justify-end">
              <Button
                type="submit"
                disabled={formStore.submitting || !formStore.dirty}
@@ -589,16 +587,16 @@ const MachineForm = (props: MachineDetailsProps) => {
        </Form>
      </div>

-      <div class="card-body">
-        <div class="divider"></div>
+      <div class="">
+        <div class=""></div>

        <span class="text-xl text-primary-800">Actions</span>
        <div class="my-4 flex flex-col gap-6">
-          <span class="max-w-md text-neutral">
+          <span class="max-w-md">
            Installs the system for the first time. Used to bootstrap the remote
            device.
          </span>
-          <div class="tooltip w-fit" data-tip="Machine must be online">
+          <div class=" w-fit" data-tip="Machine must be online">
            <Button
              class="w-full"
              // disabled={!online()}
@@ -624,11 +622,11 @@ const MachineForm = (props: MachineDetailsProps) => {
            />
          </Modal>

-          <span class="max-w-md text-neutral">
+          <span class="max-w-md">
            Update the system if changes should be synced after the installation
            process.
          </span>
-          <div class="tooltip w-fit" data-tip="Machine must be online">
+          <div class=" w-fit" data-tip="Machine must be online">
            <Button
              class="w-full"
              // disabled={!online()}
@@ -669,10 +667,7 @@ export const MachineDetails = () => {
  return (
    <>
      <Header title={`${params.id} machine`} showBack />
-      <Show
-        when={genericQuery.data}
-        fallback={<span class="loading loading-lg"></span>}
-      >
+      <Show when={genericQuery.data} fallback={<span class=""></span>}>
        {(data) => (
          <>
            <MachineForm initialData={data()} />
--- a/pkgs/webview-ui/app/src/routes/machines/list.tsx
+++ b/pkgs/webview-ui/app/src/routes/machines/list.tsx
@@ -76,7 +76,7 @@ export const MachineListView: Component = () => {
        title="Your Machines"
        toolbar={
          <>
-            <span class="tooltip tooltip-bottom" data-tip="Reload">
+            <span class="" data-tip="Reload">
              <Button
                variant="light"
                size="s"
@@ -86,7 +86,7 @@ export const MachineListView: Component = () => {
            </span>

            <div class="border border-def-3">
-              <span class="tooltip tooltip-bottom" data-tip="List View">
+              <span class="" data-tip="List View">
                <Button
                  onclick={() => setView("list")}
                  variant={view() == "list" ? "dark" : "light"}
@@ -94,7 +94,7 @@ export const MachineListView: Component = () => {
                  startIcon={<Icon icon="List" />}
                ></Button>
              </span>
-              <span class="tooltip tooltip-bottom" data-tip="Grid View">
+              <span class="" data-tip="Grid View">
                <Button
                  onclick={() => setView("grid")}
                  variant={view() == "grid" ? "dark" : "light"}
@@ -103,7 +103,7 @@ export const MachineListView: Component = () => {
                ></Button>
              </span>
            </div>
-            <span class="tooltip tooltip-bottom" data-tip="New Machine">
+            <span class="" data-tip="New Machine">
              <Button
                onClick={() => navigate("create")}
                size="s"
@@ -146,15 +146,15 @@ export const MachineListView: Component = () => {
          <Match when={inventoryQuery.isLoading}>
            {/* Loading skeleton */}
            <div>
-              <div class="card card-side m-2 bg-base-100 shadow-lg">
+              <div class="  m-2 shadow-lg">
                <figure class="pl-2">
-                  <div class="skeleton size-12"></div>
+                  <div class=" size-12"></div>
                </figure>
-                <div class="card-body">
-                  <h2 class="card-title">
-                    <div class="skeleton h-12 w-80"></div>
+                <div class="">
+                  <h2 class="">
+                    <div class=" h-12 w-80"></div>
                  </h2>
-                  <div class="skeleton h-8 w-72"></div>
+                  <div class=" h-8 w-72"></div>
                </div>
              </div>
            </div>
@@ -163,7 +163,7 @@ export const MachineListView: Component = () => {
            when={!inventoryQuery.isLoading && inventoryMachines().length === 0}
          >
            <div class="mt-8 flex w-full flex-col items-center justify-center gap-2">
-              <span class="text-lg text-neutral">
+              <span class="text-lg">
                No machines defined yet. Click below to define one.
              </span>
              <Button
--- a/pkgs/webview-ui/app/src/routes/modules/details.tsx
+++ b/pkgs/webview-ui/app/src/routes/modules/details.tsx
@@ -86,17 +86,15 @@ const Details = (props: DetailsProps) => {
  return (
    <div class="flex w-full flex-col gap-2">
      <article class="prose">{props.data.description}</article>
-      <span class="label-text">Categories</span>
+      <span class="">Categories</span>
      <div>
        <For each={props.data.categories}>
-          {(c) => <div class="badge badge-primary m-1">{c}</div>}
+          {(c) => <div class=" m-1">{c}</div>}
        </For>
      </div>
-      <span class="label-text">Roles</span>
+      <span class="">Roles</span>
      <div>
-        <For each={props.data.roles}>
-          {(r) => <div class="badge badge-secondary m-1">{r}</div>}
-        </For>
+        <For each={props.data.roles}>{(r) => <div class=" m-1">{r}</div>}</For>
      </div>
      <div class="p-2">
        <SolidMarkdown>{props.data.readme}</SolidMarkdown>
--- a/pkgs/webview-ui/app/src/routes/modules/list.tsx
+++ b/pkgs/webview-ui/app/src/routes/modules/list.tsx
@@ -21,7 +21,7 @@ const Categories = (props: CategoryProps) => {
  return (
    <span class="ml-6 inline-flex h-full align-middle">
      {props.categories.map((category) => (
-        <span class="badge badge-secondary">{category}</span>
+        <span class="">{category}</span>
      ))}
    </span>
  );
@@ -39,7 +39,7 @@ const Roles = (props: RolesProps) => {
        </Typography>
      </span>
      {props.roles.map((role) => (
-        <span class="badge badge-ghost">{role}</span>
+        <span class="">{role}</span>
      ))}
    </div>
  );
@@ -54,11 +54,11 @@ const ModuleItem = (props: {
  const navigate = useNavigate();

  return (
-    <div class={cx("stat rounded-lg shadow-md", props.class)}>
-      <div class="stat-figure text-primary-800">
-        <div class="join">
+    <div class={cx("rounded-lg shadow-md", props.class)}>
+      <div class="text-primary-800">
+        <div class="">
          <Menu popoverid={`menu-${props.name}`} label={<Icon icon={"More"} />}>
-            <ul class="menu z-[1] w-52 rounded-box bg-base-100 p-2 shadow">
+            <ul class="z-[1] w-52 p-2 shadow">
              <li>
                <a
                  onClick={() => {
@@ -74,7 +74,7 @@ const ModuleItem = (props: {
      </div>

      <A href={`/modules/details/${name}`}>
-        <div class="stat-value underline">
+        <div class="underline">
          {name}
          <Categories categories={info.categories} />
        </div>
@@ -113,7 +113,7 @@ export const ModuleList = () => {
        title="Modules"
        toolbar={
          <>
-            <span class="tooltip tooltip-bottom" data-tip="Reload">
+            <span class="" data-tip="Reload">
              <Button
                variant="light"
                size="s"
@@ -123,7 +123,7 @@ export const ModuleList = () => {
            </span>

            <div class="border border-def-3">
-              <span class="tooltip tooltip-bottom" data-tip="List View">
+              <span class="" data-tip="List View">
                <Button
                  onclick={() => setView("list")}
                  variant={view() == "list" ? "dark" : "light"}
@@ -131,7 +131,7 @@ export const ModuleList = () => {
                  startIcon={<Icon icon="List" />}
                ></Button>
              </span>
-              <span class="tooltip tooltip-bottom" data-tip="Grid View">
+              <span class="" data-tip="Grid View">
                <Button
                  onclick={() => setView("grid")}
                  variant={view() == "grid" ? "dark" : "light"}
@@ -140,7 +140,7 @@ export const ModuleList = () => {
                ></Button>
              </span>
            </div>
-            <span class="tooltip tooltip-bottom" data-tip="New Machine">
+            <span class="" data-tip="New Machine">
              <Button
                size="s"
                variant="light"
--- a/pkgs/webview-ui/app/src/routes/welcome/index.tsx
+++ b/pkgs/webview-ui/app/src/routes/welcome/index.tsx
@@ -6,8 +6,8 @@ import { useNavigate } from "@solidjs/router";
 export const Welcome = () => {
  const navigate = useNavigate();
  return (
-    <div class="hero min-h-[calc(100vh-10rem)]">
-      <div class="hero-content mb-32 text-center">
+    <div class="min-h-[calc(100vh-10rem)]">
+      <div class="mb-32 text-center">
        <div class="max-w-md">
          <h1 class="text-5xl font-bold">Welcome to Clan</h1>
          <p class="py-6">Own the services you use.</p>
@@ -17,7 +17,7 @@ export const Welcome = () => {
            </Button>
            <Button
              variant="light"
-              class="!link w-full text-right !text-primary-800"
+              class="w-full text-right !text-primary-800"
              onClick={async () => {
                const uri = await registerClan();
                if (uri) {
--- a/pkgs/webview-ui/app/tailwind.config.ts
+++ b/pkgs/webview-ui/app/tailwind.config.ts
@@ -1,31 +1,11 @@
 import typography from "@tailwindcss/typography";
-import daisyui from "daisyui";
 import core from "./tailwind/core-plugin";
-// @ts-expect-error: Doesn't have types
-import { parseColor } from "tailwindcss/lib/util/color";

 /** @type {import('tailwindcss').Config} */
 const config = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {},
-  daisyui: {
-    themes: [
-      {
-        light_clan: {
-          primary: "#29b1eb",
-          secondary: "#4d6a6b",
-          accent: "#37cdbe",
-          neutral: "#3d4451",
-          error: "#ff2c78",
-          success: "#0ae856",
-          warning: "#ffdd2c",
-          "base-100": "#F7F9FA",
-          "base-content": "#0D1416",
-        },
-      },
-    ],
-  },
-  plugins: [typography, core, daisyui],
+  plugins: [typography, core],
 };

 export default config;