[Fix]: added the darktheme support for Action Column in Alerts Listin…

…g Table. (#3844) * refactor: added the darktheme support * fix: typo --------- Co-authored-by: Ankit Nayan <[email protected]>
SigNoz · Oct 31, 2023 · eddb607 · eddb607
1 parent 3341cb7
commit eddb607
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git 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;
 }
diff --git 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>