fix: add highlight color for all views (logs context) (#3233)

* fix: add higlight color for all of views

* fix: resolve comments

frontend/src/components/Logs/ListLogView/index.tsx

@@ -13,7 +13,6 @@ import dayjs from 'dayjs';
 import dompurify from 'dompurify';
 import { useActiveLog } from 'hooks/logs/useActiveLog';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
-import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useNotifications } from 'hooks/useNotifications';
 // utils
 import { FlatLogData } from 'lib/logs/flatLogData';
@@ -104,7 +103,6 @@ function ListLogView({
 }: ListLogViewProps): JSX.Element {
 	const flattenLogData = useMemo(() => FlatLogData(logData), [logData]);
 
-	const isDarkMode = useIsDarkMode();
 	const [, setCopy] = useCopyToClipboard();
 	const { notifications } = useNotifications();
 	const { isHighlighted, isLogsExplorerPage, onLogCopy } = useCopyLogLink(
@@ -151,7 +149,7 @@ function ListLogView({
 	);
 
 	return (
-		<Container $isActiveLog={isHighlighted} $isDarkMode={isDarkMode}>
+		<Container $isActiveLog={isHighlighted}>
 			<div>
 				<LogContainer>
 					<>

frontend/src/components/Logs/ListLogView/styles.ts

@@ -1,10 +1,8 @@
 import { Card, Typography } from 'antd';
-import { themeColors } from 'constants/theme';
 import styled from 'styled-components';
-import getAlphaColor from 'utils/getAlphaColor';
+import { getActiveLogBackground } from 'utils/logs';
 
 export const Container = styled(Card)<{
-	$isDarkMode: boolean;
 	$isActiveLog: boolean;
 }>`
 	width: 100% !important;
@@ -13,14 +11,7 @@ export const Container = styled(Card)<{
 		padding: 0.3rem 0.6rem;
 	}
 
-	${({ $isDarkMode, $isActiveLog }): string =>
+	${({ $isActiveLog }): string => getActiveLogBackground($isActiveLog)}
-		$isActiveLog
-			? `background-color: ${
-					$isDarkMode
-						? getAlphaColor(themeColors.white)[10]
-						: getAlphaColor(themeColors.black)[10]
-			  };`
-			: ''}
 `;
 
 export const Text = styled(Typography.Text)`

frontend/src/components/Logs/RawLogView/styles.ts

@@ -1,8 +1,7 @@
-import { blue, orange } from '@ant-design/colors';
+import { blue } from '@ant-design/colors';
 import { Col, Row, Space } from 'antd';
-import { themeColors } from 'constants/theme';
 import styled from 'styled-components';
-import getAlphaColor from 'utils/getAlphaColor';
+import { getActiveLogBackground, getDefaultLogBackground } from 'utils/logs';
 
 export const RawLogViewContainer = styled(Row)<{
 	$isDarkMode: boolean;
@@ -17,19 +16,12 @@ export const RawLogViewContainer = styled(Row)<{
 
 	transition: background-color 0.2s ease-in;
 
-	${({ $isActiveLog }): string =>
+	${({ $isActiveLog }): string => getActiveLogBackground($isActiveLog)}
-		$isActiveLog ? `background-color: ${orange[3]};` : ''}
 
-	${({ $isReadOnly, $isDarkMode }): string =>
+	${({ $isReadOnly, $isDarkMode, $isActiveLog }): string =>
-		!$isReadOnly
+		$isActiveLog
-			? `&:hover {
+			? getActiveLogBackground()
-			background-color: ${
+			: getDefaultLogBackground($isReadOnly, $isDarkMode)}
-				$isDarkMode
-					? getAlphaColor(themeColors.white)[10]
-					: getAlphaColor(themeColors.black)[10]
-			};
-		}`
-			: ''}
 `;
 
 export const ExpandIconWrapper = styled(Col)`

frontend/src/constants/theme.ts

@@ -44,6 +44,7 @@ const themeColors = {
 	lightWhite: '#ffffffd9',
 	borderLightGrey: '#d9d9d9',
 	borderDarkGrey: '#424242',
+	bckgGrey: '#1d1d1d',
 };
 
 export { themeColors };

frontend/src/container/LogsExplorerList/InfinityTableView/index.tsx

@@ -5,7 +5,6 @@ import { LOCALSTORAGE } from 'constants/localStorage';
 import LogsExplorerContext from 'container/LogsExplorerContext';
 import { useActiveLog } from 'hooks/logs/useActiveLog';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
-import { useIsDarkMode } from 'hooks/useDarkMode';
 import useDragColumns from 'hooks/useDragColumns';
 import { getDraggedColumns } from 'hooks/useDragColumns/utils';
 import {
@@ -38,12 +37,10 @@ const CustomTableRow: TableComponents<ILog>['TableRow'] = ({
 	context,
 	...props
 }) => {
-	const isDarkMode = useIsDarkMode();
 	const { isHighlighted } = useCopyLogLink(props.item.id);
 
 	return (
 		<TableRowStyled
-			$isDarkMode={isDarkMode}
 			$isActiveLog={isHighlighted}
 			// eslint-disable-next-line react/jsx-props-no-spreading
 			{...props}

frontend/src/container/LogsExplorerList/InfinityTableView/styles.ts

@@ -1,5 +1,6 @@
 import { themeColors } from 'constants/theme';
 import styled from 'styled-components';
+import { getActiveLogBackground } from 'utils/logs';
 
 interface TableHeaderCellStyledProps {
 	isDragColumn: boolean;
@@ -23,21 +24,18 @@ export const TableCellStyled = styled.td`
 `;
 
 export const TableRowStyled = styled.tr<{
-	$isDarkMode: boolean;
 	$isActiveLog: boolean;
 }>`
 	td {
-		${({ $isDarkMode, $isActiveLog }): string =>
+		${({ $isActiveLog }): string => getActiveLogBackground($isActiveLog)}
-			$isActiveLog
-				? `background-color: ${
-						$isDarkMode ? 'rgba(255,255,255,0.1)' : 'rgba(0, 0, 0, 0.1)'
-				  };`
-				: ''}
 	}
 
 	&:hover {
 		${TableCellStyled} {
-			background-color: #1d1d1d;
+			${({ $isActiveLog }): string =>
+				$isActiveLog
+					? getActiveLogBackground()
+					: `background-color: ${themeColors.bckgGrey};`}
 		}
 	}
 `;
@@ -45,7 +43,7 @@ export const TableRowStyled = styled.tr<{
 export const TableHeaderCellStyled = styled.th<TableHeaderCellStyledProps>`
 	padding: 0.5rem;
 	border-inline-end: 1px solid rgba(253, 253, 253, 0.12);
-	background-color: #1d1d1d;
+	background-color: ${themeColors.bckgGrey};
 	${({ isDragColumn }): string => (isDragColumn ? 'cursor: col-resize;' : '')}
 
 	&:first-child {

frontend/src/utils/logs.ts

@@ -0,0 +1,22 @@
+import { orange } from '@ant-design/colors';
+import { themeColors } from 'constants/theme';
+import getAlphaColor from 'utils/getAlphaColor';
+
+export const getDefaultLogBackground = (
+	isReadOnly: boolean,
+	isDarkMode: boolean,
+): string => {
+	if (isReadOnly) return '';
+	return `&:hover {
+    background-color: ${
+					isDarkMode
+						? getAlphaColor(themeColors.white)[10]
+						: getAlphaColor(themeColors.black)[10]
+				};
+    }`;
+};
+
+export const getActiveLogBackground = (isActiveLog = true): string => {
+	if (!isActiveLog) return '';
+	return `background-color: ${orange[3]};`;
+};