INN 2942 icon implementation

ui/apps/dashboard/package.json

@@ -42,6 +42,7 @@
     "@radix-ui/react-tabs": "1.0.4",
     "@radix-ui/react-toggle-group": "1.0.4",
     "@radix-ui/react-tooltip": "1.0.6",
+    "@remixicon/react": "4.2.0",
     "@sentry/nextjs": "7.88.0",
     "@sindresorhus/slugify": "2.2.0",
     "@stripe/react-stripe-js": "2.1.0",

ui/apps/dashboard/src/app/(organization-active)/(dashboard)/env/[environmentSlug]/apps/AppCard.tsx

@@ -2,11 +2,10 @@
 
 import Image from 'next/image';
 import Link from 'next/link';
-import ArchiveBoxArrowDownIcon from '@heroicons/react/20/solid/ArchiveBoxArrowDownIcon';
-import ChevronRightIcon from '@heroicons/react/20/solid/ChevronRightIcon';
 import { Link as InngestLink } from '@inngest/components/Link';
 import { Skeleton } from '@inngest/components/Skeleton';
 import { cn } from '@inngest/components/utils/classNames';
+import { RiArchive2Line, RiArrowRightSLine } from '@remixicon/react';
 
 import { SyncStatusPill } from '@/components/SyncStatusPill';
 import { Time } from '@/components/Time';
