adding in mui and getting rid of other styling

packages/desktop/package.json

@@ -77,7 +77,6 @@
     "@typescript-eslint/eslint-plugin": "^5.0.0",
     "@typescript-eslint/parser": "^5.0.0",
     "@vercel/webpack-asset-relocator-loader": "1.7.0",
-    "autoprefixer": "^10.4.4",
     "css-loader": "^6.0.0",
     "electron": "17.1.2",
     "eslint": "^8.0.1",
@@ -86,21 +85,19 @@
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.5.0",
     "fork-ts-checker-webpack-plugin": "^6.0.1",
-    "mini-css-extract-plugin": "^2.6.0",
     "node-loader": "^2.0.0",
-    "postcss": "^8.4.12",
-    "postcss-loader": "^6.2.1",
-    "sass-loader": "^12.6.0",
     "style-loader": "^3.0.0",
-    "tailwindcss": "^3.0.23",
     "ts-loader": "^9.2.2",
     "typescript": "~4.5.4"
   },
   "dependencies": {
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "@mui/icons-material": "^5.8.0",
+    "@mui/material": "^5.8.1",
     "@getstation/electron-google-oauth2": "^2.1.0",
     "@nirvana/components": "*",
     "@nirvana/core": "*",
-    "antd": "^4.20.2",
     "axios": "^0.26.1",
     "electron-squirrel-startup": "^1.0.0",
     "electron-store": "^8.0.1",

packages/desktop/postcss.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  plugins: [require("tailwindcss"), require("autoprefixer")],
-};

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>
+    <ThemeProvider theme={NirvanaTheme}>
-      <ElectronProvider>
+      <StabilityProvider>
-        <AuthProvider>
+        <ElectronProvider>
-          <ProtectedRoute>
+          <AuthProvider>
-            <ZenProvider>
+            <ProtectedRoute>
-              <SocketProvider>
+              <ZenProvider>
-                <></>
+                <SocketProvider>
-              </SocketProvider>
+                  <></>
-            </ZenProvider>
+                </SocketProvider>
-          </ProtectedRoute>
+              </ZenProvider>
-        </AuthProvider>
+            </ProtectedRoute>
+          </AuthProvider>
 
-        <Toaster
+          <Toaster
-          position={'bottom-right'}
+            position={'bottom-right'}
-          toastOptions={{
+            toastOptions={{
-            style: {
+              style: {
-              borderRadius: '10px',
+                borderRadius: '10px',
-              background: '#333',
+                background: '#333',
-              color: '#fff',
+                color: '#fff',
-            },
+              },
-          }}
+            }}
-        />
+          />
-      </ElectronProvider>
+        </ElectronProvider>
-    </StabilityProvider>
+      </StabilityProvider>
+    </ThemeProvider>
   );
 }

packages/desktop/tailwind.config.js

@@ -1,7 +0,0 @@
-module.exports = {
-  content: ["./src/**/*.{js,jsx,ts,tsx}"],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};

packages/desktop/webpack.renderer.config.js

@@ -1,22 +1,11 @@
-const rules = require("./webpack.rules");
+const rules = require('./webpack.rules');
-const plugins = require("./webpack.plugins");
+const plugins = require('./webpack.plugins');
 
-const path = require("path");
+const path = require('path');
 
 rules.push({
   test: /\.css$/,
-  use: [
+  use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
-    { loader: "style-loader" },
-    { loader: "css-loader" },
-    {
-      loader: "postcss-loader",
-      options: {
-        postcssOptions: {
-          config: path.join(__dirname, "postcss.config.js"),
-        },
-      },
-    },
-  ],
 });
 
 module.exports = {
@@ -25,6 +14,6 @@ module.exports = {
   },
   plugins: plugins,
   resolve: {
-    extensions: [".js", ".ts", ".jsx", ".tsx", ".css"],
+    extensions: ['.js', '.ts', '.jsx', '.tsx', '.css'],
   },
 };

packages/desktop/webpack.rules.js

@@ -1,5 +1,4 @@
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const path = require('path');
-const path = require("path");
 
 module.exports = [
   // Add support for native node modules
@@ -7,15 +6,15 @@ module.exports = [
     // We're specifying native_modules in the test because the asset relocator loader generates a
     // "fake" .node file which is really a cjs file.
     test: /native_modules\/.+\.node$/,
-    use: "node-loader",
+    use: 'node-loader',
   },
   {
     test: /\.(m?js|node)$/,
     parser: { amd: false },
     use: {
-      loader: "@vercel/webpack-asset-relocator-loader",
+      loader: '@vercel/webpack-asset-relocator-loader',
       options: {
-        outputAssetBase: "native_modules",
+        outputAssetBase: 'native_modules',
       },
     },
   },
@@ -23,7 +22,7 @@ module.exports = [
     test: /\.tsx?$/,
     exclude: /(node_modules|\.webpack)/,
     use: {
-      loader: "ts-loader",
+      loader: 'ts-loader',
       options: {
         transpileOnly: true,
       },

packages/desktop/webpack.web.config.js

@@ -1,41 +1,30 @@
-const rules = require("./webpack.rules");
+const rules = require('./webpack.rules');
 
-const plugins = require("./webpack.plugins");
+const plugins = require('./webpack.plugins');
 
-const path = require("path");
+const path = require('path');
 
 rules.push({
   test: /\.css$/,
-  use: [
+  use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
-    { loader: "style-loader" },
-    { loader: "css-loader" },
-    {
-      loader: "postcss-loader",
-      options: {
-        postcssOptions: {
-          config: path.join(__dirname, "postcss.config.js"),
-        },
-      },
-    },
-  ],
 });
 
 module.exports = {
-  mode: "development",
+  mode: 'development',
-  entry: "./src/app.tsx",
+  entry: './src/app.tsx',
   module: {
     rules,
   },
   plugins: plugins,
   resolve: {
-    extensions: [".js", ".ts", ".jsx", ".tsx", ".css"],
+    extensions: ['.js', '.ts', '.jsx', '.tsx', '.css'],
   },
   output: {
-    path: path.resolve(__dirname, "build"),
+    path: path.resolve(__dirname, 'build'),
-    filename: "bundle.js",
+    filename: 'bundle.js',
   },
   devServer: {
-    static: path.join(__dirname, "build"),
+    static: path.join(__dirname, 'build'),
     compress: true,
     port: 4000,
   },