Merge branch 'develop' into capflow-revamp

src/components/action/ActionDescriptionBox.tsx

@@ -16,7 +16,7 @@ const CustomBoxContainer = styled.div<CustomBoxContainerProps>`
   min-height: 100px;
   height: auto;
   border-radius: 5px;
-  background-color: ${({ isDarkMode }) => (isDarkMode ? '#313438' : 'white')};
+  background-color: ${({ isDarkMode }) => (isDarkMode ? '#1d1c1cff' : 'white')};
   color: ${({ isDarkMode }) => (isDarkMode ? 'white' : 'black')};
   margin: 80px 13px 25px 13px;
   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
@@ -31,7 +31,7 @@ const Triangle = styled.div<CustomBoxContainerProps>`
   height: 0;
   border-left: 20px solid transparent;
   border-right: 20px solid transparent;
-  border-bottom: 20px solid ${({ isDarkMode }) => (isDarkMode ? '#313438' : 'white')};
+  border-bottom: 20px solid ${({ isDarkMode }) => (isDarkMode ? '#1d1c1cff' : 'white')};
 `;
 
 const Logo = styled.img`
@@ -102,7 +102,7 @@ const ActionDescriptionBox = ({ isDarkMode }: { isDarkMode: boolean }) => {
                     sx={{
                       color: isDarkMode ? 'white' : 'default',
                       '&.Mui-checked': {
-                        color: '#ff33cc',
+                        color: '#ff00c3',
                       },
                     }}
                   />
@@ -138,4 +138,4 @@ const ActionDescriptionBox = ({ isDarkMode }: { isDarkMode: boolean }) => {
   );
 };
 
-export default ActionDescriptionBox;
+export default ActionDescriptionBox;

src/components/browser/BrowserNavBar.tsx

@@ -14,18 +14,18 @@ import { useThemeMode } from '../../context/theme-provider';
 const StyledNavBar = styled.div<{ browserWidth: number; isDarkMode: boolean }>`
     display: flex;
     padding: 12px 0px;
-    background-color: ${({ isDarkMode }) => (isDarkMode ? '#2C2F33' : '#f6f6f6')};
+    background-color: ${({ isDarkMode }) => (isDarkMode ? '#1d1c1cff' : '#f6f6f6')};
     width: ${({ browserWidth }) => browserWidth}px;
     border-radius: 0px 5px 0px 0px;
 `;
 
 const IconButton = styled(NavBarButton) <{ mode: string }>`
-  background-color: ${({ mode }) => (mode === 'dark' ? '#2C2F33' : '#f6f6f6')};
+  background-color: ${({ mode }) => (mode === 'dark' ? '#1d1c1cff' : '#f6f6f6')};
   transition: background-color 0.3s ease, transform 0.1s ease;
   color: ${({ mode }) => (mode === 'dark' ? '#FFFFFF' : '#333')};
   cursor: pointer;
   &:hover {
-    background-color: ${({ mode }) => (mode === 'dark' ? '#586069' : '#D0D0D0')};
+    background-color: ${({ mode }) => (mode === 'dark' ? '#1d1c1cff' : '#D0D0D0')};
   }
 `;
 

src/components/browser/BrowserTabs.tsx

@@ -49,7 +49,7 @@ export const BrowserTabs = (
                   background: 'white',
                   borderRadius: '5px 5px 0px 0px',
                   '&.Mui-selected': {
-                    backgroundColor: ` ${isDarkMode ? "#2a2a2a" : "#f5f5f5"}`,
+                    backgroundColor: ` ${isDarkMode ? "#121111ff" : "#f5f5f5"}`,
                     color: '#ff00c3', // Slightly lighter text when selected
                   },
                 }}

src/components/dashboard/MainMenu.tsx

@@ -3,8 +3,8 @@ import Tabs from '@mui/material/Tabs';
 import Tab from '@mui/material/Tab';
 import Box from '@mui/material/Box';
 import { useNavigate, useLocation } from 'react-router-dom';
-import { Paper, Button, useTheme, Modal, Typography, Stack, TextField, InputAdornment, IconButton } from "@mui/material";
+import { Paper, Button, useTheme, Modal, Typography, Stack, Divider } from "@mui/material";
-import { AutoAwesome, FormatListBulleted, VpnKey, Usb, CloudQueue, Description, Favorite, ContentCopy, SlowMotionVideo } from "@mui/icons-material";
+import { AutoAwesome, FormatListBulleted, VpnKey, Usb, CloudQueue, Description, Favorite, SlowMotionVideo } from "@mui/icons-material";
 import { useTranslation } from 'react-i18next';
 import { useGlobalInfoStore } from "../../context/globalInfo";
 
