Update deleted step icon and styling in flow run details

Author: Roman Snapko

packages/react-ui/src/app/features/builder/run-details/flow-step-details-card-item.tsx

@@ -6,7 +6,7 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from '@openops/components/ui';
-import { ChevronRight, TrashIcon } from 'lucide-react';
+import { ChevronRight, SquareX } from 'lucide-react';
 import React, { useCallback, useMemo } from 'react';
 
 import { blocksHooks } from '@/app/features/blocks/lib/blocks-hook';
@@ -153,12 +153,16 @@ const FlowStepDetailsCardItem = ({
                 src={stepMetadata?.logoUrl}
               />
             ) : (
-              <TrashIcon className="w-6 h-6" />
+              <SquareX className="w-6 h-6 text-muted-foreground" />
             )}
 
-            <div className="break-all truncate">{`${
-              stepIndex !== -1 ? `${stepIndex + 1}. ` : ''
-            }${step?.displayName ?? t('Deleted Step')}`}</div>
+            <div
+              className={cn('break-all truncate', {
+                'text-muted-foreground italic': !step?.displayName,
+              })}
+            >{`${stepIndex !== -1 ? `${stepIndex + 1}. ` : ''}${
+              step?.displayName ?? t('Deleted Step')
+            }`}</div>
             <div className="w-2"></div>
             <div className="flex gap-1 justify-end items-center flex-grow">
               {isLoopStep && (