Replace FileIcon with FolderIcon for folder UI elements (#4607)

Co-authored-by: Suchintan Singh <suchintan@skyvern.com>

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

@@ -0,0 +1,23 @@
+type Props = {
+  className?: string;
+};
+
+function FolderIcon({ className }: Props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="15"
+      height="15"
+      viewBox="0 0 15 15"
+      fill="none"
+      className={className}
+    >
+      <path
+        d="M2 3.5C2 3.22386 2.22386 3 2.5 3H5.5C5.64184 3 5.77652 3.05996 5.86853 3.16438L6.86853 4.33562C6.96054 4.44004 7.09522 4.5 7.23706 4.5H12.5C12.7761 4.5 13 4.72386 13 5V11.5C13 11.7761 12.7761 12 12.5 12H2.5C2.22386 12 2 11.7761 2 11.5V3.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export { FolderIcon };

skyvern-frontend/src/routes/workflows/Workflows.tsx

@@ -29,7 +29,6 @@ import {
   BookmarkFilledIcon,
   ChevronDownIcon,
   DotsHorizontalIcon,
-  FileIcon,
   LightningBoltIcon,
   MixerHorizontalIcon,
   Pencil2Icon,
@@ -37,6 +36,7 @@ import {
   PlusIcon,
   ReloadIcon,
 } from "@radix-ui/react-icons";
+import { FolderIcon } from "@/components/icons/FolderIcon";
 import { useQuery } from "@tanstack/react-query";
 import React, { useEffect, useMemo, useState } from "react";
 import { useNavigate, useSearchParams } from "react-router-dom";
@@ -351,7 +351,7 @@ function Workflows() {
           ) : (
             <div className="rounded-lg border border-slate-200 bg-slate-elevation1 py-6 text-center dark:border-slate-700">
               <div className="mx-auto max-w-md">
-                <FileIcon className="mx-auto mb-3 h-10 w-10 text-blue-400 opacity-50" />
+                <FolderIcon className="mx-auto mb-3 h-10 w-10 text-blue-400 opacity-50" />
                 <h3 className="mb-2 text-slate-900 dark:text-slate-100">
                   Organize Your Workflows with Folders
                 </h3>
@@ -524,7 +524,7 @@ function Workflows() {
                           <TableCell>
                             <div className="flex justify-end gap-2">
                               <Button size="icon" variant="ghost" disabled>
-                                <FileIcon className="h-4 w-4" />
+                                <FolderIcon className="h-4 w-4" />
                               </Button>
                               <Button size="icon" variant="ghost" disabled>
                                 <MixerHorizontalIcon className="h-4 w-4" />
@@ -588,7 +588,7 @@ function Workflows() {
                           >
                             {workflow.folder_id ? (
                               <div className="flex items-center gap-1.5">
-                                <FileIcon className="h-3.5 w-3.5 text-blue-400" />
+                                <FolderIcon className="h-3.5 w-3.5 text-blue-400" />
                                 <span className="text-sm">
                                   <HighlightText
                                     text={

skyvern-frontend/src/routes/workflows/components/FolderCard.tsx

@@ -1,4 +1,5 @@
-import { FileIcon, Pencil1Icon } from "@radix-ui/react-icons";
+import { Pencil1Icon } from "@radix-ui/react-icons";
+import { FolderIcon } from "@/components/icons/FolderIcon";
 import { cn } from "@/util/utils";
 import type { Folder } from "../types/folderTypes";
 import { DeleteFolderButton } from "./DeleteFolderButton";
@@ -36,7 +37,7 @@ function FolderCard({ folder, isSelected, onClick }: FolderCardProps) {
       >
         <div className="flex items-start gap-3">
           <div className="mt-0.5">
-            <FileIcon className="h-5 w-5 text-blue-400" />
+            <FolderIcon className="h-5 w-5 text-blue-400" />
           </div>
           <div className="flex min-w-0 flex-1 flex-col gap-1">
             <div className="flex items-start justify-between gap-2">

skyvern-frontend/src/routes/workflows/components/WorkflowFolderSelector.tsx

@@ -2,10 +2,10 @@ import { useState, useMemo } from "react";
 import {
   CheckIcon,
   Cross2Icon,
-  FileIcon,
   MagnifyingGlassIcon,
   ReloadIcon,
 } from "@radix-ui/react-icons";
+import { FolderIcon } from "@/components/icons/FolderIcon";
 import { Button } from "@/components/ui/button";
 import {
   Popover,
@@ -67,7 +67,7 @@ function WorkflowFolderSelector({
             currentFolderId ? "text-blue-400" : "text-slate-400",
           )}
         >
-          <FileIcon className="h-4 w-4" />
+          <FolderIcon className="h-4 w-4" />
         </Button>
       </PopoverTrigger>
       <PopoverContent
@@ -143,7 +143,7 @@ function WorkflowFolderSelector({
                     className="flex w-full items-center justify-between px-3 py-2 text-left text-sm transition-colors hover:bg-slate-50 disabled:opacity-50 dark:hover:bg-slate-800"
                   >
                     <div className="flex items-center gap-2">
-                      <FileIcon className="h-4 w-4 text-blue-400" />
+                      <FolderIcon className="h-4 w-4 text-blue-400" />
                       <div className="flex flex-col">
                         <span>{folder.title}</span>
                         {folder.description && (