More variants of the runs icon to work at smaller sizes

Author: samejr

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

@@ -16,3 +16,41 @@ export function RunsIcon({ className }: { className?: string }) {
     </svg>
   );
 }
+
+export function RunsIconSmall({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17.6527 7.18006C18.145 6.86034 18.145 6.1396 17.6527 5.81987L12.2525 2.31329C11.713 1.96299 11 2.35016 11 2.99339L11 4.99998L4.40545 4.99998C4.18153 4.99998 4 5.1815 4 5.40543V7.59453C4 7.81845 4.18153 7.99998 4.40545 7.99998L11 7.99998L11 10.0065C11 10.6498 11.713 11.037 12.2525 10.6866L17.6527 7.18006Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.4064 14.4748C10.7107 14.2314 10.7107 13.7685 10.4064 13.525L6.98808 10.7904C6.58987 10.4718 5.99998 10.7554 5.99998 11.2653L5.99998 13L2.40539 13C2.18147 13 1.99994 13.1815 1.99994 13.4054V14.5945C1.99994 14.8185 2.18147 15 2.40539 15L5.99998 15L5.99999 16.7346C5.99999 17.2445 6.58987 17.528 6.98808 17.2095L10.4064 14.4748Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export function RunsIconExtraSmall({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M15.6332 6.60006C16.0524 6.30985 16.0525 5.69018 15.6333 5.39997L11.1452 2.29277C10.6612 1.95767 9.99998 2.3041 9.99998 2.89281L9.99998 4.5L4.3649 4.5C4.16337 4.5 4 4.66337 4 4.8649V7.13509C4 7.33663 4.16337 7.5 4.3649 7.5L9.99998 7.5V9.10703C9.99998 9.69574 10.6612 10.0422 11.1452 9.70708L15.6332 6.60006Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.46572 12.9274C9.73962 12.7083 9.73961 12.2917 9.46572 12.0726L5.88926 9.21142C5.53087 8.92471 4.99998 9.17988 4.99998 9.63884V11.25L2.3649 11.25C2.16337 11.25 2 11.4134 2 11.6149V13.3851C2 13.5866 2.16337 13.75 2.3649 13.75L4.99998 13.75V15.3612C4.99998 15.8202 5.53088 16.0754 5.88927 15.7887L9.46572 12.9274Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

apps/webapp/app/components/navigation/SideMenu.tsx

@@ -21,7 +21,7 @@ import { useNavigation } from "@remix-run/react";
 import { useEffect, useRef, useState, type ReactNode } from "react";
 import simplur from "simplur";
 import { ConnectedIcon, DisconnectedIcon } from "~/assets/icons/ConnectionIcons";
-import { RunsIcon } from "~/assets/icons/RunsIcon";
+import { RunsIconExtraSmall, RunsIconSmall } from "~/assets/icons/RunsIcon";
 import { TaskIconSmall } from "~/assets/icons/TaskIcon";
 import { Avatar } from "~/components/primitives/Avatar";
 import { type MatchedEnvironment } from "~/hooks/useEnvironment";
@@ -170,7 +170,7 @@ export function SideMenu({
             />
             <SideMenuItem
               name="Runs"
-              icon={RunsIcon}
+              icon={RunsIconExtraSmall}
               activeIconColor="text-runs"
               to={v3RunsPath(organization, project, environment)}
             />