Client: fixed styles for highlight changed indexes

packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js

@@ -104,6 +104,25 @@ const StyledTableRow = styled(TableRow)`
         position: relative;
       `}
   }
+  
+   .table-container_file-name-cell {
+    
+    .table-container-index {
+      background: ${(props) => `${props.theme.filesSection.tableView.row.indexFixed} !important`};
+    }
+
+  } 
+
+   &:hover {
+    .table-container_file-name-cell {
+    
+    .table-container-index {
+      background: ${(props) => `${props.theme.filesSection.tableView.row.indexFixed} !important`};
+    }
+
+    }
+    } 
+
 
   ${(props) =>
     props.isRoom &&
@@ -115,12 +134,13 @@ const StyledTableRow = styled(TableRow)`
     `}
   ${(props) =>
     !props.isDragging &&
+    !props.isIndexUpdated &&
     css`
       :hover {
         .table-container_cell {
           cursor: pointer;
-          background: ${(props) =>
-            `${props.theme.filesSection.tableView.row.backgroundActive} !important`};
+          background: ${(props) => props.isIndexEditingMode ?
+            `${props.theme.filesSection.tableView.row.indexActive} !important` : `${props.theme.filesSection.tableView.row.backgroundActive} !important`};
         }
         .table-container_file-name-cell,
         .table-container_index-cell {
@@ -150,9 +170,49 @@ const StyledTableRow = styled(TableRow)`
         }
       }
     `}
+
+    ${(props) =>
+    props.isIndexUpdated &&
+    css`
+      .table-container_cell {
+        cursor: pointer;
+        background: ${(props) =>
+          `${props.theme.filesSection.tableView.row.indexUpdate} !important`};
+      }
+      .table-container_file-name-cell {
+        margin-right: 0px;
+        padding-right: 0px;
+      }
+      .table-container_index-cell {
+        ${(props) =>
+          props.theme.interfaceDirection === "rtl"
+            ? css`
+                margin-right: -24px;
+                padding-right: 24px;
+              `
+            : css`
+                margin-left: -24px;
+                padding-left: 24px;
+              `}
+      }
+
+      .table-container_row-context-menu-wrapper {
+        ${(props) =>
+          props.theme.interfaceDirection === "rtl"
+            ? css`
+                margin-left: -20px;
+                padding-left: 20px;
+              `
+            : css`
+                margin-right: -20px;
+                padding-right: 20px;
+              `}
+      }
+    `}
   .table-container_cell {
     background: ${(props) =>
       (props.checked || props.isActive) &&
+      !props.isIndexUpdated &&
       `${props.theme.filesSection.tableView.row.backgroundActive} !important`};
     cursor: ${(props) =>
       !props.isThirdPartyFolder &&

packages/client/src/pages/Home/Section/Body/TableView/TableRow.js

@@ -74,6 +74,7 @@ const FilesTableRow = (props) => {
     isRecentTab,
     canDrag,
     onEditIndex,
+    isIndexUpdated,
   } = props;
   const { acceptBackground, background } = theme.dragAndDrop;
 
@@ -185,7 +186,8 @@ const FilesTableRow = (props) => {
         onHideContextMenu={onHideContextMenu}
         isThirdPartyFolder={item.isThirdPartyFolder}
         onDoubleClick={isIndexEditingMode ? () => {} : onDoubleClick}
-        checked={checkedProps}
+        checked={checkedProps || isIndexUpdated}
+        isIndexUpdated={isIndexUpdated}
         showHotkeyBorder={showHotkeyBorder}
         title={
           item.isFolder

packages/client/src/pages/Home/Section/Body/TableView/sub-components/FileNameCell.js

@@ -27,6 +27,7 @@
 import React from "react";
 import { Link } from "@docspace/shared/components/link";
 import { Checkbox } from "@docspace/shared/components/checkbox";
+import { classNames } from "@docspace/shared/utils";
 import { TableCell } from "@docspace/shared/components/table";
 import { Loader } from "@docspace/shared/components/loader";
 
@@ -63,7 +64,10 @@ const FileNameCell = ({
         />
       ) : (
         <TableCell
-          className="table-container_element-wrapper"
+          className={classNames("table-container_element-wrapper", {
+            ["table-container-index"]: isIndexEditingMode,
+          })}
+          style={{background: "none !important"}}
           hasAccess={true}
           checked={checked}
         >

packages/shared/themes/base.ts

@@ -2313,6 +2313,9 @@ export const getBaseTheme = () => {
           contextMenuWrapperDraggingHover: `linear-gradient(to left,rgb(239, 239, 178) 24px,${grayLightMid} 24px)`,
 
           backgroundActive: `#F3F4F4`,
+          indexUpdate: `#ebf1f7`,
+          indexActive: `#dce9f7`,
+          indexFixed: `rgba(71, 129, 209, 0.00)`,
 
           borderImageCheckbox: `linear-gradient(to right, ${white} 24px, ${grayLightMid} 24px)`,
           borderImageContextMenu: `linear-gradient(to left, ${white} 24px, ${grayLightMid} 24px)`,