adding in mui and getting rid of other styling

packages/desktop/src/components/lineIcon.tsx

@@ -1,68 +0,0 @@
-import { Avatar } from 'antd';
-
-import React, { useMemo } from 'react';
-
-function LineIcon({
-  sourceImages,
-  grayscale = true,
-}: {
-  sourceImages: string[];
-  grayscale: boolean;
-}) {
-  const isMultiple = useMemo(() => {
-    if (sourceImages?.length > 1) return true;
-
-    return false;
-  }, [sourceImages]);
-
-  return (
-    <>
-      {isMultiple ? (
-        <div
-          className={`relative ${
-            grayscale ? 'grayscale opacity-40' : ''
-          } h-[40px] w-[40px] flex-grow-0`}
-        >
-          {sourceImages.map((avatarSrc, index) => {
-            if (index === 0) {
-              return (
-                <Avatar
-                  key={`lineIcon-${avatarSrc}-${index}`}
-                  src={avatarSrc}
-                  shape="square"
-                  size={'small'}
-                  className={`shadow-lg absolute bottom-0 left-0 bg-slate-200`}
-                />
-              );
-            } else if (index === 1) {
-              return (
-                <Avatar
-                  key={`lineIcon-${avatarSrc}-${index}`}
-                  src={avatarSrc}
-                  shape="square"
-                  size={'small'}
-                  className={`absolute top-0 right-0  bg-slate-200`}
-                />
-              );
-            }
-
-            // TODO: add third in the frame if we want later
-            return <></>;
-          })}
-        </div>
-      ) : (
-        sourceImages?.map((avatarSrc, index) => (
-          <Avatar
-            key={`lineIcon-${avatarSrc}-${index}`}
-            src={avatarSrc}
-            shape="square"
-            size={'large'}
-            className={`${grayscale && 'grayscale opacity-40'} shadow-lg`}
-          />
-        ))
-      )}
-    </>
-  );
-}
-
-export default React.memo(LineIcon);

packages/desktop/src/mui/NirvanaTheme.ts

@@ -0,0 +1,100 @@
+import { createTheme, experimental_sx as sx } from '@mui/material';
+
+import { blueGrey } from '@mui/material/colors';
+
+export const NirvanaTheme = createTheme({
+  typography: {
+    fontFamily: ['IBM Plex Sans', 'sans-serif'].join(','),
+    overline: {
+      letterSpacing: 2,
+    },
+    caption: {
+      color: blueGrey[200],
+    },
+    button: {
+      textTransform: 'none',
+    },
+  },
+  palette: {
+    primary: {
+      main: '#438E86',
+    },
+    secondary: {
+      main: '#FFB6B6',
+    },
+  },
+
+  components: {
+    // Name of the component
+    MuiButtonBase: {
+      defaultProps: {
+        // The props to change the default for.
+        disableRipple: true, // No more ripple, on the whole application 💣!
+      },
+    },
+    MuiAvatar: {
+      styleOverrides: {
+        root: sx({
+          boxShadow: 1,
+        }),
+      },
+      defaultProps: {
+        variant: 'rounded',
+      },
+    },
+    MuiInput: {
+      styleOverrides: {
+        root: {
+          fontSize: '0.9em',
+        },
+      },
+      defaultProps: {
+        disableUnderline: true,
+        fullWidth: true,
+      },
+    },
+
+    MuiListItem: {
+      styleOverrides: {
+        root: {
+          padding: '2px 0 2px 0 !important',
+        },
+      },
+      defaultProps: {
+        disableGutters: true,
+        disablePadding: false,
+      },
+    },
+
+    MuiListItemButton: {
+      styleOverrides: {
+        root: {
+          borderRadius: 5,
+        },
+      },
+    },
+
+    MuiListSubheader: {
+      styleOverrides: {
+        root: {
+          '&.MuiListSubheader-root': {
+            lineHeight: 2,
+            paddingBottom: '4px',
+            display: 'flex',
+            gap: '0.7em',
+            alignItems: 'center',
+            backgroundColor: 'transparent',
+          },
+        },
+      },
+    },
+
+    MuiFab: {
+      styleOverrides: {
+        root: {
+          borderRadius: 5,
+        },
+      },
+    },
+  },
+});