@@ -87,19 +87,41 @@ export const MainMenu = ({ value = 'robots', handleChangeContent }: MainMenuProp
             textColor="primary"
             indicatorColor="primary"
             orientation="vertical"
-            sx={{ alignItems: 'flex-start' }}
+            sx={{ alignItems: 'flex-start', '& .MuiTabs-indicator': { display: 'none' }}
           >
-            <Tab value="robots" label={t('mainmenu.recordings')} icon={<AutoAwesome />} iconPosition="start" sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: 'medium' }} onClick={handleRobotsClick} />
+            <Tab
-            <Tab value="runs" label={t('mainmenu.runs')} icon={<FormatListBulleted />} iconPosition="start" sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: 'medium' }} />
+              value="robots"
-            <Tab value="proxy" label={t('mainmenu.proxy')} icon={<Usb />} iconPosition="start" sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: 'medium' }} />
+              label={t('mainmenu.recordings')}
-            <Tab value="apikey" label={t('mainmenu.apikey')} icon={<VpnKey />} iconPosition="start" sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: 'medium' }} />
+              icon={<AutoAwesome />}
+              iconPosition="start"
+              disableRipple={true}
+              sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: 'medium' }}
+              onClick={handleRobotsClick} />
+            <Tab value="runs"
+              label={t('mainmenu.runs')}
+              icon={<FormatListBulleted />}
+              iconPosition="start"
+              disableRipple={true}
+              sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: 'medium' }} />
+            <Tab value="proxy"
+              label={t('mainmenu.proxy')}
+              icon={<Usb />}
+              iconPosition="start"
+              disableRipple={true}
+              sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: 'medium' }} />
+            <Tab value="apikey"
+              label={t('mainmenu.apikey')}
+              icon={<VpnKey />}
+              iconPosition="start"
+              disableRipple={true}
+              sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: 'medium' }} />
           </Tabs>
-          <hr />
+          <Divider sx={{ borderColor: theme.palette.mode === 'dark' ? "#080808ff" : "" }} />
           <Box sx={{ display: 'flex', flexDirection: 'column', textAlign: 'left' }}>
             <Button
               onClick={() => setDocModalOpen(true)}
               sx={buttonStyles}
-              startIcon={<Description />}
+              startIcon={<Description sx={{ fontSize: 20 }} />}
             >
               Documentation
             </Button>
