feat: switch to huge icons for more options (#2613)

Fixes #2529 ![Screenshot 2024-09-04 at 11 02 01 AM](https://github.com/user-attachments/assets/f66c321a-8480-4acb-91a1-6080a2cee5bc) ![Screenshot 2024-09-04 at 11 02 08 AM](https://github.com/user-attachments/assets/e5b3c2f7-cab0-4ad6-8830-20153e01cc56) ![Screenshot 2024-09-04 at 11 02 19 AM](https://github.com/user-attachments/assets/818ef75f-c1fb-4f22-b989-3872de44d752) ![Screenshot 2024-09-04 at 11 02 31 AM](https://github.com/user-attachments/assets/ba28dd2d-daeb-48eb-8c5e-92e8065dd11b)
block · Sep 4, 2024 · 0ce38b6 · 0ce38b6
1 parent efc799d
commit 0ce38b6
Show file tree

Hide file tree

Showing 22 changed files with 205 additions and 339 deletions.
diff --git a/frontend/console/package.json b/frontend/console/package.json
@@ -22,9 +22,13 @@
     "build-storybook": "storybook build"
   },
   "lint-staged": {
-    "*.(js|cjs|tsx|ts)": ["pnpm run lint:fix"]
+    "*.(js|cjs|tsx|ts)": [
+      "pnpm run lint:fix"
+    ]
   },
