Shared: fixed the colors of the index change buttons

packages/shared/components/color-theme/sub-components/StyledIndexWrapper.ts

@@ -23,19 +23,10 @@
 // All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
 // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
-import hexRgb from "hex-rgb";
 import styled from "styled-components";
 
 import { Base, TColorScheme } from "../../../themes";
 
-const indexWrapperBackground = (props: {
-  $currentColorScheme: TColorScheme;
-}) => {
-  const { red, green, blue } = hexRgb(props.$currentColorScheme?.main?.accent);
-
-  return `rgba(${red}, ${green}, ${blue}, 0.25)`;
-};
-
 const StyledIndexWrapper = styled.div<{
   $currentColorScheme: TColorScheme | undefined;
 }>`
@@ -56,18 +47,22 @@ const StyledIndexWrapper = styled.div<{
 
   &:hover {
     cursor: pointer;
-    background: ${(props) => indexWrapperBackground(props)};
+    background: ${(props) =>
+      props.theme.filesSection.tableView.row.indexBackgroundButtonHover};
 
     svg {
       cursor: pointer;
 
       path {
-        fill: ${(props) => props.$currentColorScheme?.main?.accent} !important;
+        fill: ${(props) =>
+          props.theme.filesSection.tableView.row
+            .indexArrowButtonHover} !important;
       }
 
       circle {
         stroke: ${(props) =>
-          props.$currentColorScheme?.main?.accent} !important;
+          props.theme.filesSection.tableView.row
+            .indexArrowButtonHover} !important;
       }
     }
   }

packages/shared/themes/base.ts

@@ -2324,6 +2324,9 @@ export const getBaseTheme = () => {
           indexUpdate: `#F2F6FC`,
           indexActive: `#E4ECF8`,
 
+          indexBackgroundButtonHover: `#BED3EF`,
+          indexArrowButtonHover: `#4781D1`,
+
           borderImageCheckbox: `linear-gradient(to right, ${white} 24px, ${grayLightMid} 24px)`,
           borderImageContextMenu: `linear-gradient(to left, ${white} 24px, ${grayLightMid} 24px)`,
 

packages/shared/themes/dark.ts

@@ -2301,6 +2301,9 @@ const Dark: TTheme = {
         indexUpdate: `#414141`,
         indexActive: `#515151`,
 
+        indexBackgroundButtonHover: `#7B7B7B`,
+        indexArrowButtonHover: `#FFFFFF`,
+
         borderImageCheckbox:
           "linear-gradient(to right, #474747 24px, #474747 24px)",
         borderImageContextMenu: