Add new claymorphic component library

src/app/components/ChatCompose.svelte

@@ -6,8 +6,8 @@
   import {isMobile, preventDefault} from "@lib/html"
   import GallerySend from "@assets/icons/gallery-send.svg?dataurl"
   import Plane from "@assets/icons/plane-2.svg?dataurl"
-  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 EditorContent from "@app/editor/EditorContent.svelte"
   import {makeEditor} from "@app/editor"
   import {type DraftKey} from "@app/drafts"
@@ -112,12 +112,14 @@
 
 <form class="relative z-feature flex gap-2 p-2" onsubmit={preventDefault(submit)}>
   <Button
+    variant="secondary"
+    circle
     data-tip="Add an image"
-    class="center tooltip tooltip-right h-10 w-10 min-w-10 rounded-box bg-base-300 transition-colors hover:bg-base-200"
+    class="h-10 w-10 min-w-10"
     disabled={$uploading || disabled}
     onclick={uploadFiles}>
     {#if $uploading}
-      <span class="loading loading-spinner loading-xs"></span>
+      <span class="cl-spinner"></span>
     {:else}
       <Icon icon={GallerySend} />
     {/if}
@@ -126,8 +128,10 @@
     <EditorContent {autofocus} {editor} />
   </div>
   <Button
+    variant="primary"
+    circle
     data-tip="{window.navigator.platform.includes('Mac') ? 'cmd' : 'ctrl'}+enter to send"
-    class="center tooltip tooltip-left absolute right-4 h-10 w-10 min-w-10 rounded-full"
+    class="absolute right-4 h-10 w-10 min-w-10"
     disabled={$uploading || disabled}
     onclick={submit}>
     <Icon icon={Plane} />