@@ -133,10 +155,10 @@ export const MainMenu = ({ value = 'robots', handleChangeContent }: MainMenuProp
               href='https://app.maxun.dev/'
               target="_blank"
               rel="noopener noreferrer"
-              sx={buttonStyles} startIcon={<CloudQueue />}>
+              sx={buttonStyles} startIcon={<CloudQueue sx={{ fontSize: 20 }} />}>
               Join Maxun Cloud
             </Button>
-            <Button onClick={() => setSponsorModalOpen(true)} sx={buttonStyles} startIcon={<Favorite />}>
+            <Button onClick={() => setSponsorModalOpen(true)} sx={buttonStyles} startIcon={<Favorite sx={{ fontSize: 20 }} />}>
               Sponsor Us
             </Button>
           </Box>

src/components/dashboard/NavBar.tsx

@@ -27,10 +27,10 @@ import {
   GitHub,
   Update,
   Close,
-  Language,
   Description,
   LightMode,
-  DarkMode
+  DarkMode,
+  Translate
 } from "@mui/icons-material";
 import { useNavigate } from 'react-router-dom';
 import { AuthContext } from '../../context/auth';
@@ -158,14 +158,11 @@ export const NavBar: React.FC<NavBarProps> = ({
   };
 
   const renderThemeToggle = () => (
-    <Tooltip title="Toggle Mode">
+    <Tooltip title="Change Mode">
       <IconButton
         onClick={toggleTheme}
         sx={{
           color: darkMode ? '#ffffff' : '#0000008A',
-          '&:hover': {
-           background: 'inherit'
-          }
         }}
       >
         {darkMode ? <LightMode /> : <DarkMode />}
@@ -236,7 +233,7 @@ export const NavBar: React.FC<NavBarProps> = ({
           cursor: 'pointer'
         }}
           onClick={() => navigate('/')}>
-          <img src={MaxunLogo} width={45} height={40} style={{ borderRadius: '5px', margin: '5px 0px 5px 15px' }} />
+          <img src={MaxunLogo} width={48} height={40} style={{ borderRadius: '5px', margin: '5px 0px 5px 15px' }} />
           <div style={{ padding: '11px' }}><ProjectName mode={darkMode ? 'dark' : 'light'}>{t('navbar.project_name')}</ProjectName></div>
           <Chip
             label={`${currentVersion}`}
@@ -394,7 +391,7 @@ export const NavBar: React.FC<NavBarProps> = ({
                       <Logout sx={{ marginRight: '5px' }} /> {t('navbar.menu_items.logout')}
                     </MenuItem>
                     <MenuItem onClick={handleLangMenuOpen}>
-                      <Language sx={{ marginRight: '5px' }} /> {t('navbar.menu_items.language')}
+                      <Translate sx={{ marginRight: '5px' }} /> {t('navbar.menu_items.language')}
                     </MenuItem>
                     <hr />
                     <MenuItem onClick={() => {
@@ -516,10 +513,10 @@ export const NavBar: React.FC<NavBarProps> = ({
                   alignItems: "center",
                   borderRadius: "5px",
                   padding: "8px",
-                  marginRight: "8px",
+                  marginRight: "4px",
                 }}
               >
-                <Language sx={{ marginRight: '5px' }} /><Typography variant="body1">{t("Language")}</Typography>
+                <Translate />
               </IconButton>
               <Menu
                 anchorEl={langAnchorEl}
@@ -601,11 +598,11 @@ export const NavBar: React.FC<NavBarProps> = ({
 
 const NavBarWrapper = styled.div<{ mode: 'light' | 'dark' }>`
   grid-area: navbar;
-  background-color: ${({ mode }) => (mode === 'dark' ? '#1e2124' : '#ffffff')};
+  background-color: ${({ mode }) => (mode === 'dark' ? '#000000ff' : '#ffffff')};
   padding: 5px;
   display: flex;
   justify-content: space-between;
-  border-bottom: 1px solid ${({ mode }) => (mode === 'dark' ? '#333' : '#e0e0e0')};
+  border-bottom: 1px solid ${({ mode }) => (mode === 'dark' ? '#000000ff' : '#e0e0e0')};
 `;
 
 const ProjectName = styled.b<{ mode: 'light' | 'dark' }>`

src/components/recorder/DOMBrowserRenderer.tsx

@@ -902,6 +902,7 @@ export const DOMBrowserRenderer: React.FC<RRWebDOMBrowserRendererProps> = ({
           rebuild(snapshotData.snapshot, {
             doc: iframeDoc,
             mirror: mirror,
+            hackCss: false,
             cache: { stylesWithHoverClass: new Map() },
             afterAppend: (node) => {
               if (node.nodeType === Node.TEXT_NODE && node.textContent) {

src/components/recorder/RightSidePanel.tsx

@@ -785,6 +785,136 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
           </Box>
         )}
       </Box>
+      
+      <Box>
+        {browserSteps.map(step => (
+          <Box key={step.id} onMouseEnter={() => handleMouseEnter(step.id)} onMouseLeave={() => handleMouseLeave(step.id)} sx={{ padding: '10px', margin: '11px', borderRadius: '5px', position: 'relative', background: isDarkMode ? "#1d1c1cff" : 'white', color: isDarkMode ? "white" : 'black' }}>
+            {
+              step.type === 'text' && (
+                <>
+                  <TextField
+                    label={t('right_panel.fields.label')}
+                    value={textLabels[step.id] || step.label || ''}
+                    onChange={(e) => handleTextLabelChange(step.id, e.target.value)}
+                    fullWidth
+                    size="small"
+                    margin="normal"
+                    error={!!errors[step.id]}
+                    helperText={errors[step.id]}
+                    InputProps={{
+                      readOnly: confirmedTextSteps[step.id],
+                      startAdornment: (
+                        <InputAdornment position="start">
+                          <EditIcon />
+                        </InputAdornment>
+                      )
+                    }}
+                  />
+                  <TextField
+                    label={t('right_panel.fields.data')}
+                    value={step.data}
+                    fullWidth
+                    margin="normal"
+                    InputProps={{
+                      readOnly: confirmedTextSteps[step.id],
+                      startAdornment: (
+                        <InputAdornment position="start">
+                          <TextFieldsIcon />
+                        </InputAdornment>
+                      )
+                    }}
+                  />
+                  {!confirmedTextSteps[step.id] ? (
+                    <Box display="flex" justifyContent="space-between" gap={2}>
+                      <Button variant="contained" onClick={() => handleTextStepConfirm(step.id)} disabled={!textLabels[step.id]?.trim()}>{t('right_panel.buttons.confirm')}</Button>
+                      <Button variant="contained" color="error" onClick={() => handleTextStepDiscard(step.id)}>{t('right_panel.buttons.discard')}</Button>
+                    </Box>
+                  ) : !isCaptureTextConfirmed && (
+                    <Box display="flex" justifyContent="flex-end" gap={2}>
+                      <Button
+                        variant="contained"
+                        color="error"
+                        onClick={() => handleTextStepDelete(step.id)}
+                      >
+                        {t('right_panel.buttons.delete')}
+                      </Button>
+                    </Box>
+                  )}
+                </>
+              )}
+            {step.type === 'screenshot' && (
+              <Box display="flex" alignItems="center">
+                <DocumentScannerIcon sx={{ mr: 1 }} />
+                <Typography>
+                  {step.fullPage ?
+                    t('right_panel.screenshot.display_fullpage') :
+                    t('right_panel.screenshot.display_visible')}
+                </Typography>
+              </Box>
+            )}
+            {step.type === 'list' && (
+              Object.entries(step.fields).length === 0 ? (
+                <Typography>{t('right_panel.messages.list_empty')}</Typography>
+              ) : (
+                <>
+                  <Typography>{t('right_panel.messages.list_selected')}</Typography>
+                  {Object.entries(step.fields).map(([key, field]) => (
+                    <Box key={key}>
+                      <TextField
+                        label={t('right_panel.fields.field_label')}
+                        value={field.label || ''}
+                        onChange={(e) => handleTextLabelChange(field.id, e.target.value, step.id, key)}
+                        fullWidth
+                        margin="normal"
+                        InputProps={{
+                          readOnly: confirmedListTextFields[field.id]?.[key],
+                          startAdornment: (
+                            <InputAdornment position="start">
+                              <EditIcon />
+                            </InputAdornment>
+                          )
+                        }}
+                      />
+                      <TextField
+                        label={t('right_panel.fields.field_data')}
+                        value={field.data || ''}
+                        fullWidth
+                        margin="normal"
+                        InputProps={{
+                          readOnly: true,
+                          startAdornment: (
+                            <InputAdornment position="start">
+                              <TextFieldsIcon />
+                            </InputAdornment>
+                          )
+                        }}
+                      />
+                      {!confirmedListTextFields[step.id]?.[key] && (
+                        <Box display="flex" justifyContent="space-between" gap={2}>
+                          <Button
+                            variant="contained"
+                            onClick={() => handleListTextFieldConfirm(step.id, key)}
+                            disabled={!field.label?.trim()}
+                          >
+                            {t('right_panel.buttons.confirm')}
+                          </Button>
+                          <Button
+                            variant="contained"
+                            color="error"
+                            onClick={() => handleListTextFieldDiscard(step.id, key)}
+                          >
+                            {t('right_panel.buttons.discard')}
+                          </Button>
+                        </Box>
+                      )}
+                    </Box>
+                  ))}
+                </>
+              )
+            )}
+          </Box>
+        ))}
+      </Box>
     </Paper>
   );
 };

src/components/robot/RecordingsTable.tsx

@@ -533,7 +533,7 @@ export const RecordingsTable = ({
         <>
           <TableContainer component={Paper} sx={{ width: '100%', overflow: 'hidden', marginTop: '15px' }}>
             <Table stickyHeader aria-label="sticky table">
-              <TableHead>
+              {/* <TableHead> */}
                 <TableRow>
                   {columns.map((column) => (
                     <MemoizedTableCell
@@ -544,7 +544,7 @@ export const RecordingsTable = ({
                     </MemoizedTableCell>
                   ))}
                 </TableRow>
-              </TableHead>
+              {/* </TableHead> */}
               <TableBody>
                 {visibleRows.map((row) => (
                   <TableRowMemoized

src/components/robot/pages/ScheduleSettingsPage.tsx

@@ -188,8 +188,8 @@ export const ScheduleSettingsPage = ({
           display: "flex",
           flexDirection: "column",
           alignItems: "flex-start",
-          padding: "20px",
           "& > *": { marginBottom: "20px" },
+          marginTop: "-20px",
         }}
       >
         <>

src/components/run/InterpretationLog.tsx

@@ -21,14 +21,17 @@ import { useThemeMode } from '../../context/theme-provider';
 import { useTranslation } from 'react-i18next';
 import { useBrowserSteps } from '../../context/browserSteps';
 import { useActionContext } from '../../context/browserActions';
+import { useTutorial } from '../../context/tutorial';
 
 interface InterpretationLogProps {
   isOpen: boolean;
   setIsOpen: (isOpen: boolean) => void;
+  tutorialMode?: boolean;
 }
 
-export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, setIsOpen }) => {
+export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, setIsOpen, tutorialMode = false }) => {
   const { t } = useTranslation();
+  const tutorial = tutorialMode ? useTutorial() : null;
 
   const [captureListData, setCaptureListData] = useState<any[]>([]);
   const [captureTextData, setCaptureTextData] = useState<any[]>([]);
@@ -98,12 +101,18 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
 
       updateListTextFieldLabel(editingField.listId, editingField.fieldKey, editingValue.trim());
 
+      // Emit updated action to backend after state update completes
       if (actionId) {
         setTimeout(() => emitForStepId(actionId), 0);
       }
 
       setEditingField(null);
       setEditingValue('');
+
+      // Advance tutorial if in tutorial mode
+      if (tutorialMode && tutorial) {
+        tutorial.handleFieldLabelsEdited();
+      }
     }
   };
 
@@ -118,6 +127,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
 
     removeListTextField(listId, fieldKey);
 
+    // Emit updated action to backend after state update completes
     if (actionId) {
       setTimeout(() => emitForStepId(actionId), 0);
     }
@@ -135,13 +145,20 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
 
       updateListStepName(editingListName, finalName);
 
+      // Use ref-synced version of browserSteps via emitForStepId
       const listStep = browserSteps.find(step => step.id === editingListName);
       if (listStep?.actionId) {
+        // small async delay ensures React state commit
         setTimeout(() => emitForStepId(listStep.actionId!), 0);
       }
 
       setEditingListName(null);
       setEditingListNameValue('');
+
+      // Advance tutorial if in tutorial mode
+      if (tutorialMode && tutorial) {
+        tutorial.handleListNameEdited();
+      }
     }
   };
 
@@ -154,9 +171,11 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
     const trimmedName = editingTextGroupNameValue.trim();
     const finalName = trimmedName || 'Text Data';
 
+    console.log("SAVING TEXT GROUP NAME:", finalName);
     setCurrentTextGroupName(finalName);
     setEditingTextGroupName(false);
 
+    // Emit after React updates global state
     setTimeout(() => {
       const activeTextStep = captureTextData.find(step => step.actionId);
       if (activeTextStep?.actionId) emitForStepId(activeTextStep.actionId);
@@ -176,6 +195,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
 
       updateBrowserTextStepLabel(editingTextLabel, editingTextLabelValue.trim());
 
+      // Emit updated action to backend after state update completes
       if (actionId) {
         setTimeout(() => emitForStepId(actionId), 0);
       }
@@ -196,7 +216,9 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
 
     deleteBrowserStep(textId);
 
+    // Emit updated action to backend after deletion
     if (actionId) {
+      // Small delay to ensure state update completes
       setTimeout(() => emitForStepId(actionId), 0);
     }
   };
@@ -212,7 +234,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
       const screenshotSteps = browserSteps.filter(step => step.type === 'screenshot');
       const screenshotIndex = screenshotSteps.findIndex(s => s.id === editingScreenshotName);
       const finalName = trimmedName || `Screenshot ${screenshotIndex + 1}`;
-
+      
       updateScreenshotStepName(editingScreenshotName, finalName);
 
       const screenshotStep = browserSteps.find(step => step.id === editingScreenshotName);
@@ -220,8 +242,11 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
         const originalName = screenshotStep.name?.trim() || "";
         const trimmedName = editingScreenshotNameValue.trim();
 
+        // 🚫 Only emit if name actually changed
         if (trimmedName && trimmedName !== originalName) {
           setTimeout(() => emitForStepId(screenshotStep.actionId!), 500);
+        } else {
+          console.log("🧠 Skipping emit — screenshot name unchanged.");
         }
       }
 
@@ -251,6 +276,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
       setActiveTab(availableTabs.findIndex(tab => tab.id === 'captureText'));
     } else if (hasNewScreenshotData && availableTabs.findIndex(tab => tab.id === 'captureScreenshot') !== -1) {
       setActiveTab(availableTabs.findIndex(tab => tab.id === 'captureScreenshot'));
+      // Set the active screenshot tab to the latest screenshot
       setActiveScreenshotTab(screenshotData.length - 1);
     }
   }, [captureListData.length, captureTextData.length, screenshotData.length]);
@@ -313,24 +339,24 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
 
   const getAvailableTabs = useCallback(() => {
     const tabs = [];
-
+    
     if (captureListData.length > 0) {
       tabs.push({ id: 'captureList', label: 'Lists' });
     }
-
+    
     if (captureTextData.length > 0) {
       tabs.push({ id: 'captureText', label: 'Texts' });
     }
-
+    
     if (screenshotData.length > 0) {
       tabs.push({ id: 'captureScreenshot', label: 'Screenshots' });
     }
-
+    
     return tabs;
   }, [captureListData.length, captureTextData.length, screenshotData.length, showPreviewData]);
 
   const availableTabs = getAvailableTabs();
-
+  
   useEffect(() => {
     if (activeTab >= availableTabs.length && availableTabs.length > 0) {
       setActiveTab(0);
@@ -503,7 +529,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
           {showPreviewData && availableTabs.length > 0 && (
             <>
               {shouldShowTabs && (
-                <Box
+                <Box 
                   sx={{
                     display: 'flex',
                     borderBottom: '1px solid',
@@ -519,6 +545,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
                         px: 4,
                         py: 2,
                         cursor: 'pointer',
+                        // borderBottom: activeTab === index ? '2px solid' : 'none',
                         borderColor: activeTab === index ? (darkMode ? '#ff00c3' : '#ff00c3') : 'transparent',
                         backgroundColor: activeTab === index ? (darkMode ? '#121111ff' : '#e9ecef') : 'transparent',
                         color: darkMode ? 'white' : 'black',
@@ -537,12 +564,13 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
                   ))}
                 </Box>
               )}
-
+              
               <Box sx={{ flexGrow: 1, overflow: 'hidden', p: 0, display: 'flex', flexDirection: 'column' }}>
                 {(activeTab === availableTabs.findIndex(tab => tab.id === 'captureList') ||
                   singleContentType === 'captureList') &&
                   captureListData.length > 0 && (
                     <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+                      {/* List Tabs */}
                       <Box
                         sx={{
                           display: 'flex',
@@ -559,12 +587,13 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
 
                           return (
                             <Tooltip
-                              key={listItem.id}
                               title="Double click to edit captured list name"
                               arrow
                               placement="top"
                             >
                               <Box
+                                id={index === captureListData.length - 1 ? "list-name-tab" : undefined}
+                                key={listItem.id}
                                 onClick={() => {
                                   if (!isEditing) {
                                     setActiveListTab(index);
@@ -647,6 +676,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
                         })}
                       </Box>
 
+                      {/* Table Below Tabs */}
                       <TableContainer
                         component={Paper}
                         sx={{
@@ -667,9 +697,12 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
                             {Object.entries(captureListData[activeListTab]?.fields || {}).map(([fieldKey, field]: [string, any]) => {
                               const isEditing = editingField?.listId === captureListData[activeListTab]?.id && editingField?.fieldKey === fieldKey;
 
+                              const isFirstField = Object.keys(captureListData[activeListTab]?.fields || {}).indexOf(fieldKey) === 0;
+
                               return (
                                 <TableCell
                                   key={fieldKey}
+                                  id={isFirstField ? "first-field-label" : undefined}
                                   sx={{
                                     borderBottom: '1px solid',
                                     borderColor: darkMode ? '#080808ff' : '#dee2e6',
@@ -761,19 +794,22 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
                         </TableHead>
                         <TableBody>
                           {(captureListData[activeListTab]?.data || [])
-                            .slice(0, Math.min(captureListData[activeListTab]?.limit || 10, 5))
+                            .slice(0, tutorialMode ? (captureListData[activeListTab]?.data?.length || 0) : Math.min(captureListData[activeListTab]?.limit || 10, 5))
                             .map((row: any, rowIndex: any) => (
                               <TableRow
                                 key={rowIndex}
                                 sx={{
-                                  borderBottom: rowIndex < Math.min(captureListData[activeListTab]?.data?.length || 0, Math.min(captureListData[activeListTab]?.limit || 10, 5)) - 1 ? '1px solid' : 'none',
+                                  borderBottom: rowIndex < (tutorialMode
+                                    ? (captureListData[activeListTab]?.data?.length || 0)
+                                    : Math.min((captureListData[activeListTab]?.data?.length || 0), Math.min(captureListData[activeListTab]?.limit || 10, 5))
+                                  ) - 1 ? '1px solid' : 'none',
                                   borderColor: darkMode ? '#080808ff' : '#dee2e6'
                                 }}
                               >
                                 {Object.values(captureListData[activeListTab]?.fields || {}).map((field: any, colIndex) => (
-                                  <TableCell
+                                  <TableCell 
                                     key={colIndex}
-                                    sx={{
+                                    sx={{ 
                                       borderBottom: 'none',
                                       py: 2
                                     }}
@@ -793,6 +829,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
 
                 {(activeTab === availableTabs.findIndex(tab => tab.id === 'captureScreenshot') || singleContentType === 'captureScreenshot') && screenshotData.length > 0 && (
                   <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+                    {/* Screenshot Tabs */}
                     <Box
                       sx={{
                         display: 'flex',
@@ -899,6 +936,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
                       })()}
                     </Box>
 
+                    {/* Screenshot Image */}
                     <Box sx={{
                       p: 3,
                       overflow: 'auto',
@@ -1144,4 +1182,4 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
       </Grid>
     </Grid>
   );
-};
+};

src/context/theme-provider.tsx

@@ -93,8 +93,8 @@ const darkTheme = createTheme({
       contrastText: '#ffffff',
     },
     background: {
-      default: '#121212',
+      default: '#000000ff',
-      paper: '#1e1e1e',
+      paper: '#000000ff',
     },
     text: {
       primary: '#ffffff',
@@ -112,7 +112,7 @@ const darkTheme = createTheme({
             color: '#ffffff',
             "&:hover": {
               borderColor: '#ffffff',
-              backgroundColor: 'rgba(255, 255, 255, 0.08)',
+              backgroundColor: 'inherit',
             },
           },
         },
@@ -127,14 +127,14 @@ const darkTheme = createTheme({
           borderColor: '#ff00c3',
           color: '#ff00c3',
           "&:hover": {
-            backgroundColor: 'rgba(255, 0, 195, 0.08)',
+            // backgroundColor: 'rgba(255, 0, 195, 0.08)',
             borderColor: '#ff66d9',
           },
           '&.MuiButton-outlinedError': {
             borderColor: '#f44336',
             color: '#f44336',
             "&:hover": {
-              backgroundColor: 'rgba(244, 67, 54, 0.08)',
+              // backgroundColor: 'rgba(244, 67, 54, 0.08)',
               borderColor: '#d32f2f',
             },
           },
@@ -155,14 +155,14 @@ const darkTheme = createTheme({
       styleOverrides: {
         root: {
           color: '#ffffff',
-          "&:hover": {
+          // "&:hover": {
-            backgroundColor: 'rgba(255, 0, 195, 0.08)',
+          //   backgroundColor: 'rgba(255, 0, 195, 0.08)',
-          },
+          // },
           '&.MuiIconButton-colorError': {
             color: '#f44336',
-            "&:hover": {
+            // "&:hover": {
-              backgroundColor: 'rgba(244, 67, 54, 0.08)',
+            //   backgroundColor: 'rgba(244, 67, 54, 0.08)',
-            },
+            // },
           },
         },
       },
@@ -202,38 +202,47 @@ const darkTheme = createTheme({
     MuiPaper: {
       styleOverrides: {
         root: {
-          backgroundColor: '#1e1e1e',
+          backgroundColor: '#000000ff',
+          border: '1px solid #080808ff',
         },
       },
     },
     MuiAppBar: {
       styleOverrides: {
         root: {
-          backgroundColor: '#121212',
+          backgroundColor: '#080808ff',
         },
       },
     },
     MuiDrawer: {
       styleOverrides: {
         paper: {
-          backgroundColor: '#121212',
+          backgroundColor: '#080808ff',
         },
       },
     },
     MuiTableCell: {
       styleOverrides: {
         root: {
-          borderBottom: '1px solid rgba(255, 255, 255, 0.12)',
+          borderBottom: '1px solid #080808ff',
         },
       },
     },
     MuiDivider: {
       styleOverrides: {
         root: {
-          borderColor: 'rgba(255, 255, 255, 0.12)',
+          borderColor: '#494949ff',
         },
       },
     },
+    //   MuiTextField:{
+    //     styleOverrides: {
+    //       root: {
+    //         '& .MuiInputBase-root': {
+    //           backgroundColor: '#1d1c1cff',
+    //         },
+    //   }
+    // }}
   },
 });
 
@@ -273,4 +282,4 @@ const ThemeModeProvider = ({ children }: { children: React.ReactNode }) => {
   );
 };
 
-export default ThemeModeProvider;
+export default ThemeModeProvider;

src/helpers/clientSelectorGenerator.ts

@@ -555,38 +555,25 @@ class ClientSelectorGenerator {
    */
   private isMeaningfulElement(element: HTMLElement): boolean {
     const tagName = element.tagName.toLowerCase();
-    
+
-    // Fast path for common meaningful elements
+    if (tagName === "img") {
-    if (["a", "img", "input", "button", "select"].includes(tagName)) {
+      return element.hasAttribute("src");
+    }
+
+    if (tagName === "a" && element.hasAttribute("href")) {
       return true;
     }
 
+    if (element.children.length > 0) {
+      return false;
+    }
+
     const text = (element.textContent || "").trim();
-    const hasHref = element.hasAttribute("href");
+
-    const hasSrc = element.hasAttribute("src");
+    if (text.length > 0) {
-    
-    // Quick checks first
-    if (text.length > 0 || hasHref || hasSrc) {
       return true;
     }
 
-    const isCustomElement = tagName.includes("-");
-
-    // For custom elements, be more lenient about what's considered meaningful
-    if (isCustomElement) {
-      const hasChildren = element.children.length > 0;
-      const hasSignificantAttributes = Array.from(element.attributes).some(
-        (attr) => !["class", "style", "id"].includes(attr.name.toLowerCase())
-      );
-
-      return (
-        hasChildren ||
-        hasSignificantAttributes ||
-        element.hasAttribute("role") ||
-        element.hasAttribute("aria-label")
-      );
-    }
-
     return false;
   }
 
@@ -2561,12 +2548,9 @@ class ClientSelectorGenerator {
 
     const MAX_MEANINGFUL_ELEMENTS = 300;
     const MAX_NODES_TO_CHECK = 1200;
-    const MAX_DEPTH = 12;
+    const MAX_DEPTH = 20;
     let nodesChecked = 0;
 
-    let adjustedMaxDepth = MAX_DEPTH;
-    const elementDensityThreshold = 50;
-
     const depths: number[] = [0];
     let queueIndex = 0;
 
@@ -2576,14 +2560,10 @@ class ClientSelectorGenerator {
       queueIndex++;
       nodesChecked++;
 
-      if (currentDepth <= 3 && meaningfulDescendants.length > elementDensityThreshold) {
-        adjustedMaxDepth = Math.max(6, adjustedMaxDepth - 2);
-      }
-
       if (
         nodesChecked > MAX_NODES_TO_CHECK ||
         meaningfulDescendants.length >= MAX_MEANINGFUL_ELEMENTS ||
-        currentDepth > adjustedMaxDepth
+        currentDepth > MAX_DEPTH
       ) {
         break;
       }
@@ -2592,7 +2572,7 @@ class ClientSelectorGenerator {
         meaningfulDescendants.push(element);
       }
 
-      if (currentDepth >= adjustedMaxDepth) {
+      if (currentDepth >= MAX_DEPTH) {
         continue;
       }
 
@@ -2607,7 +2587,7 @@ class ClientSelectorGenerator {
         }
       }
 
-      if (element.shadowRoot && currentDepth < adjustedMaxDepth - 1) {
+      if (element.shadowRoot && currentDepth < MAX_DEPTH - 1) {
         const shadowChildren = element.shadowRoot.children;
         const shadowLimit = Math.min(shadowChildren.length, 20);
         for (let i = 0; i < shadowLimit; i++) {
@@ -2716,22 +2696,46 @@ class ClientSelectorGenerator {
     }
 
     if (!addPositionToAll) {
-      const meaningfulAttrs = ["role", "type", "name", "src", "aria-label"];
+      const meaningfulAttrs = ["role", "type"];
       for (const attrName of meaningfulAttrs) {
         if (element.hasAttribute(attrName)) {
           const value = element.getAttribute(attrName)!.replace(/'/g, "\\'");
-          return `${tagName}[@${attrName}='${value}']`;
+          const isCommonAttribute = this.isAttributeCommonAcrossLists(
+            element,
+            attrName,
+            value,
+            otherListElements
+          );
+          if (isCommonAttribute) {
+            return `${tagName}[@${attrName}='${value}']`;
+          }
         }
       }
     }
 
     const testId = element.getAttribute("data-testid");
     if (testId && !addPositionToAll) {
-      return `${tagName}[@data-testid='${testId}']`;
+      const isCommon = this.isAttributeCommonAcrossLists(
+        element,
+        "data-testid",
+        testId,
+        otherListElements
+      );
+      if (isCommon) {
+        return `${tagName}[@data-testid='${testId}']`;
+      }
     }
 
     if (element.id && !element.id.match(/^\d/) && !addPositionToAll) {
-      return `${tagName}[@id='${element.id}']`;
+      const isCommon = this.isAttributeCommonAcrossLists(
+        element,
+        "id",
+        element.id,
+        otherListElements
+      );
+      if (isCommon) {
+        return `${tagName}[@id='${element.id}']`;
+      }
     }
 
     if (!addPositionToAll) {
@@ -2742,7 +2746,15 @@ class ClientSelectorGenerator {
           attr.name !== "data-mx-id" &&
           attr.value
         ) {
-          return `${tagName}[@${attr.name}='${attr.value}']`;
+          const isCommon = this.isAttributeCommonAcrossLists(
+            element,
+            attr.name,
+            attr.value,
+            otherListElements
+          );
+          if (isCommon) {
+            return `${tagName}[@${attr.name}='${attr.value}']`;
+          }
         }
       }
     }
@@ -2906,12 +2918,70 @@ class ClientSelectorGenerator {
     const result = pathParts.length > 0 ? "/" + pathParts.join("/") : null;
 
     this.pathCache.set(targetElement, result);
-    
+
     return result;
   }
 
+  private isAttributeCommonAcrossLists(
+    targetElement: HTMLElement,
+    attrName: string,
+    attrValue: string,
+    otherListElements: HTMLElement[]
+  ): boolean {
+    if (otherListElements.length === 0) {
+      return true;
+    }
+
+    const targetPath = this.getElementPath(targetElement);
+
+    for (const otherListElement of otherListElements) {
+      const correspondingElement = this.findCorrespondingElement(
+        otherListElement,
+        targetPath
+      );
+      if (correspondingElement) {
+        const otherValue = correspondingElement.getAttribute(attrName);
+        if (otherValue !== attrValue) {
+          return false;
+        }
+      }
+    }
+
+    return true;
+  }
+
+  private getElementPath(element: HTMLElement): number[] {
+    const path: number[] = [];
+    let current: HTMLElement | null = element;
+
+    while (current && current.parentElement) {
+      const siblings = Array.from(current.parentElement.children);
+      path.unshift(siblings.indexOf(current));
+      current = current.parentElement;
+    }
+
+    return path;
+  }
+
+  private findCorrespondingElement(
+    rootElement: HTMLElement,
+    path: number[]
+  ): HTMLElement | null {
+    let current: HTMLElement = rootElement;
+
+    for (const index of path) {
+      const children = Array.from(current.children);
+      if (index >= children.length) {
+        return null;
+      }
+      current = children[index] as HTMLElement;
+    }
+
+    return current;
+  }
+
   private getCommonClassesAcrossLists(
-    targetElement: HTMLElement, 
+    targetElement: HTMLElement,
     otherListElements: HTMLElement[]
   ): string[] {
     if (otherListElements.length === 0) {
@@ -3919,9 +3989,48 @@ class ClientSelectorGenerator {
     );
     if (!deepestElement) return null;
 
+    if (!this.isMeaningfulElementCached(deepestElement)) {
+      const atomicChild = this.findAtomicChildAtPoint(deepestElement, x, y);
+      if (atomicChild) {
+        return atomicChild;
+      }
+    }
+
     return deepestElement;
   }
 
+  private findAtomicChildAtPoint(
+    parent: HTMLElement,
+    x: number,
+    y: number
+  ): HTMLElement | null {
+    const stack: HTMLElement[] = [parent];
+    const visited = new Set<HTMLElement>();
+
+    while (stack.length > 0) {
+      const element = stack.pop()!;
+      if (visited.has(element)) continue;
+      visited.add(element);
+
+      if (element !== parent && this.isMeaningfulElementCached(element)) {
+        const rect = element.getBoundingClientRect();
+        if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
+          return element;
+        }
+      }
+
+      for (let i = element.children.length - 1; i >= 0; i--) {
+        const child = element.children[i] as HTMLElement;
+        const rect = child.getBoundingClientRect();
+        if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
+          stack.push(child);
+        }
+      }
+    }
+
+    return null;
+  }
+
   /**
    * Helper methods used by the unified getDeepestElementFromPoint
    */

src/pages/Login.tsx

@@ -80,7 +80,7 @@ const Login = () => {
         maxHeight: "100vh",
         mt: 6,
         padding: 4,
-        backgroundColor: darkMode ? "#121212" : "#ffffff",
+        backgroundColor: "inherit",
       }}
     >
       <Box
@@ -88,7 +88,7 @@ const Login = () => {
         onSubmit={submitForm}
         sx={{
           textAlign: "center",
-          backgroundColor: darkMode ? "#1e1e1e" : "#ffffff",
+          backgroundColor: darkMode ? "#121111ff" : "#ffffff",
           color: darkMode ? "#ffffff" : "#333333",
           padding: 6,
           borderRadius: 5,
@@ -100,7 +100,8 @@ const Login = () => {
           width: "100%",
         }}
       >
-        <img src="../src/assets/maxunlogo.png" alt="logo" height={55} width={60} style={{ marginBottom: 20, borderRadius: "20%", alignItems: "center" }} />
+        <img src="../src/assets/maxunlogo.png" alt="logo" height={60}
+          width={70} style={{ marginBottom: 20, borderRadius: "20%", alignItems: "center" }} />
         <Typography variant="h4" gutterBottom>
           {t('login.title')}
         </Typography>

src/pages/RecordingPage.tsx

@@ -61,7 +61,7 @@ export const RecordingPage = ({ recordingName }: RecordingPageProps) => {
   useEffect(() => {
     if (darkMode) {
 
-      document.body.style.background = 'rgba(18,18,18,1)';
+      document.body.style.background = '#080808ff';
 
     } else {
       document.body.style.background = 'radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(232, 191, 222, 1) 100%, rgba(255, 255, 255, 1) 100%)';

src/pages/Register.tsx

@@ -73,7 +73,7 @@ const Register = () => {
         maxHeight: "100vh",
         mt: 6,
         padding: 4,
-        backgroundColor: darkMode ? "#121212" : "#ffffff",
+        backgroundColor: "inherit",
       }}
     >
       <Box
@@ -81,7 +81,7 @@ const Register = () => {
         onSubmit={submitForm}
         sx={{
           textAlign: "center",
-          backgroundColor: darkMode ? "#1e1e1e" : "#ffffff",
+          backgroundColor: darkMode ? "#121111ff" : "#ffffff",
           color: darkMode ? "#ffffff" : "#333333",
           padding: 6,
           borderRadius: 5,
@@ -97,8 +97,8 @@ const Register = () => {
         <img
           src="../src/assets/maxunlogo.png"
           alt="logo"
-          height={55}
+          height={60}
-          width={60}
+          width={70}
           style={{
             marginBottom: 20,
             borderRadius: "20%",