fix: ui fixes for panel selection modal

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/PanelTypeSelectionModal.module.scss

@@ -4,19 +4,25 @@
 	gap: 8px;
 }
 
-.typeButton {
+.panelTypeCard {
 	display: flex;
+	flex-direction: column;
 	align-items: center;
-	gap: 8px;
+	border: 1px solid var(--l2-border);
+	background: var(--l2-background);
 	padding: 12px;
-	background: var(--bg-ink-400, #0b0c0e);
-	border: 1px solid var(--l1-border);
+	gap: 12px;
+	cursor: pointer;
+	font: inherit;
 	border-radius: 4px;
 	color: var(--l1-foreground);
-	cursor: pointer;
-	text-align: left;
+	transition:
+		transform 180ms ease,
+		border-color 180ms ease;
 
 	&:hover {
-		border-color: var(--bg-robin-500);
+		background-color: var(--l2-background-hover);
+		transform: translateY(-2px);
+		border-color: var(--bg-robin-400);
 	}
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/PanelTypeSelectionModal.tsx

@@ -1,5 +1,5 @@
-import { Modal } from 'antd';
-import { Button } from '@signozhq/ui/button';
+import { Color } from '@signozhq/design-tokens';
+import { DialogWrapper } from '@signozhq/ui/dialog';
 
 import type { PanelKind } from '../../../Panels/types/panelKind';
 import { PANEL_TYPES } from './constants';
@@ -17,29 +17,30 @@ function PanelTypeSelectionModal({
 	onSelect,
 }: PanelTypeSelectionModalProps): JSX.Element {
 	return (
-		<Modal
+		<DialogWrapper
 			open={open}
+			onOpenChange={(isOpen): void => {
+				if (!isOpen) {
+					onClose();
+				}
+			}}
 			title="Select a panel type"
-			onCancel={onClose}
-			footer={null}
-			destroyOnClose
 		>
 			<div className={styles.grid}>
 				{PANEL_TYPES.map(({ panelKind, label, Icon }) => (
-					<Button
+					<button
 						key={panelKind}
 						type="button"
-						variant="ghost"
-						className={styles.typeButton}
+						className={styles.panelTypeCard}
 						data-testid={`panel-type-${panelKind}`}
 						onClick={(): void => onSelect(panelKind)}
 					>
-						<Icon size={14} />
+						<Icon size={24} color={Color.BG_ROBIN_400} />
 						{label}
-					</Button>
+					</button>
 				))}
 			</div>
-		</Modal>
+		</DialogWrapper>
 	);
 }