taking out mui nonsense

packages/desktop/package.json

@@ -107,11 +107,8 @@
     "webpack": "^5.72.0"
   },
   "dependencies": {
-    "@emotion/react": "^11.9.0",
-    "@emotion/styled": "^11.8.1",
     "@getstation/electron-google-oauth2": "^2.1.0",
     "@mui/icons-material": "^5.6.2",
-    "@mui/material": "^5.6.3",
     "@nirvana/core": "*",
     "antd": "^4.19.2",
     "axios": "^0.26.1",

packages/desktop/src/components/header/index.tsx

@@ -1,17 +1,9 @@
-import {
-  Avatar,
-  Button,
-  ListItemIcon,
-  ListItemText,
-  Menu,
-  MenuItem,
-  MenuList,
-} from "@mui/material";
 import { GlobalHotKeys, KeyMap } from "react-hotkeys";
 import { HeadsetMicSharp, VideocamSharp } from "@mui/icons-material";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import { $selectedOutputMode } from "../../controller/recoil";
+import { Avatar } from "antd";
 import { FaSearch } from "react-icons/fa";
 import Logo from "../Logo";
 import { useGetUserDetails } from "../../controller/index";
@@ -117,13 +109,13 @@ export default function NirvanaHeader({
               className="mr-1"
               alt={userDetailsRes?.user?.givenName}
               src={userDetailsRes?.user?.picture}
-              variant="square"
+              shape="square"
             />
           )}
         </div>
 
         {/* menu for the output options */}
-        <Menu
+        {/* <Menu
           open={menuOpen}
           id="user-output-selection-menu"
           anchorEl={anchorEl}
@@ -145,7 +137,7 @@ export default function NirvanaHeader({
             </ListItemIcon>
             <ListItemText>Video</ListItemText>
           </MenuItem>
-        </Menu>
+        </Menu> */}
       </div>
     </>
   );

packages/desktop/src/pages/nirvanaApp.tsx

@@ -1,5 +1,4 @@
 import { QueryClient, QueryClientProvider } from "react-query";
-import { ThemeProvider, createTheme } from "@mui/material";
 
 import Login from "./Login";
 import NirvanaRouter from "./router";
@@ -12,46 +11,6 @@ import testConnection from "@nirvana/core";
 
 testConnection();
 
-const theme = createTheme({
-  palette: {
-    primary: {
-      main: "#438E86",
-    },
-    secondary: {
-      main: "#161616",
-    },
-    info: {
-      main: "#A8A8A8",
-    },
-  },
-  typography: {
-    fontFamily: "IBM Plex Sans",
-    button: {
-      textTransform: "none",
-    },
-  },
-  components: {
-    MuiButton: {
-      styleOverrides: {
-        root: {
-          borderRadius: 0,
-          fontWeight: 300,
-        },
-      },
-    },
-    MuiFab: {
-      styleOverrides: {
-        root: {
-          borderRadius: 0,
-        },
-      },
-    },
-  },
-  shape: {
-    borderRadius: 0,
-  },
-});
-
 // Create a client
 export const queryClient = new QueryClient();
 
@@ -61,18 +20,16 @@ function NirvanaApp() {
   return (
     <>
       <QueryClientProvider client={queryClient}>
-        <ThemeProvider theme={theme}>
-          <RecoilRoot>
-            <ProtectedRoute>
-              <NirvanaRouter />
-            </ProtectedRoute>
+        <RecoilRoot>
+          <ProtectedRoute>
+            <NirvanaRouter />
+          </ProtectedRoute>
 
-            {/* <ReactQueryDevtools
+          {/* <ReactQueryDevtools
               initialIsOpen={false}
               position={"bottom-left"}
             /> */}
-          </RecoilRoot>
-        </ThemeProvider>
+        </RecoilRoot>
         <Toaster />
       </QueryClientProvider>
     </>

packages/desktop/src/pages/router/index.tsx

@@ -223,7 +223,8 @@ type DesktopMode = "flowState" | "overlayOnly" | "terminal" | "terminalDetails";
 
 export default function NirvanaRouter() {
   const [selectedLineId, setSelectedLineId] = useState<string>(null);
-  const [desktopMode, setDesktopMode] = useState<DesktopMode>("terminal");
+  const [desktopMode, setDesktopMode] =
+    useState<DesktopMode>("terminalDetails");
   const numberOfOverlayColumns = useRecoilValue($numberActiveLines);
   const numberOfOverlayRows = useRecoilValue($maxNumberActiveStreams);
 

packages/desktop/src/pages/terminal/index.tsx

@@ -1,9 +1,11 @@
+import { useMemo, useState } from "react";
+
 import { FaPlus } from "react-icons/fa";
 import { FiActivity } from "react-icons/fi";
 import { ILineDetails } from "../router";
 import IconButton from "../../components/Button/IconButton/index";
 import LineRow from "../../components/lines/lineRow.tsx/index";
-import { useMemo } from "react";
+import NewLineModal from "./newLine";
 
 export default function NirvanaTerminal({
   handleSelectLine,
@@ -12,6 +14,8 @@ export default function NirvanaTerminal({
   handleSelectLine: (lineId: string) => void;
   allLines: ILineDetails[];
 }) {
+  const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
+
   // todo: sort/order based on activity and activity date and currently broadcasting/live
 
   const toggleTunedLines = useMemo(
@@ -26,6 +30,12 @@ export default function NirvanaTerminal({
 
   return (
     <div className="flex flex-col bg-white w-[400px]">
+      {/* modal for creating new line */}
+      <NewLineModal
+        open={isModalVisible}
+        handleClose={() => setIsModalVisible(false)}
+      />
+
       {/* tuned in lines block */}
       <div className="bg-gray-100 flex flex-col">
         {/* tuned in header + general controls */}
@@ -38,7 +48,7 @@ export default function NirvanaTerminal({
             <p className="text-slate-300 text-xs">3/5</p>
           </span>
 
-          <div className="ml-auto">
+          <div onClick={() => setIsModalVisible(true)} className="ml-auto">
             <IconButton>
               <FaPlus />
             </IconButton>

packages/desktop/src/pages/terminal/newLine/index.tsx

@@ -0,0 +1,38 @@
+import { Modal } from "antd";
+import { useState } from "react";
+
+export default function NewLineModal({
+  open,
+  handleClose,
+}: {
+  open: boolean;
+  handleClose: () => void;
+}) {
+  const handleOk = () => {
+    // upon success,
+    // make sure that the list of lines updates for this client and others so that it shows this new line
+    // select the line so that it shows up in the line details for this client
+
+    // handle close once the new line is created
+    handleClose();
+  };
+
+  const handleCancel = () => {
+    handleClose();
+  };
+
+  return (
+    <>
+      <Modal
+        title="Basic Modal"
+        visible={open}
+        onOk={handleOk}
+        onCancel={handleCancel}
+      >
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+      </Modal>
+    </>
+  );
+}

packages/desktop/src/styles/index.css

@@ -26,10 +26,10 @@ button {
   border: none;
 }
 
-body {
+/* body {
   background-color: #00000000;
 }
 
 html {
   background-color: #00000000;
-}
+} */