diff --git a/frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss b/frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss index 7f6ac6a4dd..8af1e4ad0a 100644 --- a/frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss +++ b/frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss @@ -64,6 +64,10 @@ .view-options, .actions { + .info-icon { + padding: 8px; + } + .hidden { display: none; } @@ -252,6 +256,10 @@ color: var(--bg-ink-200); background-color: var(--bg-vanilla-300); } + + .info-icon { + color: var(--bg-ink-200); + } } } diff --git a/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx b/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx index 0e9fd3704b..7253b45b94 100644 --- a/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx +++ b/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx @@ -1,6 +1,7 @@ /* eslint-disable react/jsx-props-no-spreading */ import './ExplorerOptions.styles.scss'; +import { InfoCircleOutlined } from '@ant-design/icons'; import { Color } from '@signozhq/design-tokens'; import { Button, @@ -402,6 +403,28 @@ function ExplorerOptions({