fix: Revert material and mui (#383)

console/client/package.json

@@ -29,16 +29,9 @@
     "@bufbuild/connect": "0.12.0",
     "@bufbuild/connect-web": "0.12.0",
     "@bufbuild/protobuf": "1.3.0",
-    "@emotion/cache": "^11.11.0",
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
     "@headlessui/react": "1.7.16",
     "@heroicons/react": "2.0.18",
     "@monaco-editor/react": "4.5.2",
-    "@mui/icons-material": "^5.14.8",
-    "@mui/lab": "^5.0.0-alpha.144",
-    "@mui/material": "^5.14.9",
-    "@mui/x-date-pickers": "^6.13.0",
     "@tailwindcss/forms": "^0.5.6",
     "@vitejs/plugin-react": "^4.0.4",
     "highlight.js": "^11.8.0",

console/client/src/components/PageHeader.tsx

@@ -12,7 +12,7 @@ export const PageHeader = ({ icon, title, children }: Props) => {
       className={`sticky top-0 z-10 ${panelColor} shadow dark:shadow-md flex justify-between items-center py-2 px-4 text-gray-70`}
     >
       <div className='flex items-center'>
-        <span className='-mt-0.5 text-indigo-500 pr-1'>{icon}</span>
+        <span className='mt-1 text-indigo-500 pr-1 h-6 w-6'>{icon}</span>
         <span className='text-lg'>{title}</span>
       </div>
       {children}

console/client/src/features/graph/GraphPage.tsx

@@ -1,4 +1,4 @@
-import { Schema } from '@mui/icons-material'
+import { CubeTransparentIcon } from '@heroicons/react/24/outline'
 import { useContext, useEffect } from 'react'
 import ReactFlow, { Controls, MiniMap, useEdgesState, useNodesState } from 'reactflow'
 import 'reactflow/dist/style.css'
@@ -23,8 +23,8 @@ export const GraphPage = () => {
 
   return (
     <>
-      <PageHeader icon={<Schema />} title='Graph' />
-      <div style={{ width: '100vw', height: '100vh' }}>
+      <PageHeader icon={<CubeTransparentIcon />} title='Graph' />
+      <div className='flex h-full'>
         <ReactFlow
           nodes={nodes}
           edges={edges}

console/client/src/features/modules/ModulesPage.tsx

@@ -1,14 +1,11 @@
-import { Button, Container, Stack } from '@mui/material'
+import { Square3Stack3DIcon } from '@heroicons/react/24/outline'
+import { PageHeader } from '../../components/PageHeader'
 
 export const ModulesPage = () => {
   return (
     <>
-      <Container maxWidth='sm' sx={{ m: 4 }}>
-        <Stack spacing={2}>
-          <Button variant='contained'>Sample MUI Button</Button>
-          <Button variant='contained'>Sample MUI Button</Button>
-        </Stack>
-      </Container>
+      <PageHeader icon={<Square3Stack3DIcon />} title='Modules' />
+      <div className='flex h-full'>Modules</div>
     </>
   )
 }

console/client/src/features/timeline/TimelineIcon.tsx

@@ -1,4 +1,4 @@
-import { Call, ListAlt, ListOutlined, PhoneCallback, RocketLaunch } from '@mui/icons-material'
+import { ListBulletIcon, PhoneArrowDownLeftIcon, PhoneIcon, RocketLaunchIcon } from '@heroicons/react/24/outline'
 import { TimelineEvent } from '../../protos/xyz/block/ftl/v1/console/console_pb'
 
 interface Props {
@@ -26,20 +26,20 @@ export const TimelineIcon = ({ entry }: Props) => {
   }
 
   const icon = (entry: TimelineEvent) => {
-    const iconSize = 20
+    const style = 'h4 w-4'
     switch (entry.entry.case) {
       case 'call':
         return entry.entry.value.sourceVerbRef ? (
-          <PhoneCallback sx={{ fontSize: iconSize }} />
+          <PhoneIcon className={`${style}`} />
         ) : (
-          <Call sx={{ fontSize: iconSize }} />
+          <PhoneArrowDownLeftIcon className={`${style}`} />
         )
       case 'deployment':
-        return <RocketLaunch sx={{ fontSize: iconSize }} />
+        return <RocketLaunchIcon className={`${style}`} />
       case 'log':
-        return <ListOutlined sx={{ fontSize: iconSize }} />
+        return <ListBulletIcon className={`${style}`} />
       default:
-        return <ListAlt sx={{ fontSize: iconSize }} />
+        return <ListBulletIcon className={`${style}`} />
     }
   }
 

console/client/src/features/timeline/TimelinePage.tsx

@@ -1,4 +1,4 @@
-import { Timeline as TimelineIcon } from '@mui/icons-material'
+import { ListBulletIcon } from '@heroicons/react/24/outline'
 import { PageHeader } from '../../components/PageHeader'
 import { Timeline } from './Timeline'
 import { TimelineFilterPanel } from './filters/TimelineFilterPanel'
@@ -7,7 +7,7 @@ import { TimelineTimeControls } from './filters/TimelineTimeControls'
 export const TimelinePage = () => {
   return (
     <>
-      <PageHeader icon={<TimelineIcon />} title='Events'>
+      <PageHeader icon={<ListBulletIcon />} title='Events'>
         <TimelineTimeControls />
       </PageHeader>
       <div className='flex h-full'>

console/client/src/features/timeline/filters/TimelineTimeControls.tsx

@@ -1,6 +1,5 @@
 import { Listbox, Transition } from '@headlessui/react'
-import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/24/outline'
-import { NavigateBefore, NavigateNext, PlayArrow } from '@mui/icons-material'
+import { BackwardIcon, CheckIcon, ChevronUpDownIcon, ForwardIcon, PlayIcon } from '@heroicons/react/24/outline'
 import React, { Fragment } from 'react'
 import { bgColor, borderColor, classNames, panelColor, textColor } from '../../../utils'
 
@@ -22,11 +21,11 @@ export const TimelineTimeControls = () => {
 
   return (
     <>
-      <div className='flex items-center'>
+      <div className='flex items-center h-6'>
         <Listbox value={selected} onChange={setSelected}>
           {({ open }) => (
             <>
-              <div className='relative w-40 mr-2 -mt-0.5 h-6 items-center'>
+              <div className='relative w-40 mr-2 -mt-0.5 items-center'>
                 <Listbox.Button
                   className={`relative w-full cursor-pointer rounded-md ${bgColor} ${textColor} py-1 pl-3 pr-10 text-xs text-left shadow-sm ring-1 ring-inset ${borderColor} focus:outline-none focus:ring-2 focus:ring-indigo-600`}
                 >
@@ -93,19 +92,19 @@ export const TimelineTimeControls = () => {
             type='button'
             className={`relative inline-flex items-center rounded-l-md px-3 text-sm font-semibold ring-1 ring-inset ${borderColor} hover:bg-gray-50 dark:hover:bg-gray-700 focus:z-10`}
           >
-            <NavigateBefore sx={{ fontSize: 16 }} />
+            <BackwardIcon className='w-4 h-4' />
           </button>
           <button
             type='button'
             className={`relative -ml-px inline-flex items-center px-3 text-sm font-semibold ring-1 ring-inset ${borderColor} hover:bg-gray-50 dark:hover:bg-gray-700 focus:z-10`}
           >
-            <PlayArrow sx={{ fontSize: 16 }} />
+            <PlayIcon className='w-4 h-4' />
           </button>
           <button
             type='button'
             className={`relative -ml-px inline-flex items-center rounded-r-md px-3 text-sm font-semibold ring-1 ring-inset ${borderColor} hover:bg-gray-50 dark:hover:bg-gray-700 focus:z-10`}
           >
-            <NavigateNext sx={{ fontSize: 16 }} />
+            <ForwardIcon className='w-4 h-4' />
           </button>
         </span>
       </div>

console/client/src/layout/Navigation.tsx

@@ -1,14 +1,14 @@
-import { Schema, Timeline, ViewModuleRounded } from '@mui/icons-material'
+import { CubeTransparentIcon, ListBulletIcon, Square3Stack3DIcon } from '@heroicons/react/24/outline'
 import { useContext } from 'react'
 import { Link, NavLink } from 'react-router-dom'
 import { DarkModeSwitch } from '../components/DarkModeSwitch'
 import { modulesContext } from '../providers/modules-provider'
 import { classNames } from '../utils'
 
 const navigation = [
-  { name: 'Events', href: '/events', icon: Timeline },
-  { name: 'Modules', href: '/modules', icon: ViewModuleRounded },
-  { name: 'Graph', href: '/graph', icon: Schema },
+  { name: 'Events', href: '/events', icon: ListBulletIcon },
+  { name: 'Modules', href: '/modules', icon: Square3Stack3DIcon },
+  { name: 'Graph', href: '/graph', icon: CubeTransparentIcon },
 ]
 
 export const Navigation = () => {

console/client/src/providers/AppProviders.tsx

@@ -1,6 +1,4 @@
-import { ThemeProvider } from '@mui/material'
 import { App } from '../App'
-import { createTheme } from '../theme'
 import { DarkModeProvider } from './dark-mode-provider'
 import { ModulesProvider } from './modules-provider'
 import { NotificationsProvider } from './notifications-provider'
@@ -10,24 +8,21 @@ import { SelectedTimelineEntryProvider } from './selected-timeline-entry-provide
 import { SidePanelProvider } from './side-panel-provider'
 
 export const AppProviders = () => {
-  const theme = createTheme()
   return (
-    <ThemeProvider theme={theme}>
-      <DarkModeProvider>
-        <SchemaProvider>
-          <ModulesProvider>
-            <SelectedModuleProvider>
-              <SelectedTimelineEntryProvider>
-                <SidePanelProvider>
-                  <NotificationsProvider>
-                    <App />
-                  </NotificationsProvider>
-                </SidePanelProvider>
-              </SelectedTimelineEntryProvider>
-            </SelectedModuleProvider>
-          </ModulesProvider>
-        </SchemaProvider>
-      </DarkModeProvider>
-    </ThemeProvider>
+    <DarkModeProvider>
+      <SchemaProvider>
+        <ModulesProvider>
+          <SelectedModuleProvider>
+            <SelectedTimelineEntryProvider>
+              <SidePanelProvider>
+                <NotificationsProvider>
+                  <App />
+                </NotificationsProvider>
+              </SidePanelProvider>
+            </SelectedTimelineEntryProvider>
+          </SelectedModuleProvider>
+        </ModulesProvider>
+      </SchemaProvider>
+    </DarkModeProvider>
   )
 }