Add new claymorphic component library

src/app/components/EventReply.svelte

@@ -5,8 +5,8 @@
   import {isMobile, preventDefault} from "@lib/html"
   import {fly} from "@lib/transition"
   import Paperclip from "@assets/icons/paperclip-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 ChatComposeParent from "@app/components/ChatComposeParent.svelte"
   import {publishComment} from "@app/comments"
@@ -101,7 +101,7 @@
   bind:this={form}
   onsubmit={preventDefault(submit)}
   class="left-content bottom-sai right-sai fixed z-feature mb-14 md:mb-0 w-full md:w-auto pr-2">
-  <div class="card2 mx-2 my-2 bg-alt shadow-md">
+  <div class="clay-card mx-2 my-2 p-4">
     {#if parent}
       <ChatComposeParent event={parent} clear={() => onClearParent?.()} verb="Replying to" />
     {/if}
@@ -111,18 +111,19 @@
       </div>
       <Button
         data-tip="Add an image"
-        class="tooltip tooltip-left absolute bottom-1 right-2"
+        circle
+        class="absolute bottom-1 right-2"
         onclick={selectFiles}>
         {#if $uploading}
-          <span class="loading loading-spinner loading-xs"></span>
+          <span class="cl-spinner"></span>
         {:else}
           <Icon icon={Paperclip} size={3} />
         {/if}
       </Button>
     </div>
     <div class="flex justify-between pt-3">
-      <Button class="btn btn-link" onclick={onClose}>Cancel</Button>
-      <Button type="submit" class="btn btn-primary">Post Reply</Button>
+      <Button onclick={onClose}>Cancel</Button>
+      <Button type="submit" variant="primary">Post Reply</Button>
     </div>
   </div>
 </form>