Fix promql light theme (#5044)

* fix: promQL icon not visible in light mode

* fix: promql icon

* fix: promQL icon not visible in light mode

frontend/public/Icons/promQL.svg

@@ -1 +0,0 @@
-<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2c1 2.538 2.5 2.962 3.5 3.808.942.78 1.481 1.845 1.5 2.961 0 1.122-.527 2.198-1.464 2.992C14.598 12.554 13.326 13 12 13s-2.598-.446-3.536-1.24C7.527 10.968 7 9.892 7 8.77c0-.255 0-.508.1-.762.085.25.236.48.443.673.207.193.463.342.75.437a2.334 2.334 0 001.767-.128c.263-.135.485-.32.65-.539.166-.22.269-.468.301-.727a1.452 1.452 0 00-.11-.765 1.699 1.699 0 00-.501-.644C8 4.115 11 2 12 2zM17 16l-5 6-5-6h10z" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>

frontend/src/assets/Dashboard/PromQl.tsx

@@ -0,0 +1,27 @@
+import { CSSProperties } from 'react';
+
+function PromQLIcon({
+	fillColor,
+}: {
+	fillColor: CSSProperties['color'];
+}): JSX.Element {
+	return (
+		<svg
+			width="14"
+			height="14"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 24 24"
+		>
+			<path
+				d="M12 2c1 2.538 2.5 2.962 3.5 3.808.942.78 1.481 1.845 1.5 2.961 0 1.122-.527 2.198-1.464 2.992C14.598 12.554 13.326 13 12 13s-2.598-.446-3.536-1.24C7.527 10.968 7 9.892 7 8.77c0-.255 0-.508.1-.762.085.25.236.48.443.673.207.193.463.342.75.437a2.334 2.334 0 001.767-.128c.263-.135.485-.32.65-.539.166-.22.269-.468.301-.727a1.452 1.452 0 00-.11-.765 1.699 1.699 0 00-.501-.644C8 4.115 11 2 12 2zM17 16l-5 6-5-6h10z"
+				stroke={fillColor}
+				strokeWidth="2"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+		</svg>
+	);
+}
+
+export default PromQLIcon;

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 => <ChQuerySection />;
 
+	const isDarkMode = useIsDarkMode();
+
 	const renderMetricUI = (): JSX.Element => (
 		<QueryBuilder
 			panelType={panelType}
@@ -113,14 +118,16 @@ function QuerySection({
 				label: (
 					<Tooltip title="PromQL">
 						<Button className="nav-btns">
-							<img src="/Icons/promQL.svg" alt="Prom Ql" className="prom-ql-icon" />
+							<PromQLIcon
+								fillColor={isDarkMode ? Color.BG_VANILLA_200 : Color.BG_INK_300}
+							/>
 						</Button>
 					</Tooltip>
 				),
 				key: EQueryType.PROM,
 			},
 		],
-		[],
+		[isDarkMode],
 	);
 
 	const { registerShortcut, deregisterShortcut } = useKeyboardHotkeys();

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);
+				}
 			}
 		}
 	}

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: (
 				<Tooltip title="PromQL">
 					<Button className="nav-btns">
-						<img src="/Icons/promQL.svg" alt="Prom Ql" className="prom-ql-icon" />
+						<PromQLIcon
+							fillColor={isDarkMode ? Color.BG_VANILLA_200 : Color.BG_INK_300}
+						/>
 					</Button>
 				</Tooltip>
 			),