refactor: migrate admin icons to @makeplane/propel

apps/admin/app/(all)/(dashboard)/ai/form.tsx

@@ -5,7 +5,7 @@
  */
 
 import { useForm } from "react-hook-form";
-import { Lightbulb } from "lucide-react";
+import { ThoughtsOutline } from "@makeplane/propel/icons";
 import { Button } from "@makeplane/propel/components/button";
 import type { IFormattedInstanceConfiguration, TInstanceAIConfigurationKeys } from "@plane/types";
 // components
@@ -133,7 +133,7 @@ export function InstanceAIForm(props: IInstanceAIForm) {
         />
 
         <div className="relative inline-flex items-center gap-1.5 rounded-sm border border-accent-subtle bg-accent-subtle px-4 py-2 text-caption-sm-regular text-accent-secondary">
-          <Lightbulb className="size-4" />
+          <ThoughtsOutline className="size-4" />
           <div>
             If you have a preferred AI models vendor, please get in{" "}
             <a className="font-medium underline" href="https://plane.so/contact">

apps/admin/app/(all)/(dashboard)/authentication/github/form.tsx

@@ -8,7 +8,7 @@ import { useState } from "react";
 import { isEmpty } from "lodash-es";
 import Link from "next/link";
 import { useForm } from "react-hook-form";
-import { Monitor } from "lucide-react";
+import { MonitorOutline } from "@makeplane/propel/icons";
 // plane internal packages
 import { API_BASE_URL } from "@plane/constants";
 import { Button } from "@makeplane/propel/components/button";
@@ -248,7 +248,7 @@ export function InstanceGithubConfigForm(props: Props) {
               {/* web service details */}
               <div className="flex flex-col overflow-hidden rounded-lg">
                 <div className="flex items-center gap-x-3 bg-layer-3 px-6 py-3 text-11 font-medium text-secondary uppercase">
-                  <Monitor className="h-3 w-3" />
+                  <MonitorOutline className="h-3 w-3" />
                   Web
                 </div>
                 <div className="flex flex-col gap-y-4 bg-layer-1 px-6 py-4">

apps/admin/app/(all)/(dashboard)/authentication/google/form.tsx

@@ -8,7 +8,7 @@ import { useState } from "react";
 import { isEmpty } from "lodash-es";
 import Link from "next/link";
 import { useForm } from "react-hook-form";
-import { Monitor } from "lucide-react";
+import { MonitorOutline } from "@makeplane/propel/icons";
 // plane internal packages
 import { API_BASE_URL } from "@plane/constants";
 import { Button } from "@makeplane/propel/components/button";
@@ -240,7 +240,7 @@ export function InstanceGoogleConfigForm(props: Props) {
               {/* web service details */}
               <div className="flex flex-col overflow-hidden rounded-lg">
                 <div className="flex items-center gap-x-3 bg-layer-3 px-6 py-3 text-11 font-medium text-secondary uppercase">
-                  <Monitor className="h-3 w-3" />
+                  <MonitorOutline className="h-3 w-3" />
                   Web
                 </div>
                 <div className="flex flex-col gap-y-4 bg-layer-1 px-6 py-4">

apps/admin/app/(all)/(dashboard)/general/form.tsx

@@ -6,7 +6,7 @@
 
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
-import { Telescope } from "lucide-react";
+import { UsageOutline } from "@makeplane/propel/icons";
 // plane imports
 import { Button } from "@makeplane/propel/components/button";
 import { Input } from "@makeplane/propel/components/input";
@@ -101,7 +101,7 @@ export const GeneralConfigurationForm = observer(function GeneralConfigurationFo
           <div className="flex grow items-center gap-4">
             <div className="shrink-0">
               <div className="flex size-11 items-center justify-center rounded-lg bg-layer-1">
-                <Telescope className="size-5 text-tertiary" />
+                <UsageOutline className="size-5 text-tertiary" />
               </div>
             </div>
             <div className="grow">

apps/admin/app/(all)/(dashboard)/sidebar-dropdown.tsx

@@ -7,7 +7,7 @@
 import { Fragment, useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { useTheme as useNextTheme } from "next-themes";
-import { LogOut, UserCog2, Palette } from "lucide-react";
+import { AccessAndRolesOutline, LogOutOutline, PaletteOutline } from "@makeplane/propel/icons";
 import { Menu, Transition } from "@headlessui/react";
 // plane internal packages
 import { API_BASE_URL } from "@plane/constants";
@@ -55,7 +55,7 @@ export const AdminSidebarDropdown = observer(function AdminSidebarDropdown() {
           className="flex w-full items-center gap-2 rounded-sm px-2 py-1 hover:bg-layer-1-hover"
           onClick={handleThemeSwitch}
         >
-          <Palette className="h-4 w-4 stroke-[1.5]" />
+          <PaletteOutline className="h-4 w-4 stroke-[1.5]" />
           Switch to {resolvedTheme === "dark" ? "light" : "dark"} mode
         </Menu.Item>
       </div>
@@ -67,7 +67,7 @@ export const AdminSidebarDropdown = observer(function AdminSidebarDropdown() {
             type="submit"
             className="flex w-full items-center gap-2 rounded-sm px-2 py-1 hover:bg-layer-1-hover"
           >
-            <LogOut className="h-4 w-4 stroke-[1.5]" />
+            <LogOutOutline className="h-4 w-4 stroke-[1.5]" />
             Sign out
           </Menu.Item>
         </form>
@@ -95,7 +95,7 @@ export const AdminSidebarDropdown = observer(function AdminSidebarDropdown() {
               })}
             >
               <div className="flex size-8 flex-shrink-0 items-center justify-center rounded-sm bg-layer-1">
-                <UserCog2 className="size-5 text-primary" />
+                <AccessAndRolesOutline className="size-5 text-primary" />
               </div>
             </Menu.Button>
             {isSidebarCollapsed && (

apps/admin/app/(all)/(dashboard)/sidebar-help-section.tsx

@@ -7,12 +7,18 @@
 import { useState, useRef } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
-import { HelpCircle, MessageSquare, MoveLeft } from "lucide-react";
 import { Transition } from "@headlessui/react";
 import { WEB_BASE_URL } from "@plane/constants";
 // plane internal packages
 import { Tooltip } from "@makeplane/propel/components/tooltip";
-import { Github, NewTabOutline, PagesOutline } from "@makeplane/propel/icons";
+import {
+  ArrowNarrowLeftOutline,
+  ChatOutline,
+  Github,
+  HelpOutline,
+  NewTabOutline,
+  PagesOutline,
+} from "@makeplane/propel/icons";
 import { cn } from "@plane/utils";
 // hooks
 import { useInstance, useTheme } from "@/hooks/store";
@@ -27,7 +33,7 @@ const helpOptions = [
   {
     name: "Join our Forum",
     href: "https://forum.plane.so",
-    Icon: MessageSquare,
+    Icon: ChatOutline,
   },
   {
     name: "Report a bug",
@@ -87,7 +93,7 @@ export const AdminSidebarHelpSection = observer(function AdminSidebarHelpSection
             }`}
             onClick={() => setIsNeedHelpOpen((prev) => !prev)}
           >
-            <HelpCircle className="size-4" />
+            <HelpOutline className="size-4" />
           </button>
         </Tooltip>
         <Tooltip label="Toggle sidebar" side={isSidebarCollapsed ? "right" : "top"}>
@@ -99,7 +105,7 @@ export const AdminSidebarHelpSection = observer(function AdminSidebarHelpSection
             }`}
             onClick={() => toggleSidebar(!isSidebarCollapsed)}
           >
-            <MoveLeft className={`size-4 duration-300 ${isSidebarCollapsed ? "rotate-180" : ""}`} />
+            <ArrowNarrowLeftOutline className={`size-4 duration-300 ${isSidebarCollapsed ? "rotate-180" : ""}`} />
           </button>
         </Tooltip>
       </div>

apps/admin/app/(all)/(dashboard)/workspace/page.tsx

@@ -8,7 +8,7 @@ import { useState } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import useSWR from "swr";
-import { Loader as LoaderIcon } from "lucide-react";
+import { LoadingOutline as LoaderIcon } from "@makeplane/propel/icons";
 // types
 import { AnchorButton } from "@makeplane/propel/components/anchor-button";
 import { Button } from "@makeplane/propel/components/button";

apps/admin/app/(all)/(home)/auth-banner.tsx

@@ -4,11 +4,10 @@
  * See the LICENSE file for details.
  */
 
-import { Info } from "lucide-react";
 // plane constants
 import type { TAdminAuthErrorInfo } from "@plane/constants";
 // icons
-import { CloseOutline } from "@makeplane/propel/icons";
+import { CloseOutline, InfoOutline } from "@makeplane/propel/icons";
 
 type TAuthBanner = {
   bannerData: TAdminAuthErrorInfo | undefined;
@@ -22,7 +21,7 @@ export function AuthBanner(props: TAuthBanner) {
   return (
     <div className="relative flex items-center gap-2 rounded-md border border-accent-strong/50 bg-accent-primary/10 p-2">
       <div className="relative flex h-4 w-4 flex-shrink-0 items-center justify-center">
-        <Info size={16} className="text-accent-primary" />
+        <InfoOutline width={16} height={16} className="text-accent-primary" />
       </div>
       <div className="w-full text-13 font-medium text-accent-primary">{bannerData?.message}</div>
       <button

apps/admin/app/(all)/(home)/sign-in-form.tsx

@@ -6,7 +6,7 @@
 
 import { useEffect, useMemo, useState } from "react";
 import { useSearchParams } from "next/navigation";
-import { Eye, EyeOff } from "lucide-react";
+import { HideOutline, ShowOutline } from "@makeplane/propel/icons";
 // plane internal packages
 import type { EAdminAuthErrorCodes, TAdminAuthErrorInfo } from "@plane/constants";
 import { API_BASE_URL } from "@plane/constants";
@@ -172,7 +172,7 @@ export function InstanceSignInForm() {
                     className="flex items-center justify-center text-placeholder"
                     onClick={() => setShowPassword(false)}
                   >
-                    <EyeOff className="h-4 w-4" />
+                    <HideOutline className="h-4 w-4" />
                   </button>
                 ) : (
                   <button
@@ -181,7 +181,7 @@ export function InstanceSignInForm() {
                     className="flex items-center justify-center text-placeholder"
                     onClick={() => setShowPassword(true)}
                   >
-                    <Eye className="h-4 w-4" />
+                    <ShowOutline className="h-4 w-4" />
                   </button>
                 )}
               </InputGroup>

apps/admin/components/authentication/gitea-config.tsx

@@ -7,7 +7,7 @@
 import { observer } from "mobx-react";
 import Link from "next/link";
 // icons
-import { Settings2 } from "lucide-react";
+import { SettingsOutline } from "@makeplane/propel/icons";
 // plane internal packages
 import { AnchorButton } from "@makeplane/propel/components/anchor-button";
 import { Button } from "@makeplane/propel/components/button";
@@ -59,7 +59,7 @@ export const GiteaConfiguration = observer(function GiteaConfiguration(props: Pr
           stretch="auto"
           nativeButton={false}
           render={<Link href="/authentication/gitea" />}
-          icon={<Settings2 className="h-4 w-4 p-0.5 text-tertiary" />}
+          icon={<SettingsOutline className="h-4 w-4 p-0.5 text-tertiary" />}
           label="Configure"
         />
       )}

apps/admin/components/authentication/github-config.tsx

@@ -7,7 +7,7 @@
 import { observer } from "mobx-react";
 import Link from "next/link";
 // icons
-import { Settings2 } from "lucide-react";
+import { SettingsOutline } from "@makeplane/propel/icons";
 // plane internal packages
 import { AnchorButton } from "@makeplane/propel/components/anchor-button";
 import { Button } from "@makeplane/propel/components/button";
@@ -57,7 +57,7 @@ export const GithubConfiguration = observer(function GithubConfiguration(props:
           stretch="auto"
           nativeButton={false}
           render={<Link href="/authentication/github" />}
-          icon={<Settings2 className="h-4 w-4 p-0.5 text-tertiary" />}
+          icon={<SettingsOutline className="h-4 w-4 p-0.5 text-tertiary" />}
           label="Configure"
         />
       )}

apps/admin/components/authentication/gitlab-config.tsx

@@ -7,7 +7,7 @@
 import { observer } from "mobx-react";
 import Link from "next/link";
 // icons
-import { Settings2 } from "lucide-react";
+import { SettingsOutline } from "@makeplane/propel/icons";
 // plane internal packages
 import { AnchorButton } from "@makeplane/propel/components/anchor-button";
 import { Button } from "@makeplane/propel/components/button";
@@ -57,7 +57,7 @@ export const GitlabConfiguration = observer(function GitlabConfiguration(props:
           stretch="auto"
           nativeButton={false}
           render={<Link href="/authentication/gitlab" />}
-          icon={<Settings2 className="h-4 w-4 p-0.5 text-tertiary" />}
+          icon={<SettingsOutline className="h-4 w-4 p-0.5 text-tertiary" />}
           label="Configure"
         />
       )}

apps/admin/components/authentication/google-config.tsx

@@ -7,7 +7,7 @@
 import { observer } from "mobx-react";
 import Link from "next/link";
 // icons
-import { Settings2 } from "lucide-react";
+import { SettingsOutline } from "@makeplane/propel/icons";
 // plane internal packages
 import { AnchorButton } from "@makeplane/propel/components/anchor-button";
 import { Button } from "@makeplane/propel/components/button";
@@ -57,7 +57,7 @@ export const GoogleConfiguration = observer(function GoogleConfiguration(props:
           stretch="auto"
           nativeButton={false}
           render={<Link href="/authentication/google" />}
-          icon={<Settings2 className="h-4 w-4 p-0.5 text-tertiary" />}
+          icon={<SettingsOutline className="h-4 w-4 p-0.5 text-tertiary" />}
           label="Configure"
         />
       )}

apps/admin/components/common/banner.tsx

@@ -4,7 +4,7 @@
  * See the LICENSE file for details.
  */
 
-import { AlertCircle, CheckCircle2 } from "lucide-react";
+import { TickCircleOutline, WarningCircleOutline } from "@makeplane/propel/icons";
 
 type TBanner = {
   type: "success" | "error";
@@ -22,10 +22,10 @@ export function Banner(props: TBanner) {
         <div className="flex-shrink-0">
           {type === "error" ? (
             <span className="flex h-6 w-6 items-center justify-center rounded-full">
-              <AlertCircle className="h-5 w-5 text-danger-primary" aria-hidden="true" />
+              <WarningCircleOutline className="h-5 w-5 text-danger-primary" aria-hidden="true" />
             </span>
           ) : (
-            <CheckCircle2 className="h-5 w-5 text-success-primary" aria-hidden="true" />
+            <TickCircleOutline className="h-5 w-5 text-success-primary" aria-hidden="true" />
           )}
         </div>
         <div className="ml-1">

apps/admin/components/common/controller-input.tsx

@@ -8,7 +8,7 @@ import React, { useState } from "react";
 import type { Control, FieldPath, FieldValues } from "react-hook-form";
 import { Controller } from "react-hook-form";
 // icons
-import { Eye, EyeOff } from "lucide-react";
+import { HideOutline, ShowOutline } from "@makeplane/propel/icons";
 // plane internal packages
 import { Input, InputGroup } from "@makeplane/propel/components/input";
 
@@ -71,7 +71,7 @@ export function ControllerInput<TFieldValues extends FieldValues = FieldValues>(
               className="flex items-center justify-center text-placeholder"
               onClick={() => setShowPassword(false)}
             >
-              <EyeOff className="h-4 w-4" />
+              <HideOutline className="h-4 w-4" />
             </button>
           ) : (
             <button
@@ -80,7 +80,7 @@ export function ControllerInput<TFieldValues extends FieldValues = FieldValues>(
               className="flex items-center justify-center text-placeholder"
               onClick={() => setShowPassword(true)}
             >
-              <Eye className="h-4 w-4" />
+              <ShowOutline className="h-4 w-4" />
             </button>
           ))}
       </InputGroup>

apps/admin/components/common/header/index.tsx

@@ -9,7 +9,8 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 // icons
-import { Menu, Settings } from "lucide-react";
+import { Menu } from "lucide-react";
+import { SettingsOutline } from "@makeplane/propel/icons";
 // plane internal packages
 import {
   Breadcrumb,
@@ -74,7 +75,7 @@ export const AdminHeader = observer(function AdminHeader() {
               <BreadcrumbItem>
                 <BreadcrumbLink
                   label="Settings"
-                  icon={<Settings className="h-4 w-4 text-tertiary" />}
+                  icon={<SettingsOutline className="h-4 w-4 text-tertiary" />}
                   render={<Link href="/general/" />}
                 />
               </BreadcrumbItem>

apps/admin/components/common/password-strength-indicator.tsx

@@ -4,7 +4,7 @@
  * See the LICENSE file for details.
  */
 
-import { CircleCheck } from "lucide-react";
+import { TickCircleOutline } from "@makeplane/propel/icons";
 // plane internal packages
 import { E_PASSWORD_STRENGTH } from "@plane/constants";
 import { cn, getPasswordCriteria, getPasswordStrength } from "@plane/utils";
@@ -120,7 +120,7 @@ export function PasswordStrengthIndicator({
           {criteria.map((criterion) => (
             <div key={criterion.key} className="flex items-center gap-1.5">
               <div className="flex items-center justify-center p-0.5">
-                <CircleCheck
+                <TickCircleOutline
                   className={cn("h-3 w-3 flex-shrink-0", {
                     "text-success-primary": criterion.isValid,
                     "text-primary": !criterion.isValid,