spanning out the live rooms

packages/web/components/Conversations/LiveRoom.tsx

@@ -1,5 +1,5 @@
 import Conversation from "@nirvana/common/models/conversation";
-import { Avatar } from "antd";
+import { Avatar, Tooltip } from "antd";
 import { FaWalking } from "react-icons/fa";
 import { MasterAvatarGroupWithUserFetch } from "../UserDetails/MasterAvatarGroup";
 
@@ -13,16 +13,18 @@ export default function LiveRoom(props: { conversation: Conversation }) {
 
       <span className="text-md font-semibold ml-2 mr-10">Engineering</span>
 
-      <span className="text-xs text-slate-300 group-hover:invisible">
+      <span className="ml-auto text-xs text-slate-300 group-hover:invisible">
         {"01:20"}
       </span>
 
-      <span
+      <Tooltip title={"Join live conversation"}>
-        className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200
+        <span
+          className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200
           absolute right-5 text-slate-50 group-hover:text-teal-600 text-lg transition-all -z-10 group-hover:z-10"
-      >
+        >
-        <FaWalking className="text-lg" />
+          <FaWalking className="text-lg" />
-      </span>
+        </span>
+      </Tooltip>
     </span>
   );
 }

packages/web/components/Conversations/PriorityConvoRow.tsx

@@ -1,6 +1,9 @@
 import { Avatar } from "antd";
 import { useRecoilValue } from "recoil";
-import { selectedPriorityConvoAtom } from "../../recoil/main";
+import {
+  checkIncomingMessageSelector,
+  selectedPriorityConvoAtom,
+} from "../../recoil/main";
 import Conversation from "../../../common/models/conversation";
 import { MasterAvatarGroupWithUserFetch } from "../UserDetails/MasterAvatarGroup";
 import moment from "moment";
@@ -15,7 +18,9 @@ export default function PriorityConvoRow(props: {
   const isSelected = selectedConvo == props.conversation.id ? true : false;
 
   // who was the last sender based on the lastInteractionDate etc.
-  const myTurn = false;
+  const isNewIncoming = useRecoilValue(
+    checkIncomingMessageSelector(props.conversation.id)
+  );
 
   // todo: implement method in conversation
   // const isOneonOne =

packages/web/components/MainTabsOrPages/Conversations.tsx

@@ -64,7 +64,7 @@ export default function Conversations() {
           </span>
 
           {/* row of live room cards */}
-          <span className="flex flex-row flex-wrap">
+          <span className="flex flex-col w-full items-stretch">
             {liveRooms.map((lRoom) => (
               <LiveRoom key={lRoom.id} conversation={lRoom} />
             ))}