feat: Add material UI and theme

console/client/package.json

@@ -30,21 +30,26 @@
     "@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",
-    "@tailwindcss/forms": "^0.5.5",
+    "@mui/lab": "^5.0.0-alpha.144",
+    "@mui/material": "^5.14.9",
+    "@mui/x-date-pickers": "^6.13.0",
+    "@tailwindcss/forms": "^0.5.6",
     "@types/react-syntax-highlighter": "^15.5.7",
     "json-schema": "0.4.0",
     "json-schema-faker": "0.5.0-rcv.46",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-router-dom": "6.15.0",
     "react-syntax-highlighter": "^15.5.0",
-    "reactflow": "11.8.2"
+    "reactflow": "11.8.2",
+    "tailwindcss": "^3.3.3"
   },
   "devDependencies": {
     "@bufbuild/buf": "1.26.1",
@@ -78,7 +83,6 @@
     "prettier": "3.0.2",
     "process": "^0.11.10",
     "start-server-and-test": "2.0.0",
-    "tailwindcss": "3.3.3",
     "typed-css-modules": "0.7.2",
     "typescript": "5.1.6"
   }

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

@@ -1,14 +1,14 @@
-import { ViewModuleRounded } from '@mui/icons-material'
-import { PageHeader } from '../../components/PageHeader'
-import { ModulesList } from './ModulesList'
+import { Button, Container, Stack } from '@mui/material'
 
 export const ModulesPage = () => {
   return (
     <>
-      <div className='w-full m-0'>
-        <PageHeader icon={<ViewModuleRounded />} title='Modules' />
-        <ModulesList />
-      </div>
+      <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>
     </>
   )
 }

console/client/src/providers/AppProviders.tsx

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

console/client/src/theme/colors.js

@@ -0,0 +1,70 @@
+import { alpha } from '@mui/material/styles';
+
+const withAlphas = (color) => {
+  return {
+    ...color,
+    alpha4: alpha(color.main, 0.04),
+    alpha8: alpha(color.main, 0.08),
+    alpha12: alpha(color.main, 0.12),
+    alpha30: alpha(color.main, 0.30),
+    alpha50: alpha(color.main, 0.50)
+  };
+};
+
+export const neutral = {
+  50: '#F8F9FA',
+  100: '#F3F4F6',
+  200: '#E5E7EB',
+  300: '#D2D6DB',
+  400: '#9DA4AE',
+  500: '#6C737F',
+  600: '#4D5761',
+  700: '#2F3746',
+  800: '#1C2536',
+  900: '#111927'
+};
+
+export const indigo = withAlphas({
+  lightest: '#F5F7FF',
+  light: '#EBEEFE',
+  main: '#6366F1',
+  dark: '#4338CA',
+  darkest: '#312E81',
+  contrastText: '#FFFFFF'
+});
+
+export const success = withAlphas({
+  lightest: '#F0FDF9',
+  light: '#3FC79A',
+  main: '#10B981',
+  dark: '#0B815A',
+  darkest: '#134E48',
+  contrastText: '#FFFFFF'
+});
+
+export const info = withAlphas({
+  lightest: '#ECFDFF',
+  light: '#CFF9FE',
+  main: '#06AED4',
+  dark: '#0E7090',
+  darkest: '#164C63',
+  contrastText: '#FFFFFF'
+});
+
+export const warning = withAlphas({
+  lightest: '#FFFAEB',
+  light: '#FEF0C7',
+  main: '#F79009',
+  dark: '#B54708',
+  darkest: '#7A2E0E',
+  contrastText: '#FFFFFF'
+});
+
+export const error = withAlphas({
+  lightest: '#FEF3F2',
+  light: '#FEE4E2',
+  main: '#F04438',
+  dark: '#B42318',
+  darkest: '#7A271A',
+  contrastText: '#FFFFFF'
+});