-  "browserslist": ["> 2%"],
+  "browserslist": [
+    "> 2%"
+  ],
   "source": "index.html",
   "dependencies": {
     "@bufbuild/protobuf": "^1.1.0",
@@ -39,7 +43,6 @@
     "@connectrpc/connect-web": "^1.1.2",
     "@connectrpc/protoc-gen-connect-es": "^1.4.0",
     "@headlessui/react": "2.1.3",
-    "@heroicons/react": "2.1.5",
     "@tailwindcss/forms": "^0.5.6",
     "@tanstack/react-query": "^5.51.23",
     "@tanstack/react-query-devtools": "^5.51.23",
@@ -50,6 +53,7 @@
     "codemirror-json5": "^1.0.3",
     "fnv1a": "^1.1.1",
     "highlight.js": "^11.8.0",
+    "hugeicons-react": "^0.3.0",
     "json-schema-faker": "0.5.6",
     "react": "18.3.1",
     "react-dom": "18.3.1",

diff --git a/frontend/console/src/components/CloseButton.tsx b/frontend/console/src/components/CloseButton.tsx
@@ -1,4 +1,4 @@
-import { XMarkIcon } from '@heroicons/react/24/outline'
+import { Cancel01Icon } from 'hugeicons-react'
 
 interface Props {
   onClick: () => void
@@ -7,7 +7,7 @@ interface Props {
 export const CloseButton = ({ onClick }: Props) => {
   return (
     <button type='button' onClick={onClick} className='rounded-sm hover:bg-gray-200 dark:hover:bg-slate-500'>
-      <XMarkIcon className={'h-5 w-5'} />
+      <Cancel01Icon className={'h-5 w-5'} />
     </button>
   )
 }
diff --git a/frontend/console/src/components/DarkModeSwitch.tsx b/frontend/console/src/components/DarkModeSwitch.tsx
@@ -1,5 +1,6 @@
 import { Switch } from '@headlessui/react'
-import { MoonIcon, SunIcon } from '@heroicons/react/20/solid'
+
+import { Moon02Icon, Sun03Icon } from 'hugeicons-react'
 import { useUserPreferences } from '../providers/user-preferences-provider'
 import { classNames } from '../utils/react.utils'
 
@@ -19,10 +20,10 @@ export const DarkModeSwitch = () => {
         aria-hidden='true'
         className={classNames(
           isDarkMode ? 'translate-x-5' : 'translate-x-0',
-          'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white dark:bg-indigo-600 shadow ring-0 transition duration-200 ease-in-out',
+          'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-gray-50 dark:bg-indigo-600 shadow ring-0 transition duration-200 ease-in-out',
         )}
       >
-        {isDarkMode ? <MoonIcon className='text-white p-0.5' /> : <SunIcon className='text-indigo-600 p-0.5' />}
+        {isDarkMode ? <Moon02Icon className='text-white size-5 p-0.5' /> : <Sun03Icon className='text-indigo-500 size-5 p-0.5' />}
       </span>
     </Switch>
   )

diff --git a/frontend/console/src/features/console/ConsolePage.tsx b/frontend/console/src/features/console/ConsolePage.tsx
@@ -1,4 +1,4 @@
-import { CubeTransparentIcon } from '@heroicons/react/24/outline'
+import { CubeIcon } from 'hugeicons-react'
 import { useState } from 'react'
 import { type NavigateFunction, useNavigate } from 'react-router-dom'
 import { useModules } from '../../api/modules/use-modules'
@@ -25,7 +25,7 @@ export const ConsolePage = () => {
 
   return (
     <Page>
-      <Page.Header icon={<CubeTransparentIcon />} title='Console' />
+      <Page.Header icon={<CubeIcon />} title='Console' />
       <Page.Body className='flex h-full'>
         <ResizablePanels
           mainContent={<GraphPane onTapped={setSelectedNode} />}

diff --git a/frontend/console/src/features/console/ExpandablePanel.tsx b/frontend/console/src/features/console/ExpandablePanel.tsx
@@ -1,4 +1,4 @@
-import { ChevronDownIcon, ChevronRightIcon } from '@heroicons/react/24/outline'
+import { ArrowDown01Icon, ArrowRight01Icon } from 'hugeicons-react'
 import type React from 'react'
 import { useEffect, useState } from 'react'
 
@@ -24,7 +24,7 @@ export const ExpandablePanel: React.FC<ExpandablePanelProps> = ({ icon: Icon, ti
   return (
     <div className='border-b border-gray-300 dark:border-gray-700'>
       <div className='bg-gray-100 dark:bg-gray-700 flex items-center cursor-pointer' onClick={toggleExpansion}>
-        {isExpanded ? <ChevronDownIcon className='h-3 w-3 m-1' /> : <ChevronRightIcon className='h-3 w-3  m-1' />}
+        {isExpanded ? <ArrowDown01Icon className='size-4 m-1' /> : <ArrowRight01Icon className='size-4  m-1' />}
         {Icon ? <Icon className='h-4 w-4 mr-2' /> : null}
         <span className='text-xs py-1'>{title}</span>
       </div>

diff --git a/frontend/console/src/features/console/right-panel/ModulePanels.tsx b/frontend/console/src/features/console/right-panel/ModulePanels.tsx
@@ -1,13 +1,13 @@
 import {
-  ArrowRightEndOnRectangleIcon,
-  ArrowRightStartOnRectangleIcon,
-  ArrowTopRightOnSquareIcon,
-  ArrowsRightLeftIcon,
-  BoltIcon,
-  CodeBracketIcon,
-  Cog6ToothIcon,
-  LockClosedIcon,
-} from '@heroicons/react/24/outline'
+  ArrowLeftRightIcon,
+  CodeSquareIcon,
+  FunctionIcon,
+  InboxDownloadIcon,
+  InboxUploadIcon,
+  LinkSquare02Icon,
+  Settings02Icon,
+  SquareLock02Icon,
+} from 'hugeicons-react'
 import type { NavigateFunction } from 'react-router-dom'
 import { CodeBlock } from '../../../components'
 import { RightPanelAttribute } from '../../../components/RightPanelAttribute'
@@ -20,7 +20,7 @@ export const modulePanels = (allModules: Module[], module: Module, navigate: Nav
 
   if (module.verbs && module.verbs.length > 0) {
     panels.push({
-      icon: BoltIcon,
+      icon: FunctionIcon,
       title: 'Verbs',
       expanded: true,
       children: module.verbs?.map((v) => (
@@ -31,7 +31,7 @@ export const modulePanels = (allModules: Module[], module: Module, navigate: Nav
             className='flex items-center space-x-2 hover:text-indigo-400 py-1 px-2 rounded'
             onClick={() => navigate(`/deployments/${module.deploymentKey}/verbs/${v.verb?.name}`)}
           >
-            <ArrowTopRightOnSquareIcon className='size-4' />
+            <LinkSquare02Icon className='size-4' />
           </button>
         </div>
       )),
@@ -40,7 +40,7 @@ export const modulePanels = (allModules: Module[], module: Module, navigate: Nav
 
   if (module.secrets && module.secrets.length > 0) {
     panels.push({
-      icon: LockClosedIcon,
+      icon: SquareLock02Icon,
       title: 'Secrets',
       expanded: false,
       children: module.secrets.map((s, index) => (
@@ -51,29 +51,29 @@ export const modulePanels = (allModules: Module[], module: Module, navigate: Nav
 
   if (module.configs && module.configs.length > 0) {
     panels.push({
-      icon: Cog6ToothIcon,
+      icon: Settings02Icon,
       title: 'Configs',
       expanded: false,
       children: module.configs.map((c) => <RightPanelAttribute key={c.config?.name} name={c.config?.name} value={c.config?.type?.value?.case} />),
     })
   }
 
   panels.push({
-    icon: ArrowsRightLeftIcon,
+    icon: ArrowLeftRightIcon,
     title: 'Relationships',
     expanded: false,
     children: (
       <div className='flex flex-col space-y-2'>
         {callsIn(allModules, module)?.flatMap((inCall) => (
           <div key={`in-${inCall.module}-${inCall.verb}`} className='flex items-center space-x-2'>
-            <ArrowRightEndOnRectangleIcon className='h-4 w-4 text-green-600' />
+            <InboxDownloadIcon className='h-4 w-4 text-green-600' />
             <div className='truncate text-xs'>{`${inCall?.module}.${inCall?.verb}`}</div>
           </div>
         ))}
         {callsOut(module)?.map((out, outIndex) =>
           out?.calls.map((call, callIndex) => (
             <div key={`out-${outIndex}-${call?.module}.${call?.name}-${callIndex}`} className='flex items-center space-x-2'>
-              <ArrowRightStartOnRectangleIcon className='h-4 w-4 text-blue-600' />
+              <InboxUploadIcon className='h-4 w-4 text-blue-600' />
               <div className='truncate text-xs'>{`${call?.module}.${call?.name}`}</div>
             </div>
           )),
@@ -83,7 +83,7 @@ export const modulePanels = (allModules: Module[], module: Module, navigate: Nav
   })
 
   panels.push({
-    icon: CodeBracketIcon,
+    icon: CodeSquareIcon,
     title: 'Schema',
     expanded: false,
     children: (

diff --git a/frontend/console/src/features/console/right-panel/RightPanelHeader.tsx b/frontend/console/src/features/console/right-panel/RightPanelHeader.tsx
@@ -1,11 +1,11 @@
-import { BoltIcon, Cog6ToothIcon, CubeIcon, LockClosedIcon, RectangleGroupIcon } from '@heroicons/react/24/outline'
+import { CellsIcon, FunctionIcon, PackageIcon, Settings02Icon, SquareLock02Icon } from 'hugeicons-react'
 import { Config, Module, Secret, Verb } from '../../../protos/xyz/block/ftl/v1/console/console_pb'
 import type { FTLNode } from '../../graph/GraphPane'
 
 export const headerForNode = (node: FTLNode | null) => {
   if (!node) {
     return header({
-      IconComponent: CubeIcon,
+      IconComponent: CellsIcon,
       content: <div className='text-sm font-medium truncate'>Root</div>,
     })
   }
@@ -34,7 +34,7 @@ const header = ({ IconComponent, content }: { IconComponent: React.ElementType;
 
 const moduleHeader = (module: Module) => {
   return header({
-    IconComponent: RectangleGroupIcon,
+    IconComponent: PackageIcon,
     content: (
       <>
         <div className='text-sm font-medium truncate'>{module.name}</div>
@@ -50,7 +50,7 @@ const moduleHeader = (module: Module) => {
 
 const verbHeader = (verb: Verb) => {
   return header({
-    IconComponent: BoltIcon,
+    IconComponent: FunctionIcon,
     content: (
       <>
         <div className='text-sm font-medium truncate'>{verb.verb?.name}</div>
@@ -66,7 +66,7 @@ const verbHeader = (verb: Verb) => {
 
 const secretHeader = (secret: Secret) => {
   return header({
-    IconComponent: LockClosedIcon,
+    IconComponent: SquareLock02Icon,
     content: (
       <>
         <div className='text-sm font-medium truncate'>Secret</div>
@@ -82,7 +82,7 @@ const secretHeader = (secret: Secret) => {
 
 const configHeader = (config: Config) => {
   return header({
-    IconComponent: Cog6ToothIcon,
+    IconComponent: Settings02Icon,
     content: (
       <>
         <div className='text-sm font-medium truncate'>{config.config?.name}</div>

diff --git a/frontend/console/src/features/modules/ModulesTree.tsx b/frontend/console/src/features/modules/ModulesTree.tsx
@@ -1,21 +1,20 @@
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react'
 import {
-  ArrowRightCircleIcon,
-  BellAlertIcon,
-  BellIcon,
-  BoltIcon,
-  BookOpenIcon,
-  ChevronRightIcon,
-  CircleStackIcon,
-  CodeBracketSquareIcon,
-  Cog6ToothIcon,
-  DocumentDuplicateIcon,
-  LockClosedIcon,
-  NumberedListIcon,
-  SquaresPlusIcon,
-  TableCellsIcon,
-} from '@heroicons/react/24/outline'
-import type { ForwardRefExoticComponent, SVGProps } from 'react'
+  AnonymousIcon,
+  ArrowRight01Icon,
+  BubbleChatIcon,
+  CircleArrowRight02Icon,
+  CodeIcon,
+  DatabaseIcon,
+  FlowIcon,
+  FunctionIcon,
+  type HugeiconsProps,
+  LeftToRightListNumberIcon,
+  MessageIncoming02Icon,
+  PackageIcon,
+  Settings02Icon,
+  SquareLock02Icon,
+} from 'hugeicons-react'
 import { useEffect, useMemo, useRef } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 import type { Decl } from '../../protos/xyz/block/ftl/v1/schema/schema_pb'
@@ -26,18 +25,18 @@ import { addModuleToLocalStorageIfMissing, listExpandedModulesFromLocalStorage,
 // This could alternatively be an icon, but we'd need to pick a good one.
 const ExportBadge = () => <span className='text-xs py-0.5 px-1.5 bg-gray-200 dark:bg-gray-800 dark:text-gray-300 rounded-md'>Exported</span>
 
-type IconMap = Record<string, ForwardRefExoticComponent<SVGProps<SVGSVGElement> & { title?: string; titleId?: string }>>
+type IconMap = Record<string, React.FC<Omit<HugeiconsProps, 'ref'> & React.RefAttributes<SVGSVGElement>>>
 const icons: IconMap = {
-  config: Cog6ToothIcon,
-  data: TableCellsIcon,
-  database: CircleStackIcon,
-  enum: NumberedListIcon,
-  fsm: SquaresPlusIcon,
-  topic: BellIcon,
-  typeAlias: DocumentDuplicateIcon,
-  secret: LockClosedIcon,
-  subscription: BellAlertIcon,
-  verb: BoltIcon,
+  config: Settings02Icon,
+  data: CodeIcon,
+  database: DatabaseIcon,
+  enum: LeftToRightListNumberIcon,
+  fsm: FlowIcon,
+  topic: BubbleChatIcon,
+  typeAlias: AnonymousIcon,
+  secret: SquareLock02Icon,
+  subscription: MessageIncoming02Icon,
+  verb: FunctionIcon,
 }
 
 type WithExport = { export?: boolean }
@@ -47,7 +46,7 @@ const DeclNode = ({ decl, href, isSelected }: { decl: Decl; href: string; isSele
     return []
   }
   const navigate = useNavigate()
-  const Icon = useMemo(() => icons[decl.value.case || ''] || CodeBracketSquareIcon, [decl.value.case])
+  const Icon = useMemo(() => icons[decl.value.case || ''] || CodeIcon, [decl.value.case])
   return (
     <li className='my-1'>
       <div
@@ -90,9 +89,9 @@ const ModuleSection = ({ module, isExpanded, toggleExpansion }: { module: Module
           )}
           onClick={() => toggleExpansion(module.name)}
         >
-          <BookOpenIcon aria-hidden='true' className='size-4 my-1 shrink-0 ' />
+          <PackageIcon aria-hidden='true' className='size-4 my-1 shrink-0 ' />
           {module.name}
-          <ArrowRightCircleIcon
+          <CircleArrowRight02Icon
             className='size-4 shrink-0 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600'
             onClick={(e) => {
               e.preventDefault()
@@ -101,7 +100,7 @@ const ModuleSection = ({ module, isExpanded, toggleExpansion }: { module: Module
             }}
           />
           {module.decls.length === 0 || (
-            <ChevronRightIcon aria-hidden='true' className='ml-auto h-4 w-4 shrink-0 group-data-[open]:rotate-90 group-data-[open]:text-gray-500' />
+            <ArrowRight01Icon aria-hidden='true' className='ml-auto h-4 w-4 shrink-0 group-data-[open]:rotate-90 group-data-[open]:text-gray-500' />
           )}
         </DisclosureButton>
         <DisclosurePanel as='ul' className='px-2'>

diff --git a/frontend/console/src/features/timeline/TimelineIcon.tsx b/frontend/console/src/features/timeline/TimelineIcon.tsx
@@ -1,4 +1,4 @@
-import { ListBulletIcon, PhoneArrowDownLeftIcon, PhoneIcon, RocketLaunchIcon } from '@heroicons/react/24/outline'
+import { Call02Icon, CallIncoming04Icon, Menu01Icon, Rocket01Icon } from 'hugeicons-react'
 import type { Event } from '../../protos/xyz/block/ftl/v1/console/console_pb'
 import { LogLevelBadgeSmall } from '../logs/LogLevelBadgeSmall'
 
@@ -8,20 +8,16 @@ export const TimelineIcon = ({ event }: { event: Event }) => {
     switch (event.entry.case) {
       case 'call': {
         const textColor = event.entry.value.error ? 'text-red-600' : 'text-indigo-600'
-        return event.entry.value.sourceVerbRef ? (
-          <PhoneIcon className={`${style} ${textColor}`} />
-        ) : (
-          <PhoneArrowDownLeftIcon className={`${style} ${textColor}`} />
-        )
+        return event.entry.value.sourceVerbRef ? <Call02Icon className={`${style} ${textColor}`} /> : <CallIncoming04Icon className={`${style} ${textColor}`} />
       }
       case 'deploymentCreated':
-        return <RocketLaunchIcon className='h4 w-4 text-green-500' />
+        return <Rocket01Icon className='h4 w-4 text-green-500' />
       case 'deploymentUpdated':
-        return <RocketLaunchIcon className='h4 w-4 text-indigo-600' />
+        return <Rocket01Icon className='h4 w-4 text-indigo-600' />
       case 'log':
         return <LogLevelBadgeSmall logLevel={event.entry.value.logLevel} />
       default:
-        return <ListBulletIcon className={`${style}`} />
+        return <Menu01Icon className={`${style}`} />
     }
   }
 

diff --git a/frontend/console/src/features/timeline/TimelinePage.tsx b/frontend/console/src/features/timeline/TimelinePage.tsx
@@ -1,4 +1,4 @@
-import { ListBulletIcon } from '@heroicons/react/24/outline'
+import { ListViewIcon } from 'hugeicons-react'
 import { useEffect, useState } from 'react'
 import { useSearchParams } from 'react-router-dom'
 import { Page } from '../../layout'
@@ -35,7 +35,7 @@ export const TimelinePage = () => {
   return (
     <SidePanelProvider>
       <Page>
-        <Page.Header icon={<ListBulletIcon />} title='Events'>
+        <Page.Header icon={<ListViewIcon className='size-5' />} title='Events'>
           <TimelineTimeControls selectedTimeRange={selectedTimeRange} isTimelinePaused={isTimelinePaused} onTimeSettingsChange={handleTimeSettingsChanged} />
         </Page.Header>
         <Page.Body className='flex'>

diff --git a/frontend/console/src/features/timeline/filters/FilterPanelSection.tsx b/frontend/console/src/features/timeline/filters/FilterPanelSection.tsx
@@ -1,5 +1,5 @@
 import { Disclosure } from '@headlessui/react'
-import { ChevronUpIcon } from '@heroicons/react/20/solid'
+import { ArrowUp01Icon } from 'hugeicons-react'
 import { textColor } from '../../../utils'
 
 export const FilterPanelSection = ({
@@ -19,7 +19,7 @@ export const FilterPanelSection = ({
             className={`flex w-full justify-between rounded-md bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 py-1 px-2 text-left text-sm font-medium ${textColor} focus:outline-none focus-visible:ring focus-visible:ring-gray-500 focus-visible:ring-opacity-75`}
           >
             <span>{title}</span>
-            <ChevronUpIcon className={`${open ? 'rotate-180 transform' : ''} h-5 w-5 text-gray-500`} />
+            <ArrowUp01Icon className={`${open ? 'rotate-180 transform' : ''} h-5 w-5 text-gray-500`} />
           </Disclosure.Button>
           <Disclosure.Panel className={`px-2 py-2 text-sm ${textColor}`}>
             <fieldset>