packages/desktop/src/styles/index.css

@@ -1,9 +1,3 @@
-@import '~antd/dist/antd.css';
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 body {
   display: flex;
   flex-direction: column;
@@ -20,10 +14,6 @@ body {
   font-family: 'IBM Plex Sans', sans-serif;
 }
 
-button {
-  @apply transition-all rounded;
-}
-
 .titlebar {
   -webkit-user-select: none;
   -webkit-app-region: drag;
@@ -43,15 +33,6 @@ button {
   -webkit-app-region: no-drag;
 }
 
-.ant-avatar-group .ant-avatar {
-  border: none;
-  @apply shadow-lg;
-}
-
-.ant-modal-footer {
-  padding: 0 !important;
-}
-
 /* Designing for scroll-bar */
 ::-webkit-scrollbar {
   width: 4px;
@@ -59,19 +40,16 @@ button {
 
 /* Track */
 ::-webkit-scrollbar-track {
-  @apply bg-gray-100;
   border-radius: 5px;
 }
 
 /* Handle */
 ::-webkit-scrollbar-thumb {
-  @apply bg-gray-300;
   border-radius: 5px;
 }
 
 /* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
-  @apply bg-gray-500;
 }
 
 .direction-ltr {

packages/desktop/src/tree/Terminal.tsx

@@ -0,0 +1,21 @@
+import { Grid } from '@mui/material';
+import React from 'react';
+
+export default function Terminal() {
+  return (
+    <Grid container spacing={0}>
+      <Grid item xs={4}>
+        This is the sidepanel
+      </Grid>
+
+      <Grid item xs={8}>
+        {' '}
+        main panel
+      </Grid>
+
+      <Grid item xs={12}>
+        This is the footer controls
+      </Grid>
+    </Grid>
+  );
+}

packages/desktop/src/tree/electronApp.tsx

@@ -1,37 +1,41 @@
 import { AuthProvider } from '../providers/AuthProvider';
 import { ElectronProvider } from '../providers/ElectronProvider';
+import { NirvanaTheme } from '../mui/NirvanaTheme';
 import ProtectedRoute from './ProtectedRoute';
 import React from 'react';
 import { SocketProvider } from '../providers/SocketProvider';
 import { StabilityProvider } from '../providers/StabilityProvider';
+import { ThemeProvider } from '@mui/material';
 import { Toaster } from 'react-hot-toast';
 import { ZenProvider } from '../providers/ZenProvider';
 
 export default function ElectronApp() {
   return (
-    <StabilityProvider>
-      <ElectronProvider>
-        <AuthProvider>
-          <ProtectedRoute>
-            <ZenProvider>
-              <SocketProvider>
-                <></>
-              </SocketProvider>
-            </ZenProvider>
-          </ProtectedRoute>
-        </AuthProvider>
+    <ThemeProvider theme={NirvanaTheme}>
+      <StabilityProvider>
+        <ElectronProvider>
+          <AuthProvider>
+            <ProtectedRoute>
+              <ZenProvider>
+                <SocketProvider>
+                  <></>
+                </SocketProvider>
+              </ZenProvider>
+            </ProtectedRoute>
+          </AuthProvider>
 
-        <Toaster
-          position={'bottom-right'}
-          toastOptions={{
-            style: {
-              borderRadius: '10px',
-              background: '#333',
-              color: '#fff',
-            },
-          }}
-        />
-      </ElectronProvider>
-    </StabilityProvider>
+          <Toaster
+            position={'bottom-right'}
+            toastOptions={{
+              style: {
+                borderRadius: '10px',
+                background: '#333',
+                color: '#fff',
+              },
+            }}
+          />
+        </ElectronProvider>
+      </StabilityProvider>
+    </ThemeProvider>
   );
 }