@@ -54,11 +53,11 @@ export function AppCard({ app, className, envSlug, isArchived }: Props) {
             className="transition-color flex cursor-pointer items-center gap-1 text-white underline decoration-transparent decoration-2 underline-offset-4 duration-300 hover:text-indigo-400 hover:decoration-indigo-400"
             href={pathCreator.app({ envSlug, externalAppID: app.externalID })}
           >
-            {isArchived && <ArchiveBoxArrowDownIcon className="h-4 w-4" />}
+            {isArchived && <RiArchive2Line className="h-4 w-4" />}
             <span className="truncate" title={app.name}>
               {app.name}
             </span>
-            <ChevronRightIcon className="h-4 w-4" />
+            <RiArrowRightSLine className="h-4 w-4" />
           </Link>
         </h2>
         {latestSyncURL && (

ui/apps/dashboard/src/app/(organization-active)/(dashboard)/env/[environmentSlug]/apps/UnattachedSyncsCard.tsx

@@ -1,9 +1,9 @@
 'use client';
 
 import Link from 'next/link';
-import ChevronRightIcon from '@heroicons/react/20/solid/ChevronRightIcon';
 import { Link as InngestLink } from '@inngest/components/Link';
 import { classNames } from '@inngest/components/utils/classNames';
+import { RiArrowRightSLine } from '@remixicon/react';
 
 import { Time } from '@/components/Time';
 import { pathCreator } from '@/utils/urls';
@@ -30,7 +30,7 @@ export function UnattachedSyncsCard({ className, envSlug, latestSyncTime }: Prop
             href={pathCreator.unattachedSyncs({ envSlug })}
           >
             Unattached Syncs
-            <ChevronRightIcon className="h-4 w-4" />
+            <RiArrowRightSLine className="h-4 w-4" />
           </Link>
         </h2>
       </div>

ui/apps/dashboard/src/app/(organization-active)/(dashboard)/env/[environmentSlug]/apps/[externalID]/ResyncModal.tsx

@@ -1,11 +1,11 @@
 import { useState } from 'react';
-import ArrowPathIcon from '@heroicons/react/20/solid/ArrowPathIcon';
 import { Alert } from '@inngest/components/Alert';
 import { Button } from '@inngest/components/Button';
 import { Link } from '@inngest/components/Link';
 import { Modal } from '@inngest/components/Modal';
 import { Switch, SwitchLabel, SwitchWrapper } from '@inngest/components/Switch';
 import { cn } from '@inngest/components/utils/classNames';
+import { RiLoopLeftLine } from '@remixicon/react';
 import { toast } from 'sonner';
 import { useMutation } from 'urql';
 
@@ -95,7 +95,7 @@ export default function ResyncModal({ appExternalID, isOpen, onClose, url, platf
       onClose={onClose}
       title={
         <div className="mb-4 flex flex-row items-center gap-3">
-          <ArrowPathIcon className="h-6 w-6" />
+          <RiLoopLeftLine className="h-6 w-6" />
           <h2 className="text-lg font-medium">Resync App</h2>
         </div>
       }

ui/apps/dashboard/src/app/(organization-active)/(dashboard)/env/[environmentSlug]/apps/[externalID]/syncs/Sync/FunctionList.tsx

@@ -1,11 +1,10 @@
 import { useMemo } from 'react';
 import Link from 'next/link';
-import ArrowRightIcon from '@heroicons/react/20/solid/ArrowRightIcon';
-import ChevronDownIcon from '@heroicons/react/20/solid/ChevronDownIcon';
 import { Button } from '@inngest/components/Button';
 import { defaultLinkStyles } from '@inngest/components/Link';
 import type { Function } from '@inngest/components/types/function';
-import { classNames } from '@inngest/components/utils/classNames';
+import { cn } from '@inngest/components/utils/classNames';
+import { RiArrowDownSLine, RiArrowRightLine } from '@remixicon/react';
 import { useLocalStorage } from 'react-use';
 
 import { useEnvironment } from '@/app/(organization-active)/(dashboard)/env/[environmentSlug]/environment-context';
@@ -68,7 +67,7 @@ export function FunctionList({ removedFunctions, syncedFunctions }: Props) {
                 className="group"
                 appearance="outlined"
                 icon={
-                  <ChevronDownIcon className="transform-90 text-slate-500 transition-transform duration-500 group-data-[state=open]:-rotate-180" />
+                  <RiArrowDownSLine className="transform-90 text-slate-500 transition-transform duration-500 group-data-[state=open]:-rotate-180" />
                 }
               />
             </CollapsibleCardTrigger>
@@ -85,14 +84,14 @@ export function FunctionList({ removedFunctions, syncedFunctions }: Props) {
                       key={fn.id}
                     >
                       <div
-                        className={classNames(
+                        className={cn(
                           defaultLinkStyles,
                           'group flex w-full items-center gap-2 border-slate-200 py-3 pl-6 pr-2 text-sm font-medium hover:bg-slate-100',
                           !isLast && 'border-b'
                         )}
                       >
                         {fn.name}
-                        <ArrowRightIcon className="h-3 w-3 -translate-x-3 opacity-0 transition-all group-hover:translate-x-0 group-hover:opacity-100" />
+                        <RiArrowRightLine className="h-3 w-3 -translate-x-3 opacity-0 transition-all group-hover:translate-x-0 group-hover:opacity-100" />
                       </div>
                     </Link>
                   );
@@ -118,7 +117,7 @@ export function FunctionList({ removedFunctions, syncedFunctions }: Props) {
                 className="group"
                 appearance="outlined"
                 icon={
-                  <ChevronDownIcon className="transform-90 text-slate-500 transition-transform duration-500 group-data-[state=open]:-rotate-180" />
+                  <RiArrowDownSLine className="transform-90 text-slate-500 transition-transform duration-500 group-data-[state=open]:-rotate-180" />
                 }
               />
             </CollapsibleCardTrigger>
@@ -134,14 +133,14 @@ export function FunctionList({ removedFunctions, syncedFunctions }: Props) {
                     key={fn.id}
                   >
                     <div
-                      className={classNames(
+                      className={cn(
                         defaultLinkStyles,
                         'group flex w-full items-center gap-2 border-slate-200 py-3 pl-6 pr-2 text-sm font-medium hover:bg-slate-100',
                         !isLast && 'border-b'
                       )}
                     >
                       {fn.name}
-                      <ArrowRightIcon className="h-3 w-3 -translate-x-3 opacity-0 transition-all group-hover:translate-x-0 group-hover:opacity-100" />
+                      <RiArrowRightLine className="h-3 w-3 -translate-x-3 opacity-0 transition-all group-hover:translate-x-0 group-hover:opacity-100" />
                     </div>
                   </Link>
                 );

ui/apps/dashboard/src/app/(organization-active)/(dashboard)/env/[environmentSlug]/apps/sync-new/page.tsx

@@ -2,13 +2,13 @@
 
 import { type Route } from 'next';
 import { useRouter } from 'next/navigation';
-import ArrowPathIcon from '@heroicons/react/20/solid/ArrowPathIcon';
 import Squares2X2Icon from '@heroicons/react/20/solid/Squares2X2Icon';
 import { Button } from '@inngest/components/Button';
 import { Code } from '@inngest/components/Code';
 import { CodeLine } from '@inngest/components/CodeLine';
 import { Link } from '@inngest/components/Link';
 import * as Tabs from '@radix-ui/react-tabs';
+import { RiLoopLeftLine } from '@remixicon/react';
 
 import Header from '@/components/Header/Header';
 import { setSkipCacheSearchParam } from '@/utils/urls';
@@ -31,7 +31,7 @@ export default function Page({ params: { environmentSlug } }: Props) {
         <section className="mx-auto mt-16 max-w-screen-md overflow-hidden rounded-lg">
           <header className="bg-slate-940 px-8 pb-3 pt-6 text-white">
             <div className="flex items-center gap-4 pb-4">
-              <ArrowPathIcon className="h-6 w-6" />
+              <RiLoopLeftLine className="h-6 w-6" />
               <h2 className="text-xl">Sync App</h2>
             </div>
             <p>Provide the location of your app.</p>

ui/apps/dashboard/src/app/(organization-active)/(dashboard)/env/[environmentSlug]/event-search/EventTable.tsx

@@ -1,6 +1,6 @@
 import { useRef } from 'react';
 import { Table } from '@inngest/components/Table';
-import { IconArrowRight } from '@inngest/components/icons/ArrowRight';
+import { RiArrowRightLine } from '@remixicon/react';
 import { createColumnHelper, getCoreRowModel } from '@tanstack/react-table';
 
 import { Time } from '@/components/Time';
@@ -40,7 +40,7 @@ function useColumns(onSelect: (eventID: string) => void) {
             onClick={() => onSelect(id)}
           >
             {id}
-            <IconArrowRight className="h-3 w-3 -translate-x-3 text-indigo-400 opacity-0 transition-all group-hover:translate-x-0 group-hover:opacity-100" />
+            <RiArrowRightLine className="h-3 w-3 -translate-x-3 text-indigo-400 opacity-0 transition-all group-hover:translate-x-0 group-hover:opacity-100" />
           </button>
         );
       },

ui/apps/dashboard/src/app/(organization-active)/(dashboard)/env/[environmentSlug]/events/[eventName]/ArchiveEventButton.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import { useState } from 'react';
-import { ArchiveBoxIcon } from '@heroicons/react/20/solid';
 import { Button } from '@inngest/components/Button';
+import { RiArchive2Line } from '@remixicon/react';
 
 import ArchiveEventModal from './ArchiveEventModal';
 
@@ -15,7 +15,7 @@ export default function ArchiveEventButton({ eventName }: ArchiveButtonProps) {
   return (
     <>
       <Button
-        icon={<ArchiveBoxIcon />}
+        icon={<RiArchive2Line />}
         appearance="outlined"
         btnAction={() => setIsArchiveEventModalVisible(true)}
         label="Archive Event"

ui/apps/dashboard/src/app/(organization-active)/(dashboard)/env/[environmentSlug]/events/[eventName]/LatestLogsList.tsx

@@ -1,8 +1,8 @@
 import { type Route } from 'next';
 import Link from 'next/link';
-import { KeyIcon } from '@heroicons/react/20/solid';
 import { Button } from '@inngest/components/Button';
 import { Pill } from '@inngest/components/Pill';
+import { RiKey2Fill } from '@remixicon/react';
 import { useQuery } from 'urql';
 
 import { useEnvironment } from '@/app/(organization-active)/(dashboard)/env/[environmentSlug]/environment-context';
@@ -109,7 +109,7 @@ export default function LatestLogsList({ environmentSlug, eventName }: LatestLog
                       </td>
                       <td>
                         <Pill>
-                          <KeyIcon className="h-4 pr-1 text-indigo-500" />
+                          <RiKey2Fill className="h-4 pr-1 text-indigo-500" />
                           {e.source?.name}
                         </Pill>
                       </td>

ui/apps/dashboard/src/app/(organization-active)/(dashboard)/env/[environmentSlug]/events/[eventName]/logs/[eventId]/TriggeredFunctionCard.tsx

@@ -1,10 +1,11 @@
 import Link from 'next/link';
-import { ChevronRightIcon, CodeBracketSquareIcon } from '@heroicons/react/20/solid';
+import { CodeBracketSquareIcon } from '@heroicons/react/20/solid';
 import { IconStatusCanceled } from '@inngest/components/icons/status/Canceled';
 import { IconStatusCompleted } from '@inngest/components/icons/status/Completed';
 import { IconStatusFailed } from '@inngest/components/icons/status/Failed';
 import { IconStatusQueued } from '@inngest/components/icons/status/Queued';
 import { IconStatusRunning } from '@inngest/components/icons/status/Running';
+import { RiArrowRightSLine } from '@remixicon/react';
 import { noCase } from 'change-case';
 import { titleCase } from 'title-case';
 
@@ -92,7 +93,7 @@ export default async function TriggeredFunctionCard({
         </dl>
       </div>
       <div className="shrink-0">
-        <ChevronRightIcon className="h-5 w-5 text-slate-400" />
+        <RiArrowRightSLine className="h-5 w-5 text-slate-400" />
       </div>
     </Link>
   );

ui/apps/dashboard/src/app/(organization-active)/(dashboard)/env/[environmentSlug]/events/[eventName]/logs/[eventId]/error.tsx

@@ -1,8 +1,9 @@
 'use client';
 
 import { useEffect } from 'react';
-import { ArrowPathIcon, ExclamationCircleIcon } from '@heroicons/react/20/solid';
+import { ExclamationCircleIcon } from '@heroicons/react/20/solid';
 import { Button } from '@inngest/components/Button';
+import { RiLoopLeftLine } from '@remixicon/react';
 import * as Sentry from '@sentry/nextjs';
 
 type EventErrorPops = {
@@ -24,7 +25,7 @@ export default function EventError({ error, reset }: EventErrorPops) {
       <Button
         appearance="outlined"
         iconSide="right"
-        icon={<ArrowPathIcon className=" text-slate-700" />}
+        icon={<RiLoopLeftLine className=" text-slate-700" />}
         btnAction={() => reset()}
         label="Reload"
       />

ui/apps/dashboard/src/app/(organization-active)/(dashboard)/env/[environmentSlug]/events/[eventName]/logs/error.tsx

@@ -1,8 +1,9 @@
 'use client';
 
 import { useEffect } from 'react';
-import { ArrowPathIcon, ExclamationCircleIcon } from '@heroicons/react/20/solid';
+import { ExclamationCircleIcon } from '@heroicons/react/20/solid';
 import { Button } from '@inngest/components/Button';
+import { RiLoopLeftLine } from '@remixicon/react';
 import * as Sentry from '@sentry/nextjs';
 
 type EventLogsErrorPops = {
@@ -24,7 +25,7 @@ export default function EventLogsError({ error, reset }: EventLogsErrorPops) {
       <Button
         appearance="outlined"
         iconSide="right"
-        icon={<ArrowPathIcon className=" text-slate-700" />}
+        icon={<RiLoopLeftLine className=" text-slate-700" />}
         btnAction={() => reset()}
         label="Reload"
       />

ui/apps/dashboard/src/app/(organization-active)/(dashboard)/env/[environmentSlug]/events/[eventName]/page.tsx

@@ -1,8 +1,9 @@
 'use client';
 
 import Link from 'next/link';
-import { ChartBarIcon, ChevronRightIcon, CodeBracketSquareIcon } from '@heroicons/react/20/solid';
+import { CodeBracketSquareIcon } from '@heroicons/react/20/solid';
 import { Alert } from '@inngest/components/Alert';
+import { RiArrowRightSLine, RiBarChart2Fill } from '@remixicon/react';
 import colors from 'tailwindcss/colors';
 
 import Block from '@/components/Block';
@@ -44,7 +45,7 @@ export default function EventDashboard({ params }: EventDashboardProps) {
         <SimpleBarChart
           title={
             <>
-              <ChartBarIcon className="text-indigo-40X h-4" fill="#334155" /> Volume
+              <RiBarChart2Fill className="h-4 text-slate-700" /> Volume
             </>
           }
           period="24 Hours"
@@ -87,7 +88,7 @@ export default function EventDashboard({ params }: EventDashboardProps) {
                         />
                       )}
                     </div>
-                    <ChevronRightIcon className="h-5" />
+                    <RiArrowRightSLine className="h-5" />
                   </div>
                 </Link>
               ))

ui/apps/dashboard/src/app/(organization-active)/(dashboard)/env/[environmentSlug]/events/page.tsx

@@ -1,10 +1,10 @@
 'use client';
 
 import { useState } from 'react';
-import { ChartBarIcon } from '@heroicons/react/20/solid';
 import { Button } from '@inngest/components/Button';
 import { Link } from '@inngest/components/Link';
 import { HorizontalPillList, Pill, PillContent } from '@inngest/components/Pill';
+import { RiBarChart2Fill } from '@remixicon/react';
 
 import { useEnvironment } from '@/app/(organization-active)/(dashboard)/env/[environmentSlug]/environment-context';
 import SendEventButton from '@/app/(organization-active)/(dashboard)/env/[environmentSlug]/events/[eventName]/SendEventButton';
@@ -157,7 +157,7 @@ function EventTypesListPaginationPage({
             <td className="w-60 py-1 pl-2 pr-6">
               <div className="flex w-56 items-center justify-end gap-2">
                 <div className="flex items-center gap-1 align-middle text-slate-600">
-                  <ChartBarIcon className="-ml-0.5 h-3.5 w-3.5 shrink-0 text-indigo-500" />
+                  <RiBarChart2Fill className="-ml-0.5 h-3.5 w-3.5 shrink-0 text-indigo-500" />
                   <span className="overflow-hidden whitespace-nowrap text-sm text-slate-600">
                     {dailyVolume.toLocaleString(undefined, {
                       notation: 'compact',

ui/apps/dashboard/src/app/(organization-active)/(dashboard)/env/[environmentSlug]/functions/FunctionListNotFound.tsx

@@ -2,8 +2,9 @@
 
 import type { Route } from 'next';
 import Image from 'next/image';
-import { ClipboardIcon, ExclamationTriangleIcon } from '@heroicons/react/20/solid';
+import { ExclamationTriangleIcon } from '@heroicons/react/20/solid';
 import { Button } from '@inngest/components/Button';
+import { RiClipboardLine } from '@remixicon/react';
 import { useCopyToClipboard } from 'react-use';
 import { toast } from 'sonner';
 
@@ -20,7 +21,7 @@ export default function FunctionListNotFound() {
     copy(command);
     toast.message(
       <>
-        <ClipboardIcon className="h-3" /> Copied to clipboard!
+        <RiClipboardLine className="h-3 w-3" /> Copied to clipboard!
       </>
     );
   }
@@ -59,7 +60,7 @@ export default function FunctionListNotFound() {
               ease.
             </p>
             <div className="mt-4 flex flex-row gap-2 rounded-lg bg-slate-800 px-3 py-2 font-mono text-sm text-white">
-              <ClipboardIcon onClick={copyCommand} className="w-3 cursor-pointer" />
+              <RiClipboardLine onClick={copyCommand} className="h-3 w-3 cursor-pointer" />
               <span>{command}</span>
             </div>
           </div>

ui/apps/dashboard/src/app/(organization-active)/(dashboard)/env/[environmentSlug]/functions/FunctionTable.tsx

@@ -2,10 +2,11 @@
 
 import { useMemo } from 'react';
 import { type Route } from 'next';
-import { ChartBarIcon, ExclamationCircleIcon } from '@heroicons/react/20/solid';
+import { ExclamationCircleIcon } from '@heroicons/react/20/solid';
 import { Link } from '@inngest/components/Link';
 import { Pill, PillContent } from '@inngest/components/Pill';
 import { type Trigger } from '@inngest/components/types/trigger';
+import { RiBarChart2Fill } from '@remixicon/react';
 import {
   createColumnHelper,
   flexRender,
@@ -206,7 +207,7 @@ function createColumns(environmentSlug: string) {
               className="overflow-hidden whitespace-nowrap text-xs text-slate-600"
             >
               <div className="flex items-center gap-1 align-middle text-sm text-slate-600">
-                <ChartBarIcon className="-ml-0.5 h-3.5 w-3.5 shrink-0 text-indigo-500" />
+                <RiBarChart2Fill className="-ml-0.5 h-3.5 w-3.5 shrink-0 text-indigo-500" />
                 {value.total.toLocaleString(undefined, {
                   notation: 'compact',
                   compactDisplay: 'short',