feat: indicates not saved changes on steps editor's screen

frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseEditor.tsx

@@ -225,6 +225,8 @@ export default function CaseEditor({
           </Tooltip>
           <h3 className="font-bold ms-2">{testCase.title}</h3>
         </div>
+        <div className="flex items-center">
+          {isDirty && <Circle size={8} color="#525252" fill="#525252" className="me-1" />}
           <Button
             startContent={<Save size={16} />}
             size="sm"
@@ -244,6 +246,7 @@ export default function CaseEditor({
             {isUpdating ? messages.updating : messages.update}
           </Button>
         </div>
+      </div>
 
       <div className="p-5">
         <h6 className="font-bold">{messages.basic}</h6>
@@ -375,7 +378,7 @@ export default function CaseEditor({
           </div>
         ) : (
           <div>
-            <div className="flex items-center">
+            <div className="flex items-center mb-3">
               <h6 className="font-bold">{messages.steps}</h6>
               <Button
                 startContent={<Plus size={16} />}

frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseStepsEditor.tsx

@@ -1,4 +1,4 @@
-import { Textarea, Button, Tooltip } from '@nextui-org/react';
+import { Textarea, Button, Tooltip, Avatar } from '@nextui-org/react';
 import { CaseMessages, StepType } from '@/types/case';
 import { Plus, Trash } from 'lucide-react';
 
@@ -25,10 +25,10 @@ export default function StepsEditor({ isDisabled, steps, onStepUpdate, onStepPlu
   return (
     <>
       {filteredSteps.map((step, index) => (
-        <div key={index} className="flex">
-          <div className="bg-neutral-50 dark:bg-neutral-600 rounded-full flex items-center justify-center min-w-unit-8 w-unit-8 h-unit-8 mt-3 me-2">
-            <div>{step.caseSteps.stepNo}</div>
-          </div>
+        <div key={index} className="flex items-center my-1">
+          <Avatar className="me-2" size="sm" name={step.caseSteps.stepNo.toString()} />
+          <div key={step.id} className="grow flex gap-2">
+            <div className="w-1/2">
               <Textarea
                 size="sm"
                 variant="bordered"
@@ -37,9 +37,9 @@ export default function StepsEditor({ isDisabled, steps, onStepUpdate, onStepPlu
                 onValueChange={(changeValue) => {
                   onStepUpdate(step.id, { ...step, step: changeValue, editState: 'changed' });
                 }}
-            className="mt-3 me-1"
               />
-
+            </div>
+            <div className="w-1/2">
               <Textarea
                 size="sm"
                 variant="bordered"
@@ -48,9 +48,10 @@ export default function StepsEditor({ isDisabled, steps, onStepUpdate, onStepPlu
                 onValueChange={(changeValue) => {
                   onStepUpdate(step.id, { ...step, result: changeValue, editState: 'changed' });
                 }}
-            className="mt-3 ms-1"
               />
-          <div className="mt-3 ms-1">
+            </div>
+          </div>
+          <div className="flex flex-col">
             <Tooltip content={messages.deleteThisStep} placement="left">
               <Button
                 isIconOnly