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

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;