IO-2281 Hover Row Color

client/src/App/App.styles.scss

@@ -145,7 +145,7 @@
 
 //Update row highlighting on production board.
 .ant-table-tbody > tr.ant-table-row:hover > td {
-  background: #eaeaea !important;
+  background: #e7f3ff !important;
 }
 
 .job-line-manual {

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

@@ -7,12 +7,7 @@ import { selectSelectedConversation } from "../../redux/messaging/messaging.sele
 import { TimeAgoFormatter } from "../../utils/DateFormatter";
 import PhoneFormatter from "../../utils/PhoneFormatter";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
-import {
-  List as VirtualizedList,
-  AutoSizer,
-  CellMeasurerCache,
-  CellMeasurer,
-} from "react-virtualized";
+import { List as VirtualizedList, AutoSizer } from "react-virtualized";
 
 import "./chat-conversation-list.styles.scss";
 
@@ -38,64 +33,48 @@ function ChatConversationListComponent({
     []
   );
 
-  const cache = new CellMeasurerCache({
-    fixedWidth: true,
-    defaultHeight: 60,
-  });
-
-  const rowRenderer = ({ index, key, style, parent }) => {
+  const rowRenderer = ({ index, key, style }) => {
     const item = conversationList[index];
 
     return (
-      <CellMeasurer
+      <List.Item
         key={key}
-        cache={cache}
-        parent={parent}
-        columnIndex={0}
-        rowIndex={index}
+        onClick={() => setSelectedConversation(item.id)}
+        className={`chat-list-item ${
+          item.id === selectedConversation
+            ? "chat-list-selected-conversation"
+            : null
+        }`}
+        style={style}
       >
-        <List.Item
-          onClick={() => setSelectedConversation(item.id)}
-          className={`chat-list-item ${
-            item.id === selectedConversation
-              ? "chat-list-selected-conversation"
-              : null
-          }`}
-          style={style}
-        >
-          <div
-            style={{
-              display: "inline-block",
-            }}
-          >
-            {item.label && <div className="chat-name">{item.label}</div>}
-            {item.job_conversations.length > 0 ? (
-              <div className="chat-name">
-                {item.job_conversations.map((j, idx) => (
-                  <div key={idx}>
-                    <OwnerNameDisplay ownerObject={j.job} />
-                  </div>
-                ))}
-              </div>
-            ) : (
-              <PhoneFormatter>{item.phone_num}</PhoneFormatter>
-            )}
-          </div>
-          <div style={{ display: "inline-block" }}>
-            <div>
-              {item.job_conversations.length > 0
-                ? item.job_conversations.map((j, idx) => (
-                    <Tag key={idx} className="ro-number-tag">
-                      {j.job.ro_number}
-                    </Tag>
-                  ))
-                : null}
+        <div sryle={{ display: "inline-block" }}>
+          {item.label && <div className="chat-name">{item.label}</div>}
+          {item.job_conversations.length > 0 ? (
+            <div className="chat-name">
+              {item.job_conversations.map((j, idx) => (
+                <div key={idx}>
+                  <OwnerNameDisplay ownerObject={j.job} />
+                </div>
+              ))}
             </div>
-            <TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter>
+          ) : (
+            <PhoneFormatter>{item.phone_num}</PhoneFormatter>
+          )}
+        </div>
+        <div sryle={{ display: "inline-block" }}>
+          <div>
+            {item.job_conversations.length > 0
+              ? item.job_conversations.map((j, idx) => (
+                  <Tag key={idx} className="ro-number-tag">
+                    {j.job.ro_number}
+                  </Tag>
+                ))
+              : null}
           </div>
-          <Badge count={item.messages_aggregate.aggregate.count || 0} />
-        </List.Item>
-      </CellMeasurer>
+          <TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter>
+        </div>
+        <Badge count={item.messages_aggregate.aggregate.count || 0} />
+      </List.Item>
     );
   };
 
@@ -107,7 +86,7 @@ function ChatConversationListComponent({
             height={height}
             width={width}
             rowCount={conversationList.length}
-            rowHeight={cache.rowHeight}
+            rowHeight={60}
             rowRenderer={rowRenderer}
             onScroll={({ scrollTop, scrollHeight, clientHeight }) => {
               if (scrollTop + clientHeight === scrollHeight) {