From 794dd78087d3da91c4dfe99fba5d94da2c631a59 Mon Sep 17 00:00:00 2001
From: Arjun Patel <patel.arjun50@gmail.com>
Date: Sun, 6 Feb 2022 14:40:48 -0800
Subject: [PATCH] Update ConversationFullRow.tsx

---
 .../Conversations/ConversationFullRow.tsx     | 26 ++++++++++++++-----
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/packages/web/components/Conversations/ConversationFullRow.tsx b/packages/web/components/Conversations/ConversationFullRow.tsx
index 891d53d..698b8e7 100644
--- a/packages/web/components/Conversations/ConversationFullRow.tsx
+++ b/packages/web/components/Conversations/ConversationFullRow.tsx
@@ -95,12 +95,16 @@ export default function ConversationFullRow(props: {
   return (
     <span
       onClick={handleViewConversationDetails}
-      className="py-5 px-4 border-t border-t-slate-200 flex flex-row last:border-b-slate-200 last:border-b
-       hover:bg-slate-50 transition-all items-center group relative"
+      className={`py-5 px-4 border-t border-t-slate-200 flex flex-row last:border-b-slate-200 last:border-b
+       hover:bg-slate-50 transition-all items-center group relative ${
+         isNewIncoming ? "bg-slate-50" : "text-slate-100"
+       }`}
     >
-      {isNewIncoming && (
-        <FaCircle className="text-orange-500 mr-2 animate-pulse text-[0.75rem]" />
-      )}
+      <FaCircle
+        className={`mr-2 animate-pulse text-[0.75rem] ${
+          isNewIncoming ? "text-orange-500" : "text-slate-100"
+        }`}
+      />
 
       <span className="w-[15rem] flex flex-row items-center">
         <span className="w-[5rem]">
@@ -110,7 +114,11 @@ export default function ConversationFullRow(props: {
           />
         </span>
 
-        <span className="text-slate-500 ml-2 font-semibold">
+        <span
+          className={`ml-2 ${
+            isNewIncoming ? "text-slate-500 font-semibold" : "text-slate-400"
+          }`}
+        >
           {props.conversation.name}
         </span>
       </span>
@@ -119,7 +127,11 @@ export default function ConversationFullRow(props: {
         {props.conversation.tldr}
       </span>
 
-      <span className="ml-auto text-slate-300 text-sm group-hover:invisible">
+      <span
+        className={`ml-auto  text-sm group-hover:invisible ${
+          isNewIncoming ? "text-slate-400 font-semibold" : "text-slate-300"
+        }`}
+      >
         {moment(props.conversation.lastActivityDate.toDate()).fromNow()}
       </span>