fix(dashboard): align Delete dashboard with other action menu items

The Delete dashboard entry in the dashboards action menu was rendered with
a `<Flex justify="center">` and a custom `TableLinkText` span. This caused
the icon and label to be center-aligned, sized differently, and spaced
differently from the four sibling entries (View, Open in New Tab, Copy
Link, Export JSON) which use an antd `<Button>` with `.action-btn` styling.

Switch the Delete entry to the same antd `<Button>` structure as the rest
of the menu so the icon size, icon-to-text spacing, and left alignment
all match. While here, collapse the `section-1` / `section-2` wrappers
into a single `.actionContent` and move the action-menu styles into a
co-located CSS module (`DashboardActions.module.scss`) with a `deleteBtn`
modifier that carries the divider and the danger color via the
`--danger-background` semantic token.

frontend/src/container/ListOfDashboard/DashboardActions.module.scss

@@ -0,0 +1,36 @@
+.actionContent {
+	display: flex;
+	flex-direction: column;
+}
+
+.actionBtn {
+	display: flex;
+	padding: 8px;
+	height: unset;
+	align-items: center;
+	gap: 6px;
+	color: var(--l2-foreground);
+	font-family: Inter;
+	font-size: 12px;
+	font-weight: 400;
+	line-height: normal;
+	letter-spacing: 0.14px;
+
+	:global(.ant-icon-btn) {
+		margin-inline-end: 0px;
+	}
+}
+
+.deleteBtn {
+	composes: actionBtn;
+	color: var(--danger-background) !important;
+	border-top: 1px solid var(--l1-border);
+}
+
+.deleteBtn:hover {
+	background-color: color-mix(in srgb, var(--l1-foreground) 12%, transparent);
+}
+
+.deleteModal :global(.ant-modal-confirm-body) {
+	align-items: center;
+}

frontend/src/container/ListOfDashboard/DashboardList.styles.scss

@@ -745,52 +745,6 @@
 		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
 		backdrop-filter: blur(20px);
 		padding: 0px;
-
-		.dashboard-action-content {
-			.section-1 {
-				display: flex;
-				flex-direction: column;
-
-				.action-btn {
-					display: flex;
-					padding: 8px;
-					height: unset;
-					align-items: center;
-					gap: 6px;
-					color: var(--l2-foreground);
-					font-family: Inter;
-					font-size: 12px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: normal;
-					letter-spacing: 0.14px;
-
-					.ant-icon-btn {
-						margin-inline-end: 0px;
-					}
-				}
-			}
-
-			.section-2 {
-				display: flex;
-				flex-direction: column;
-				border-top: 1px solid var(--l1-border);
-
-				.ant-typography {
-					display: flex;
-					padding: 12px 8px;
-					align-items: center;
-					gap: 6px;
-					color: var(--bg-cherry-400) !important;
-					font-family: Inter;
-					font-size: 12px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: normal;
-					letter-spacing: 0.14px;
-				}
-			}
-		}
 	}
 }
 

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -102,6 +102,7 @@ import {
 	filterDashboards,
 } from './utils';
 
