GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-07-29 09:12:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: query builder filter label is adopted for dark mode (#2683)

Browse Source 
Co-authored-by: Srikanth Chekuri <srikanth.chekuri92@gmail.com>
This commit is contained in:
Palash Gupta 2023-05-11 13:56:29 +05:30 committed by GitHub
parent 38bfc41190
commit 25398d9d35
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/constants/theme.ts
View File

@ -38,6 +38,8 @@ const themeColors = {
whiteCream: '#ffffffd5', whiteCream: '#ffffffd5',
black: '#000000', black: '#000000',
lightgrey: '#ddd', lightgrey: '#ddd',
borderLightGrey: '#d9d9d9',
borderDarkGrey: '#424242',
}; };
export { themeColors }; export { themeColors };

12
frontend/src/container/QueryBuilder/components/FilterLabel/FilterLabel.styled.ts
View File

@ -1,6 +1,10 @@
import { themeColors } from 'constants/theme';
import styled from 'styled-components'; import styled from 'styled-components';
export const StyledLabel = styled.div` interface Props {
isDarkMode: boolean;
}
export const StyledLabel = styled.div<Props>`
padding: 0 0.6875rem; padding: 0 0.6875rem;
min-height: 2rem; min-height: 2rem;
min-width: 5.625rem; min-width: 5.625rem;
@ -8,6 +12,8 @@ export const StyledLabel = styled.div`
white-space: nowrap; white-space: nowrap;
align-items: center; align-items: center;
border-radius: 0.125rem; border-radius: 0.125rem;
border: 0.0625rem solid #434343; border: ${({ isDarkMode }): string =>
background-color: #141414; `1px solid ${
isDarkMode ? themeColors.borderDarkGrey : themeColors.borderLightGrey
}`};
`; `;

5
frontend/src/container/QueryBuilder/components/FilterLabel/FilterLabel.tsx
View File

@ -1,3 +1,4 @@
import { useIsDarkMode } from 'hooks/useDarkMode';
import React, { memo } from 'react'; import React, { memo } from 'react';
// ** Types // ** Types
@ -8,5 +9,7 @@ import { StyledLabel } from './FilterLabel.styled';
export const FilterLabel = memo(function FilterLabel({ export const FilterLabel = memo(function FilterLabel({
label, label,
}: FilterLabelProps): JSX.Element { }: FilterLabelProps): JSX.Element {
return <StyledLabel>{label}</StyledLabel>; const isDarkMode = useIsDarkMode();
return <StyledLabel isDarkMode={isDarkMode}>{label}</StyledLabel>;
}); });