[Fix]: added the darktheme support for Action Column in Alerts Listing Table. (#3844)

* refactor: added the darktheme support

* fix: typo

---------

Co-authored-by: Ankit Nayan <ankit@signoz.io>
This commit is contained in:
Rajat Dabade 2023-11-01 00:43:22 +05:30 committed by GitHub
parent 3341cb7396
commit eddb607c9c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 1 deletions

View File

@ -2,6 +2,10 @@
color: #fff; color: #fff;
} }
.Dropdown-button--dark {
color: #000;
}
.Dropdown-icon { .Dropdown-icon {
font-size: 1.2rem; font-size: 1.2rem;
} }

View File

@ -2,8 +2,11 @@ import './DropDown.styles.scss';
import { EllipsisOutlined } from '@ant-design/icons'; import { EllipsisOutlined } from '@ant-design/icons';
import { Button, Dropdown, MenuProps, Space } from 'antd'; import { Button, Dropdown, MenuProps, Space } from 'antd';
import { useIsDarkMode } from 'hooks/useDarkMode';
function DropDown({ element }: { element: JSX.Element[] }): JSX.Element { function DropDown({ element }: { element: JSX.Element[] }): JSX.Element {
const isDarkMode = useIsDarkMode();
const items: MenuProps['items'] = element.map( const items: MenuProps['items'] = element.map(
(e: JSX.Element, index: number) => ({ (e: JSX.Element, index: number) => ({
label: e, label: e,
@ -15,7 +18,7 @@ function DropDown({ element }: { element: JSX.Element[] }): JSX.Element {
<Dropdown menu={{ items }} className="Dropdown-container"> <Dropdown menu={{ items }} className="Dropdown-container">
<Button <Button
type="link" type="link"
className="Dropdown-button" className={!isDarkMode ? 'Dropdown-button--dark' : 'Dropdown-button'}
onClick={(e): void => e.preventDefault()} onClick={(e): void => e.preventDefault()}
> >
<Space> <Space>