From 25398d9d35b7b08050e166aa1d0799d968fcd86c Mon Sep 17 00:00:00 2001
From: Palash Gupta <palashgdev@gmail.com>
Date: Thu, 11 May 2023 13:56:29 +0530
Subject: [PATCH] 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                      |  2 ++
 .../components/FilterLabel/FilterLabel.styled.ts     | 12 +++++++++---
 .../components/FilterLabel/FilterLabel.tsx           |  5 ++++-
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/frontend/src/constants/theme.ts b/frontend/src/constants/theme.ts
index 36dfe4bd87..ce6cdd354a 100644
--- a/frontend/src/constants/theme.ts
+++ b/frontend/src/constants/theme.ts
@@ -38,6 +38,8 @@ const themeColors = {
 	whiteCream: '#ffffffd5',
 	black: '#000000',
 	lightgrey: '#ddd',
+	borderLightGrey: '#d9d9d9',
+	borderDarkGrey: '#424242',
 };
 
 export { themeColors };
diff --git a/frontend/src/container/QueryBuilder/components/FilterLabel/FilterLabel.styled.ts b/frontend/src/container/QueryBuilder/components/FilterLabel/FilterLabel.styled.ts
index 4e24a2f778..bcf0d2d04c 100644
--- a/frontend/src/container/QueryBuilder/components/FilterLabel/FilterLabel.styled.ts
+++ b/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
+		}`};
 `;
diff --git a/frontend/src/container/QueryBuilder/components/FilterLabel/FilterLabel.tsx b/frontend/src/container/QueryBuilder/components/FilterLabel/FilterLabel.tsx
index 48153f4823..57cb5ff72c 100644
--- a/frontend/src/container/QueryBuilder/components/FilterLabel/FilterLabel.tsx
+++ b/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>;
 });