Merge pull request #829 from getmaxun/v1-dark-mode

wip: dark mode v1

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`

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 } from "@mui/material";
+import { Paper, Button, useTheme, Modal, Typography, Stack, Divider } from "@mui/material";
-import { AutoAwesome, VpnKey, Usb, CloudQueue, Description, Favorite, SlowMotionVideo, PlayArrow } 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";
 
@@ -116,7 +116,7 @@ export const MainMenu = ({ value = 'robots', handleChangeContent }: MainMenuProp
               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)}

src/components/dashboard/NavBar.tsx

@@ -598,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/RightSidePanel.tsx

@@ -1059,7 +1059,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
       
       <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 ? "#1E2124" : 'white', color: isDarkMode ? "white" : 'black' }}>
+          <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' && (
                 <>
@@ -1080,7 +1080,6 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
                         </InputAdornment>
                       )
                     }}
-                    sx={{ background: isDarkMode ? "#1E2124" : 'white', color: isDarkMode ? "white" : 'black' }}
                   />
                   <TextField
                     label={t('right_panel.fields.data')}

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/RobotDuplicate.tsx

@@ -1,172 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { GenericModal } from "../ui/GenericModal";
-import { TextField, Typography, Box, Button } from "@mui/material";
-import { modalStyle } from "../recorder/AddWhereCondModal";
-import { useGlobalInfoStore } from '../../context/globalInfo';
-import { duplicateRecording, getStoredRecording } from '../../api/storage';
-import { WhereWhatPair } from 'maxun-core';
-import { useTranslation } from 'react-i18next';
-
-interface RobotMeta {
-    name: string;
-    id: string;
-    createdAt: string;
-    pairs: number;
-    updatedAt: string;
-    params: any[];
-}
-
-interface RobotWorkflow {
-    workflow: WhereWhatPair[];
-}
-
-interface ScheduleConfig {
-    runEvery: number;
-    runEveryUnit: 'MINUTES' | 'HOURS' | 'DAYS' | 'WEEKS' | 'MONTHS';
-    startFrom: 'SUNDAY' | 'MONDAY' | 'TUESDAY' | 'WEDNESDAY' | 'THURSDAY' | 'FRIDAY' | 'SATURDAY';
-    atTimeStart?: string;
-    atTimeEnd?: string;
-    timezone: string;
-    lastRunAt?: Date;
-    nextRunAt?: Date;
-    cronExpression?: string;
-}
-
-export interface RobotSettings {
-    id: string;
-    userId?: number;
-    recording_meta: RobotMeta;
-    recording: RobotWorkflow;
-    google_sheet_email?: string | null;
-    google_sheet_name?: string | null;
-    google_sheet_id?: string | null;
-    google_access_token?: string | null;
-    google_refresh_token?: string | null;
-    schedule?: ScheduleConfig | null;
-}
-
-interface RobotSettingsProps {
-    isOpen: boolean;
-    handleStart: (settings: RobotSettings) => void;
-    handleClose: () => void;
-    initialSettings?: RobotSettings | null;
-
-}
-
-export const RobotDuplicationModal = ({ isOpen, handleStart, handleClose, initialSettings }: RobotSettingsProps) => {
-    const { t } = useTranslation();
-    const [targetUrl, setTargetUrl] = useState<string | undefined>('');
-    const [robot, setRobot] = useState<RobotSettings | null>(null);
-    const { recordingId, notify, setRerenderRobots } = useGlobalInfoStore();
-
-    useEffect(() => {
-        if (isOpen) {
-            getRobot();
-        }
-    }, [isOpen]);
-
-    useEffect(() => {
-        if (robot) {
-            const lastPair = robot?.recording.workflow[robot?.recording.workflow.length - 1];
-            const url = lastPair?.what.find(action => action.action === "goto")?.args?.[0];
-            setTargetUrl(url);
-        }
-    }, [robot]);
-
-    const getRobot = async () => {
-        if (recordingId) {
-            const robot = await getStoredRecording(recordingId);
-            setRobot(robot);
-        } else {
-            notify('error', t('robot_duplication.notifications.robot_not_found'));
-        }
-    }
-
-    const handleTargetUrlChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setTargetUrl(e.target.value);
-    };
-
-    const handleSave = async () => {
-        if (!robot || !targetUrl) {
-            notify('error', t('robot_duplication.notifications.url_required'));
-            return;
-        }
-
-        try {
-            const success = await duplicateRecording(robot.recording_meta.id, targetUrl);
-
-            if (success) {
-                setRerenderRobots(true);
-
-                notify('success', t('robot_duplication.notifications.duplicate_success'));
-                handleStart(robot);
-                handleClose();
-            } else {
-                notify('error', t('robot_duplication.notifications.duplicate_error'));
-            }
-        } catch (error) {
-            notify('error', t('robot_duplication.notifications.unknown_error'));
-            console.error('Error updating Target URL:', error);
-        }
-    };
-
-    return (
-        <GenericModal
-            isOpen={isOpen}
-            onClose={handleClose}
-            modalStyle={modalStyle}
-        >
-            <>
-                <Typography variant="h5" style={{ marginBottom: '20px' }}>
-                    {t('robot_duplication.title')}
-                </Typography>
-                <Box style={{ display: 'flex', flexDirection: 'column' }}>
-                    {
-                        robot && (
-                            <>
-                                <span>
-                                    {t('robot_duplication.descriptions.purpose')}
-                                </span>
-                                <br />
-                                <span dangerouslySetInnerHTML={{
-                                    __html: t('robot_duplication.descriptions.example', {
-                                        url1: '<code>producthunt.com/topics/api</code>',
-                                        url2: '<code>producthunt.com/topics/database</code>'
-                                    })
-                                }} />
-                                <br />
-                                <span>
-                                    <b>{t('robot_duplication.descriptions.warning')}</b>
-                                </span>
-                                <TextField
-                                    label={t('robot_duplication.fields.target_url')}
-                                    key={t('robot_duplication.fields.target_url')}
-                                    value={targetUrl}
-                                    onChange={handleTargetUrlChange}
-                                    style={{ marginBottom: '20px', marginTop: '30px' }}
-                                />
-                                <Box mt={2} display="flex" justifyContent="flex-end">
-                                    <Button variant="contained" color="primary" onClick={handleSave}>
-                                        {t('robot_duplication.buttons.duplicate')}
-                                    </Button>
-                                    <Button
-                                        onClick={handleClose}
-                                        color="primary"
-                                        variant="outlined"
-                                        style={{ marginLeft: '10px' }}
-                                        sx={{
-                                            color: '#ff00c3 !important',
-                                            borderColor: '#ff00c3 !important',
-                                            backgroundColor: 'whitesmoke !important',
-                                        }} >
-                                        {t('robot_duplication.buttons.cancel')}
-                                    </Button>
-                                </Box>
-                            </>
-                        )
-                    }
-                </Box>
-            </>
-        </GenericModal>
-    );
-};

src/components/robot/RobotEdit.tsx

@@ -1,586 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { GenericModal } from "../ui/GenericModal";
-import { TextField, Typography, Box, Button, IconButton, InputAdornment } from "@mui/material";
-import { Visibility, VisibilityOff } from '@mui/icons-material';
-import { modalStyle } from "../recorder/AddWhereCondModal";
-import { useGlobalInfoStore } from '../../context/globalInfo';
-import { getStoredRecording, updateRecording } from '../../api/storage';
-import { WhereWhatPair } from 'maxun-core';
-
-interface RobotMeta {
-    name: string;
-    id: string;
-    createdAt: string;
-    pairs: number;
-    updatedAt: string;
-    params: any[];
-}
-
-interface RobotWorkflow {
-    workflow: WhereWhatPair[];
-}
-
-interface ScheduleConfig {
-    runEvery: number;
-    runEveryUnit: 'MINUTES' | 'HOURS' | 'DAYS' | 'WEEKS' | 'MONTHS';
-    startFrom: 'SUNDAY' | 'MONDAY' | 'TUESDAY' | 'WEDNESDAY' | 'THURSDAY' | 'FRIDAY' | 'SATURDAY';
-    atTimeStart?: string;
-    atTimeEnd?: string;
-    timezone: string;
-    lastRunAt?: Date;
-    nextRunAt?: Date;
-    cronExpression?: string;
-}
-
-export interface RobotSettings {
-    id: string;
-    userId?: number;
-    recording_meta: RobotMeta;
-    recording: RobotWorkflow;
-    google_sheet_email?: string | null;
-    google_sheet_name?: string | null;
-    google_sheet_id?: string | null;
-    google_access_token?: string | null;
-    google_refresh_token?: string | null;
-    schedule?: ScheduleConfig | null;
-}
-
-interface RobotSettingsProps {
-    isOpen: boolean;
-    handleStart: (settings: RobotSettings) => void;
-    handleClose: () => void;
-    initialSettings?: RobotSettings | null;
-}
-
-interface CredentialInfo {
-    value: string;
-    type: string;
-}
-
-interface Credentials {
-    [key: string]: CredentialInfo;
-}
-
-interface CredentialVisibility {
-    [key: string]: boolean;
-}
-
-interface GroupedCredentials {
-    passwords: string[];
-    emails: string[];
-    usernames: string[];
-    others: string[];
-}
-
-interface ScrapeListLimit {
-    pairIndex: number;
-    actionIndex: number;
-    argIndex: number;
-    currentLimit: number;
-}
-
-export const RobotEditModal = ({ isOpen, handleStart, handleClose, initialSettings }: RobotSettingsProps) => {
-    const { t } = useTranslation();
-    const [credentials, setCredentials] = useState<Credentials>({});
-    const { recordingId, notify, setRerenderRobots } = useGlobalInfoStore();
-    const [robot, setRobot] = useState<RobotSettings | null>(null);
-    const [credentialGroups, setCredentialGroups] = useState<GroupedCredentials>({
-        passwords: [],
-        emails: [],
-        usernames: [],
-        others: []
-    });
-    const [showPasswords, setShowPasswords] = useState<CredentialVisibility>({});
-    const [scrapeListLimits, setScrapeListLimits] = useState<ScrapeListLimit[]>([]);
-
-    const isEmailPattern = (value: string): boolean => {
-        return value.includes('@');
-    };
-
-    const isUsernameSelector = (selector: string): boolean => {
-        return selector.toLowerCase().includes('username') ||
-            selector.toLowerCase().includes('user') ||
-            selector.toLowerCase().includes('email');
-    };
-
-    const determineCredentialType = (selector: string, info: CredentialInfo): 'password' | 'email' | 'username' | 'other' => {
-        if (info.type === 'password' || selector.toLowerCase().includes('password')) {
-            return 'password';
-        }
-        if (isEmailPattern(info.value) || selector.toLowerCase().includes('email')) {
-            return 'email';
-        }
-        if (isUsernameSelector(selector)) {
-            return 'username';
-        }
-        return 'other';
-    };
-
-    useEffect(() => {
-        if (isOpen) {
-            getRobot();
-        }
-    }, [isOpen]);
-
-    useEffect(() => {
-        if (robot?.recording?.workflow) {
-            const extractedCredentials = extractInitialCredentials(robot.recording.workflow);
-            setCredentials(extractedCredentials);
-            setCredentialGroups(groupCredentialsByType(extractedCredentials));
-            
-            findScrapeListLimits(robot.recording.workflow);
-        }
-    }, [robot]);
-
-    const findScrapeListLimits = (workflow: WhereWhatPair[]) => {
-        const limits: ScrapeListLimit[] = [];
-        
-        workflow.forEach((pair, pairIndex) => {
-            if (!pair.what) return;
-            
-            pair.what.forEach((action, actionIndex) => {
-                if (action.action === 'scrapeList' && action.args && action.args.length > 0) {
-                    // Check if first argument has a limit property
-                    const arg = action.args[0];
-                    if (arg && typeof arg === 'object' && 'limit' in arg) {
-                        limits.push({
-                            pairIndex,
-                            actionIndex,
-                            argIndex: 0,
-                            currentLimit: arg.limit
-                        });
-                    }
-                }
-            });
-        });
-        
-        setScrapeListLimits(limits);
-    };
-
-    function extractInitialCredentials(workflow: any[]): Credentials {
-        const credentials: Credentials = {};
-
-        const isPrintableCharacter = (char: string): boolean => {
-            return char.length === 1 && !!char.match(/^[\x20-\x7E]$/);
-        };
-
-        workflow.forEach(step => {
-            if (!step.what) return;
-
-            let currentSelector = '';
-            let currentValue = '';
-            let currentType = '';
-            let i = 0;
-
-            while (i < step.what.length) {
-                const action = step.what[i];
-
-                if (!action.action || !action.args?.[0]) {
-                    i++;
-                    continue;
-                }
-
-                const selector = action.args[0];
-
-                // Handle full word type actions first
-                if (action.action === 'type' &&
-                    action.args?.length >= 2 &&
-                    typeof action.args[1] === 'string' &&
-                    action.args[1].length > 1) {
-
-                    if (!credentials[selector]) {
-                        credentials[selector] = {
-                            value: action.args[1],
-                            type: action.args[2] || 'text'
-                        };
-                    }
-                    i++;
-                    continue;
-                }
-
-                // Handle character-by-character sequences (both type and press)
-                if ((action.action === 'type' || action.action === 'press') &&
-                    action.args?.length >= 2 &&
-                    typeof action.args[1] === 'string') {
-
-                    if (selector !== currentSelector) {
-                        if (currentSelector && currentValue) {
-                            credentials[currentSelector] = {
-                                value: currentValue,
-                                type: currentType || 'text'
-                            };
-                        }
-                        currentSelector = selector;
-                        currentValue = credentials[selector]?.value || '';
-                        currentType = action.args[2] || credentials[selector]?.type || 'text';
-                    }
-
-                    const character = action.args[1];
-
-                    if (isPrintableCharacter(character)) {
-                        currentValue += character;
-                    } else if (character === 'Backspace') {
-                        currentValue = currentValue.slice(0, -1);
-                    }
-
-                    if (!currentType && action.args[2]?.toLowerCase() === 'password') {
-                        currentType = 'password';
-                    }
-
-                    let j = i + 1;
-                    while (j < step.what.length) {
-                        const nextAction = step.what[j];
-                        if (!nextAction.action || !nextAction.args?.[0] ||
-                            nextAction.args[0] !== selector ||
-                            (nextAction.action !== 'type' && nextAction.action !== 'press')) {
-                            break;
-                        }
-                        if (nextAction.args[1] === 'Backspace') {
-                            currentValue = currentValue.slice(0, -1);
-                        } else if (isPrintableCharacter(nextAction.args[1])) {
-                            currentValue += nextAction.args[1];
-                        }
-                        j++;
-                    }
-
-                    credentials[currentSelector] = {
-                        value: currentValue,
-                        type: currentType
-                    };
-
-                    i = j;
-                } else {
-                    i++;
-                }
-            }
-
-            if (currentSelector && currentValue) {
-                credentials[currentSelector] = {
-                    value: currentValue,
-                    type: currentType || 'text'
-                };
-            }
-        });
-
-        return credentials;
-    }
-
-    const groupCredentialsByType = (credentials: Credentials): GroupedCredentials => {
-        return Object.entries(credentials).reduce((acc: GroupedCredentials, [selector, info]) => {
-            const credentialType = determineCredentialType(selector, info);
-
-            switch (credentialType) {
-                case 'password':
-                    acc.passwords.push(selector);
-                    break;
-                case 'email':
-                    acc.emails.push(selector);
-                    break;
-                case 'username':
-                    acc.usernames.push(selector);
-                    break;
-                default:
-                    acc.others.push(selector);
-            }
-
-            return acc;
-        }, { passwords: [], emails: [], usernames: [], others: [] });
-    };
-
-    const getRobot = async () => {
-        if (recordingId) {
-            const robot = await getStoredRecording(recordingId);
-            setRobot(robot);
-        } else {
-            notify('error', t('robot_edit.notifications.update_failed'));
-        }
-    };
-
-    const handleClickShowPassword = (selector: string) => {
-        setShowPasswords(prev => ({
-            ...prev,
-            [selector]: !prev[selector]
-        }));
-    };
-
-    const handleRobotNameChange = (newName: string) => {
-        setRobot((prev) =>
-            prev ? { ...prev, recording_meta: { ...prev.recording_meta, name: newName } } : prev
-        );
-    };
-
-    const handleCredentialChange = (selector: string, value: string) => {
-        setCredentials(prev => ({
-            ...prev,
-            [selector]: {
-                ...prev[selector],
-                value
-            }
-        }));
-    };
-
-    const handleLimitChange = (pairIndex: number, actionIndex: number, argIndex: number, newLimit: number) => {
-        setRobot((prev) => {
-            if (!prev) return prev;
-
-            const updatedWorkflow = [...prev.recording.workflow];
-            if (
-                updatedWorkflow.length > pairIndex &&
-                updatedWorkflow[pairIndex]?.what &&
-                updatedWorkflow[pairIndex].what.length > actionIndex &&
-                updatedWorkflow[pairIndex].what[actionIndex].args &&
-                updatedWorkflow[pairIndex].what[actionIndex].args.length > argIndex
-            ) {
-                updatedWorkflow[pairIndex].what[actionIndex].args[argIndex].limit = newLimit;
-                
-                setScrapeListLimits(prev => {
-                    return prev.map(item => {
-                        if (item.pairIndex === pairIndex && 
-                            item.actionIndex === actionIndex && 
-                            item.argIndex === argIndex) {
-                            return { ...item, currentLimit: newLimit };
-                        }
-                        return item;
-                    });
-                });
-            }
-
-            return { ...prev, recording: { ...prev.recording, workflow: updatedWorkflow } };
-        });
-    };
-
-    const handleTargetUrlChange = (newUrl: string) => {
-        setRobot((prev) => {
-            if (!prev) return prev;
-
-            const updatedWorkflow = [...prev.recording.workflow];
-            const lastPairIndex = updatedWorkflow.length - 1;
-
-            if (lastPairIndex >= 0) {
-                const gotoAction = updatedWorkflow[lastPairIndex]?.what?.find(action => action.action === "goto");
-                if (gotoAction && gotoAction.args && gotoAction.args.length > 0) {
-                    gotoAction.args[0] = newUrl;
-                }
-            }
-
-            return { ...prev, recording: { ...prev.recording, workflow: updatedWorkflow } };
-        });
-    };
-
-    const renderAllCredentialFields = () => {
-        return (
-            <>
-                {renderCredentialFields(
-                    credentialGroups.usernames,
-                    t('Username'),
-                    'text'
-                )}
-
-                {renderCredentialFields(
-                    credentialGroups.emails,
-                    t('Email'),
-                    'text'
-                )}
-
-                {renderCredentialFields(
-                    credentialGroups.passwords,
-                    t('Password'),
-                    'password'
-                )}
-
-                {renderCredentialFields(
-                    credentialGroups.others,
-                    t('Other'),
-                    'text'
-                )}
-            </>
-        );
-    };
-
-    const renderCredentialFields = (selectors: string[], headerText: string, defaultType: 'text' | 'password' = 'text') => {
-        if (selectors.length === 0) return null;
-
-        return (
-            <>
-                {selectors.map((selector, index) => {
-                    const isVisible = showPasswords[selector];
-
-                    return (
-                        <TextField
-                            key={selector}
-                            type={isVisible ? 'text' : 'password'}
-                            label={headerText === 'Other' ? `${`Input`} ${index + 1}` : headerText}
-                            value={credentials[selector]?.value || ''}
-                            onChange={(e) => handleCredentialChange(selector, e.target.value)}
-                            style={{ marginBottom: '20px' }}
-                            InputProps={{
-                                endAdornment: (
-                                    <InputAdornment position="end">
-                                        <IconButton
-                                            aria-label="Show input"
-                                            onClick={() => handleClickShowPassword(selector)}
-                                            edge="end"
-                                            disabled={!credentials[selector]?.value}
-                                        >
-                                            {isVisible ? <Visibility /> : <VisibilityOff />}
-                                        </IconButton>
-                                    </InputAdornment>
-                                ),
-                            }}
-                        />
-                    );
-                })}
-            </>
-        );
-    };
-
-    const renderScrapeListLimitFields = () => {
-        if (scrapeListLimits.length === 0) return null;
-        
-        return (
-            <>
-                <Typography variant="body1" style={{ marginBottom: '20px' }}>
-                    {t('List Limits')}
-                </Typography>
-                
-                {scrapeListLimits.map((limitInfo, index) => (
-                    <TextField
-                        key={`limit-${limitInfo.pairIndex}-${limitInfo.actionIndex}`}
-                        label={`${t('List Limit')} ${index + 1}`}
-                        type="number"
-                        value={limitInfo.currentLimit || ''}
-                        onChange={(e) => {
-                            const value = parseInt(e.target.value, 10);
-                            if (value >= 1) {
-                                handleLimitChange(
-                                    limitInfo.pairIndex,
-                                    limitInfo.actionIndex,
-                                    limitInfo.argIndex,
-                                    value
-                                );
-                            }
-                        }}
-                        inputProps={{ min: 1 }}
-                        style={{ marginBottom: '20px' }}
-                    />
-                ))}
-            </>
-        );
-    };
-
-    const handleSave = async () => {
-        if (!robot) return;
-
-        try {
-            const credentialsForPayload = Object.entries(credentials).reduce((acc, [selector, info]) => {
-                const enforceType = info.type === 'password' ? 'password' : 'text';
-
-                acc[selector] = {
-                    value: info.value,
-                    type: enforceType
-                };
-                return acc;
-            }, {} as Record<string, CredentialInfo>);
-
-            const lastPair = robot.recording.workflow[robot.recording.workflow.length - 1];
-            const targetUrl = lastPair?.what.find(action => action.action === "goto")?.args?.[0];
-
-            const payload = {
-                name: robot.recording_meta.name,
-                limits: scrapeListLimits.map(limit => ({
-                    pairIndex: limit.pairIndex,
-                    actionIndex: limit.actionIndex,
-                    argIndex: limit.argIndex,
-                    limit: limit.currentLimit
-                })),
-                credentials: credentialsForPayload,
-                targetUrl: targetUrl,
-            };
-
-            const success = await updateRecording(robot.recording_meta.id, payload);
-
-            if (success) {
-                setRerenderRobots(true);
-
-                notify('success', t('robot_edit.notifications.update_success'));
-                handleStart(robot);
-                handleClose();
-            } else {
-                notify('error', t('robot_edit.notifications.update_failed'));
-            }
-        } catch (error) {
-            notify('error', t('robot_edit.notifications.update_error'));
-            console.error('Error updating robot:', error);
-        }
-    };
-
-    const lastPair = robot?.recording.workflow[robot?.recording.workflow.length - 1];
-    const targetUrl = lastPair?.what.find(action => action.action === "goto")?.args?.[0];
-
-    return (
-        <GenericModal
-            isOpen={isOpen}
-            onClose={handleClose}
-            modalStyle={modalStyle}
-        >
-            <>
-                <Typography variant="h5" style={{ marginBottom: '20px' }}>
-                    {t('robot_edit.title')}
-                </Typography>
-                <Box style={{ display: 'flex', flexDirection: 'column' }}>
-                    {robot && (
-                        <>
-                            <TextField
-                                label={t('robot_edit.change_name')}
-                                key="Robot Name"
-                                type='text'
-                                value={robot.recording_meta.name}
-                                onChange={(e) => handleRobotNameChange(e.target.value)}
-                                style={{ marginBottom: '20px' }}
-                            />
-
-                            <TextField
-                                label="Robot Target URL"
-                                key="Robot Target URL"
-                                type='text'
-                                value={targetUrl || ''}
-                                onChange={(e) => handleTargetUrlChange(e.target.value)}
-                                style={{ marginBottom: '20px' }}
-                            />
-
-                            {renderScrapeListLimitFields()}
-
-                            {(Object.keys(credentials).length > 0) && (
-                                <>
-                                    <Typography variant="body1" style={{ marginBottom: '20px' }}>
-                                        {t('Input Texts')}
-                                    </Typography>
-                                    {renderAllCredentialFields()}
-                                </>
-                            )}
-
-                            <Box mt={2} display="flex" justifyContent="flex-end">
-                                <Button variant="contained" color="primary" onClick={handleSave}>
-                                    {t('robot_edit.save')}
-                                </Button>
-                                <Button
-                                    onClick={handleClose}
-                                    color="primary"
-                                    variant="outlined"
-                                    style={{ marginLeft: '10px' }}
-                                    sx={{
-                                        color: '#ff00c3 !important',
-                                        borderColor: '#ff00c3 !important',
-                                        backgroundColor: 'whitesmoke !important',
-                                    }}>
-                                    {t('robot_edit.cancel')}
-                                </Button>
-                            </Box>
-                        </>
-                    )}
-                </Box>
-            </>
-        </GenericModal>
-    );
-};

src/components/robot/RobotSettings.tsx

@@ -1,173 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { GenericModal } from "../ui/GenericModal";
-import { TextField, Typography, Box } from "@mui/material";
-import { useGlobalInfoStore } from '../../context/globalInfo';
-import { getStoredRecording } from '../../api/storage';
-import { WhereWhatPair } from 'maxun-core';
-import { getUserById } from "../../api/auth";
-
-interface RobotMeta {
-    name: string;
-    id: string;
-    createdAt: string;
-    pairs: number;
-    updatedAt: string;
-    params: any[];
-}
-
-interface RobotWorkflow {
-    workflow: WhereWhatPair[];
-}
-
-interface ScheduleConfig {
-    runEvery: number;
-    runEveryUnit: 'MINUTES' | 'HOURS' | 'DAYS' | 'WEEKS' | 'MONTHS';
-    startFrom: 'SUNDAY' | 'MONDAY' | 'TUESDAY' | 'WEDNESDAY' | 'THURSDAY' | 'FRIDAY' | 'SATURDAY';
-    atTimeStart?: string;
-    atTimeEnd?: string;
-    timezone: string;
-    lastRunAt?: Date;
-    nextRunAt?: Date;
-    cronExpression?: string;
-}
-
-export interface RobotSettings {
-    id: string;
-    userId?: number;
-    recording_meta: RobotMeta;
-    recording: RobotWorkflow;
-    google_sheet_email?: string | null;
-    google_sheet_name?: string | null;
-    google_sheet_id?: string | null;
-    google_access_token?: string | null;
-    google_refresh_token?: string | null;
-    schedule?: ScheduleConfig | null;
-}
-
-interface RobotSettingsProps {
-    isOpen: boolean;
-    handleStart: (settings: RobotSettings) => void;
-    handleClose: () => void;
-    initialSettings?: RobotSettings | null;
-}
-
-export const RobotSettingsModal = ({ isOpen, handleStart, handleClose, initialSettings }: RobotSettingsProps) => {
-    const { t } = useTranslation();
-    const [userEmail, setUserEmail] = useState<string | null>(null);
-    const [robot, setRobot] = useState<RobotSettings | null>(null);
-    const { recordingId, notify } = useGlobalInfoStore();
-
-    useEffect(() => {
-        if (isOpen) {
-            getRobot();
-        }
-    }, [isOpen]);
-
-    const getRobot = async () => {
-        if (recordingId) {
-            const robot = await getStoredRecording(recordingId);
-            setRobot(robot);
-        } else {
-            notify('error', t('robot_settings.errors.robot_not_found'));
-        }
-    }
-
-    const lastPair = robot?.recording.workflow[robot?.recording.workflow.length - 1];
-
-    // Find the `goto` action in `what` and retrieve its arguments
-    const targetUrl = lastPair?.what.find(action => action.action === "goto")?.args?.[0];
-
-    useEffect(() => {
-        const fetchUserEmail = async () => {
-            if (robot && robot.userId) {
-                const userData = await getUserById(robot.userId.toString());
-                if (userData && userData.user) {
-                    setUserEmail(userData.user.email);
-                }
-            }
-        };
-        fetchUserEmail();
-    }, [robot?.userId]);
-
-    return (
-        <GenericModal
-            isOpen={isOpen}
-            onClose={handleClose}
-            modalStyle={modalStyle}
-        >
-            <>
-                <Typography variant="h5" style={{ marginBottom: '20px' }}>
-                    {t('robot_settings.title')}
-                </Typography>
-                <Box style={{ display: 'flex', flexDirection: 'column' }}>
-                    {
-                        robot && (
-                            <>
-                                <TextField
-                                    label={t('robot_settings.target_url')}
-                                    key="Robot Target URL"
-                                    value={targetUrl}
-                                    InputProps={{
-                                        readOnly: true,
-                                    }}
-                                    style={{ marginBottom: '20px' }}
-                                />
-                                <TextField
-                                    label={t('robot_settings.robot_id')}
-                                    key="Robot ID"
-                                    value={robot.recording_meta.id}
-                                    InputProps={{
-                                        readOnly: true,
-                                    }}
-                                    style={{ marginBottom: '20px' }}
-                                />
-                                {robot.recording.workflow?.[0]?.what?.[0]?.args?.[0]?.limit !== undefined && (
-                                    <TextField
-                                        label={t('robot_settings.robot_limit')}
-                                        type="number"
-                                        value={robot.recording.workflow[0].what[0].args[0].limit || ''}
-                                        InputProps={{
-                                            readOnly: true,
-                                        }}
-                                        style={{ marginBottom: '20px' }}
-                                    />
-                                )}
-                                <TextField
-                                    label={t('robot_settings.created_by_user')}
-                                    key="Created By User"
-                                    value={userEmail ? userEmail : ''}
-                                    InputProps={{
-                                        readOnly: true,
-                                    }}
-                                    style={{ marginBottom: '20px' }}
-                                />
-                                <TextField
-                                    label={t('robot_settings.created_at')}
-                                    key="Robot Created At"
-                                    value={robot.recording_meta.createdAt}
-                                    InputProps={{
-                                        readOnly: true,
-                                    }}
-                                    style={{ marginBottom: '20px' }}
-                                />
-                            </>
-                        )
-                    }
-                </Box>
-            </>
-        </GenericModal>
-    );
-};
-
-export const modalStyle = {
-top: "50%",
-left: "50%",
-transform: "translate(-50%, -50%)",
-width: "30%",
-backgroundColor: "background.paper",
-p: 4,
-height: "fit-content",
-display: "block",
-padding: "20px",
-};

src/components/robot/ScheduleSettings.tsx

@@ -1,314 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { GenericModal } from "../ui/GenericModal";
-import { MenuItem, TextField, Typography, Box } from "@mui/material";
-import { Dropdown } from "../ui/DropdownMui";
-import Button from "@mui/material/Button";
-import { validMomentTimezones } from '../../constants/const';
-import { useGlobalInfoStore } from '../../context/globalInfo';
-import { getSchedule, deleteSchedule } from '../../api/storage';
-
-interface ScheduleSettingsProps {
-  isOpen: boolean;
-  handleStart: (settings: ScheduleSettings) => Promise<boolean>;
-  handleClose: () => void;
-  initialSettings?: ScheduleSettings | null;
-}
-
-export interface ScheduleSettings {
-  runEvery: number;
-  runEveryUnit: string;
-  startFrom: string;
-  dayOfMonth?: string;
-  atTimeStart?: string;
-  atTimeEnd?: string;
-  timezone: string;
-}
-
-export const ScheduleSettingsModal = ({ isOpen, handleStart, handleClose, initialSettings }: ScheduleSettingsProps) => {
-  const { t } = useTranslation();
-  const [schedule, setSchedule] = useState<ScheduleSettings | null>(null);
-  const [settings, setSettings] = useState<ScheduleSettings>({
-    runEvery: 1,
-    runEveryUnit: 'HOURS',
-    startFrom: 'MONDAY',
-    dayOfMonth: '1',
-    atTimeStart: '00:00',
-    atTimeEnd: '01:00',
-    timezone: 'UTC'
-  });
-
-  useEffect(() => {
-    if (initialSettings) {
-      setSettings(initialSettings);
-    }
-  }, [initialSettings]);
-
-  const handleChange = (field: keyof ScheduleSettings, value: string | number | boolean) => {
-    setSettings(prev => ({ ...prev, [field]: value }));
-  };
-
-  const textStyle = {
-    width: '150px',
-    height: '52px',
-    marginRight: '10px',
-  };
-
-  const dropDownStyle = {
-    marginTop: '2px',
-    width: '150px',
-    height: '59px',
-    marginRight: '10px',
-  };
-
-  const units = [
-    'MINUTES',
-    'HOURS',
-    'DAYS',
-    'WEEKS',
-    'MONTHS'
-  ];
-
-  const days = [
-    'MONDAY',
-    'TUESDAY',
-    'WEDNESDAY',
-    'THURSDAY',
-    'FRIDAY',
-    'SATURDAY',
-    'SUNDAY'
-  ];
-
-  const { recordingId, notify } = useGlobalInfoStore();
-
-  const deleteRobotSchedule = () => {
-    if (recordingId) {
-      deleteSchedule(recordingId);
-      setSchedule(null);
-      notify('success', t('Schedule deleted successfully'));
-    } else {
-      console.error('No recording id provided');
-    }
-
-    setSettings({
-      runEvery: 1,
-      runEveryUnit: 'HOURS',
-      startFrom: 'MONDAY',
-      dayOfMonth: '',
-      atTimeStart: '00:00',
-      atTimeEnd: '01:00',
-      timezone: 'UTC'
-    });
-  };
-
-  const getRobotSchedule = async () => {
-    if (recordingId) {
-      const scheduleData = await getSchedule(recordingId);
-      setSchedule(scheduleData);
-    } else {
-      console.error('No recording id provided');
-    }
-  }
-
-  useEffect(() => {
-    if (isOpen) {
-      const fetchSchedule = async () => {
-        await getRobotSchedule();
-      };
-      fetchSchedule();
-    }
-  }, [isOpen]);
-
-  const getDayOrdinal = (day: string | undefined) => {
-    if (!day) return '';
-    const lastDigit = day.slice(-1);
-    const lastTwoDigits = day.slice(-2);
-
-    // Special cases for 11, 12, 13
-    if (['11', '12', '13'].includes(lastTwoDigits)) {
-      return t('schedule_settings.labels.on_day.th');
-    }
-
-    // Other cases
-    switch (lastDigit) {
-      case '1': return t('schedule_settings.labels.on_day.st');
-      case '2': return t('schedule_settings.labels.on_day.nd');
-      case '3': return t('schedule_settings.labels.on_day.rd');
-      default: return t('schedule_settings.labels.on_day.th');
-    }
-  };
-
-  return (
-    <GenericModal
-      isOpen={isOpen}
-      onClose={handleClose}
-      modalStyle={modalStyle}
-    >
-      <Box sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'flex-start',
-        padding: '20px',
-        '& > *': { marginBottom: '20px' },
-      }}>
-        <Typography variant="h6" sx={{ marginBottom: '20px' }}>{t('schedule_settings.title')}</Typography>
-        <>
-          {schedule !== null ? (
-            <>
-              <Typography>{t('schedule_settings.run_every')}: {schedule.runEvery} {schedule.runEveryUnit.toLowerCase()}</Typography>
-              <Typography>{['MONTHS', 'WEEKS'].includes(settings.runEveryUnit) ? t('schedule_settings.start_from') : t('schedule_settings.start_from')}: {schedule.startFrom.charAt(0).toUpperCase() + schedule.startFrom.slice(1).toLowerCase()}</Typography>
-              {schedule.runEveryUnit === 'MONTHS' && (
-                <Typography>{t('schedule_settings.on_day')}: {schedule.dayOfMonth}{getDayOrdinal(schedule.dayOfMonth)} of the month</Typography>
-              )}
-              <Typography>{t('schedule_settings.at_around')}: {schedule.atTimeStart}, {schedule.timezone} {t('schedule_settings.timezone')}</Typography>
-              <Box mt={2} display="flex" justifyContent="space-between">
-                <Button
-                  onClick={deleteRobotSchedule}
-                  variant="outlined"
-                  color="error"
-                >
-                  {t('schedule_settings.buttons.delete_schedule')}
-                </Button>
-              </Box>
-            </>
-          ) : (
-            <>
-              <Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
-                <Typography sx={{ marginRight: '10px' }}>{t('schedule_settings.labels.run_once_every')}</Typography>
-                <TextField
-                  type="number"
-                  value={settings.runEvery}
-                  onChange={(e) => handleChange('runEvery', parseInt(e.target.value))}
-                  sx={textStyle}
-                  inputProps={{ min: 1 }}
-                />
-                <Dropdown
-                  label=""
-                  id="runEveryUnit"
-                  value={settings.runEveryUnit}
-                  handleSelect={(e) => handleChange('runEveryUnit', e.target.value)}
-                  sx={dropDownStyle}
-                >
-                  {units.map((unit) => (
-                    <MenuItem key={unit} value={unit}> {unit.charAt(0).toUpperCase() + unit.slice(1).toLowerCase()}</MenuItem>
-                  ))}
-                </Dropdown>
-              </Box>
-
-              <Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
-                <Typography sx={{ marginBottom: '5px', marginRight: '25px' }}>
-                  {['MONTHS', 'WEEKS'].includes(settings.runEveryUnit) ? t('schedule_settings.labels.start_from_label') : t('schedule_settings.labels.start_from_label')}
-                </Typography>
-                <Dropdown
-                  label=""
-                  id="startFrom"
-                  value={settings.startFrom}
-                  handleSelect={(e) => handleChange('startFrom', e.target.value)}
-                  sx={dropDownStyle}
-                >
-                  {days.map((day) => (
-                    <MenuItem key={day} value={day}>
-                      {day.charAt(0).toUpperCase() + day.slice(1).toLowerCase()}
-                    </MenuItem>
-                  ))}
-                </Dropdown>
-              </Box>
-
-              {settings.runEveryUnit === 'MONTHS' && (
-                <Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
-                  <Typography sx={{ marginBottom: '5px', marginRight: '25px' }}>{t('schedule_settings.labels.on_day_of_month')}</Typography>
-                  <TextField
-                    type="number"
-                    value={settings.dayOfMonth}
-                    onChange={(e) => handleChange('dayOfMonth', e.target.value)}
-                    sx={textStyle}
-                    inputProps={{ min: 1, max: 31 }}
-                  />
-                </Box>
-              )}
-
-              {['MINUTES', 'HOURS'].includes(settings.runEveryUnit) ? (
-                <Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
-                  <Box sx={{ marginRight: '20px' }}>
-                    <Typography sx={{ marginBottom: '5px' }}>{t('schedule_settings.labels.in_between')}</Typography>
-                    <TextField
-                      type="time"
-                      value={settings.atTimeStart}
-                      onChange={(e) => handleChange('atTimeStart', e.target.value)}
-                      sx={textStyle}
-                    />
-                    <TextField
-                      type="time"
-                      value={settings.atTimeEnd}
-                      onChange={(e) => handleChange('atTimeEnd', e.target.value)}
-                      sx={textStyle}
-                    />
-                  </Box>
-                </Box>
-              ) : (
-                <Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
-                  <Typography sx={{ marginBottom: '5px', marginRight: '10px' }}>{t('schedule_settings.at_around')}</Typography>
-                  <TextField
-                    type="time"
-                    value={settings.atTimeStart}
-                    onChange={(e) => handleChange('atTimeStart', e.target.value)}
-                    sx={textStyle}
-                  />
-                </Box>
-              )}
-
-              <Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
-                <Typography sx={{ marginRight: '10px' }}>{t('schedule_settings.timezone')}</Typography>
-                <Dropdown
-                  label=""
-                  id="timezone"
-                  value={settings.timezone}
-                  handleSelect={(e) => handleChange('timezone', e.target.value)}
-                  sx={dropDownStyle}
-                >
-                  {validMomentTimezones.map((tz) => (
-                    <MenuItem key={tz} value={tz}>{tz.charAt(0).toUpperCase() + tz.slice(1).toLowerCase()}</MenuItem>
-                  ))}
-                </Dropdown>
-              </Box>
-              <Box mt={2} display="flex" justifyContent="flex-end">
-                <Button onClick={async () => {
-                  const success = await handleStart(settings);
-                  if (success) {
-                    await getRobotSchedule();
-                  }
-                }} variant="contained" color="primary">
-                  {t('schedule_settings.buttons.save_schedule')}
-                </Button>
-                <Button
-                  onClick={handleClose}
-                  color="primary"
-                  variant="outlined"
-                  style={{ marginLeft: '10px' }}
-                  sx={{
-                    color: '#ff00c3 !important',
-                    borderColor: '#ff00c3 !important',
-                    backgroundColor: 'whitesmoke !important',
-                  }}>
-                  {t('schedule_settings.buttons.cancel')}
-                </Button>
-              </Box>
-            </>
-          )}
-        </>
-      </Box>
-    </GenericModal>
-  );
-};
-
-const modalStyle = {
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  width: '40%',
-  backgroundColor: 'background.paper',
-  p: 4,
-  height: 'fit-content',
-  display: 'block',
-  padding: '20px',
-};

src/components/run/InterpretationLog.tsx

@@ -68,6 +68,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
     }
   }, [captureListData.length, captureTextData.length, screenshotData.length]);
 
+
   useEffect(() => {
     const textSteps = browserSteps.filter(step => step.type === 'text');
     if (textSteps.length > 0) {
@@ -144,6 +145,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
     }
   }, [hasScrapeListAction, hasScrapeSchemaAction, hasScreenshotAction, setIsOpen]);
 
+
   const { darkMode } = useThemeMode();
 
   const getCaptureTextColumns = captureTextData.length > 0 ? Object.keys(captureTextData[0]) : [];
@@ -193,7 +195,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
           onOpen={toggleDrawer(true)}
           PaperProps={{
             sx: {
-              background: `${darkMode ? '#1e2124' : 'white'}`,
+              background: `${darkMode ? '#1d1c1cff' : 'white'}`,
               color: `${darkMode ? 'white' : 'black'}`,
               padding: '10px',
               height: outputPreviewHeight,
@@ -216,8 +218,8 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
                   sx={{
                     display: 'flex',
                     borderBottom: '1px solid',
-                    borderColor: darkMode ? '#3a4453' : '#dee2e6',
+                    borderColor: darkMode ? '#080808ff' : '#dee2e6',
-                    backgroundColor: darkMode ? '#2a3441' : '#f8f9fa'
+                    backgroundColor: darkMode ? '#080808ff' : '#f8f9fa'
                   }}
                 >
                   {availableTabs.map((tab, index) => (
@@ -228,15 +230,15 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
                         px: 4,
                         py: 2,
                         cursor: 'pointer',
-                        borderBottom: activeTab === index ? '2px solid' : 'none',
+                        // borderBottom: activeTab === index ? '2px solid' : 'none',
                         borderColor: activeTab === index ? (darkMode ? '#ff00c3' : '#ff00c3') : 'transparent',
-                        backgroundColor: activeTab === index ? (darkMode ? '#34404d' : '#e9ecef') : 'transparent',
+                        backgroundColor: activeTab === index ? (darkMode ? '#121111ff' : '#e9ecef') : 'transparent',
                         color: darkMode ? 'white' : 'black',
                         fontWeight: activeTab === index ? 500 : 400,
                         textAlign: 'center',
                         position: 'relative',
                         '&:hover': {
-                          backgroundColor: activeTab !== index ? (darkMode ? '#303b49' : '#e2e6ea') : undefined
+                          backgroundColor: activeTab !== index ? (darkMode ? '#121111ff' : '#e2e6ea') : undefined
                         }
                       }}
                     >
@@ -288,8 +290,8 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
                                 key={index}
                                 sx={{ 
                                   borderBottom: '1px solid',
-                                  borderColor: darkMode ? '#3a4453' : '#dee2e6',
+                                  borderColor: darkMode ? '#080808ff' : '#dee2e6',
-                                  backgroundColor: darkMode ? '#2a3441' : '#f8f9fa'
+                                  backgroundColor: darkMode ? '#080808ff' : '#f8f9fa'
                                 }}
                               >
                                 {field.label}
@@ -301,14 +303,13 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
                           {(captureListData[captureListPage]?.data || [])
                             .slice(0, Math.min(captureListData[captureListPage]?.limit || 10, 5))
                             .map((row: any, rowIndex: any) => (
-                              <TableRow 
+                              <TableRow
                                 key={rowIndex}
-                                sx={{ 
+                                sx={{
-                                  borderBottom: rowIndex < Math.min(
+                                  borderBottom: rowIndex < (
-                                    (captureListData[captureListPage]?.data?.length || 0),
+                                     Math.min((captureListData[captureListPage]?.data?.length || 0), Math.min(captureListData[captureListPage]?.limit || 10, 5))
-                                    Math.min(captureListData[captureListPage]?.limit || 10, 5)
                                   ) - 1 ? '1px solid' : 'none',
-                                  borderColor: darkMode ? '#3a4453' : '#dee2e6'
+                                  borderColor: darkMode ? '#080808ff' : '#dee2e6'
                                 }}
                               >
                                 {Object.values(captureListData[captureListPage]?.fields || {}).map((field: any, colIndex) => (
@@ -319,7 +320,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
                                       py: 2
                                     }}
                                   >
-                                    {row[field.label]}
+                                    {typeof row[field.label] === 'object' ? JSON.stringify(row[field.label]) : String(row[field.label] || '')}
                                   </TableCell>
                                 ))}
                               </TableRow>
@@ -379,7 +380,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
                 )}
                 
                 {(activeTab === availableTabs.findIndex(tab => tab.id === 'captureText') || singleContentType === 'captureText') && captureTextData.length > 0 && (
-                  <Box sx={{ p: 2 }}>
+                  <Box sx={{ mt: 2 }}>
                     <TableContainer component={Paper} sx={{ boxShadow: 'none', borderRadius: 0 }}>
                       <Table>
                         <TableHead>
@@ -387,8 +388,8 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
                             <TableCell 
                               sx={{ 
                                 borderBottom: '1px solid',
-                                borderColor: darkMode ? '#3a4453' : '#dee2e6',
+                                borderColor: darkMode ? '#080808ff' : '#dee2e6',
-                                backgroundColor: darkMode ? '#2a3441' : '#f8f9fa',
+                                backgroundColor: darkMode ? '#080808ff' : '#f8f9fa',
                               }}
                             >
                               Label
@@ -396,8 +397,8 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
                             <TableCell 
                               sx={{ 
                                 borderBottom: '1px solid',
-                                borderColor: darkMode ? '#3a4453' : '#dee2e6',
+                                borderColor: darkMode ? '#080808ff' : '#dee2e6',
-                                backgroundColor: darkMode ? '#2a3441' : '#f8f9fa',
+                                backgroundColor: darkMode ? '#080808ff' : '#f8f9fa',
                               }}
                             >
                               Value
@@ -410,7 +411,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
                               key={column}
                               sx={{ 
                                 borderBottom: index < getCaptureTextColumns.length - 1 ? '1px solid' : 'none',
-                                borderColor: darkMode ? '#3a4453' : '#dee2e6'
+                                borderColor: darkMode ? '#080808ff' : '#dee2e6'
                               }}
                             >
                               <TableCell 
@@ -428,7 +429,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
                                   py: 2
                                 }}
                               >
-                                {captureTextData[0][column]}
+                                {typeof captureTextData[0][column] === 'object' ? JSON.stringify(captureTextData[0][column]) : String(captureTextData[0][column] || '')}
                               </TableCell>
                             </TableRow>
                           ))}
@@ -447,7 +448,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
                     <Typography variant="h6" gutterBottom align="left">
                       {t('interpretation_log.messages.successful_training')}
                     </Typography>
-                    <SidePanelHeader onPreviewClick={() => setShowPreviewData(true)} />
+                      <SidePanelHeader onPreviewClick={() => setShowPreviewData(true)} />
                   </>
                 ) : (
                   <Typography variant="h6" gutterBottom align="left">

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',
             },
           },
@@ -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/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%",