vodorod/parcer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
wip: dark mode v1
This commit is contained in:
Karishma
2025-10-21 19:25:58 +05:30
committed by GitHub
parent 6145f97dfd ded47fd733
commit 72751c75be
16 changed files with 67 additions and 1302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/action/ActionDescriptionBox.tsx
View File

@@ -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`

6
src/components/browser/BrowserNavBar.tsx
View File

@@ -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')};
}
`;

2
src/components/browser/BrowserTabs.tsx
View File

@@ -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
},
}}

6
src/components/dashboard/MainMenu.tsx
View File

@@ -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 { AutoAwesome, VpnKey, Usb, CloudQueue, Description, Favorite, SlowMotionVideo, PlayArrow } from "@mui/icons-material";
import { Paper, Button, useTheme, Modal, Typography, Stack, Divider } from "@mui/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)}

4
src/components/dashboard/NavBar.tsx
View File

@@ -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' }>`

3
src/components/recorder/RightSidePanel.tsx
View File

@@ -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')}

4
src/components/robot/RecordingsTable.tsx
View File

@@ -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

172
src/components/robot/RobotDuplicate.tsx
View File

@@ -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>
);
};

586
src/components/robot/RobotEdit.tsx
View File

@@ -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>
);
};

173
src/components/robot/RobotSettings.tsx
View File

@@ -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",
};

314
src/components/robot/ScheduleSettings.tsx
View File

@@ -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',
};

47
src/components/run/InterpretationLog.tsx
View File

@@ -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',
backgroundColor: darkMode ? '#2a3441' : '#f8f9fa'
borderColor: darkMode ? '#080808ff' : '#dee2e6',
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',
backgroundColor: darkMode ? '#2a3441' : '#f8f9fa'
borderColor: darkMode ? '#080808ff' : '#dee2e6',
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={{
borderBottom: rowIndex < Math.min(
(captureListData[captureListPage]?.data?.length || 0),
Math.min(captureListData[captureListPage]?.limit || 10, 5)
sx={{
borderBottom: rowIndex < (
Math.min((captureListData[captureListPage]?.data?.length || 0), 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',
backgroundColor: darkMode ? '#2a3441' : '#f8f9fa',
borderColor: darkMode ? '#080808ff' : '#dee2e6',
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',
backgroundColor: darkMode ? '#2a3441' : '#f8f9fa',
borderColor: darkMode ? '#080808ff' : '#dee2e6',
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">

31
src/context/theme-provider.tsx
View File

@@ -93,8 +93,8 @@ const darkTheme = createTheme({
contrastText: '#ffffff',
},
background: {
default: '#121212',
paper: '#1e1e1e',
default: '#000000ff',
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;

7
src/pages/Login.tsx
View File

@@ -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>

2
src/pages/RecordingPage.tsx
View File

@@ -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%)';

8
src/pages/Register.tsx
View File

@@ -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}
width={60}
height={60}
width={70}
style={{
marginBottom: 20,
borderRadius: "20%",