Switch to a custom icon for recent runs button

Author: myftija

apps/webapp/app/assets/icons/ClockRotateLeftIcon.tsx

@@ -0,0 +1,15 @@
+export function ClockRotateLeftIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M4.01784 10.9999C4.27072 9.07068 5.21806 7.29972 6.68252 6.01856C8.14697 4.73741 10.0282 4.03389 11.9739 4.03971C13.9197 4.04553 15.7966 4.76028 17.2534 6.05017C18.7101 7.34006 19.6469 9.11666 19.8882 11.0474C20.1296 12.9781 19.659 14.9306 18.5645 16.5394C17.4701 18.1482 15.8268 19.303 13.9424 19.7876C12.0579 20.2722 10.0615 20.0534 8.32671 19.1721C6.59196 18.2909 5.23784 16.8076 4.51784 14.9999M4.01784 19.9999L4.01784 14.9999L9.01784 14.9999"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path d="M12 12L12 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+      <path d="M12 12L14 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+    </svg>
+  );
+}

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test.tasks.$taskParam/route.tsx

@@ -1,7 +1,6 @@
 import { conform, useForm } from "@conform-to/react";
 import { parse } from "@conform-to/zod";
 import { BeakerIcon, RectangleStackIcon } from "@heroicons/react/20/solid";
-import { ClockIcon } from "@heroicons/react/24/outline";
 import { type ActionFunction, type LoaderFunctionArgs, json } from "@remix-run/server-runtime";
 import { useCallback, useEffect, useRef, useState, useMemo } from "react";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
@@ -57,6 +56,7 @@ import { RunTagInput } from "~/components/runs/v3/RunTagInput";
 import { type loader as queuesLoader } from "~/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues";
 import { DateTime } from "~/components/primitives/DateTime";
 import { TaskRunStatusCombo } from "~/components/runs/v3/TaskRunStatus";
+import { ClockRotateLeftIcon } from "~/assets/icons/ClockRotateLeftIcon";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const userId = await requireUserId(request);
@@ -1118,7 +1118,7 @@ function RecentRunsPopover<T extends StandardRun | ScheduledRun>({
               <Button
                 type="button"
                 variant="tertiary/small"
-                LeadingIcon={ClockIcon}
+                LeadingIcon={ClockRotateLeftIcon}
                 disabled={true}
               >
                 Recent runs
@@ -1127,7 +1127,7 @@ function RecentRunsPopover<T extends StandardRun | ScheduledRun>({
             content="No runs yet"
           />
         ) : (
-          <Button type="button" variant="tertiary/small" LeadingIcon={ClockIcon}>
+          <Button type="button" variant="tertiary/small" LeadingIcon={ClockRotateLeftIcon}>
             Recent runs
           </Button>
         )}