From c678351f5c813f439c3b2d305abcb237e6336eec Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Thu, 10 Oct 2024 07:17:43 +0530
Subject: [PATCH] feat: del on Box instead of TextField

---
 src/components/organisms/RightSidePanel.tsx | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/organisms/RightSidePanel.tsx b/src/components/organisms/RightSidePanel.tsx
index 21f5308b..ef18b621 100644
--- a/src/components/organisms/RightSidePanel.tsx
+++ b/src/components/organisms/RightSidePanel.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useCallback, useEffect } from 'react';
-import { Button, Paper, Box, TextField } from "@mui/material";
+import { Button, Paper, Box, TextField, IconButton } from "@mui/material";
 import EditIcon from '@mui/icons-material/Edit';
 import TextFieldsIcon from '@mui/icons-material/TextFields';
 import DocumentScannerIcon from '@mui/icons-material/DocumentScanner';
@@ -461,10 +461,24 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
       </Box>
       <Box>
         {browserSteps.map(step => (
-          <Box key={step.id} sx={{ boxShadow: 5, padding: '10px', margin: '10px', borderRadius: '4px' }}>
+          <Box key={step.id} sx={{ boxShadow: 5, padding: '10px', margin: '10px', borderRadius: '4px' }} onMouseEnter={() => handleMouseEnter(step.id)} onMouseLeave={() => handleMouseLeave(step.id)}>
             {
               step.type === 'text' && (
                 <>
+                {confirmedTextSteps[step.id] && hoverStates[step.id] && (
+                  <IconButton
+                    onClick={() => handlePairDelete()}
+                    sx={{
+                      position: 'absolute',
+                      top: 5,
+                      right: 5,
+                      color: 'red',
+                      p: 0
+                    }}
+                  >
+                    <DeleteIcon />
+                  </IconButton>
+                )}
                   <TextField
                     label="Label"
                     value={textLabels[step.id] || step.label || ''}