From 2ff281c812119f62e857287fda2fbe21db6e798b Mon Sep 17 00:00:00 2001
From: naman-bruno <naman@usebruno.com>
Date: Wed, 15 Jan 2025 17:51:20 +0530
Subject: [PATCH] Added ToolHint

---
 .../bruno-app/src/components/RemoveButton/index.js   | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/bruno-app/src/components/RemoveButton/index.js b/packages/bruno-app/src/components/RemoveButton/index.js
index a72097bf53..2472ccea5e 100644
--- a/packages/bruno-app/src/components/RemoveButton/index.js
+++ b/packages/bruno-app/src/components/RemoveButton/index.js
@@ -1,9 +1,10 @@
 import { useState, useEffect } from 'react';
 import { IconTrash, IconAlertCircle } from '@tabler/icons';
+import ToolHint from 'components/ToolHint/index';
 
 const RemoveButton = ({ onClick }) => {
   const [isConfirming, setIsConfirming] = useState(false);
-  const CONFIRM_DURATION = 3000; // 3 seconds
+  const CONFIRM_DURATION = 1500; // 3 seconds
 
   useEffect(() => {
     let timer;
@@ -28,12 +29,13 @@ const RemoveButton = ({ onClick }) => {
     <button
       type="button"
       onClick={handleClick}
-      className={`flex items-center justify-center ${
-        isConfirming && 'text-red-400'
-      } focus:outline-none transition-colors duration-300`}
+      className={`flex items-center justify-center ${isConfirming && 'text-red-400'
+        } focus:outline-none`}
       aria-label={isConfirming ? 'Confirm delete' : 'Delete'}
     >
-      <IconTrash strokeWidth={1.5} size={20} />
+      {isConfirming ? <ToolHint text="Click again to delete" className='select-none' place='right' toolhintId="IconTrashToolhintId">
+        <IconTrash strokeWidth={1.5} size={20} />
+      </ToolHint> : <IconTrash strokeWidth={1.5} size={20} />}
     </button>
   );
 };