Replace hero icons (#1333)

* Delete book icon * Delete Magnifying glass icon * Delete icon webhook * Replace search icon * replace env dropdown icons * Replace close icons * Replace keys icons * Replace payment icons * Replace information icons * Replace plus icon * Replace minus icons * Remove paper icon * Replace external link icon * Replace hero exclamation icons * Replace devserver check and error icons * Replace devserver plus icon * replace pause and play icons * Replace app icon * Replace functions icon * replace event icon * Delete devserver spinner icon * Replace arrowtray icon * Replace custom icons by remix * Delete unused icons * Remove hero icons
inngest · May 9, 2024 · 8ba70a5 · 8ba70a5
1 parent 4f34586
commit 8ba70a5
Show file tree

Hide file tree

Showing 95 changed files with 194 additions and 623 deletions.
diff --git a/ui/apps/dashboard/package.json b/ui/apps/dashboard/package.json
@@ -31,7 +31,6 @@
     "@graphql-typed-document-node/core": "3.2.0",
     "@headlessui/react": "1.7.17",
     "@headlessui/tailwindcss": "0.1.2",
-    "@heroicons/react": "2.0.16",
     "@inngest/components": "workspace:*",
     "@launchdarkly/node-server-sdk": "9.0.3",
     "@next/third-parties": "14.1.3",

diff --git a/ui/apps/dashboard/src/app/(auth)/create-organization/set-up/error.tsx b/ui/apps/dashboard/src/app/(auth)/create-organization/set-up/error.tsx
@@ -1,8 +1,8 @@
 'use client';
 
 import { useEffect } from 'react';
-import { ExclamationCircleIcon } from '@heroicons/react/20/solid';
 import { Button } from '@inngest/components/Button';
+import { RiErrorWarningLine } from '@remixicon/react';
 import * as Sentry from '@sentry/nextjs';
 
 type OrganizationSetupErrorProps = {
@@ -18,7 +18,7 @@ export default function OrganizationSetupError({ error }: OrganizationSetupError
   return (
     <div className="flex h-full w-full flex-col items-center justify-center gap-5">
       <div className="inline-flex items-center gap-2 text-red-600">
-        <ExclamationCircleIcon className="h-4 w-4" />
+        <RiErrorWarningLine className="h-4 w-4" />
         <h2 className="text-sm">Failed to set up your organization</h2>
       </div>
       <Button label="Contact Support" appearance="outlined" href="/support" />

diff --git a/ui/apps/dashboard/src/app/(auth)/sign-up/set-up/error.tsx b/ui/apps/dashboard/src/app/(auth)/sign-up/set-up/error.tsx
@@ -3,8 +3,8 @@
 import { useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import { useAuth } from '@clerk/nextjs';
-import { ExclamationCircleIcon } from '@heroicons/react/20/solid';
 import { Button } from '@inngest/components/Button';
+import { RiErrorWarningLine } from '@remixicon/react';
 import * as Sentry from '@sentry/nextjs';
 
 type UserSetupErrorProps = {
@@ -23,7 +23,7 @@ export default function UserSetupError({ error }: UserSetupErrorProps) {
   return (
     <div className="flex h-full w-full flex-col items-center justify-center gap-5">
       <div className="inline-flex items-center gap-2 text-red-600">
-        <ExclamationCircleIcon className="h-4 w-4" />
+        <RiErrorWarningLine className="h-4 w-4" />
         <h2 className="text-sm">Failed to set up your user</h2>
       </div>
       <Button

diff --git a/...s/dashboard/src/app/(organization-active)/(dashboard)/env/[environmentSlug]/apps/Apps.tsx b/...s/dashboard/src/app/(organization-active)/(dashboard)/env/[environmentSlug]/apps/Apps.tsx
@@ -1,8 +1,8 @@
 'use client';
 
 import { useRouter } from 'next/navigation';
-import PlusIcon from '@heroicons/react/20/solid/PlusIcon';
 import { Button } from '@inngest/components/Button';
+import { RiAddLine } from '@remixicon/react';
 
 import { useEnvironment } from '@/app/(organization-active)/(dashboard)/env/[environmentSlug]/environment-context';
 import { pathCreator } from '@/utils/urls';
@@ -53,7 +53,7 @@ export function Apps({ isArchived = false }: Props) {
                 kind="primary"
                 label="Sync App"
                 btnAction={() => router.push(pathCreator.createApp({ envSlug: env.slug }))}
-                icon={<PlusIcon />}
+                icon={<RiAddLine />}
               />
             </div>
           </EmptyAppCard>

diff --git a/.../app/(organization-active)/(dashboard)/env/[environmentSlug]/apps/[externalID]/layout.tsx b/.../app/(organization-active)/(dashboard)/env/[environmentSlug]/apps/[externalID]/layout.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import { Squares2X2Icon } from '@heroicons/react/20/solid';
 import { Alert } from '@inngest/components/Alert';
+import { IconApp } from '@inngest/components/icons/App';
 
 import { useEnvironment } from '@/app/(organization-active)/(dashboard)/env/[environmentSlug]/environment-context';
 import Header, { type HeaderLink } from '@/components/Header/Header';
@@ -64,7 +64,7 @@ export default function Layout({ children, params: { externalID } }: Props) {
     <>
       <Header
         action={action}
-        icon={<Squares2X2Icon className="h-5 w-5 text-white" />}
+        icon={<IconApp className="h-5 w-5 text-white" />}
         links={navLinks}
         title={res.data.name}
       />

diff --git a/...anization-active)/(dashboard)/env/[environmentSlug]/apps/[externalID]/syncs/Sync/Sync.tsx b/...anization-active)/(dashboard)/env/[environmentSlug]/apps/[externalID]/syncs/Sync/Sync.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import ExclamationTriangleIcon from '@heroicons/react/20/solid/ExclamationTriangleIcon';
 import { Alert } from '@inngest/components/Alert';
+import { RiErrorWarningLine } from '@remixicon/react';
 
 import { useEnvironment } from '@/app/(organization-active)/(dashboard)/env/[environmentSlug]/environment-context';
 import { AppGitCard } from '@/components/AppGitCard/AppGitCard';
@@ -25,7 +25,7 @@ export function Sync({ externalAppID, syncID }: Props) {
         <div className="h-full w-full overflow-y-auto">
           <div className="mx-auto w-full max-w-[1200px] p-4">
             <div className="flex items-center gap-2.5 rounded-lg border border-red-500 bg-red-100 px-8 py-4 text-red-500">
-              <ExclamationTriangleIcon className="h-5 w-5" />
+              <RiErrorWarningLine className="h-5 w-5" />
               Sync not found
             </div>
           </div>

diff --git a/...s/dashboard/src/app/(organization-active)/(dashboard)/env/[environmentSlug]/apps/page.tsx b/...s/dashboard/src/app/(organization-active)/(dashboard)/env/[environmentSlug]/apps/page.tsx
@@ -2,10 +2,11 @@
 
 import NextLink from 'next/link';
 import { useRouter } from 'next/navigation';
-import { InformationCircleIcon, PlusIcon, Squares2X2Icon } from '@heroicons/react/20/solid';
 import { Button } from '@inngest/components/Button';
 import { HoverCardContent, HoverCardRoot, HoverCardTrigger } from '@inngest/components/HoverCard';
 import { Link } from '@inngest/components/Link';
+import { IconApp } from '@inngest/components/icons/App';
+import { RiAddLine, RiInformationLine } from '@remixicon/react';
 
 import { useEnvironment } from '@/app/(organization-active)/(dashboard)/env/[environmentSlug]/environment-context';
 import Header, { type HeaderLink } from '@/components/Header/Header';
@@ -35,7 +36,7 @@ export default function Page() {
   return (
     <>
       <Header
-        icon={<Squares2X2Icon className="h-5 w-5 text-white" />}
+        icon={<IconApp className="h-5 w-5 text-white" />}
         links={navLinks}
         title="Apps"
         action={
@@ -45,7 +46,7 @@ export default function Page() {
                 kind="primary"
                 label="Sync App"
                 btnAction={() => router.push(pathCreator.createApp({ envSlug: env.slug }))}
-                icon={<PlusIcon />}
+                icon={<RiAddLine />}
               />
             )}
             <HoverCardRoot>
@@ -56,7 +57,7 @@ export default function Page() {
                   target="_blank"
                   rel="noreferrer noopener"
                 >
-                  <InformationCircleIcon className="h-5 w-5" />
+                  <RiInformationLine className="h-5 w-5" />
                   What are Apps?
                 </NextLink>
               </HoverCardTrigger>

diff --git a/...rd/src/app/(organization-active)/(dashboard)/env/[environmentSlug]/apps/sync-new/page.tsx b/...rd/src/app/(organization-active)/(dashboard)/env/[environmentSlug]/apps/sync-new/page.tsx
@@ -2,11 +2,11 @@
 
 import { type Route } from 'next';
 import { useRouter } from 'next/navigation';
-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 { IconApp } from '@inngest/components/icons/App';
 import * as Tabs from '@radix-ui/react-tabs';
 import { RiLoopLeftLine } from '@remixicon/react';
 
@@ -25,7 +25,7 @@ export default function Page({ params: { environmentSlug } }: Props) {
   const APPS_URL = setSkipCacheSearchParam(`/env/${environmentSlug}/apps`) as Route;
   return (
     <>
-      <Header title="Apps" icon={<Squares2X2Icon className="h-5 w-5 text-white" />} />
+      <Header title="Apps" icon={<IconApp className="h-5 w-5 text-white" />} />
 
       <div className="h-full overflow-y-auto bg-slate-100">
         <section className="mx-auto mt-16 max-w-screen-md overflow-hidden rounded-lg">

diff --git a/.../app/(organization-active)/(dashboard)/env/[environmentSlug]/event-search/EventSearch.tsx b/.../app/(organization-active)/(dashboard)/env/[environmentSlug]/event-search/EventSearch.tsx
@@ -3,7 +3,7 @@
 import { useState } from 'react';
 import { Button } from '@inngest/components/Button';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@inngest/components/Tooltip';
-import { IconInfo } from '@inngest/components/icons/Info';
+import { RiInformationLine } from '@remixicon/react';
 import { useClient } from 'urql';
 
 import { useEnvironment } from '@/app/(organization-active)/(dashboard)/env/[environmentSlug]/environment-context';
@@ -92,7 +92,7 @@ export function EventSearch() {
           <p className="text-sm">Experimental feature</p>
           <Tooltip>
             <TooltipTrigger>
-              <IconInfo className="h-4 w-4 text-slate-400" />
+              <RiInformationLine className="h-4 w-4 text-slate-400" />
             </TooltipTrigger>
             <TooltipContent className="whitespace-pre-line">
               This is an experimental feature, with a few limitations:

diff --git a/.../app/(organization-active)/(dashboard)/env/[environmentSlug]/events/EventListNotFound.tsx b/.../app/(organization-active)/(dashboard)/env/[environmentSlug]/events/EventListNotFound.tsx
@@ -2,9 +2,9 @@
 
 import type { Route } from 'next';
 import { useRouter } from 'next/navigation';
-import { ExclamationTriangleIcon } from '@heroicons/react/20/solid';
 import { Button } from '@inngest/components/Button';
 import { Card } from '@inngest/components/Card';
+import { RiErrorWarningLine } from '@remixicon/react';
 import { useQuery } from 'urql';
 
 import { useEnvironment } from '@/app/(organization-active)/(dashboard)/env/[environmentSlug]/environment-context';
@@ -55,7 +55,7 @@ export default function EventListNotFound() {
       <div className="mx-auto flex w-[640px] flex-col gap-4">
         <div className="text-center">
           <h3 className="mb-4 flex items-center justify-center gap-1 rounded-lg border border-indigo-100 bg-indigo-50 py-2.5 text-lg font-semibold text-indigo-500">
-            <ExclamationTriangleIcon className="mt-0.5 h-5 w-5 text-indigo-700" />
+            <RiErrorWarningLine className="mt-0.5 h-5 w-5 text-indigo-700" />
             <span>
               No Events <span className="font-medium text-indigo-900">received in</span>{' '}
               {environment.name}

diff --git a/...nization-active)/(dashboard)/env/[environmentSlug]/events/[eventName]/SendEventButton.tsx b/...nization-active)/(dashboard)/env/[environmentSlug]/events/[eventName]/SendEventButton.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import { useState } from 'react';
-import { PaperAirplaneIcon } from '@heroicons/react/20/solid';
 import { Button } from '@inngest/components/Button';
 
 import { SendEventModal } from '@/app/(organization-active)/(dashboard)/env/[environmentSlug]/events/[eventName]/SendEventModal';
@@ -15,12 +14,7 @@ export default function SendEventButton({ eventName }: SendEventButtonProps) {
 
   return (
     <>
-      <Button
-        btnAction={() => setIsModalVisible(true)}
-        kind="primary"
-        icon={<PaperAirplaneIcon />}
-        label="Send Event"
-      />
+      <Button btnAction={() => setIsModalVisible(true)} kind="primary" label="Send Event" />
       <SendEventModal
         isOpen={isModalVisible}
         eventName={eventName}

diff --git a/...anization-active)/(dashboard)/env/[environmentSlug]/events/[eventName]/SendEventModal.tsx b/...anization-active)/(dashboard)/env/[environmentSlug]/events/[eventName]/SendEventModal.tsx
@@ -3,7 +3,6 @@
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { Tab } from '@headlessui/react';
-import { PaperAirplaneIcon } from '@heroicons/react/20/solid';
 import { Alert } from '@inngest/components/Alert';
 import { Button } from '@inngest/components/Button';
 import ky from 'ky';
@@ -162,7 +161,6 @@ await inngest.send({
       <Tab.Group as="section" className="space-y-6">
         <header className="flex items-center justify-between">
           <span className="inline-flex items-center gap-2">
-            <PaperAirplaneIcon className="h-5 text-indigo-500" />
             <h2 className="text-lg font-medium">Send Event</h2>
           </span>
           <Tab.List className="flex items-center gap-1 rounded-lg bg-slate-50 p-1">

diff --git a/...app/(organization-active)/(dashboard)/env/[environmentSlug]/events/[eventName]/layout.tsx b/...app/(organization-active)/(dashboard)/env/[environmentSlug]/events/[eventName]/layout.tsx
@@ -1,8 +1,9 @@
 'use client';
 
+import { IconEvent } from '@inngest/components/icons/Event';
+
 import { useEnvironment } from '@/app/(organization-active)/(dashboard)/env/[environmentSlug]/environment-context';
 import Header, { type HeaderLink } from '@/components/Header/Header';
-import EventIcon from '@/icons/event.svg';
 import SendEventButton from './SendEventButton';
 
 type EventLayoutProps = {
@@ -31,7 +32,7 @@ export default function EventLayout({ children, params }: EventLayoutProps) {
   return (
     <>
       <Header
-        icon={<EventIcon className="h-5 w-5 text-white" />}
+        icon={<IconEvent className="h-5 w-5 text-white" />}
         title={decodeURIComponent(params.eventName)}
         links={navLinks}
         action={

diff --git a/...hboard)/env/[environmentSlug]/events/[eventName]/logs/[eventId]/TriggeredFunctionCard.tsx b/...hboard)/env/[environmentSlug]/events/[eventName]/logs/[eventId]/TriggeredFunctionCard.tsx
@@ -1,6 +1,6 @@
 import Link from 'next/link';
-import { CodeBracketSquareIcon } from '@heroicons/react/20/solid';
 import { Time } from '@inngest/components/Time';
+import { IconFunction } from '@inngest/components/icons/Function';
 import { IconStatusCanceled } from '@inngest/components/icons/status/Canceled';
 import { IconStatusCompleted } from '@inngest/components/icons/status/Completed';
 import { IconStatusFailed } from '@inngest/components/icons/status/Failed';
@@ -74,7 +74,7 @@ export default async function TriggeredFunctionCard({
     >
       <div className="flex-1">
         <div className="flex items-center gap-1.5">
-          <CodeBracketSquareIcon className="h-4 w-4 text-slate-500" />
+          <IconFunction className="h-4 w-4 text-slate-500" />
           <h4 className="font-medium text-slate-800">{function_.name}</h4>
         </div>
         <dl>

diff --git a/...ion-active)/(dashboard)/env/[environmentSlug]/events/[eventName]/logs/[eventId]/error.tsx b/...ion-active)/(dashboard)/env/[environmentSlug]/events/[eventName]/logs/[eventId]/error.tsx
@@ -1,9 +1,8 @@
 'use client';
 
 import { useEffect } from 'react';
-import { ExclamationCircleIcon } from '@heroicons/react/20/solid';
 import { Button } from '@inngest/components/Button';
-import { RiLoopLeftLine } from '@remixicon/react';
+import { RiErrorWarningLine, RiLoopLeftLine } from '@remixicon/react';
 import * as Sentry from '@sentry/nextjs';
 
 type EventErrorPops = {
@@ -19,7 +18,7 @@ export default function EventError({ error, reset }: EventErrorPops) {
   return (
     <div className="flex h-full w-full flex-col items-center justify-center gap-5">
       <div className="inline-flex items-center gap-2 text-red-600">
-        <ExclamationCircleIcon className="h-4 w-4" />
+        <RiErrorWarningLine className="h-4 w-4" />
         <h2 className="text-sm">Failed to load event</h2>
       </div>
       <Button

diff --git a/...active)/(dashboard)/env/[environmentSlug]/events/[eventName]/logs/[eventId]/not-found.tsx b/...active)/(dashboard)/env/[environmentSlug]/events/[eventName]/logs/[eventId]/not-found.tsx
@@ -1,10 +1,10 @@
-import { ExclamationCircleIcon } from '@heroicons/react/20/solid';
+import { RiErrorWarningLine } from '@remixicon/react';
 
 export default function EventNotFound() {
   return (
     <div className="flex h-full w-full flex-col items-center justify-center gap-5">
       <div className="inline-flex items-center gap-2 text-yellow-600">
-        <ExclamationCircleIcon className="h-4 w-4" />
+        <RiErrorWarningLine className="h-4 w-4" />
         <h2 className="text-sm">Could not find the requested event</h2>
       </div>
     </div>

diff --git a/...(organization-active)/(dashboard)/env/[environmentSlug]/events/[eventName]/logs/error.tsx b/...(organization-active)/(dashboard)/env/[environmentSlug]/events/[eventName]/logs/error.tsx
@@ -1,9 +1,8 @@
 'use client';
 
 import { useEffect } from 'react';
-import { ExclamationCircleIcon } from '@heroicons/react/20/solid';
 import { Button } from '@inngest/components/Button';
-import { RiLoopLeftLine } from '@remixicon/react';
+import { RiErrorWarningLine, RiLoopLeftLine } from '@remixicon/react';
 import * as Sentry from '@sentry/nextjs';
 
 type EventLogsErrorPops = {
@@ -19,7 +18,7 @@ export default function EventLogsError({ error, reset }: EventLogsErrorPops) {
   return (
     <div className="flex h-full w-full flex-col items-center justify-center gap-5">
       <div className="inline-flex items-center gap-2 text-red-600">
-        <ExclamationCircleIcon className="h-4 w-4" />
+        <RiErrorWarningLine className="h-4 w-4" />
         <h2 className="text-sm">Failed to load logs for event</h2>
       </div>
       <Button

diff --git a/...anization-active)/(dashboard)/env/[environmentSlug]/events/[eventName]/logs/not-found.tsx b/...anization-active)/(dashboard)/env/[environmentSlug]/events/[eventName]/logs/not-found.tsx
@@ -1,10 +1,10 @@
-import { ExclamationCircleIcon } from '@heroicons/react/20/solid';
+import { RiErrorWarningLine } from '@remixicon/react';
 
 export default function EventLogsNotFound() {
   return (
     <div className="flex h-full w-full flex-col items-center justify-center gap-5">
       <div className="inline-flex items-center gap-2 text-yellow-600">
-        <ExclamationCircleIcon className="h-4 w-4" />
+        <RiErrorWarningLine className="h-4 w-4" />
         <h2 className="text-sm">Could not find any logs for event</h2>
       </div>
     </div>

diff --git a/...c/app/(organization-active)/(dashboard)/env/[environmentSlug]/events/[eventName]/page.tsx b/...c/app/(organization-active)/(dashboard)/env/[environmentSlug]/events/[eventName]/page.tsx
@@ -1,9 +1,9 @@
 'use client';
 
 import Link from 'next/link';
-import { CodeBracketSquareIcon } from '@heroicons/react/20/solid';
 import { Alert } from '@inngest/components/Alert';
 import { Time } from '@inngest/components/Time';
+import { IconFunction } from '@inngest/components/icons/Function';
 import { RiArrowRightSLine, RiBarChart2Fill } from '@remixicon/react';
 import colors from 'tailwindcss/colors';
 
@@ -76,7 +76,7 @@ export default function EventDashboard({ params }: EventDashboardProps) {
                   <div className="flex min-w-0 items-center">
                     <div className="min-w-0 flex-1">
                       <div className="flex min-w-0 items-center">
-                        <CodeBracketSquareIcon className="h-5 pr-2 text-indigo-500" />
+                        <IconFunction className="h-5 pr-2 text-indigo-500" />
                         <p className="truncate font-medium">{w.name}</p>
                       </div>
 

diff --git a/...dashboard/src/app/(organization-active)/(dashboard)/env/[environmentSlug]/events/page.tsx b/...dashboard/src/app/(organization-active)/(dashboard)/env/[environmentSlug]/events/page.tsx
@@ -4,14 +4,14 @@ import { useState } from 'react';
 import { Button } from '@inngest/components/Button';
 import { Link } from '@inngest/components/Link';
 import { HorizontalPillList, Pill, PillContent } from '@inngest/components/Pill';
+import { IconEvent } from '@inngest/components/icons/Event';
 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';
 import MiniStackedBarChart from '@/components/Charts/MiniStackedBarChart';
 import Header from '@/components/Header/Header';
 import LoadingIcon from '@/icons/LoadingIcon';
-import EventIcon from '@/icons/event.svg';
 import { useEventTypes } from '@/queries';
 import cn from '@/utils/cn';
 import { pathCreator } from '@/utils/urls';
@@ -34,7 +34,7 @@ export default function EventTypesPage() {
     <>
       <Header
         title="Events"
-        icon={<EventIcon className="h-4 w-4 text-white" />}
+        icon={<IconEvent className="h-4 w-4 text-white" />}
         action={!env.isArchived && <SendEventButton />}
       />