mirror of
https://github.com/jlengrand/signoz.git
synced 2026-03-10 08:41:20 +00:00
96b81817e0
* feat: add support for changing the font size in logs * fix: build issues and logs context * chore: fix build issues * feat: scale all the spaces * chore: handle light mode designs * feat: set small as the default
94 lines
2.5 KiB
TypeScript
94 lines
2.5 KiB
TypeScript
/* 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';
|
|
import { getActiveLogBackground } from 'utils/logs';
|
|
|
|
interface TableHeaderCellStyledProps {
|
|
$isDragColumn: boolean;
|
|
$isDarkMode: boolean;
|
|
$isTimestamp?: boolean;
|
|
fontSize?: FontSize;
|
|
}
|
|
|
|
export const TableStyled = styled.table`
|
|
width: 100%;
|
|
`;
|
|
|
|
export const TableCellStyled = styled.td<TableHeaderCellStyledProps>`
|
|
padding: 0.5rem;
|
|
${({ fontSize }): string =>
|
|
fontSize === FontSize.SMALL
|
|
? `padding:0.3rem;`
|
|
: fontSize === FontSize.MEDIUM
|
|
? `padding:0.4rem;`
|
|
: fontSize === FontSize.LARGE
|
|
? `padding:0.5rem;`
|
|
: ``}
|
|
background-color: ${(props): string =>
|
|
props.$isDarkMode ? 'inherit' : themeColors.whiteCream};
|
|
|
|
color: ${(props): string =>
|
|
props.$isDarkMode ? themeColors.white : themeColors.bckgGrey};
|
|
`;
|
|
|
|
// handle the light theme here
|
|
export const TableRowStyled = styled.tr<{
|
|
$isActiveLog: boolean;
|
|
$isDarkMode: boolean;
|
|
}>`
|
|
td {
|
|
${({ $isActiveLog, $isDarkMode }): string =>
|
|
$isActiveLog
|
|
? `background-color: ${
|
|
$isDarkMode ? Color.BG_SLATE_500 : Color.BG_VANILLA_300
|
|
} !important`
|
|
: ''};
|
|
}
|
|
|
|
cursor: pointer;
|
|
position: relative;
|
|
|
|
.log-line-action-buttons {
|
|
display: none;
|
|
}
|
|
|
|
&:hover {
|
|
${TableCellStyled} {
|
|
${({ $isActiveLog, $isDarkMode }): string =>
|
|
$isActiveLog
|
|
? getActiveLogBackground()
|
|
: `background-color: ${
|
|
!$isDarkMode ? 'var(--bg-vanilla-200)' : 'rgba(171, 189, 255, 0.04)'
|
|
}`}
|
|
}
|
|
.log-line-action-buttons {
|
|
display: flex;
|
|
}
|
|
}
|
|
`;
|
|
|
|
export const TableHeaderCellStyled = styled.th<TableHeaderCellStyledProps>`
|
|
padding: 0.5rem;
|
|
font-size: 14px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 18px;
|
|
letter-spacing: -0.07px;
|
|
background: ${(props): string => (props.$isDarkMode ? '#0b0c0d' : '#fdfdfd')};
|
|
${({ $isDragColumn }): string => ($isDragColumn ? 'cursor: col-resize;' : '')}
|
|
|
|
${({ fontSize }): string =>
|
|
fontSize === FontSize.SMALL
|
|
? `font-size:11px; line-height:16px; padding: 0.1rem;`
|
|
: fontSize === FontSize.MEDIUM
|
|
? `font-size:13px; line-height:20px; padding:0.3rem;`
|
|
: fontSize === FontSize.LARGE
|
|
? `font-size:14px; line-height:24px; padding: 0.5rem;`
|
|
: ``};
|
|
${({ $isTimestamp }): string => ($isTimestamp ? 'padding-left: 24px;' : '')}
|
|
color: ${(props): string =>
|
|
props.$isDarkMode ? 'var(--bg-vanilla-100, #fff)' : themeColors.bckgGrey};
|
|
`;
|