fix: update styles for the dashboard confirm modal (#3287)

frontend/src/container/ConfigDropdown/index.tsx

@@ -4,7 +4,7 @@ import {
 	QuestionCircleFilled,
 	QuestionCircleOutlined,
 } from '@ant-design/icons';
-import { Dropdown, Space } from 'antd';
+import { Space } from 'antd';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
@@ -13,6 +13,7 @@ import { ConfigProps } from 'types/api/dynamicConfigs/getDynamicConfigs';
 import AppReducer from 'types/reducer/app';
 
 import HelpToolTip from './Config';
+import { ConfigDropdown } from './styles';
 
 function DynamicConfigDropdown({
 	frontendId,
@@ -53,19 +54,17 @@ function DynamicConfigDropdown({
 	const DropDownIcon = isHelpDropDownOpen ? CaretUpFilled : CaretDownFilled;
 
 	return (
-		<Dropdown
+		<ConfigDropdown
 			onOpenChange={onToggleHandler}
 			trigger={['click']}
 			menu={menu}
 			open={isHelpDropDownOpen}
 		>
 			<Space align="center">
-				<Icon
-					style={{ fontSize: 26, color: 'white', paddingTop: 26, cursor: 'pointer' }}
-				/>
+				<Icon style={{ fontSize: 26, color: 'white', paddingTop: 26 }} />
 				<DropDownIcon style={{ color: 'white' }} />
 			</Space>
-		</Dropdown>
+		</ConfigDropdown>
 	);
 }
 

frontend/src/container/ConfigDropdown/styles.ts

@@ -0,0 +1,6 @@
+import { Dropdown } from 'antd';
+import styled from 'styled-components';
+
+export const ConfigDropdown = styled(Dropdown)`
+	cursor: pointer;
+`;

frontend/src/container/Header/index.tsx

@@ -3,7 +3,7 @@ import {
 	CaretUpFilled,
 	LogoutOutlined,
 } from '@ant-design/icons';
-import { Button, Divider, Dropdown, MenuProps, Space, Typography } from 'antd';
+import { Button, Divider, MenuProps, Space, Typography } from 'antd';
 import { Logout } from 'api/utils';
 import ROUTES from 'constants/routes';
 import Config from 'container/ConfigDropdown';
@@ -33,6 +33,7 @@ import {
 	LogoutContainer,
 	NavLinkWrapper,
 	ToggleButton,
+	UserDropdown,
 } from './styles';
 
 function HeaderContainer(): JSX.Element {
@@ -133,7 +134,7 @@ function HeaderContainer(): JSX.Element {
 						unCheckedChildren="🌞"
 					/>
 
-					<Dropdown
+					<UserDropdown
 						onOpenChange={onToggleHandler(setIsUserDropDownOpen)}
 						trigger={['click']}
 						menu={menu}
@@ -145,7 +146,7 @@ function HeaderContainer(): JSX.Element {
 								{!isUserDropDownOpen ? <CaretDownFilled /> : <CaretUpFilled />}
 							</IconContainer>
 						</Space>
-					</Dropdown>
+					</UserDropdown>
 				</Space>
 			</Container>
 		</Header>

frontend/src/container/Header/styles.ts

@@ -1,4 +1,4 @@
-import { Avatar, Layout, Switch, Typography } from 'antd';
+import { Avatar, Dropdown, Layout, Switch, Typography } from 'antd';
 import styled from 'styled-components';
 
 export const Header = styled(Layout.Header)`
@@ -82,3 +82,7 @@ export const NavLinkWrapper = styled.div`
 export const AvatarWrapper = styled(Avatar)`
 	background-color: rgba(255, 255, 255, 0.25);
 `;
+
+export const UserDropdown = styled(Dropdown)`
+	cursor: pointer;
+`;

frontend/src/container/ListOfDashboard/TableComponents/DeleteButton.tsx

@@ -1,5 +1,6 @@
 import { ExclamationCircleOutlined } from '@ant-design/icons';
 import { Modal } from 'antd';
+import { useCallback } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 import { ThunkDispatch } from 'redux-thunk';
@@ -9,11 +10,11 @@ import AppActions from 'types/actions';
 import { Data } from '../index';
 import { TableLinkText } from './styles';
 
-const { confirm } = Modal;
-
 function DeleteButton({ deleteDashboard, id }: DeleteButtonProps): JSX.Element {
-	const openConfirmationDialog = (): void => {
-		confirm({
+	const [modal, contextHolder] = Modal.useModal();
+
+	const openConfirmationDialog = useCallback((): void => {
+		modal.confirm({
 			title: 'Do you really want to delete this dashboard?',
 			icon: <ExclamationCircleOutlined style={{ color: '#e42b35' }} />,
 			onOk() {
@@ -25,12 +26,16 @@ function DeleteButton({ deleteDashboard, id }: DeleteButtonProps): JSX.Element {
 			okButtonProps: { danger: true },
 			centered: true,
 		});
-	};
+	}, [id, modal, deleteDashboard]);
 
 	return (
-		<TableLinkText type="danger" onClick={openConfirmationDialog}>
-			Delete
-		</TableLinkText>
+		<>
+			<TableLinkText type="danger" onClick={openConfirmationDialog}>
+				Delete
+			</TableLinkText>
+
+			{contextHolder}
+		</>
 	);
 }