some fixes

This commit is contained in:
AmitChauhan63390
2024-11-24 00:49:39 +05:30
parent 965044a173
commit f71822f844
15 changed files with 399 additions and 164 deletions

View File

@@ -12,6 +12,7 @@ import {
} from "../../api/recording";
import { Box } from "@mui/material";
import { InterpretationLog } from "../molecules/InterpretationLog";
import { Height } from "@mui/icons-material";
// TODO: Tab !show currentUrl after recordingUrl global state
export const BrowserContent = () => {
@@ -139,7 +140,7 @@ export const BrowserContent = () => {
}, [handleUrlChanged]);
return (
<div id="browser">
<div id="browser" style={{ display: "flex", flexDirection: "column"}} >
<BrowserTabs
tabs={tabs}
handleTabChange={handleTabChange}
@@ -152,10 +153,15 @@ export const BrowserContent = () => {
// todo: use width from browser dimension once fixed
browserWidth={900}
handleUrlChanged={handleUrlChanged}
/>
<BrowserWindow />
<BrowserWindow />
</div>
);
};
const BrowserContentWrapper = styled.div``;
const BrowserContentWrapper = styled.div`
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;`;

View File

@@ -319,7 +319,7 @@ export const BrowserWindow = () => {
return (
<div onClick={handleClick} style={{ width: '900px' }} id="browser-window">
<div onClick={handleClick} style={{ width: '900px', height: "400px" , borderRadius: '8px 8px 0px 0px '}} id="browser-window">
{
getText === true || getList === true ? (
<GenericModal

View File

@@ -391,7 +391,22 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
const theme = useThemeMode();
const isDarkMode = theme.darkMode;
return (
<Paper sx={{ height: '520px', width: 'auto', alignItems: "center", background: isDarkMode?'#1E2124': 'inherit',color: isDarkMode ? 'black' : 'inherit' }} id="browser-actions" elevation={0}>
<Paper
sx={{
borderRadius: '8px 8px 0px 0px', // Slightly more rounded corners for a smoother look
height: '520px',
width: 'auto',
alignItems: "center",
padding: '16px', // Add padding for spacing inside the component
background: isDarkMode
? 'linear-gradient(135deg, #1E2124 0%, #292C2F 100%)' // Subtle gradient for dark mode
: 'linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%)', // Subtle gradient for light mode
color: isDarkMode ? '#E0E0E0' : '#333333', // Adjusted color for better contrast
// Smooth transition for shadows and background changes
}}
id="browser-actions"
elevation={0}
>
{/* <SimpleBox height={60} width='100%' background='lightGray' radius='0%'>
<Typography sx={{ padding: '10px' }}>Last action: {` ${lastAction}`}</Typography>
</SimpleBox> */}
@@ -484,7 +499,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
</Box>
<Box>
{browserSteps.map(step => (
<Box key={step.id} onMouseEnter={() => handleMouseEnter(step.id)} onMouseLeave={() => handleMouseLeave(step.id)} sx={{ padding: '10px', margin: '11px', borderRadius: '5px', position: 'relative', background: 'white' }}>
<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' }}>
{
step.type === 'text' && (
<>
@@ -520,7 +535,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
</InputAdornment>
)
}}
sx={{ background: isDarkMode ? "#1E2124" : 'white', color: isDarkMode ? "white" : 'black' }}
/>
{!confirmedTextSteps[step.id] && (
<Box display="flex" justifyContent="space-between" gap={2}>
@@ -542,7 +557,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
<>
<Typography>List Selected Successfully</Typography>
{Object.entries(step.fields).map(([key, field]) => (
<Box key={key}>
<Box key={key} sx={{ padding: '10px', margin: '11px', borderRadius: '5px', position: 'relative', background: `${isDarkMode ? "#1E2124" : 'white'}` }}>
<TextField
label="Field Label"
value={field.label || ''}
@@ -558,7 +573,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
)
}}
style={{ background: isDarkMode ? "#1E2124" : 'white' }}
/>
<TextField
label="Field Data"
@@ -573,7 +588,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
</InputAdornment>
)
}}
style={{ background: isDarkMode ? "#1E2124" : 'white' }}
/>
{!confirmedListTextFields[step.id]?.[key] && (
<Box display="flex" justifyContent="space-between" gap={2}>