feat: icons for capture text

This commit is contained in:
karishmas6
2024-08-06 06:04:22 +05:30
parent 3efd0a8e9e
commit cc734f86d6

View File

@@ -1,5 +1,7 @@
import React, { useState, useCallback } from 'react'; import React, { useState, useCallback } from 'react';
import { Button, Paper, Box, TextField } from "@mui/material"; import { Button, Paper, Box, TextField } from "@mui/material";
import EditIcon from '@mui/icons-material/Edit';
import TextFieldsIcon from '@mui/icons-material/TextFields';
import styled from "styled-components"; import styled from "styled-components";
import { SimpleBox } from "../atoms/Box"; import { SimpleBox } from "../atoms/Box";
import Typography from "@mui/material/Typography"; import Typography from "@mui/material/Typography";
@@ -8,6 +10,8 @@ import { useActionContext } from '../../context/browserActions';
import { useBrowserSteps } from '../../context/browserSteps'; import { useBrowserSteps } from '../../context/browserSteps';
import { useSocketStore } from '../../context/socket'; import { useSocketStore } from '../../context/socket';
import { ScreenshotSettings } from '../../shared/types'; import { ScreenshotSettings } from '../../shared/types';
import InputAdornment from '@mui/material/InputAdornment';
export const RightSidePanel = () => { export const RightSidePanel = () => {
const [textLabels, setTextLabels] = useState<{ [id: number]: string }>({}); const [textLabels, setTextLabels] = useState<{ [id: number]: string }>({});
@@ -130,14 +134,28 @@ export const RightSidePanel = () => {
margin="normal" margin="normal"
error={!!errors[step.id]} error={!!errors[step.id]}
helperText={errors[step.id]} helperText={errors[step.id]}
InputProps={{ readOnly: confirmedTextSteps[step.id] }} InputProps={{
readOnly: confirmedTextSteps[step.id],
startAdornment: (
<InputAdornment position="start">
<EditIcon />
</InputAdornment>
)
}}
/> />
<TextField <TextField
label="Data" label="Data"
value={step.data} value={step.data}
fullWidth fullWidth
margin="normal" margin="normal"
InputProps={{ readOnly: confirmedTextSteps[step.id] }} InputProps={{
readOnly: confirmedTextSteps[step.id],
startAdornment: (
<InputAdornment position="start">
<TextFieldsIcon />
</InputAdornment>
)
}}
/> />
{!confirmedTextSteps[step.id] && ( {!confirmedTextSteps[step.id] && (
<Box display="flex" justifyContent="space-between" gap={2}> <Box display="flex" justifyContent="space-between" gap={2}>