adding in mui theme and making buttons more nirvana like

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

@@ -30,7 +30,9 @@ export default function NirvanaHeader() {
       <Logo type="small" className="scale-[0.2]" />
 
       <div className="ml-auto">
-        <Button>flow state</Button>
+        <Button color="info" size="small">
+          flow state
+        </Button>
       </div>
 
       <video

packages/desktop/src/pages/nirvanaApp.tsx

@@ -1,4 +1,5 @@
 import { QueryClient, QueryClientProvider } from "react-query";
+import { ThemeProvider, createTheme } from "@mui/material";
 
 import Login from "./Login";
 import NirvanaRouter from "./router";
@@ -6,7 +7,6 @@ import ProtectedRoute from "../components/ProtectedRoute";
 import { ReactQueryDevtools } from "react-query/devtools";
 import { RecoilRoot } from "recoil";
 import { Toaster } from "react-hot-toast";
-import { createTheme } from "@mui/material";
 import io from "socket.io-client";
 import testConnection from "@nirvana/core";
 
@@ -18,7 +18,26 @@ const theme = createTheme({
       main: "#438E86",
     },
     secondary: {
-      main: "#393939",
+      main: "#161616",
+    },
+    info: {
+      main: "#A8A8A8",
+    },
+  },
+  typography: {
+    fontFamily: "IBM Plex Sans",
+    button: {
+      textTransform: "none",
+    },
+  },
+  components: {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          borderRadius: 0,
+          fontWeight: 300,
+        },
+      },
     },
   },
 });
@@ -32,12 +51,14 @@ function NirvanaApp() {
   return (
     <>
       <QueryClientProvider client={queryClient}>
-        <RecoilRoot>
+        <ThemeProvider theme={theme}>
-          <ProtectedRoute>
+          <RecoilRoot>
-            <NirvanaRouter />
+            <ProtectedRoute>
-          </ProtectedRoute>
+              <NirvanaRouter />
-          <ReactQueryDevtools initialIsOpen={true} position={"bottom-left"} />
+            </ProtectedRoute>
-        </RecoilRoot>
+            <ReactQueryDevtools initialIsOpen={true} position={"bottom-left"} />
+          </RecoilRoot>
+        </ThemeProvider>
         <Toaster />
       </QueryClientProvider>
     </>