From 03204a785150ecd4ccb7f910be82a4f1c246d2d8 Mon Sep 17 00:00:00 2001 From: amhsirak Date: Sun, 15 Feb 2026 01:56:08 +0530 Subject: [PATCH 1/5] feat: -rm custom colors --- src/components/recorder/RightSidePanel.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/recorder/RightSidePanel.tsx b/src/components/recorder/RightSidePanel.tsx index 47a1d8af..116a9acc 100644 --- a/src/components/recorder/RightSidePanel.tsx +++ b/src/components/recorder/RightSidePanel.tsx @@ -927,7 +927,6 @@ export const RightSidePanel: React.FC = ({ onFinishCapture = ({ onFinishCapture Date: Sun, 15 Feb 2026 02:01:51 +0530 Subject: [PATCH 2/5] feat: change bg as per theme --- src/components/recorder/RightSidePanel.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/recorder/RightSidePanel.tsx b/src/components/recorder/RightSidePanel.tsx index 116a9acc..1cd654be 100644 --- a/src/components/recorder/RightSidePanel.tsx +++ b/src/components/recorder/RightSidePanel.tsx @@ -920,8 +920,8 @@ export const RightSidePanel: React.FC = ({ onFinishCapture p: 2, mb: 1, borderRadius: '8px', - backgroundColor: isDarkMode ? '#1a3a1a' : '#e8f5e9', - border: `1px solid ${isDarkMode ? '#2e7d32' : '#4caf50'}`, + backgroundColor: isDarkMode ? '#f4f6f4' : '#f4f6f4', + border: `1px solid ${isDarkMode ? '#f4f6f4' : '#f4f6f4'}`, }} > Date: Sun, 15 Feb 2026 02:03:45 +0530 Subject: [PATCH 3/5] fix: remove custom styles --- src/components/recorder/RightSidePanel.tsx | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/components/recorder/RightSidePanel.tsx b/src/components/recorder/RightSidePanel.tsx index 1cd654be..62370511 100644 --- a/src/components/recorder/RightSidePanel.tsx +++ b/src/components/recorder/RightSidePanel.tsx @@ -1005,14 +1005,6 @@ export const RightSidePanel: React.FC = ({ onFinishCapture notify('info', 'Please select a different pagination element'); } }} - sx={{ - color: isDarkMode ? '#81c784' : '#2e7d32', - borderColor: isDarkMode ? '#81c784' : '#2e7d32', - '&:hover': { - borderColor: isDarkMode ? '#a5d6a7' : '#4caf50', - backgroundColor: isDarkMode ? '#1a3a1a' : '#f1f8f4', - } - }} > Choose Different Element From 8acc3dfccae2fe54ec73ab7ecad71ba5e1bc81b9 Mon Sep 17 00:00:00 2001 From: amhsirak Date: Sun, 15 Feb 2026 02:07:15 +0530 Subject: [PATCH 4/5] fix: dark theme --- src/components/recorder/RightSidePanel.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/recorder/RightSidePanel.tsx b/src/components/recorder/RightSidePanel.tsx index 62370511..87f143d6 100644 --- a/src/components/recorder/RightSidePanel.tsx +++ b/src/components/recorder/RightSidePanel.tsx @@ -920,6 +920,7 @@ export const RightSidePanel: React.FC = ({ onFinishCapture p: 2, mb: 1, borderRadius: '8px', + color: '#1E2124', backgroundColor: isDarkMode ? '#f4f6f4' : '#f4f6f4', border: `1px solid ${isDarkMode ? '#f4f6f4' : '#f4f6f4'}`, }} From 9d52302c1d0cc9bd97f1ea74c05fad1f1df3b7c4 Mon Sep 17 00:00:00 2001 From: amhsirak Date: Sun, 15 Feb 2026 02:14:19 +0530 Subject: [PATCH 5/5] fix: remove custom styles --- src/components/recorder/RightSidePanel.tsx | 114 +++++++++++---------- 1 file changed, 61 insertions(+), 53 deletions(-) diff --git a/src/components/recorder/RightSidePanel.tsx b/src/components/recorder/RightSidePanel.tsx index 87f143d6..c238b6ef 100644 --- a/src/components/recorder/RightSidePanel.tsx +++ b/src/components/recorder/RightSidePanel.tsx @@ -28,7 +28,7 @@ const fetchWorkflow = (id: string, callback: (response: WorkflowFile) => void) = throw new Error("No workflow found"); } } - ).catch((error) => { console.log(`Failed to fetch workflow:`,error.message) }) + ).catch((error) => { console.log(`Failed to fetch workflow:`, error.message) }) }; interface RightSidePanelProps { @@ -48,22 +48,22 @@ export const RightSidePanel: React.FC = ({ onFinishCapture } | null>(null); const autoDetectionRunRef = useRef(null); - const { notify, currentWorkflowActionsState, setCurrentWorkflowActionsState, resetInterpretationLog, currentListActionId, setCurrentListActionId, currentTextActionId, setCurrentTextActionId, currentScreenshotActionId, setCurrentScreenshotActionId, isDOMMode, updateDOMMode, currentTextGroupName } = useGlobalInfoStore(); - const { - getText, startGetText, stopGetText, - getList, startGetList, stopGetList, - getScreenshot, startGetScreenshot, stopGetScreenshot, - startPaginationMode, stopPaginationMode, - paginationType, updatePaginationType, - limitType, customLimit, updateLimitType, updateCustomLimit, - stopLimitMode, startLimitMode, - captureStage, setCaptureStage, - showPaginationOptions, setShowPaginationOptions, - showLimitOptions, setShowLimitOptions, - workflow, setWorkflow, - activeAction, setActiveAction, finishAction + const { notify, currentWorkflowActionsState, setCurrentWorkflowActionsState, resetInterpretationLog, currentListActionId, setCurrentListActionId, currentTextActionId, setCurrentTextActionId, currentScreenshotActionId, setCurrentScreenshotActionId, isDOMMode, updateDOMMode, currentTextGroupName } = useGlobalInfoStore(); + const { + getText, startGetText, stopGetText, + getList, startGetList, stopGetList, + getScreenshot, startGetScreenshot, stopGetScreenshot, + startPaginationMode, stopPaginationMode, + paginationType, updatePaginationType, + limitType, customLimit, updateLimitType, updateCustomLimit, + stopLimitMode, startLimitMode, + captureStage, setCaptureStage, + showPaginationOptions, setShowPaginationOptions, + showLimitOptions, setShowLimitOptions, + workflow, setWorkflow, + activeAction, setActiveAction, finishAction } = useActionContext(); - + const { browserSteps, addScreenshotStep, updateListStepLimit, updateListStepPagination, deleteStepsByActionId, updateListStepData, updateScreenshotStepData, emitActionForStep } = useBrowserSteps(); const { id, socket } = useSocketStore(); const { t } = useTranslation(); @@ -214,7 +214,7 @@ export const RightSidePanel: React.FC = ({ onFinishCapture } }); } - + return () => { socket?.off('listDataExtracted'); }; @@ -223,16 +223,16 @@ export const RightSidePanel: React.FC = ({ onFinishCapture useEffect(() => { if (socket) { const handleDirectScreenshot = (data: any) => { - const screenshotSteps = browserSteps.filter(step => + const screenshotSteps = browserSteps.filter(step => step.type === 'screenshot' && step.actionId === currentScreenshotActionId ); - + if (screenshotSteps.length > 0) { - const latestStep = screenshotSteps[screenshotSteps.length - 1]; + const latestStep = screenshotSteps[screenshotSteps.length - 1]; updateScreenshotStepData(latestStep.id, data.screenshot); emitActionForStep(latestStep); } - + setCurrentScreenshotActionId(''); }; @@ -288,11 +288,11 @@ export const RightSidePanel: React.FC = ({ onFinishCapture iframeDoc, listSelector, fields, - 5 + 5 ); updateListStepData(currentListId, extractedData); - + if (extractedData.length === 0) { console.warn("⚠️ No data extracted - this might indicate selector issues"); notify("warning", "No data was extracted. Please verify your selections."); @@ -355,14 +355,14 @@ export const RightSidePanel: React.FC = ({ onFinishCapture notify('error', t('right_panel.errors.no_text_captured')); return; } - + stopGetText(); if (currentTextActionStep) { emitActionForStep(currentTextActionStep); } setCurrentTextActionId(''); resetInterpretationLog(); - finishAction('text'); + finishAction('text'); onFinishCapture(); clientSelectorGenerator.cleanup(); }, [stopGetText, socket, browserSteps, resetInterpretationLog, finishAction, notify, onFinishCapture, t, currentTextActionId, currentTextGroupName, emitActionForStep]); @@ -453,7 +453,7 @@ export const RightSidePanel: React.FC = ({ onFinishCapture const getLatestListStep = (steps: BrowserStep[]) => { const listSteps = steps.filter(step => step.type === 'list'); if (listSteps.length === 0) return null; - + return listSteps.sort((a, b) => b.id - a.id)[0]; }; @@ -466,12 +466,12 @@ export const RightSidePanel: React.FC = ({ onFinishCapture step.listSelector && Object.keys(step.fields).length > 0 ); - + if (!hasValidListSelectorForCurrentAction) { notify('error', t('right_panel.errors.capture_list_first')); return; } - + const currentListStepForAutoDetect = browserSteps.find( step => step.type === 'list' && step.actionId === currentListActionId ) as (BrowserStep & { type: 'list'; listSelector?: string }) | undefined; @@ -657,7 +657,7 @@ export const RightSidePanel: React.FC = ({ onFinishCapture notify('error', t('right_panel.errors.select_pagination')); return; } - + const currentListStepForPagination = browserSteps.find( step => step.type === 'list' && step.actionId === currentListActionId ) as (BrowserStep & { type: 'list' }) | undefined; @@ -728,15 +728,15 @@ export const RightSidePanel: React.FC = ({ onFinishCapture const discardGetText = useCallback(() => { stopGetText(); - - if (currentTextActionId) { + + if (currentTextActionId) { deleteStepsByActionId(currentTextActionId); - + if (socket) { socket.emit('removeAction', { actionId: currentTextActionId }); } } - + setCurrentTextActionId(''); clientSelectorGenerator.cleanup(); notify('error', t('right_panel.errors.capture_text_discarded')); @@ -744,10 +744,10 @@ export const RightSidePanel: React.FC = ({ onFinishCapture const discardGetList = useCallback(() => { stopGetList(); - + if (currentListActionId) { deleteStepsByActionId(currentListActionId); - + if (socket) { socket.emit('removeAction', { actionId: currentListActionId }); } @@ -792,7 +792,7 @@ export const RightSidePanel: React.FC = ({ onFinishCapture } } } - + resetListState(); stopPaginationMode(); stopLimitMode(); @@ -808,7 +808,7 @@ export const RightSidePanel: React.FC = ({ onFinishCapture const captureScreenshot = (fullPage: boolean) => { const screenshotCount = browserSteps.filter(s => s.type === 'screenshot').length + 1; const screenshotName = `Screenshot ${screenshotCount}`; - + const screenshotSettings = { fullPage, type: 'png' as const, @@ -819,7 +819,7 @@ export const RightSidePanel: React.FC = ({ onFinishCapture name: screenshotName, actionId: currentScreenshotActionId }; - socket?.emit('captureDirectScreenshot', screenshotSettings); + socket?.emit('captureDirectScreenshot', screenshotSettings); addScreenshotStep(fullPage, currentScreenshotActionId); stopGetScreenshot(); resetInterpretationLog(); @@ -838,8 +838,8 @@ export const RightSidePanel: React.FC = ({ onFinishCapture {!isAnyActionActive && ( <> {showCaptureList && ( - - + {showPaginationOptions && ( {t('right_panel.pagination.title')} - + {autoDetectedPagination && autoDetectedPagination.type !== '' && ( = ({ onFinishCapture notify('info', 'Please select a different pagination element'); } }} + sx={{ + color: '#ff00c3 !important', + borderColor: '#ff00c3 !important', + '&:hover': { + borderColor: '#ff00c3 !important', + backgroundColor: '#f4f6f4 !important', + } + }} > Choose Different Element @@ -1063,15 +1071,15 @@ export const RightSidePanel: React.FC = ({ onFinishCapture {t('right_panel.pagination.none')} )} - + {showLimitOptions && ( - {t('right_panel.limit.title')} @@ -1125,7 +1133,7 @@ export const RightSidePanel: React.FC = ({ onFinishCapture )} )} - + {getText && ( @@ -1155,7 +1163,7 @@ export const RightSidePanel: React.FC = ({ onFinishCapture )} - + {getScreenshot && (