+import styles from './DashboardActions.module.scss';
 import './DashboardList.styles.scss';
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
@@ -436,57 +437,53 @@ function DashboardsList(): JSX.Element {
 							{action && (
 								<Popover
 									content={
-										<div className="dashboard-action-content">
-											<section className="section-1">
-												<Button
-													type="text"
-													className="action-btn"
-													icon={<Expand size={12} />}
-													onClick={onClickHandler}
-												>
-													View
-												</Button>
-												<Button
-													type="text"
-													className="action-btn"
-													icon={<SquareArrowOutUpRight size={12} />}
-													onClick={(e): void => {
-														e.stopPropagation();
-														e.preventDefault();
-														openInNewTab(getLink());
-													}}
-												>
-													Open in New Tab
-												</Button>
-												<Button
-													type="text"
-													className="action-btn"
-													icon={<Link2 size={12} />}
-													onClick={(e): void => {
-														e.stopPropagation();
-														e.preventDefault();
-														setCopy(getAbsoluteUrl(getLink()));
-													}}
-												>
-													Copy Link
-												</Button>
-												<Button
-													type="text"
-													className="action-btn"
-													icon={<FileJson size={12} />}
-													onClick={handleJsonExport}
-												>
-													Export JSON
-												</Button>
-											</section>
-											<section className="section-2">
-												<DeleteButton
-													name={dashboard.name}
-													id={dashboard.id}
-													isLocked={dashboard.isLocked}
-													createdBy={dashboard.createdBy}
-												/>
-											</section>
+										<div className={styles.actionContent}>
+											<Button
+												type="text"
+												className={styles.actionBtn}
+												icon={<Expand size={12} />}
+												onClick={onClickHandler}
+											>
+												View
+											</Button>
+											<Button
+												type="text"
+												className={styles.actionBtn}
+												icon={<SquareArrowOutUpRight size={12} />}
+												onClick={(e): void => {
+													e.stopPropagation();
+													e.preventDefault();
+													openInNewTab(getLink());
+												}}
+											>
+												Open in New Tab
+											</Button>
+											<Button
+												type="text"
+												className={styles.actionBtn}
+												icon={<Link2 size={12} />}
+												onClick={(e): void => {
+													e.stopPropagation();
+													e.preventDefault();
+													setCopy(getAbsoluteUrl(getLink()));
+												}}
+											>
+												Copy Link
+											</Button>
+											<Button
+												type="text"
+												className={styles.actionBtn}
+												icon={<FileJson size={12} />}
+												onClick={handleJsonExport}
+											>
+												Export JSON
+											</Button>
+											<DeleteButton
+												name={dashboard.name}
+												id={dashboard.id}
+												isLocked={dashboard.isLocked}
+												createdBy={dashboard.createdBy}
+											/>
 										</div>
 									}
 									placement="bottomRight"

frontend/src/container/ListOfDashboard/TableComponents/DeleteButton.styles.scss

@@ -1,9 +0,0 @@
-.delete-modal {
-	.ant-modal-confirm-body {
-		align-items: center;
-	}
-}
-
-.delete-btn:hover {
-	background-color: color-mix(in srgb, var(--l1-foreground) 12%, transparent);
-}

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

@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQueryClient } from 'react-query';
 import { CircleAlert, Trash2 } from '@signozhq/icons';
-import { Flex, Modal, Tooltip } from 'antd';
+import { Button, Modal, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import ROUTES from 'constants/routes';
@@ -12,10 +12,8 @@ import history from 'lib/history';
 import { useAppContext } from 'providers/App/App';
 import { USER_ROLES } from 'types/roles';
 
+import styles from '../DashboardActions.module.scss';
 import { Data } from '../DashboardsList';
-import { TableLinkText } from './styles';
-
-import './DeleteButton.styles.scss';
 
 interface DeleteButtonProps {
 	createdBy: string;
@@ -85,7 +83,7 @@ export function DeleteButton({
 				},
 			},
 			centered: true,
-			className: 'delete-modal',
+			className: styles.deleteModal,
 		});
 	}, [
 		modal,
@@ -109,10 +107,16 @@ export function DeleteButton({
 		return '';
 	};
 
+	const isDisabled = isLocked || (user.role === USER_ROLES.VIEWER && !isAuthor);
+
 	return (
 		<>
 			<Tooltip placement="left" title={getDeleteTooltipContent()}>
-				<TableLinkText
+				<Button
+					type="text"
+					className={styles.deleteBtn}
+					icon={<Trash2 size={12} />}
+					disabled={isDisabled}
 					onClick={(e): void => {
 						e.preventDefault();
 						e.stopPropagation();
@@ -120,13 +124,9 @@ export function DeleteButton({
 							openConfirmationDialog();
 						}
 					}}
-					className="delete-btn"
-					disabled={isLocked || (user.role === USER_ROLES.VIEWER && !isAuthor)}
 				>
-					<Flex align="center" justify="center" gap={4}>
-						<Trash2 size={14} /> Delete dashboard
-					</Flex>
-				</TableLinkText>
+					Delete Dashboard
+				</Button>
 			</Tooltip>
 
 			{contextHolder}

frontend/src/container/ListOfDashboard/TableComponents/styles.ts

@@ -1,8 +0,0 @@
-import styled from 'styled-components';
-
-export const TableLinkText = styled.span<{ disabled: boolean }>`
-	color: var(--destructive);
-	cursor: ${({ disabled }): string => (disabled ? 'not-allowed' : 'pointer')};
-	${({ disabled }): string => (disabled ? 'opacity: 0.5;' : '')}
-	padding: var(--spacing-3) var(--spacing-4);
-`;