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

Co-authored-by: Srikanth Chekuri <srikanth.chekuri92@gmail.com>

frontend/src/constants/theme.ts

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

frontend/src/container/QueryBuilder/components/FilterLabel/FilterLabel.styled.ts

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

frontend/src/container/QueryBuilder/components/FilterLabel/FilterLabel.tsx

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