adding mui basic

packages/desktop/package.json

@@ -45,7 +45,8 @@
       "plugins": [
         [
           "@electron-forge/plugin-webpack",
-          {
+          {            
+            "devContentSecurityPolicy":"default-src * self blob: data: gap:; style-src * self 'unsafe-inline' blob: data: gap:; script-src * 'self' 'unsafe-eval' 'unsafe-inline' blob: data: gap:; object-src * 'self' blob: data: gap:; img-src * self 'unsafe-inline' blob: data: gap:; connect-src self * 'unsafe-inline' blob: data: gap:; frame-src * self blob: data: gap:;",
             "mainConfig": "./webpack.main.config.js",
             "renderer": {
               "config": "./webpack.renderer.config.js",
@@ -88,6 +89,9 @@
     "typescript": "~4.5.4"
   },
   "dependencies": {
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "@mui/material": "^5.8.1",
     "electron-squirrel-startup": "^1.0.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0"

packages/desktop/src/app.tsx

@@ -1,11 +1,42 @@
+import { Button, createTheme, ThemeProvider, Typography } from '@mui/material';
 import * as React from 'react';
 
 import ReactDOM from "react-dom/client";
 
+const theme = createTheme({
+  typography:{
+    fontFamily: ['IBM Plex Sans', 'sans-serif'].join(',')
+  },
+  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 💣!
+      },
+    },
+  },
+});
+
+
+
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 
 root.render(
     <React.StrictMode>
-      hello from react
+      <ThemeProvider theme={theme}>
+
+<Typography>hahaha</Typography>
+    
+      <Button>Yooo</Button>
+      </ThemeProvider>
     </React.StrictMode>
   );

packages/desktop/src/index.ts

@@ -16,6 +16,9 @@ const createWindow = (): void => {
   // Create the browser window.
   const mainWindow = new BrowserWindow({
     ...DEFAULT_APP_PRESET,
+    // titleBarStyle: "hiddenInset",
+    frame: false,
+    roundedCorners: true,
   });
 
   // and load the index.html of the app.