From eddb607c9cbb5206c409191910e3d4590a4b62e6 Mon Sep 17 00:00:00 2001
From: Rajat Dabade <rajat@signoz.io>
Date: Wed, 1 Nov 2023 00:43:22 +0530
Subject: [PATCH] [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>
---
 frontend/src/components/DropDown/DropDown.styles.scss | 4 ++++
 frontend/src/components/DropDown/DropDown.tsx         | 5 ++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/DropDown/DropDown.styles.scss b/frontend/src/components/DropDown/DropDown.styles.scss
index 6042acd07c..3527c1385a 100644
--- a/frontend/src/components/DropDown/DropDown.styles.scss
+++ b/frontend/src/components/DropDown/DropDown.styles.scss
@@ -2,6 +2,10 @@
     color: #fff;
 }
 
+.Dropdown-button--dark {
+    color: #000;
+}
+
 .Dropdown-icon {
     font-size: 1.2rem;
 }
\ No newline at end of file
diff --git a/frontend/src/components/DropDown/DropDown.tsx b/frontend/src/components/DropDown/DropDown.tsx
index 2f45a6a1a7..c76ff8daec 100644
--- a/frontend/src/components/DropDown/DropDown.tsx
+++ b/frontend/src/components/DropDown/DropDown.tsx
@@ -2,8 +2,11 @@ import './DropDown.styles.scss';
 
 import { EllipsisOutlined } from '@ant-design/icons';
 import { Button, Dropdown, MenuProps, Space } from 'antd';
+import { useIsDarkMode } from 'hooks/useDarkMode';
 
 function DropDown({ element }: { element: JSX.Element[] }): JSX.Element {
+	const isDarkMode = useIsDarkMode();
+
 	const items: MenuProps['items'] = element.map(
 		(e: JSX.Element, index: number) => ({
 			label: e,
@@ -15,7 +18,7 @@ function DropDown({ element }: { element: JSX.Element[] }): JSX.Element {
 		<Dropdown menu={{ items }} className="Dropdown-container">
 			<Button
 				type="link"
-				className="Dropdown-button"
+				className={!isDarkMode ? 'Dropdown-button--dark' : 'Dropdown-button'}
 				onClick={(e): void => e.preventDefault()}
 			>
 				<Space>