feat: better format for browser steps

src/components/organisms/RightSidePanel.tsx

@@ -177,7 +177,7 @@ export const RightSidePanel = () => {
         {browserSteps.map(step => (
           <Box key={step.id} sx={{ boxShadow: 5, padding: '10px', margin: '10px', borderRadius: '4px' }}>
             {
-              step.type === 'text' ? (
+              step.type === 'text' && (
                 <>
                   <TextField
                     label="Label"
@@ -217,26 +217,24 @@ export const RightSidePanel = () => {
                     </Box>
                   )}
                 </>
-              ) : (
+              )}
-                step.type === 'screenshot' ? (
+              {step.type === 'screenshot' && (
               <Box display="flex" alignItems="center">
                 <DocumentScannerIcon sx={{ mr: 1 }} />
                 <Typography>
                   {`Take ${step.fullPage ? 'Fullpage' : 'Visible Part'} Screenshot`}
                 </Typography>
               </Box>
-                ) : (
+              )}
-                  step.type === 'list' && step.listSelector && (
+                  {step.type === 'list' && (
               <>
-                      <Typography>
+                <Typography>List Selected Successfully</Typography>
-                      List Selected Successfully
+                {Object.entries(step.fields).map(([key, field]) => (
-                    </Typography>
+                  <Box key={key}>
-                      {Object.keys(step.fields).length > 0 && Object.entries(step.fields).map(([key, field]) => (
-                        <React.Fragment key={key}>
                     <TextField
                       label="Field Label"
                       value={field.label || ''}
-                            onChange={() => { }}
+                      onChange={() => {}}
                       fullWidth
                       margin="normal"
                       InputProps={{
@@ -261,20 +259,13 @@ export const RightSidePanel = () => {
                         )
                       }}
                     />
-                        </React.Fragment>
+                  </Box>
                 ))}
               </>
-                  )
+            )}
-                )
-              )
-            }
           </Box>
         ))}
       </Box>
     </Paper>
   );
 };
-
-export const ActionDescription = styled.p`
-  margin-left: 15px;
-`;