revert: only discard button

src/components/organisms/RightSidePanel.tsx

@@ -21,10 +21,11 @@ export const RightSidePanel = () => {
 
   const handleTextLabelChange = (id: number, label: string) => {
     setTextLabels(prevLabels => ({ ...prevLabels, [id]: label }));
-    setErrors(prevErrors => ({
+    if (!label.trim()) {
-      ...prevErrors,
+      setErrors(prevErrors => ({ ...prevErrors, [id]: 'Label cannot be empty' }));
-      [id]: label.trim() ? '' : 'Label cannot be empty'
+    } else {
-    }));
+      setErrors(prevErrors => ({ ...prevErrors, [id]: '' }));
+    }
   };
 
   const handleTextStepConfirm = (id: number) => {
@@ -59,6 +60,7 @@ export const RightSidePanel = () => {
     return settings;
   }, [browserSteps]);
 
+
   const stopCaptureAndEmitGetTextSettings = useCallback(() => {
     stopGetText();
     const settings = getTextSettingsObject();
@@ -68,6 +70,7 @@ export const RightSidePanel = () => {
     }
   }, [stopGetText, getTextSettingsObject, socket, browserSteps]);
 
+
   const captureScreenshot = (fullPage: boolean) => {
     const screenshotSettings: ScreenshotSettings = {
       fullPage,
@@ -81,14 +84,6 @@ export const RightSidePanel = () => {
     addScreenshotStep(fullPage);
   };
 
-  const handleBack = () => {
-    if (getText) {
-      stopGetText();
-    } else if (getScreenshot) {
-      stopGetScreenshot();
-    }
-  };
-
   return (
     <Paper variant="outlined" sx={{ height: '100%', width: '100%', backgroundColor: 'white', alignItems: "center" }}>
       <SimpleBox height={60} width='100%' background='lightGray' radius='0%'>
@@ -97,26 +92,22 @@ export const RightSidePanel = () => {
 
       <Box display="flex" flexDirection="column" gap={2} style={{ margin: '15px' }}>
         {!getText && !getScreenshot && <Button variant="contained" onClick={startGetText}>Capture Text</Button>}
-        {getText && <Button variant="contained" onClick={stopCaptureAndEmitGetTextSettings}>Stop Capture Text</Button>}
+        {getText && <Button variant="outlined" color="error" onClick={stopCaptureAndEmitGetTextSettings}>Discard</Button>}
         {!getText && !getScreenshot && <Button variant="contained" onClick={startGetScreenshot}>Capture Screenshot</Button>}
         {getScreenshot && (
           <Box display="flex" flexDirection="column" gap={2}>
             <Button variant="contained" onClick={() => captureScreenshot(true)}>Capture Fullpage</Button>
             <Button variant="contained" onClick={() => captureScreenshot(false)}>Capture Visible Part</Button>
+            <Button variant="outlined" color="error" onClick={stopGetScreenshot}>Discard</Button>
           </Box>
         )}
       </Box>
 
-        <Box>
-          <Box display="flex" justifyContent="space-between" gap={2} style={{ margin: '15px' }}>
-            <Button variant="outlined" onClick={handleBack}>Back</Button>
-            <Button variant="outlined" color="error" onClick={handleBack}>Discard</Button>
-          </Box>
-
           <Box>
             {browserSteps.map(step => (
               <Box key={step.id} sx={{ boxShadow: 5, padding: '10px', margin: '10px', borderRadius: '4px' }}>
-                {step.type === 'text' ? (
+                {
+                  step.type === 'text' ? (
                     <>
                       <TextField
                         label="Label"
@@ -146,11 +137,11 @@ export const RightSidePanel = () => {
                     step.type === 'screenshot' && (
                       <Typography>{`Take ${step.fullPage ? 'Fullpage' : 'Visible Part'} Screenshot`}</Typography>
                     )
-                )}
+                  )
+                }
               </Box>
             ))}
           </Box>
-        </Box>
     </Paper>
   );
 };