+
@@ -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`}
>
-
+
diff --git a/console/client/src/layout/Navigation.tsx b/console/client/src/layout/Navigation.tsx
index e96051a2b0..8559db24a5 100644
--- a/console/client/src/layout/Navigation.tsx
+++ b/console/client/src/layout/Navigation.tsx
@@ -1,4 +1,4 @@
-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'
@@ -6,9 +6,9 @@ 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 = () => {
diff --git a/console/client/src/providers/AppProviders.tsx b/console/client/src/providers/AppProviders.tsx
index 87909a6db0..e2ffcbe00c 100644
--- a/console/client/src/providers/AppProviders.tsx
+++ b/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 (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
)
}
diff --git a/console/client/src/theme/colors.js b/console/client/src/theme/colors.js
deleted file mode 100644
index d3923bbf02..0000000000
--- a/console/client/src/theme/colors.js
+++ /dev/null
@@ -1,70 +0,0 @@
-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.3),
- alpha50: alpha(color.main, 0.5),
- }
-}
-
-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',
-})
diff --git a/console/client/src/theme/create-components.js b/console/client/src/theme/create-components.js
deleted file mode 100644
index bd0a6def15..0000000000
--- a/console/client/src/theme/create-components.js
+++ /dev/null
@@ -1,295 +0,0 @@
-import {
- createTheme,
- filledInputClasses,
- inputLabelClasses,
- outlinedInputClasses,
- paperClasses,
- tableCellClasses,
-} from '@mui/material'
-
-// Used only to create transitions
-const muiTheme = createTheme()
-
-export const createComponents = (config) => {
- const { palette } = config
-
- return {
- MuiAvatar: {
- styleOverrides: {
- root: {
- fontSize: 14,
- fontWeight: 600,
- letterSpacing: 0,
- },
- },
- },
- MuiButton: {
- styleOverrides: {
- root: {
- borderRadius: '12px',
- textTransform: 'none',
- },
- sizeSmall: {
- padding: '6px 16px',
- },
- sizeMedium: {
- padding: '8px 20px',
- },
- sizeLarge: {
- padding: '11px 24px',
- },
- textSizeSmall: {
- padding: '7px 12px',
- },
- textSizeMedium: {
- padding: '9px 16px',
- },
- textSizeLarge: {
- padding: '12px 16px',
- },
- },
- },
- MuiCard: {
- styleOverrides: {
- root: {
- borderRadius: 20,
- [`&.${paperClasses.elevation1}`]: {
- boxShadow: '0px 5px 22px rgba(0, 0, 0, 0.04), 0px 0px 0px 0.5px rgba(0, 0, 0, 0.03)',
- },
- },
- },
- },
- MuiCardContent: {
- styleOverrides: {
- root: {
- padding: '32px 24px',
- '&:last-child': {
- paddingBottom: '32px',
- },
- },
- },
- },
- MuiCardHeader: {
- defaultProps: {
- titleTypographyProps: {
- variant: 'h6',
- },
- subheaderTypographyProps: {
- variant: 'body2',
- },
- },
- styleOverrides: {
- root: {
- padding: '32px 24px 16px',
- },
- },
- },
- MuiCssBaseline: {
- styleOverrides: {
- '*': {
- boxSizing: 'border-box',
- },
- html: {
- MozOsxFontSmoothing: 'grayscale',
- WebkitFontSmoothing: 'antialiased',
- display: 'flex',
- flexDirection: 'column',
- minHeight: '100%',
- width: '100%',
- },
- body: {
- display: 'flex',
- flex: '1 1 auto',
- flexDirection: 'column',
- minHeight: '100%',
- width: '100%',
- },
- '#__next': {
- display: 'flex',
- flex: '1 1 auto',
- flexDirection: 'column',
- height: '100%',
- width: '100%',
- },
- '#nprogress': {
- pointerEvents: 'none',
- },
- '#nprogress .bar': {
- backgroundColor: palette.primary.main,
- height: 3,
- left: 0,
- position: 'fixed',
- top: 0,
- width: '100%',
- zIndex: 2000,
- },
- },
- },
- MuiInputBase: {
- styleOverrides: {
- input: {
- '&::placeholder': {
- opacity: 1,
- },
- },
- },
- },
- MuiInput: {
- styleOverrides: {
- input: {
- fontSize: 14,
- fontWeight: 500,
- lineHeight: '24px',
- '&::placeholder': {
- color: palette.text.secondary,
- },
- },
- },
- },
- MuiFilledInput: {
- styleOverrides: {
- root: {
- backgroundColor: 'transparent',
- borderRadius: 8,
- borderStyle: 'solid',
- borderWidth: 1,
- overflow: 'hidden',
- borderColor: palette.neutral[200],
- transition: muiTheme.transitions.create(['border-color', 'box-shadow']),
- '&:hover': {
- backgroundColor: palette.action.hover,
- },
- '&:before': {
- display: 'none',
- },
- '&:after': {
- display: 'none',
- },
- [`&.${filledInputClasses.disabled}`]: {
- backgroundColor: 'transparent',
- },
- [`&.${filledInputClasses.focused}`]: {
- backgroundColor: 'transparent',
- borderColor: palette.primary.main,
- boxShadow: `${palette.primary.main} 0 0 0 2px`,
- },
- [`&.${filledInputClasses.error}`]: {
- borderColor: palette.error.main,
- boxShadow: `${palette.error.main} 0 0 0 2px`,
- },
- },
- input: {
- fontSize: 14,
- fontWeight: 500,
- lineHeight: '24px',
- },
- },
- },
- MuiOutlinedInput: {
- styleOverrides: {
- root: {
- '&:hover': {
- backgroundColor: palette.action.hover,
- [`& .${outlinedInputClasses.notchedOutline}`]: {
- borderColor: palette.neutral[200],
- },
- },
- [`&.${outlinedInputClasses.focused}`]: {
- backgroundColor: 'transparent',
- [`& .${outlinedInputClasses.notchedOutline}`]: {
- borderColor: palette.primary.main,
- boxShadow: `${palette.primary.main} 0 0 0 2px`,
- },
- },
- [`&.${filledInputClasses.error}`]: {
- [`& .${outlinedInputClasses.notchedOutline}`]: {
- borderColor: palette.error.main,
- boxShadow: `${palette.error.main} 0 0 0 2px`,
- },
- },
- },
- input: {
- fontSize: 14,
- fontWeight: 500,
- lineHeight: '24px',
- },
- notchedOutline: {
- borderColor: palette.neutral[200],
- transition: muiTheme.transitions.create(['border-color', 'box-shadow']),
- },
- },
- },
- MuiFormLabel: {
- styleOverrides: {
- root: {
- fontSize: 14,
- fontWeight: 500,
- [`&.${inputLabelClasses.filled}`]: {
- transform: 'translate(12px, 18px) scale(1)',
- },
- [`&.${inputLabelClasses.shrink}`]: {
- [`&.${inputLabelClasses.standard}`]: {
- transform: 'translate(0, -1.5px) scale(0.85)',
- },
- [`&.${inputLabelClasses.filled}`]: {
- transform: 'translate(12px, 6px) scale(0.85)',
- },
- [`&.${inputLabelClasses.outlined}`]: {
- transform: 'translate(14px, -9px) scale(0.85)',
- },
- },
- },
- },
- },
- MuiTab: {
- styleOverrides: {
- root: {
- fontSize: 14,
- fontWeight: 500,
- lineHeight: 1.71,
- minWidth: 'auto',
- paddingLeft: 0,
- paddingRight: 0,
- textTransform: 'none',
- '& + &': {
- marginLeft: 24,
- },
- },
- },
- },
- MuiTableCell: {
- styleOverrides: {
- root: {
- borderBottomColor: palette.divider,
- padding: '15px 16px',
- },
- },
- },
- MuiTableHead: {
- styleOverrides: {
- root: {
- borderBottom: 'none',
- [`& .${tableCellClasses.root}`]: {
- borderBottom: 'none',
- backgroundColor: palette.neutral[50],
- color: palette.neutral[700],
- fontSize: 12,
- fontWeight: 600,
- lineHeight: 1,
- letterSpacing: 0.5,
- textTransform: 'uppercase',
- },
- [`& .${tableCellClasses.paddingCheckbox}`]: {
- paddingTop: 4,
- paddingBottom: 4,
- },
- },
- },
- },
- MuiTextField: {
- defaultProps: {
- variant: 'filled',
- },
- },
- }
-}
diff --git a/console/client/src/theme/create-palette.js b/console/client/src/theme/create-palette.js
deleted file mode 100644
index 09ad1f54a8..0000000000
--- a/console/client/src/theme/create-palette.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import { common } from '@mui/material/colors'
-import { alpha } from '@mui/material/styles'
-import { error, indigo, info, neutral, success, warning } from './colors'
-
-export const createPalette = () => {
- return {
- action: {
- active: neutral[500],
- disabled: alpha(neutral[900], 0.38),
- disabledBackground: alpha(neutral[900], 0.12),
- focus: alpha(neutral[900], 0.16),
- hover: alpha(neutral[900], 0.04),
- selected: alpha(neutral[900], 0.12),
- },
- background: {
- default: common.white,
- paper: common.white,
- },
- divider: '#F2F4F7',
- error,
- info,
- mode: 'light',
- neutral,
- primary: indigo,
- success,
- text: {
- primary: neutral[900],
- secondary: neutral[500],
- disabled: alpha(neutral[900], 0.38),
- },
- warning,
- }
-}
diff --git a/console/client/src/theme/create-shadows.js b/console/client/src/theme/create-shadows.js
deleted file mode 100644
index 345f151eb7..0000000000
--- a/console/client/src/theme/create-shadows.js
+++ /dev/null
@@ -1,29 +0,0 @@
-export const createShadows = () => {
- return [
- 'none',
- '0px 1px 2px rgba(0, 0, 0, 0.08)',
- '0px 1px 5px rgba(0, 0, 0, 0.08)',
- '0px 1px 8px rgba(0, 0, 0, 0.08)',
- '0px 1px 10px rgba(0, 0, 0, 0.08)',
- '0px 1px 14px rgba(0, 0, 0, 0.08)',
- '0px 1px 18px rgba(0, 0, 0, 0.08)',
- '0px 2px 16px rgba(0, 0, 0, 0.08)',
- '0px 3px 14px rgba(0, 0, 0, 0.08)',
- '0px 3px 16px rgba(0, 0, 0, 0.08)',
- '0px 4px 18px rgba(0, 0, 0, 0.08)',
- '0px 4px 20px rgba(0, 0, 0, 0.08)',
- '0px 5px 22px rgba(0, 0, 0, 0.08)',
- '0px 5px 24px rgba(0, 0, 0, 0.08)',
- '0px 5px 26px rgba(0, 0, 0, 0.08)',
- '0px 6px 28px rgba(0, 0, 0, 0.08)',
- '0px 6px 30px rgba(0, 0, 0, 0.08)',
- '0px 6px 32px rgba(0, 0, 0, 0.08)',
- '0px 7px 34px rgba(0, 0, 0, 0.08)',
- '0px 7px 36px rgba(0, 0, 0, 0.08)',
- '0px 8px 38px rgba(0, 0, 0, 0.08)',
- '0px 8px 40px rgba(0, 0, 0, 0.08)',
- '0px 8px 42px rgba(0, 0, 0, 0.08)',
- '0px 9px 44px rgba(0, 0, 0, 0.08)',
- '0px 9px 46px rgba(0, 0, 0, 0.08)',
- ]
-}
diff --git a/console/client/src/theme/create-typography.js b/console/client/src/theme/create-typography.js
deleted file mode 100644
index c2eaae9147..0000000000
--- a/console/client/src/theme/create-typography.js
+++ /dev/null
@@ -1,77 +0,0 @@
-export const createTypography = () => {
- return {
- fontFamily:
- '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
- body1: {
- fontSize: '1rem',
- fontWeight: 400,
- lineHeight: 1.5,
- },
- body2: {
- fontSize: '0.875rem',
- fontWeight: 400,
- lineHeight: 1.57,
- },
- button: {
- fontWeight: 600,
- },
- caption: {
- fontSize: '0.75rem',
- fontWeight: 500,
- lineHeight: 1.66,
- },
- subtitle1: {
- fontSize: '1rem',
- fontWeight: 500,
- lineHeight: 1.57,
- },
- subtitle2: {
- fontSize: '0.875rem',
- fontWeight: 500,
- lineHeight: 1.57,
- },
- overline: {
- fontSize: '0.75rem',
- fontWeight: 600,
- letterSpacing: '0.5px',
- lineHeight: 2.5,
- textTransform: 'uppercase',
- },
- h1: {
- fontFamily: "'Plus Jakarta Sans', sans-serif",
- fontWeight: 700,
- fontSize: '3.5rem',
- lineHeight: 1.2,
- },
- h2: {
- fontFamily: "'Plus Jakarta Sans', sans-serif",
- fontWeight: 700,
- fontSize: '3rem',
- lineHeight: 1.2,
- },
- h3: {
- fontFamily: "'Plus Jakarta Sans', sans-serif",
- fontWeight: 700,
- fontSize: '2.25rem',
- lineHeight: 1.2,
- },
- h4: {
- fontFamily: "'Plus Jakarta Sans', sans-serif",
- fontWeight: 700,
- fontSize: '2rem',
- lineHeight: 1.2,
- },
- h5: {
- fontFamily: "'Plus Jakarta Sans', sans-serif",
- fontWeight: 700,
- fontSize: '1.5rem',
- lineHeight: 1.2,
- },
- h6: {
- fontFamily: "'Plus Jakarta Sans', sans-serif",
- fontWeight: 700,
- fontSize: '1.125rem',
- lineHeight: 1.2,
- },
- }
-}
diff --git a/console/client/src/theme/index.js b/console/client/src/theme/index.js
deleted file mode 100644
index 3856460dc2..0000000000
--- a/console/client/src/theme/index.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import { createTheme as createMuiTheme } from '@mui/material'
-import { createComponents } from './create-components'
-import { createPalette } from './create-palette'
-import { createShadows } from './create-shadows'
-import { createTypography } from './create-typography'
-
-export const createTheme = () => {
- const palette = createPalette()
- const components = createComponents({ palette })
- const shadows = createShadows()
- const typography = createTypography()
-
- return createMuiTheme({
- breakpoints: {
- values: {
- xs: 0,
- sm: 600,
- md: 900,
- lg: 1200,
- xl: 1440,
- },
- },
- components,
- palette,
- shadows,
- shape: {
- borderRadius: 8,
- },
- typography,
- })
-}