From 08a868254eca7d6b7784bc61a73ef3b98df628a1 Mon Sep 17 00:00:00 2001
From: santiagosayshey <schau22@pm.me>
Date: Fri, 16 Aug 2024 15:31:19 +0930
Subject: [PATCH] refactor(clone-button): Reduce size and adjust hover
 animation for clone button

---
 frontend/src/components/format/FormatCard.jsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/format/FormatCard.jsx b/frontend/src/components/format/FormatCard.jsx
index 6b88ef1..dcd3740 100644
--- a/frontend/src/components/format/FormatCard.jsx
+++ b/frontend/src/components/format/FormatCard.jsx
@@ -15,9 +15,14 @@ function FormatCard({ format, onEdit, onClone, showDate, formatDate }) {
             e.stopPropagation();
             onClone(format);
           }}
-          className="text-blue-500 hover:text-blue-700"
+          className="relative group"
         >
-          <img src="/clone.svg" alt="Clone" className="w-6 h-6" />
+          <img 
+            src="/clone.svg" 
+            alt="Clone" 
+            className="w-5 h-5 transition-transform transform group-hover:scale-125 group-hover:rotate-12 group-hover:-translate-y-1 group-hover:translate-x-1"
+          />
+          <span className="absolute bottom-0 right-0 w-2 h-2 bg-green-500 rounded-full opacity-0 group-hover:opacity-100 transition-opacity"></span>
         </button>
       </div>
       <p className="text-gray-600 dark:text-gray-400 text-sm mb-2">{format.description}</p>