GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-12 07:39:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix promql light theme (#5044)

Browse Source 
* fix: promQL icon not visible in light mode

* fix: promql icon

* fix: promQL icon not visible in light mode
This commit is contained in:
Vikrant Gupta 2024-05-21 22:54:18 +05:30 committed by GitHub
parent de497bf5b6
commit 631c12259f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 49 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/public/Icons/promQL.svg
View File

@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 581 B

27
frontend/src/assets/Dashboard/PromQl.tsx Normal file
View File

@ -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;

11
frontend/src/container/FormAlertRules/QuerySection.tsx
View File

@ -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();

5
frontend/src/container/NewWidget/LeftContainer/QuerySection/QuerySection.styles.scss
View File

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

9
frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx
View File

@ -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>
),