Fix: remove daisyui

We wanted to remove daisyui a long time ago Since renovate updates broke all of the classes somehow we use the opportunity to remove daisyui And will fix all the breakages continously as we work on the features
2025-04-22 15:24:52 +02:00
parent fe0d39bf11
commit 3970748a42
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;