- Fix chat list item selected background (regression)

Signed-off-by: Dave Richer <dave@imexsystems.ca>

client/src/components/chat-conversation-list/chat-conversation-list.component.jsx

@@ -7,7 +7,7 @@ import {setSelectedConversation} from "../../redux/messaging/messaging.actions";
 import {selectSelectedConversation} from "../../redux/messaging/messaging.selectors";
 import {TimeAgoFormatter} from "../../utils/DateFormatter";
 import PhoneFormatter from "../../utils/PhoneFormatter";
-import OwnerNameDisplay, {OwnerNameDisplayFunction} from "../owner-name-display/owner-name-display.component";
+import {OwnerNameDisplayFunction} from "../owner-name-display/owner-name-display.component";
 import _ from "lodash";
 import "./chat-conversation-list.styles.scss";
 
@@ -58,7 +58,16 @@ function ChatConversationListComponent({
             )}
         </>
         const cardExtra = <Badge count={item.messages_aggregate.aggregate.count || 0}/>
-        const cardStyle = index % 2 === 0 ? {backgroundColor: '#f0f2f5'} : {backgroundColor: '#ffffff'};
+
+        const getCardStyle = () => {
+            if (item.id === selectedConversation) {
+                return {
+                    backgroundColor: 'rgba(128, 128, 128, 0.2)'
+                }
+            }
+            return index % 2 === 0 ? {backgroundColor: '#f0f2f5'} : {backgroundColor: '#ffffff'};
+        }
+
         return (
             <CellMeasurer
                 key={key}
@@ -77,11 +86,12 @@ function ChatConversationListComponent({
                             : null
                     }`}
                 >
-                    <Card style={cardStyle} bordered={false} size="small" extra={cardExtra} title={cardTitle}>
+                    <Card style={getCardStyle()} bordered={false} size="small" extra={cardExtra} title={cardTitle}>
                         <div style={{display: 'inline-block', width: '70%', textAlign: 'left'}}>
                             {cardContentLeft}
                         </div>
-                        <div style={{display: 'inline-block',width: '30%', textAlign: 'right'}}>{cardContentRight}</div>
+                        <div
+                            style={{display: 'inline-block', width: '30%', textAlign: 'right'}}>{cardContentRight}</div>
                     </Card>
                 </List.Item>
             </CellMeasurer>

client/src/components/chat-conversation-list/chat-conversation-list.styles.scss

@@ -1,6 +1,3 @@
-.chat-list-selected-conversation {
-  background-color: rgba(128, 128, 128, 0.2);
-}
 .chat-list-container {
   overflow: hidden;
   height: 100%;