Client: corrected colors in index editing mode

packages/client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js

@@ -68,7 +68,10 @@ const StyledWrapper = styled.div`
     `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
   margin-top: -1px;
 
-  ${(props) => (props.checked || props.isActive) && checkedStyle};
+  ${(props) =>
+    (props.checked || props.isActive) &&
+    !props.isIndexEditingMode &&
+    checkedStyle};
   ${(props) =>
     (props.checked || props.isActive) &&
     props.isFirstElem &&
@@ -82,7 +85,7 @@ const StyledWrapper = styled.div`
     css`
       background: ${(props) =>
         props.isIndexEditingMode
-          ? `${props.theme.filesSection.tableView.row.indexActive} !important`
+          ? `${props.theme.filesSection.tableView.row.indexUpdate} !important`
           : `${props.theme.filesSection.tableView.row.backgroundActive} !important`};
       ${marginStyles}
     `}
@@ -90,6 +93,7 @@ const StyledWrapper = styled.div`
   ${(props) =>
     !isMobile &&
     !props.isDragging &&
+    !props.isIndexEditingMode &&
     css`
       :hover {
         cursor: pointer;
@@ -97,6 +101,18 @@ const StyledWrapper = styled.div`
       }
     `};
 
+  ${(props) =>
+    !isMobile &&
+    props.isIndexEditingMode &&
+    css`
+      :hover {
+        cursor: pointer;
+        background: ${(props) =>
+          props.theme.filesSection.tableView.row.indexActive};
+        ${marginStyles}
+      }
+    `};
+
   ${(props) =>
     props.showHotkeyBorder &&
     css`

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

@@ -161,7 +161,7 @@ const StyledTableRow = styled(TableRow)`
         cursor: pointer;
         background: ${(props) =>
           props.isIndexEditingMode
-            ? `${props.theme.filesSection.tableView.row.indexActive} !important`
+            ? `${props.theme.filesSection.tableView.row.indexUpdate} !important`
             : `${props.theme.filesSection.tableView.row.backgroundActive} !important`};
       }
       .table-container_file-name-cell,

packages/client/src/pages/Home/Section/Body/index.js

@@ -40,7 +40,7 @@ import { isElementInViewport } from "@docspace/shared/utils/common";
 
 import { DeviceType, VDRIndexingAction } from "@docspace/shared/enums";
 
-const separatorStyles = `width: 100vw;  background-color: rgb(71, 129, 209); position: absolute; height: 3px; z-index: 1;`;
+const separatorStyles = `width: 100vw;  position: absolute; height: 3px; z-index: 1;`;
 const sectionClass = "section-wrapper-content";
 
 let currentDroppable = null;
@@ -206,6 +206,7 @@ const SectionBodyContent = (props) => {
     const tableItem = wrapperElement.closest(".table-list-item");
     const styles = tableItem && window.getComputedStyle(tableItem);
     const indexSeparatorNode = document.createElement("div");
+    indexSeparatorNode.classList.add("indexing-separator");
 
     const parent = document.querySelector(
       ".ReactVirtualized__Grid__innerScrollContainer",

packages/shared/components/table/Table.styled.ts

@@ -59,6 +59,11 @@ const StyledTableContainer = styled.div<{ useReactWindow?: boolean }>`
     min-width: 10%;
   }
 
+  .indexing-separator {
+    background-color: ${(props) =>
+      props.theme.tableContainer.indexingSeparator};
+  }
+
   .resize-handle {
     display: block;
     cursor: ew-resize;

packages/shared/themes/base.ts

@@ -2250,6 +2250,8 @@ export const getBaseTheme = () => {
       hoverBorderColor: grayMain,
       tableCellBorder: `1px solid ${grayLightMid}`,
 
+      indexingSeparator: "#4781D1",
+
       groupMenu: {
         background: white,
         borderBottom: "1px solid transparent",
@@ -2319,9 +2321,8 @@ 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)`,
+          indexUpdate: `#F2F6FC`,
+          indexActive: `#E4ECF8`,
 
           borderImageCheckbox: `linear-gradient(to right, ${white} 24px, ${grayLightMid} 24px)`,
           borderImageContextMenu: `linear-gradient(to left, ${white} 24px, ${grayLightMid} 24px)`,

packages/shared/themes/dark.ts

@@ -1011,7 +1011,8 @@ const Dark: TTheme = {
       hoverBackgroundColor: "#474747",
       disableBackgroundColor: "#282828",
       activeBackgroundColor: "#282828",
-      activeSelectedBackgroundColor: "linear-gradient(0deg, #FFFFFF, #FFFFFF), linear-gradient(0deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.18))",
+      activeSelectedBackgroundColor:
+        "linear-gradient(0deg, #FFFFFF, #FFFFFF), linear-gradient(0deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.18))",
 
       title: {
         padding: "4px 16px",
@@ -2224,6 +2225,8 @@ const Dark: TTheme = {
     hoverBorderColor: "#474747",
     tableCellBorder: "1px solid #474747",
 
+    indexingSeparator: "#FFFFFF",
+
     groupMenu: {
       background: black,
       borderBottom: "1px solid #474747",
@@ -2295,6 +2298,8 @@ const Dark: TTheme = {
           "linear-gradient(to left,rgba(204, 184, 102, 0.2) 24px, #474747 24px)",
 
         backgroundActive: "#3D3D3D",
+        indexUpdate: `#414141`,
+        indexActive: `#515151`,
 
         borderImageCheckbox:
           "linear-gradient(to right, #474747 24px, #474747 24px)",