Add new claymorphic component library

src/app/components/ChatMessageMenu.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-  import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components/Button.svelte"
+  import Icon from "@lib/components2/Icon.svelte"
+  import Button from "@lib/components2/Button.svelte"
+  import Row from "@lib/components2/Row.svelte"
   import ChatMessageEmojiButton from "@app/components/ChatMessageEmojiButton.svelte"
   import EventInfo from "@app/components/EventInfo.svelte"
   import {pushModal} from "@app/modal"
@@ -19,19 +20,19 @@
   }
 </script>
 
-<div class="join border border-solid border-neutral text-xs">
+<Row gap={1} class="cl-surface cl-border rounded-full px-1 py-1 text-xs">
   <ChatMessageEmojiButton {event} {pubkeys} />
   {#if replyTo}
-    <Button class="btn join-item btn-xs" onclick={reply}>
+    <Button size="sm" circle onclick={reply}>
       <Icon size={4} icon={Reply} />
     </Button>
   {/if}
   {#if edit}
-    <Button class="btn join-item btn-xs" onclick={onEdit}>
+    <Button size="sm" circle onclick={onEdit}>
       <Icon size={4} icon={Pen} />
     </Button>
   {/if}
-  <Button class="btn join-item btn-xs" onclick={showInfo}>
+  <Button size="sm" circle onclick={showInfo}>
     <Icon size={4} icon={Code2} />
   </Button>
-</div>
+</Row>