feat: context menu style update

frontend/src/periscope/components/ContextMenu/index.tsx

@@ -1,3 +1,5 @@
+import './styles.scss';
+
 import { Popover, PopoverProps } from 'antd';
 import { ReactNode } from 'react';
 
@@ -18,6 +20,38 @@ interface ContextMenuProps {
 	children?: ReactNode;
 }
 
+interface ContextMenuItemProps {
+	children: ReactNode;
+	onClick?: () => void;
+	icon?: ReactNode;
+	disabled?: boolean;
+	danger?: boolean;
+}
+
+function ContextMenuItem({
+	children,
+	onClick,
+	icon,
+	disabled = false,
+	danger = false,
+}: ContextMenuItemProps): JSX.Element {
+	const className = `context-menu-item${disabled ? ' disabled' : ''}${
+		danger ? ' danger' : ''
+	}`;
+
+	return (
+		<button
+			className={className}
+			onClick={disabled ? undefined : onClick}
+			disabled={disabled}
+			type="button"
+		>
+			{icon && <span className="icon">{icon}</span>}
+			<span className="text">{children}</span>
+		</button>
+	);
+}
+
 export function ContextMenu({
 	coordinates,
 	popoverPosition,
@@ -72,6 +106,17 @@ export function ContextMenu({
 	);
 }
 
+// Attach Item component to ContextMenu
+ContextMenu.Item = ContextMenuItem;
+
+// default props for ContextMenuItem
+ContextMenuItem.defaultProps = {
+	onClick: undefined,
+	icon: undefined,
+	disabled: false,
+	danger: false,
+};
+
 // default props
 ContextMenu.defaultProps = {
 	popoverPosition: null,

frontend/src/periscope/components/ContextMenu/styles.scss

@@ -0,0 +1,100 @@
+.context-menu-item {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 8px 16px;
+	cursor: pointer;
+	color: var(--bg-ink-400);
+	font-family: Inter;
+	font-size: var(--font-size-sm);
+	font-weight: 600;
+	line-height: 17px;
+	letter-spacing: 0.01em;
+	transition: background-color 0.2s ease;
+	border: none;
+	background: transparent;
+	width: 100%;
+	text-align: left;
+
+	&:hover {
+		background-color: var(--bg-vanilla-200);
+	}
+
+	&:focus {
+		outline: none;
+		background-color: var(--bg-vanilla-200);
+	}
+
+	&.disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+		pointer-events: none;
+
+		&:hover {
+			background-color: transparent;
+		}
+	}
+
+	&.danger {
+		color: var(--bg-cherry-400);
+
+		.icon {
+			color: var(--bg-cherry-400);
+		}
+
+		&:hover {
+			background-color: var(--bg-cherry-100);
+		}
+	}
+
+	.icon {
+		color: var(--bg-robin-500);
+		font-size: 14px;
+		display: flex;
+		align-items: center;
+		flex-shrink: 0;
+	}
+
+	.text {
+		flex: 1;
+        font-size: 13px;
+        font-weight: var(--font-weight-normal);
+        line-height: 17px;
+        letter-spacing: 0.01em;
+	}
+}
+
+// Dark mode support
+.darkMode {
+	.context-menu-item {
+		color: var(--bg-vanilla-400);
+
+		&:hover,
+		&:focus {
+			background-color: var(--bg-slate-400);
+		}
+
+		&.danger {
+			color: var(--bg-cherry-400);
+
+			.icon {
+				color: var(--bg-cherry-400);
+			}
+
+			&:hover {
+				background-color: var(--bg-cherry-500);
+				color: var(--bg-vanilla-100);
+			}
+		}
+
+		.icon {
+			color: var(--bg-robin-400);
+		}
+	}
+
+	// Set the menu popover background
+	.ant-popover-inner {
+		background: var(--bg-ink-500) !important;
+		border: 1px solid var(--bg-slate-400) !important;
+	}
+}