From 840a72948b6a307620ab540fe09d65d61820069c Mon Sep 17 00:00:00 2001
From: sepehr <sepehr1151@gmail.com>
Date: Sat, 2 May 2026 22:47:13 +0200
Subject: [PATCH] style: make floating gutter button more dynamic and beautiful

---
 memento-note/components/rich-text-editor.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/memento-note/components/rich-text-editor.tsx b/memento-note/components/rich-text-editor.tsx
index 5dfaa3c..dd687d6 100644
--- a/memento-note/components/rich-text-editor.tsx
+++ b/memento-note/components/rich-text-editor.tsx
@@ -161,14 +161,14 @@ export const RichTextEditor = forwardRef<RichTextEditorHandle, RichTextEditorPro
         )}
 
         {editor && (
-          <FloatingMenu editor={editor} className="flex items-center -ml-8" tippyOptions={{ placement: 'left' }}>
+          <FloatingMenu editor={editor} className="flex items-center" tippyOptions={{ placement: 'left', offset: [0, 16] }}>
             <button
               onClick={() => editor.chain().focus().insertContent('/').run()}
-              className="w-6 h-6 flex items-center justify-center rounded-md text-muted-foreground hover:bg-muted transition-colors"
+              className="flex items-center justify-center w-7 h-7 rounded-full text-muted-foreground/50 bg-transparent hover:bg-background hover:text-foreground hover:shadow-md hover:scale-110 active:scale-95 transition-all duration-300 group ring-1 ring-transparent hover:ring-border/50"
               title={t('richTextEditor.addBlock') || 'Add block'}
               type="button"
             >
-              <Plus className="w-4 h-4" />
+              <Plus className="w-4 h-4 group-hover:rotate-90 transition-transform duration-300" />
             </button>
           </FloatingMenu>
         )}