chore: change the log background to same as severity text with some opacity (#6217)

* chore: change the log background to same as severity text with some opacity

* chore: make the log background changes for column renderer

* chore: remove the backdrop mask from logs details drawer

* chore: fix tests

frontend/src/components/LogDetail/index.tsx

@@ -129,6 +129,7 @@ function LogDetail({
 	return (
 		<Drawer
 			width="60%"
+			maskStyle={{ background: 'none' }}
 			title={
 				<>
 					<Divider type="vertical" className={cx('log-type-indicator', LogType)} />

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

@@ -195,21 +195,20 @@ function ListLogView({
 	return (
 		<>
 			<Container
-				$isActiveLog={isHighlighted}
+				$isActiveLog={
+					isHighlighted ||
+					activeLog?.id === logData.id ||
+					activeContextLog?.id === logData.id
+				}
 				$isDarkMode={isDarkMode}
+				$logType={logType}
 				onMouseEnter={handleMouseEnter}
 				onMouseLeave={handleMouseLeave}
 				onClick={handleDetailedView}
 				fontSize={fontSize}
 			>
 				<div className="log-line">
-					<LogStateIndicator
+					<LogStateIndicator type={logType} fontSize={fontSize} />
-						type={logType}
-						isActive={
-							activeLog?.id === logData.id || activeContextLog?.id === logData.id
-						}
-						fontSize={fontSize}
-					/>
 					<div>
 						<LogContainer fontSize={fontSize}>
 							<LogGeneralField

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

@@ -1,8 +1,8 @@
 /* eslint-disable no-nested-ternary */
-import { Color } from '@signozhq/design-tokens';
 import { Card, Typography } from 'antd';
 import { FontSize } from 'container/OptionsMenu/types';
 import styled from 'styled-components';
+import { getActiveLogBackground } from 'utils/logs';
 
 interface LogTextProps {
 	linesPerRow?: number;
@@ -15,6 +15,7 @@ interface LogContainerProps {
 export const Container = styled(Card)<{
 	$isActiveLog: boolean;
 	$isDarkMode: boolean;
+	$logType: string;
 	fontSize: FontSize;
 }>`
 	width: 100% !important;
@@ -41,13 +42,8 @@ export const Container = styled(Card)<{
 				? `padding:0.3rem 0.6rem;`
 				: ``}
 
-		${({ $isActiveLog, $isDarkMode }): string =>
+		${({ $isActiveLog, $isDarkMode, $logType }): string =>
-			$isActiveLog
+			getActiveLogBackground($isActiveLog, $isDarkMode, $logType)}
-				? `background-color: ${
-						$isDarkMode ? Color.BG_SLATE_500 : Color.BG_VANILLA_300
-				  } !important`
-				: ''}
-	}
 `;
 
 export const Text = styled(Typography.Text)`

frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.styles.scss

@@ -41,10 +41,4 @@
 			background-color: var(--bg-sakura-500);
 		}
 	}
-
-	&.isActive {
-		.line {
-			background-color: var(--bg-robin-400, #7190f9);
-		}
-	}
 }

frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.test.tsx

@@ -17,14 +17,6 @@ describe('LogStateIndicator', () => {
 		);
 	});
 
-	it('renders correctly when isActive is true', () => {
-		const { container } = render(
-			<LogStateIndicator type="INFO" isActive fontSize={FontSize.MEDIUM} />,
-		);
-		const indicator = container.firstChild as HTMLElement;
-		expect(indicator.classList.contains('isActive')).toBe(true);
-	});
-
 	it('renders correctly with different types', () => {
 		const { container: containerInfo } = render(
 			<LogStateIndicator type="INFO" fontSize={FontSize.MEDIUM} />,

frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.tsx

@@ -44,22 +44,16 @@ export const LogType = {
 
 function LogStateIndicator({
 	type,
-	isActive,
 	fontSize,
 }: {
 	type: string;
 	fontSize: FontSize;
-	isActive?: boolean;
 }): JSX.Element {
 	return (
-		<div className={cx('log-state-indicator', isActive ? 'isActive' : '')}>
+		<div className="log-state-indicator">
 			<div className={cx('line', type, fontSize)}> </div>
 		</div>
 	);
 }
 
-LogStateIndicator.defaultProps = {
-	isActive: false,
-};
-
 export default LogStateIndicator;

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

@@ -162,20 +162,15 @@ function RawLogView({
 			$isDarkMode={isDarkMode}
 			$isReadOnly={isReadOnly}
 			$isHightlightedLog={isHighlighted}
-			$isActiveLog={isActiveLog}
+			$isActiveLog={
+				activeLog?.id === data.id || activeContextLog?.id === data.id || isActiveLog
+			}
+			$logType={logType}
 			onMouseEnter={handleMouseEnter}
 			onMouseLeave={handleMouseLeave}
 			fontSize={fontSize}
 		>
-			<LogStateIndicator
+			<LogStateIndicator type={logType} fontSize={fontSize} />
-				type={logType}
-				isActive={
-					activeLog?.id === data.id ||
-					activeContextLog?.id === data.id ||
-					isActiveLog
-				}
-				fontSize={fontSize}
-			/>
 
 			<RawLogContent
 				$isReadOnly={isReadOnly}

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

@@ -13,6 +13,7 @@ export const RawLogViewContainer = styled(Row)<{
 	$isReadOnly?: boolean;
 	$isActiveLog?: boolean;
 	$isHightlightedLog: boolean;
+	$logType: string;
 	fontSize: FontSize;
 }>`
 	position: relative;
@@ -34,11 +35,12 @@ export const RawLogViewContainer = styled(Row)<{
 				: `margin: 2px 0;`}
 	}
 
-	${({ $isActiveLog }): string => getActiveLogBackground($isActiveLog)}
+	${({ $isActiveLog, $logType }): string =>
+		getActiveLogBackground($isActiveLog, true, $logType)}
 
-	${({ $isReadOnly, $isActiveLog, $isDarkMode }): string =>
+	${({ $isReadOnly, $isActiveLog, $isDarkMode, $logType }): string =>
 		$isActiveLog
-			? getActiveLogBackground($isActiveLog, $isDarkMode)
+			? getActiveLogBackground($isActiveLog, $isDarkMode, $logType)
 			: getDefaultLogBackground($isReadOnly, $isDarkMode)}
 
 	${({ $isHightlightedLog, $isDarkMode }): string =>

frontend/src/components/Logs/TableView/useTableView.tsx

@@ -35,8 +35,6 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 		linesPerRow,
 		fontSize,
 		appendTo = 'center',
-		activeContextLog,
-		activeLog,
 		isListViewPanel,
 	} = props;
 
@@ -90,9 +88,6 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 							<div className="table-timestamp">
 								<LogStateIndicator
 									type={getLogIndicatorTypeForTable(item)}
-									isActive={
-										activeLog?.id === item.id || activeContextLog?.id === item.id
-									}
 									fontSize={fontSize}
 								/>
 								<Typography.Paragraph ellipsis className={cx('text', fontSize)}>
@@ -130,16 +125,7 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 			},
 			...(appendTo === 'end' ? fieldColumns : []),
 		];
-	}, [
+	}, [fields, isListViewPanel, appendTo, isDarkMode, linesPerRow, fontSize]);
-		fields,
-		isListViewPanel,
-		appendTo,
-		isDarkMode,
-		linesPerRow,
-		activeLog?.id,
-		activeContextLog?.id,
-		fontSize,
-	]);
 
 	return { columns, dataSource: flattenLogData };
 };

frontend/src/container/LogsExplorerList/InfinityTableView/TableRow.styles.scss

@@ -2,3 +2,25 @@
 	cursor: pointer;
 	position: relative;
 }
+
+.table-row-backdrop {
+	&.INFO {
+		background-color: var(--bg-robin-500) 10;
+	}
+	&.WARNING,
+	&.WARN {
+		background-color: var(--bg-amber-500) 10;
+	}
+	&.ERROR {
+		background-color: var(--bg-cherry-500) 10;
+	}
+	&.TRACE {
+		background-color: var(--bg-forest-400) 10;
+	}
+	&.DEBUG {
+		background-color: var(--bg-aqua-500) 10;
+	}
+	&.FATAL {
+		background-color: var(--bg-sakura-500) 10;
+	}
+}

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

@@ -1,5 +1,6 @@
 import LogDetail from 'components/LogDetail';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
+import { getLogIndicatorType } from 'components/Logs/LogStateIndicator/utils';
 import { useTableView } from 'components/Logs/TableView/useTableView';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { useActiveLog } from 'hooks/logs/useActiveLog';
@@ -21,6 +22,11 @@ import { TableHeaderCellStyled, TableRowStyled } from './styles';
 import TableRow from './TableRow';
 import { InfinityTableProps } from './types';
 
+interface CustomTableRowProps {
+	activeContextLogId: string;
+	activeLogId: string;
+}
+
 // eslint-disable-next-line react/function-component-definition
 const CustomTableRow: TableComponents<ILog>['TableRow'] = ({
 	children,
@@ -31,10 +37,17 @@ const CustomTableRow: TableComponents<ILog>['TableRow'] = ({
 
 	const isDarkMode = useIsDarkMode();
 
+	const logType = getLogIndicatorType(props.item);
+
 	return (
 		<TableRowStyled
 			$isDarkMode={isDarkMode}
-			$isActiveLog={isHighlighted}
+			$isActiveLog={
+				isHighlighted ||
+				(context as CustomTableRowProps).activeContextLogId === props.item.id ||
+				(context as CustomTableRowProps).activeLogId === props.item.id
+			}
+			$logType={logType}
 			// eslint-disable-next-line react/jsx-props-no-spreading
 			{...props}
 		>
@@ -66,8 +79,6 @@ const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 			...tableViewProps,
 			onClickExpand: onSetActiveLog,
 			onOpenLogsContext: handleSetActiveContextLog,
-			activeLog,
-			activeContextLog,
 		});
 
 		const { draggedColumns, onDragColumns } = useDragColumns<
@@ -153,7 +164,14 @@ const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 						// TODO: fix it in the future
 						// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 						// @ts-ignore
-						TableRow: CustomTableRow,
+						TableRow: (props): any =>
+							CustomTableRow({
+								...props,
+								context: {
+									activeContextLogId: activeContextLog?.id,
+									activeLogId: activeLog?.id,
+								},
+							} as any),
 					}}
 					itemContent={itemContent}
 					fixedHeaderContent={tableHeader}

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

@@ -1,5 +1,4 @@
 /* eslint-disable no-nested-ternary */
-import { Color } from '@signozhq/design-tokens';
 import { themeColors } from 'constants/theme';
 import { FontSize } from 'container/OptionsMenu/types';
 import styled from 'styled-components';
@@ -37,13 +36,12 @@ export const TableCellStyled = styled.td<TableHeaderCellStyledProps>`
 export const TableRowStyled = styled.tr<{
 	$isActiveLog: boolean;
 	$isDarkMode: boolean;
+	$logType: string;
 }>`
 	td {
-		${({ $isActiveLog, $isDarkMode }): string =>
+		${({ $isActiveLog, $isDarkMode, $logType }): string =>
 			$isActiveLog
-				? `background-color: ${
+				? getActiveLogBackground($isActiveLog, $isDarkMode, $logType)
-						$isDarkMode ? Color.BG_SLATE_500 : Color.BG_VANILLA_300
-				  } !important`
 				: ''};
 	}
 

frontend/src/utils/logs.ts

@@ -1,5 +1,6 @@
 import { orange } from '@ant-design/colors';
 import { Color } from '@signozhq/design-tokens';
+import { LogType } from 'components/Logs/LogStateIndicator/LogStateIndicator';
 
 export const getDefaultLogBackground = (
 	isReadOnly?: boolean,
@@ -17,10 +18,28 @@ export const getDefaultLogBackground = (
 export const getActiveLogBackground = (
 	isActiveLog = true,
 	isDarkMode = true,
+	logType?: string,
 ): string => {
 	if (!isActiveLog) return ``;
-	if (isDarkMode) return `background-color: ${Color.BG_SLATE_200};`;
+	if (isDarkMode) {
-	return `background-color: ${Color.BG_VANILLA_300}; color: ${Color.TEXT_SLATE_400}`;
+		switch (logType) {
+			case LogType.INFO:
+				return `background-color: ${Color.BG_ROBIN_500}10 !important;`;
+			case LogType.WARN:
+				return `background-color: ${Color.BG_AMBER_500}10 !important;`;
+			case LogType.ERROR:
+				return `background-color: ${Color.BG_CHERRY_500}10 !important;`;
+			case LogType.TRACE:
+				return `background-color: ${Color.BG_FOREST_400}10 !important;`;
+			case LogType.DEBUG:
+				return `background-color: ${Color.BG_AQUA_500}10 !important;`;
+			case LogType.FATAL:
+				return `background-color: ${Color.BG_SAKURA_500}10 !important;`;
+			default:
+				return `background-color: ${Color.BG_SLATE_200} !important;`;
+		}
+	}
+	return `background-color: ${Color.BG_VANILLA_300}!important; color: ${Color.TEXT_SLATE_400} !important;`;
 };
 
 export const getHightLightedLogBackground = (