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

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",

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",

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,
     }}

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) => (

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()}

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={cx(" w-full", props.class)}>
-      <div class="label">
+      <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">
+          <span class=" font-bold text-error-700">{props.error}</span>
-            {props.error}
-          </span>
         )}
       </div>
     </div>

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={() => {

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}

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">
+        <span class=" font-bold text-error-700">{props.error}</span>
-          {props.error}
-        </span>
       )}
     </label>
   );

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",

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">
+        <span class=" lg:hidden" data-tip="Menu">
-          <label
+          <label class=" " for="toplevel-drawer">
-            class="btn btn-square btn-ghost drawer-button"
-            for="toplevel-drawer"
-          >
             <span class="material-icons">menu</span>
           </label>
         </span>

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 ">
+      <div class="h-full ">
-        <input
+        <input id="toplevel-drawer" type="checkbox" class=" hidden" />
-          id="toplevel-drawer"
+        <div class=" my-2 ml-8 overflow-x-hidden overflow-y-scroll rounded-lg border bg-def-1 border-def-3">
-          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">
           {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>

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">
+              <label class=" w-full">
-                <div class="label">
+                <div class="">
-                  <span class="label-text block after:ml-0.5 after:text-primary-800 after:content-['*']">
+                  <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={{ "": !!field.error }}
-                  classList={{ "input-error": !!field.error }}
                   value={field.value}
                 />
-                <div class="label">
+                <div class="">
-                  {field.error && (
+                  {field.error && <span class="">{field.error}</span>}
-                    <span class="label-text-alt">{field.error}</span>
-                  )}
                 </div>
               </label>
             )}
           </Field>
           <Field name="description">
             {(field, props) => (
-              <label class="form-control w-full">
+              <label class=" w-full">
-                <div class="label">
+                <div class="">
-                  <span class="label-text">Description</span>
+                  <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={{ "": !!field.error }}
-                  classList={{ "input-error": !!field.error }}
                   value={field.value || ""}
                 />
-                <div class="label">
+                <div class="">
-                  {field.error && (
+                  {field.error && <span class="">{field.error}</span>}
-                    <span class="label-text-alt">{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="  font-medium ">Advanced</div>
-                <div class="collapse-content">
+                <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}

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">
+            <label class="w-full">
-              <div class="label">
+              <div class="">
-                <span class="label-text block after:ml-0.5 after:text-primary-800 after:content-['*']">
+                <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"
+                class=""
-                classList={{ "input-error": !!field.error }}
+                classList={{ "": !!field.error }}
                 value={field.value}
               />
-              <div class="label">
+              <div class="">
-                {field.error && (
+                {field.error && <span class="">{field.error}</span>}
-                  <span class="label-text-alt">{field.error}</span>
-                )}
               </div>
             </label>
           )}
         </Field>
         <Field name="description">
           {(field, props) => (
-            <label class="form-control w-full">
+            <label class="w-full">
-              <div class="label">
+              <div class="">
-                <span class="label-text">Description</span>
+                <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"
+                class=""
-                classList={{ "input-error": !!field.error }}
+                classList={{ "": !!field.error }}
                 value={field.value || ""}
               />
-              <div class="label">
+              <div class="">
-                {field.error && (
+                {field.error && <span class="">{field.error}</span>}
-                  <span class="label-text-alt">{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
+                      <span class=" col-span-12 mt-auto" data-tip="Select file">
-                        class="tooltip 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}

pkgs/webview-ui/app/src/routes/clans/list.tsx

@@ -60,20 +60,20 @@ const ClanItem = (props: ClanItemProps) => {
   };
 
   return (
-    <div class="stat">
+    <div class="">
-      <div class="stat-figure text-primary-800">
+      <div class=" text-primary-800">
-        <div class="join">
+        <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="">
-      <div class="card-body">
+      <div class="">
-        <div class="label">
+        <div class="">
-          <div class="label-text text-2xl text-neutral">Registered Clans</div>
+          <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>

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")]}

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=" flex flex-col shadow">
-                    <div class="stat">
+                    <div class="">
-                      <div class="stat-title">Host</div>
+                      <div class="">Host</div>
-                      <div class="stat-value">{service.host}</div>
+                      <div class="">{service.host}</div>
-                      <div class="stat-desc"></div>
+                      <div class=""></div>
                     </div>
 
-                    <div class="stat">
+                    <div class="">
-                      <div class="stat-title">IP</div>
+                      <div class="">IP</div>
-                      <div class="stat-value">{service.ip}</div>
+                      <div class="">{service.ip}</div>
-                      <div class="stat-desc"></div>
+                      <div class=""></div>
                     </div>
                   </div>
 
-                  <div class="join join-vertical w-full px-0">
+                  <div class=" w-full px-0">
-                    <div class="collapse join-item collapse-arrow">
+                    <div class="  ">
                       <input type="radio" name="my-accordion-4" />
-                      <div class="collapse-title text-xl font-medium">
+                      <div class=" text-xl font-medium">Details</div>
-                        Details
+                      <div class="">
-                      </div>
-                      <div class="collapse-content">
                         <p>
                           <span class="font-bold">Interface</span>
                           {service.interface}

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",

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 ">
+              <div class="  font-medium ">Deployment Settings</div>
-                Deployment Settings
+              <div class="">
-              </div>
-              <div class="collapse-content">
                 <Field name="opts.machine.deploy.targetHost">
                   {(field, props) => (
                     <>

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 ">
+            <div class="  px-0 text-xl ">Connection Settings</div>
-              Connection Settings
+            <div class="">
-            </div>
-            <div class="collapse-content">
               <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="">
-        <div class="divider"></div>
+        <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
+      <Show when={genericQuery.data} fallback={<span class=""></span>}>
-        when={genericQuery.data}
-        fallback={<span class="loading loading-lg"></span>}
-      >
         {(data) => (
           <>
             <MachineForm initialData={data()} />

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">
+                <div class="">
-                  <h2 class="card-title">
+                  <h2 class="">
-                    <div class="skeleton h-12 w-80"></div>
+                    <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

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}>
+        <For each={props.data.roles}>{(r) => <div class=" m-1">{r}</div>}</For>
-          {(r) => <div class="badge badge-secondary m-1">{r}</div>}
-        </For>
       </div>
       <div class="p-2">
         <SolidMarkdown>{props.data.readme}</SolidMarkdown>

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={cx("rounded-lg shadow-md", props.class)}>
-      <div class="stat-figure text-primary-800">
+      <div class="text-primary-800">
-        <div class="join">
+        <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"

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="min-h-[calc(100vh-10rem)]">
-      <div class="hero-content mb-32 text-center">
+      <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) {

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: {
+  plugins: [typography, core],
-    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],
 };
 
 export default config;