small ui adjustments

packages/desktop/src/components/User/userAvatarWithStatus.tsx

@@ -18,19 +18,19 @@ export function UserStatusBubble(props: { status: UserStatus }) {
   switch (props.status) {
     case UserStatus.ONLINE:
       return (
-        <span className="absolute bottom-0 -right-1.5 rounded-full bg-emerald-600 h-3 w-3"></span>
+        <span className="absolute -bottom-1 -right-1 rounded-full bg-emerald-600 h-3 w-3 border border-slate-300"></span>
       );
     case UserStatus.OFFLINE:
       return (
-        <span className="absolute bottom-0 -right-1.5 rounded-full bg-slate-400 h-3 w-3"></span>
+        <span className="absolute -bottom-1 -right-1 rounded-full bg-slate-400 h-3 w-3 border border-slate-300"></span>
       );
     case UserStatus.FLOW_STATE:
       return (
-        <span className="absolute bottom-0 -right-1.5 rounded-full bg-pink-400 h-3 w-3"></span>
+        <span className="absolute -bottom-1 -right-1 rounded-full bg-pink-400 h-3 w-3 border border-slate-300"></span>
       );
     default:
       return (
-        <span className="absolute bottom-0 -right-1.5 rounded-full bg-pink-400 h-3 w-3"></span>
+        <span className="absolute -bottom-1 -right-1 rounded-full bg-pink-400 h-3 w-3 border border-slate-300"></span>
       );
   }
 }

packages/desktop/src/index.ts

@@ -29,7 +29,7 @@ const createWindow = (): void => {
       preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
       sandbox: true,
     },
-    icon: path.join(__dirname, "src/assets/1024x1024.icns"),
+    icon: "./assets/1024x1024.icns",
   });
 
   // and load the index.html of the app.

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

@@ -1,7 +1,7 @@
 import { Add, LinkRounded } from "@mui/icons-material";
+import { Avatar, Tooltip } from "antd";
 
 import { $selectedConversation } from "../../../controller/recoil";
-import { Avatar } from "antd";
 import { ContactDetails } from "@nirvana/core/responses/getContacts.response";
 import { FaVolumeUp } from "react-icons/fa";
 import SkeletonLoader from "../../../components/loading/skeleton";
@@ -33,51 +33,36 @@ export default function Conversations() {
 
   return (
     <>
-      {/* actions navbar */}
-      <div className="flex justify-end mx-10 mt-5 space-x-3">
-        <span className="hover:bg-slate-500 p-1 rounded-full cursor-pointer flex justify-center items-center">
-          <LinkRounded className="text-slate-100" fontSize="small" />
-        </span>
-
-        <span className="hover:bg-slate-500 p-1 rounded-full cursor-pointer flex justify-center items-center">
-          <Add className="text-slate-100" fontSize="small" />
-        </span>
-      </div>
-
       {/* pinned conversations */}
       <div className="m-5 p-4 bg-slate-500 shadow-lg rounded">
-        <span className="flex flex-row justify-start items-center">
+        <Tooltip title="Listen in like a walkie-talkie.">
-          <FaVolumeUp className="text-red-500" />
+          <span className="flex flex-row justify-start items-center cursor-pointer">
-          <span className="ml-2 tracking-wider text-slate-100 uppercase text-sm font-semibold">
+            <FaVolumeUp className="text-red-500" />
-            Live
+            <span className="ml-2 tracking-wider text-slate-100 uppercase text-sm font-semibold">
+              Live
+            </span>
           </span>
-        </span>
+        </Tooltip>
-
-        <span className="text-slate-300">
-          Mark Conversations as Pinned to Hear Them Live
-        </span>
       </div>
 
       {isLoading ? (
         <SkeletonLoader />
       ) : (
         <div className="flex flex-col m-5 p-4">
-          <span className="flex flex-row justify-start items-center mb-2">
-            <span className="ml-2 tracking-wider text-slate-100 uppercase text-sm font-semibold">
-              Inbox
-            </span>
-          </span>
-
           {contactDetailsListResponse?.contactsDetails.map(
             (contactDetail: ContactDetails) => {
+              const isSelected =
+                contactDetail.otherUser.googleId === selectedConvo;
+
               return (
                 <div
                   key={contactDetail.relationship._id.toString()}
                   onClick={() =>
                     selectContact(contactDetail.otherUser.googleId)
                   }
-                  className="flex flex-row items-center hover:bg-slate-600 group border-t border-t-slate-500
+                  className={`flex flex-row items-center hover:bg-slate-600 group py-4 px-2 cursor-pointer ${
-            py-4 px-2 cursor-pointer"
+                    isSelected ? "bg-slate-600" : ""
+                  } rounded`}
                 >
                   <UserAvatarWithStatus user={contactDetail.otherUser} />
 

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

@@ -25,6 +25,8 @@ export default function Home() {
       </div>
 
       <SelectedConversation />
+
+      <button></button>
     </div>
   );
 }