refactor: ♻️ weaken the action buttons

src/lib/components/actions/1-comment.svelte

@@ -0,0 +1,5 @@
+<button class="tooltip tooltip-left opacity-60 hover:opacity-100" data-tip="Jump to comments">
+  <a href="#post-comment" class="btn btn-circle btn-ghost hover:bg-red-10">
+    <span class="i-heroicons-outline-chat-alt-2" />
+  </a>
+</button>

src/lib/components/actions/1-reply.svelte

@@ -1,3 +0,0 @@
-<a href="#post-comment" class="btn btn-lg btn-circle btn-ghost bg-base-100 shadow-lg hover:shadow-xl">
-  <span class="i-heroicons-outline-chat-alt-2" />
-</a>

src/lib/components/actions/2-translate.svelte

@@ -3,10 +3,12 @@
   export let post: Urara.Post
 </script>
 
-<a
+<button class="tooltip tooltip-left opacity-60 hover:opacity-100" data-tip="Translate">
-  href={`https://translate.google.com/translate?sl=auto&tl=${
+  <a
-    navigator.languages ? navigator.languages[0] : navigator.language
+    href={`https://translate.google.com/translate?sl=auto&tl=${
-  }&u=${site.protocol + site.domain + post.path}`}
+      navigator.languages ? navigator.languages[0] : navigator.language
-  class="btn btn-lg btn-circle btn-ghost bg-base-100 shadow-lg hover:shadow-xl">
+    }&u=${site.protocol + site.domain + post.path}`}
-  <span class="i-heroicons-outline-translate" />
+    class="btn btn-circle btn-ghost">
-</a>
+    <span class="i-heroicons-outline-translate" />
+  </a>
+</button>

src/lib/components/actions/3-share.svelte

@@ -3,10 +3,12 @@
   export let post: Urara.Post
 </script>
 
-<a
+<button class="tooltip tooltip-left opacity-60 hover:opacity-100" data-tip="Share">
-  href={`https://www.addtoany.com/share#url=${site.protocol + site.domain + post.path}&title=${encodeURI(
+  <a
-    post.title ?? post.path.slice(1)
+    href={`https://www.addtoany.com/share#url=${site.protocol + site.domain + post.path}&title=${encodeURI(
-  )}`}
+      post.title ?? post.path.slice(1)
-  class="btn btn-lg btn-circle btn-ghost bg-base-100 shadow-lg hover:shadow-xl">
+    )}`}
-  <span class="i-heroicons-outline-share" />
+    class="btn btn-circle btn-ghost">
-</a>
+    <span class="i-heroicons-outline-share" />
+  </a>
+</button>

src/lib/components/post_action.svelte

@@ -3,7 +3,7 @@
   const actions = import.meta.glob<any>('/src/lib/components/actions/*.svelte', { eager: true, import: 'default' })
 </script>
 
-<div class="sticky top-24 hidden xl:flex flex-col gap-4 w-fit h-[calc(100vh-12rem)] ml-auto mr-8 my-8 justify-center">
+<div class="sticky top-24 hidden xl:flex flex-col gap-4 w-fit max-h-[calc(100vh-12rem)]  ml-auto mr-6 my-8 justify-center ">
   {#if Object.keys(actions).length}
     {#each Object.values(actions) as action}
       <svelte:component this={action} {post} />