From 2c23e6e198b058d15f12fbb778d42da30014c87a Mon Sep 17 00:00:00 2001
From: talksik <patel.arjun50@gmail.com>
Date: Sun, 1 May 2022 09:04:33 -0500
Subject: [PATCH] adding in mui theme and making buttons more nirvana like

---
 .../desktop/src/components/header/index.tsx   |  4 +-
 packages/desktop/src/pages/nirvanaApp.tsx     | 37 +++++++++++++++----
 2 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/packages/desktop/src/components/header/index.tsx b/packages/desktop/src/components/header/index.tsx
index 370f968..e1dbcf8 100644
--- a/packages/desktop/src/components/header/index.tsx
+++ b/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
diff --git a/packages/desktop/src/pages/nirvanaApp.tsx b/packages/desktop/src/pages/nirvanaApp.tsx
index 6e8a239..14232fe 100644
--- a/packages/desktop/src/pages/nirvanaApp.tsx
+++ b/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>
-          <ProtectedRoute>
-            <NirvanaRouter />
-          </ProtectedRoute>
-          <ReactQueryDevtools initialIsOpen={true} position={"bottom-left"} />
-        </RecoilRoot>
+        <ThemeProvider theme={theme}>
+          <RecoilRoot>
+            <ProtectedRoute>
+              <NirvanaRouter />
+            </ProtectedRoute>
+            <ReactQueryDevtools initialIsOpen={true} position={"bottom-left"} />
+          </RecoilRoot>
+        </ThemeProvider>
         <Toaster />
       </QueryClientProvider>
     </>