taking out mui nonsense

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>
+    </>
+  );
+}