Add new claymorphic component library

src/app/components/EventMenu.svelte

@@ -10,9 +10,9 @@
   import TrashBin2 from "@assets/icons/trash-bin-2.svg?dataurl"
   import Danger from "@assets/icons/danger.svg?dataurl"
   import {setKey} from "@lib/implicit"
-  import Button from "@lib/components/Button.svelte"
-  import Confirm from "@lib/components/Confirm.svelte"
-  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components2/Button.svelte"
+  import Confirm from "@lib/components2/Confirm.svelte"
+  import Icon from "@lib/components2/Icon.svelte"
   import EventInfo from "@app/components/EventInfo.svelte"
   import Report from "@app/components/Report.svelte"
   import EventShare from "@app/components/EventShare.svelte"
@@ -78,43 +78,33 @@
   })
 </script>
 
-<ul class="menu whitespace-nowrap rounded-box bg-base-100 p-2 shadow-md" bind:this={ul}>
+<div class="clay-card flex flex-col gap-1 whitespace-nowrap p-2" bind:this={ul}>
   {#if isRoot}
-    <li>
-      <Button onclick={share}>
-        <Icon size={4} icon={ShareCircle} />
-        Share to Chat
-      </Button>
-    </li>
-  {/if}
-  <li>
-    <Button onclick={showInfo}>
-      <Icon size={4} icon={Code2} />
-      {noun} Details
+    <Button block onclick={share}>
+      <Icon size={4} icon={ShareCircle} />
+      Share to Chat
     </Button>
-  </li>
+  {/if}
+  <Button block onclick={showInfo}>
+    <Icon size={4} icon={Code2} />
+    {noun} Details
+  </Button>
   {@render customActions?.()}
   {#if event.pubkey === $pubkey}
-    <li>
-      <Button onclick={showDelete} class="text-error">
+    <Button block variant="danger" onclick={showDelete}>
+      <Icon size={4} icon={TrashBin2} />
+      Delete {noun}
+    </Button>
+  {:else}
+    <Button block variant="danger" onclick={report}>
+      <Icon size={4} icon={Danger} />
+      Report Content
+    </Button>
+    {#if $userIsAdmin}
+      <Button block variant="danger" onclick={showAdminDelete}>
         <Icon size={4} icon={TrashBin2} />
         Delete {noun}
       </Button>
-    </li>
-  {:else}
-    <li>
-      <Button class="text-error" onclick={report}>
-        <Icon size={4} icon={Danger} />
-        Report Content
-      </Button>
-    </li>
-    {#if $userIsAdmin}
-      <li>
-        <Button class="text-error" onclick={showAdminDelete}>
-          <Icon size={4} icon={TrashBin2} />
-          Delete {noun}
-        </Button>
-      </li>
     {/if}
   {/if}
-</ul>
+</div>