making changes with theming and such

packages/desktop/src/nirvanaApp.tsx

@@ -20,6 +20,13 @@ export const socket = io("http://localhost:5000");
 const darkTheme = createTheme({
   palette: {
     mode: "dark",
+
+    primary: {
+      main: "#438E86",
+    },
+    secondary: {
+      main: "#FFB6B6",
+    },
   },
 });
 

packages/desktop/src/pages/Home/conversations/index.tsx

@@ -1,6 +1,6 @@
-import { Add, LinkRounded } from "@mui/icons-material";
+import { Add, LinkRounded, RecordVoiceOverTwoTone } from "@mui/icons-material";
 import { Avatar, Tooltip } from "antd";
-import { Tab, Tabs } from "@mui/material";
+import { Button, Tab, Tabs } from "@mui/material";
 
 import { $selectedConversation } from "../../../controller/recoil";
 import { ContactDetails } from "@nirvana/core/responses/getContacts.response";
@@ -46,31 +46,29 @@ export default function Conversations() {
 
   return (
     <>
-      <div className="flex flex-row justify-between">
+      <div className="flex flex-row justify-between p-2">
         <Tabs
           value={selectedTab}
           onChange={handleChangeTab}
           textColor="secondary"
           indicatorColor="secondary"
           aria-label="secondary tabs example"
+          sx={{ textTransform: "none" }}
         >
-          <Tab value={ConvoTab.LIVE} label="LIVE" />
+          <Tab value={ConvoTab.LIVE} label="LIVE" sx={{ fontSize: "1em" }} />
           <Tab value={ConvoTab.TUNED} label="TUNED IN" />
           <Tab value={ConvoTab.INBOX} label="INBOX" />
           <Tab value={ConvoTab.REQUESTS} label="REQUESTS" />
         </Tabs>
-      </div>
 
-      {/* pinned conversations */}
+        <Button
-      <div className="m-5 p-4 bg-zinc-500 shadow-lg rounded">
+          variant="contained"
-        <Tooltip title="Listen in like a walkie-talkie.">
+          color="primary"
-          <span className="flex flex-row justify-start items-center cursor-pointer">
+          startIcon={<RecordVoiceOverTwoTone />}
-            <FaVolumeUp className="text-red-500" />
+          size="small"
-            <span className="ml-2 tracking-wider text-zinc-100 uppercase text-sm font-semibold">
+        >
-              Live
+          New
-            </span>
+        </Button>
-          </span>
-        </Tooltip>
       </div>
 
       {/* {isLoading ? (

packages/desktop/src/pages/Home/header/index.tsx

@@ -1,6 +1,7 @@
 import { $jwtToken, $searchQuery } from "../../../controller/recoil";
 import {
   Avatar,
+  Button,
   Divider,
   ListItemIcon,
   Menu,
@@ -73,17 +74,19 @@ export default function Header() {
         <input
           ref={inputRef}
           placeholder="type / to search"
-          className="placeholder:text-zinc-400 bg-transparent outline-none text-zinc-100"
+          className="placeholder:text-zinc-400 bg-transparent outline-none text-zinc-100 mr-auto flex-1"
           value={searchQuery}
           onChange={(e) => setSearchQuery(e.target.value)}
         />
 
-        <button
+        <Button
           onClick={() => updateStatus(UserStatus.FLOW_STATE)}
-          className="ml-auto mr-2 hover:scale-110 bg-zinc-600 text-teal-500 py-1 px-2 rounded-lg text-sm"
+          color="secondary"
+          size="small"
+          style={{ textTransform: "none" }}
         >
           flow state
-        </button>
+        </Button>
 
         <span className="px-5" onClick={handleClick}>
           {userDetailsResponse?.user && (