From 631c12259fa156fe480432ca456caae4cc5008ee Mon Sep 17 00:00:00 2001 From: Vikrant Gupta Date: Tue, 21 May 2024 22:54:18 +0530 Subject: [PATCH] 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 - frontend/src/assets/Dashboard/PromQl.tsx | 27 +++++++++++++++++++ .../container/FormAlertRules/QuerySection.tsx | 11 ++++++-- .../QuerySection/QuerySection.styles.scss | 5 ++++ .../LeftContainer/QuerySection/index.tsx | 9 ++++++- 5 files changed, 49 insertions(+), 4 deletions(-) delete mode 100644 frontend/public/Icons/promQL.svg create mode 100644 frontend/src/assets/Dashboard/PromQl.tsx 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: ( ),