diff --git a/frontend/public/Icons/promQL.svg b/frontend/public/Icons/promQL.svg
deleted file mode 100644
index d02bcc2a4d..0000000000
--- a/frontend/public/Icons/promQL.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/frontend/src/assets/Dashboard/PromQl.tsx b/frontend/src/assets/Dashboard/PromQl.tsx
new file mode 100644
index 0000000000..8a942ae74e
--- /dev/null
+++ b/frontend/src/assets/Dashboard/PromQl.tsx
@@ -0,0 +1,27 @@
+import { CSSProperties } from 'react';
+
+function PromQLIcon({
+ fillColor,
+}: {
+ fillColor: CSSProperties['color'];
+}): JSX.Element {
+ return (
+
+ );
+}
+
+export default PromQLIcon;
diff --git a/frontend/src/container/FormAlertRules/QuerySection.tsx b/frontend/src/container/FormAlertRules/QuerySection.tsx
index 406a757eda..a567288585 100644
--- a/frontend/src/container/FormAlertRules/QuerySection.tsx
+++ b/frontend/src/container/FormAlertRules/QuerySection.tsx
@@ -1,12 +1,15 @@
import './QuerySection.styles.scss';
+import { Color } from '@signozhq/design-tokens';
import { Button, Tabs, Tooltip } from 'antd';
+import PromQLIcon from 'assets/Dashboard/PromQl';
import { ALERTS_DATA_SOURCE_MAP } from 'constants/alerts';
import { ENTITY_VERSION_V4 } from 'constants/app';
import { PANEL_TYPES } from 'constants/queryBuilder';
import { QBShortcuts } from 'constants/shortcuts/QBShortcuts';
import { QueryBuilder } from 'container/QueryBuilder';
import { useKeyboardHotkeys } from 'hooks/hotkeys/useKeyboardHotkeys';
+import { useIsDarkMode } from 'hooks/useDarkMode';
import { Atom, Play, Terminal } from 'lucide-react';
import { useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
@@ -48,6 +51,8 @@ function QuerySection({
const renderChQueryUI = (): JSX.Element => ;
+ const isDarkMode = useIsDarkMode();
+
const renderMetricUI = (): JSX.Element => (
),
key: EQueryType.PROM,
},
],
- [],
+ [isDarkMode],
);
const { registerShortcut, deregisterShortcut } = useKeyboardHotkeys();
diff --git a/frontend/src/container/NewWidget/LeftContainer/QuerySection/QuerySection.styles.scss b/frontend/src/container/NewWidget/LeftContainer/QuerySection/QuerySection.styles.scss
index 968da1459a..d6ae43ac9a 100644
--- a/frontend/src/container/NewWidget/LeftContainer/QuerySection/QuerySection.styles.scss
+++ b/frontend/src/container/NewWidget/LeftContainer/QuerySection/QuerySection.styles.scss
@@ -12,6 +12,7 @@
.prom-ql-icon {
height: 14px;
width: 14px;
+ color: var(--bg-vanilla-200);
}
}
.ant-btn-default {
@@ -54,6 +55,10 @@
.ant-tabs-tab-active {
.nav-btns {
background: var(--bg-vanilla-300) !important;
+
+ .prom-ql-icon {
+ color: var(--bg-ink-400);
+ }
}
}
}
diff --git a/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx b/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx
index 8819cbf0f9..82ac79bc59 100644
--- a/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx
+++ b/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx
@@ -1,6 +1,8 @@
import './QuerySection.styles.scss';
+import { Color } from '@signozhq/design-tokens';
import { Button, Tabs, Tooltip, Typography } from 'antd';
+import PromQLIcon from 'assets/Dashboard/PromQl';
import TextToolTip from 'components/TextToolTip';
import { PANEL_TYPES } from 'constants/queryBuilder';
import { QBShortcuts } from 'constants/shortcuts/QBShortcuts';
@@ -11,6 +13,7 @@ import { useKeyboardHotkeys } from 'hooks/hotkeys/useKeyboardHotkeys';
import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
import { updateStepInterval } from 'hooks/queryBuilder/useStepInterval';
+import { useIsDarkMode } from 'hooks/useDarkMode';
import useUrlQuery from 'hooks/useUrlQuery';
import { defaultTo } from 'lodash-es';
import { Atom, Play, Terminal } from 'lucide-react';
@@ -53,6 +56,8 @@ function QuerySection({
const { selectedDashboard, setSelectedDashboard } = useDashboard();
+ const isDarkMode = useIsDarkMode();
+
const { widgets } = selectedDashboard?.data || {};
const getWidget = useCallback(() => {
@@ -196,7 +201,9 @@ function QuerySection({
label: (
),