chore: icon revamp and refactor (#2447)

* chore: svg icons added in plane/ui package

* chore: swap priority and state icon with plane/ui icons

* chore: replace core folder icons with lucide and plane ui icons

* style: priority icon size

* chore: replace icons with lucide and plane/ui icons

* chore: replace cycle folder icons with lucide and plane/ui icons

* chore: replace existing icons with lucide and plane/ui icons

* chore: replace existing icons with lucide and plane/ui icons

* chore: replace existing icons with lucide and plane/ui icons

* chore: replace existing icons with lucide and plane/ui icons

* chore: replace existing icons with lucide and plane/ui icons

* fix: build error

* fix: build error

* fix: build error

web/components/ui/dropdowns/custom-menu.tsx

@@ -9,7 +9,7 @@ import { Menu } from "@headlessui/react";
 // ui
 import { DropdownProps } from "components/ui";
 // icons
-import { ExpandMoreOutlined, MoreHorizOutlined } from "@mui/icons-material";
+import { ChevronDown, MoreHorizontal } from "lucide-react";
 
 export type CustomMenuProps = DropdownProps & {
   children: React.ReactNode;
@@ -71,7 +71,7 @@ const CustomMenu = ({
                       disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
                     } ${buttonClassName}`}
                   >
-                    <MoreHorizOutlined fontSize="small" className={verticalEllipsis ? "rotate-90" : ""} />
+                    <MoreHorizontal className={`h-3.5 w-3.5 ${verticalEllipsis ? "rotate-90" : ""}`} />
                   </button>
                 </Menu.Button>
               ) : (
@@ -88,14 +88,7 @@ const CustomMenu = ({
                     } ${buttonClassName}`}
                   >
                     {label}
-                    {!noChevron && (
-                      <ExpandMoreOutlined
-                        sx={{
-                          fontSize: 14,
-                        }}
-                        aria-hidden="true"
-                      />
-                    )}
+                    {!noChevron && <ChevronDown className="h-3.5 w-3.5" />}
                   </button>
                 </Menu.Button>
               )}

web/components/ui/dropdowns/custom-search-select.tsx

@@ -5,8 +5,7 @@ import { usePopper } from "react-popper";
 // headless ui
 import { Combobox } from "@headlessui/react";
 // icons
-import { ChevronDownIcon } from "@heroicons/react/20/solid";
-import { CheckIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+import { Check, ChevronDown, Search } from "lucide-react";
 // types
 import { DropdownProps } from "./types";
 
@@ -103,7 +102,7 @@ export const CustomSearchSelect = ({
                   } ${buttonClassName}`}
                 >
                   {label}
-                  {!noChevron && !disabled && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
+                  {!noChevron && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
                 </button>
               </Combobox.Button>
             )}
@@ -117,7 +116,7 @@ export const CustomSearchSelect = ({
                 {...attributes.popper}
               >
                 <div className="flex w-full items-center justify-start rounded-sm border-[0.6px] border-custom-border-200 bg-custom-background-90 px-2">
-                  <MagnifyingGlassIcon className="h-3 w-3 text-custom-text-200" />
+                  <Search className="h-3 w-3 text-custom-text-200" />
                   <Combobox.Input
                     className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
                     value={query}
@@ -160,10 +159,10 @@ export const CustomSearchSelect = ({
                                     active || selected ? "opacity-100" : "opacity-0"
                                   }`}
                                 >
-                                  <CheckIcon className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
+                                  <Check className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
                                 </div>
                               ) : (
-                                <CheckIcon className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
+                                <Check className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
                               )}
                             </>
                           )}

web/components/ui/dropdowns/custom-select.tsx

@@ -5,8 +5,7 @@ import { usePopper } from "react-popper";
 // headless ui
 import { Listbox } from "@headlessui/react";
 // icons
-import { ChevronDownIcon } from "@heroicons/react/20/solid";
-import { CheckIcon } from "@heroicons/react/24/outline";
+import { Check, ChevronDown } from "lucide-react";
 // types
 import { DropdownProps } from "./types";
 
@@ -73,7 +72,7 @@ const CustomSelect = ({
               } ${buttonClassName}`}
             >
               {label}
-              {!noChevron && !disabled && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
+              {!noChevron && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
             </button>
           </Listbox.Button>
         )}
@@ -120,7 +119,7 @@ const Option: React.FC<OptionProps> = ({ children, value, className }) => (
     {({ selected }) => (
       <div className="flex items-center justify-between gap-2">
         <div className="flex items-center gap-2">{children}</div>
-        {selected && <CheckIcon className="h-4 w-4 flex-shrink-0" />}
+        {selected && <Check className="h-4 w-4 flex-shrink-0" />}
       </div>
     )}
   </Listbox.Option>