Improve version history icon to better represent document versions (#SKY-7370) (#4640)

skyvern-frontend/src/components/icons/VersionHistoryIcon.tsx

@@ -0,0 +1,36 @@
+import { CounterClockwiseClockIcon, FileTextIcon } from "@radix-ui/react-icons";
+
+type Props = {
+  /** Size of the main document icon in pixels */
+  size?: number;
+  /** Additional class names */
+  className?: string;
+};
+
+function VersionHistoryIcon({ size = 24, className = "" }: Props) {
+  // Calculate relative size for the history icon (overlay)
+  const historySize = Math.round(size * 0.6);
+
+  return (
+    <div
+      className={`relative inline-flex items-center justify-center ${className}`}
+      style={{ width: size, height: size }}
+      aria-label="Version History"
+    >
+      {/* Main Document Icon */}
+      <FileTextIcon width={size} height={size} />
+
+      {/* Overlay History Icon - Bottom Left */}
+      <div
+        className="absolute bottom-0 left-0 rounded-full bg-slate-elevation2"
+        style={{
+          transform: "translate(-20%, 20%)",
+        }}
+      >
+        <CounterClockwiseClockIcon width={historySize} height={historySize} />
+      </div>
+    </div>
+  );
+}
+
+export { VersionHistoryIcon };

skyvern-frontend/src/routes/workflows/editor/WorkflowHeader.tsx

@@ -3,7 +3,6 @@ import {
   BookmarkIcon,
   ChevronDownIcon,
   ChevronUpIcon,
-  ClockIcon,
   CodeIcon,
   CopyIcon,
   PlayIcon,
@@ -13,6 +12,7 @@ import { useEffect, useRef, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { SaveIcon } from "@/components/icons/SaveIcon";
 import { BrowserIcon } from "@/components/icons/BrowserIcon";
+import { VersionHistoryIcon } from "@/components/icons/VersionHistoryIcon";
 import { Button } from "@/components/ui/button";
 import {
   Tooltip,
@@ -386,7 +386,7 @@ function WorkflowHeader({
                         onHistory?.();
                       }}
                     >
-                      <ClockIcon className="size-6" />
+                      <VersionHistoryIcon size={24} />
                     </Button>
                   </TooltipTrigger>
                   <TooltipContent>History</TooltipContent>