fix(ui): uxt fixes

frontend/app/components/UsabilityTesting/SidePanel.tsx

@@ -30,6 +30,11 @@ const SidePanel = observer(({ onSave, onPreview, taskLen }: any) => {
             unCheckedChildren="No"
           />
         </div>
+        <div className={'text-disabled-text text-sm'}>
+          If required, enable camera and mic access to observe participants' facial expressions and
+          verbal feedback in real-time, providing deeper insights into their user experience during
+          the test.
+        </div>
       </div>
 
       <Tooltip title={taskLen === 0 ? 'Define the starting point and the tasks to proceed.' : ''}>

frontend/app/components/UsabilityTesting/StepsModal.tsx

@@ -2,10 +2,10 @@ import { UxTask } from "App/services/UxtestingService";
 import React from 'react'
 import { Button, Input, Switch, Typography } from 'antd'
 
-function StepsModal({ onAdd, onHide }: { onAdd: (step: UxTask) => void; onHide: () => void }) {
-  const [title, setTitle] = React.useState('');
-  const [description, setDescription] = React.useState('');
-  const [isAnswerEnabled, setIsAnswerEnabled] = React.useState(false);
+function StepsModal({ onAdd, onHide, editTask }: { onAdd: (step: UxTask) => void; onHide: () => void, editTask?: UxTask }) {
+  const [title, setTitle] = React.useState(editTask?.title ?? '');
+  const [description, setDescription] = React.useState(editTask?.description ?? '');
+  const [isAnswerEnabled, setIsAnswerEnabled] = React.useState(editTask?.allowTyping ?? false);
 
   const save = () => {
     onAdd({
@@ -55,7 +55,7 @@ function StepsModal({ onAdd, onHide }: { onAdd: (step: UxTask) => void; onHide:
       </div>
       <div className={'flex gap-2'}>
         <Button type={'primary'} onClick={save} disabled={title === ''}>
-          Add
+          {editTask ? 'Save' : 'Add'}
         </Button>
         <Button onClick={onHide}>Cancel</Button>
       </div>

frontend/app/components/UsabilityTesting/TestEdit.tsx

@@ -231,7 +231,20 @@ function TestEdit() {
                 description={task.description}
                 buttons={
                   <>
-                    <Button size={'small'} icon={<EditOutlined rev={undefined} />} />
+                    <Button size={'small'} icon={<EditOutlined rev={undefined} />} onClick={() => {
+                      showModal(
+                        <StepsModal
+                          editTask={task}
+                          onHide={hideModal}
+                          onAdd={(task) => {
+                            const tasks = [...uxtestingStore.instance!.tasks];
+                            tasks[index] = task;
+                            uxtestingStore.instance!.setProperty('tasks', tasks);
+                          }}
+                        />,
+                        { right: true, width: 600 }
+                      )
+                    }} />
                     <Button
                       onClick={() => {
                         uxtestingStore.instance!.setProperty(