refactor(alert timeline): update TopContributorsCard and Table styles (#5881)

* refactor(alert timeline): update TopContributorsCard and Table styles

- Update hover styles for collapsed section rows in TopContributorsCard
- Update text and icon colors on hover in TopContributorsCard
- Remove unnecessary styles for value column in Table
- Update font size and alignment for table headers in Table
- Update font size and alignment for created at column in Table
- Add actions column with ellipsis button in Table

* feat(alert history styles): update alert popover and top contributors card styles

frontend/src/container/AlertHistory/AlertPopover/AlertPopover.styles.scss

@@ -1,3 +1,21 @@
-.alert-popover {
+.alert-popover-trigger-action {
 	cursor: pointer;
 }
+
+.alert-history-popover {
+	.ant-popover-inner {
+		border: 1px solid var(--bg-slate-400);
+
+		.lightMode & {
+			background: var(--bg-vanilla-100) !important;
+			border: 1px solid var(--bg-vanilla-300);
+		}
+	}
+	.ant-popover-arrow {
+		&::before {
+			.lightMode & {
+				background: var(--bg-vanilla-100);
+			}
+		}
+	}
+}

frontend/src/container/AlertHistory/AlertPopover/AlertPopover.tsx

@@ -64,12 +64,13 @@ function AlertPopover({
 	relatedLogsLink,
 }: Props): JSX.Element {
 	return (
-		<div className="alert-popover">
+		<div className="alert-popover-trigger-action">
 			<Popover
 				showArrow={false}
 				placement="bottom"
 				color="linear-gradient(139deg, rgba(18, 19, 23, 1) 0%, rgba(18, 19, 23, 1) 98.68%)"
 				destroyTooltipOnHide
+				rootClassName="alert-history-popover"
 				content={
 					<PopoverContent
 						relatedTracesLink={relatedTracesLink}

frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsCard.styles.scss

@@ -120,7 +120,6 @@
 .contributor-row-popover-buttons {
 	display: flex;
 	flex-direction: column;
-	border: 1px solid var(--bg-slate-400);
 
 	&__button {
 		display: flex;
@@ -133,13 +132,36 @@
 		width: 160px;
 		cursor: pointer;
 
+		.text,
+		.icon {
+			color: var(--text-vanilla-100);
+
+			.lightMode & {
+				color: var(--text-ink-500);
+			}
+		}
+
 		&:hover {
 			background: var(--bg-slate-400);
+
+			.text,
+			.icon {
+				color: var(--text-vanilla-100);
+
+				.lightMode & {
+					color: var(--text-ink-500);
+				}
+			}
 		}
 
 		.icon {
 			display: flex;
 		}
+
+		.lightMode & {
+			background: var(--bg-vanilla-100);
+			border-color: var(--bg-vanilla-400);
+		}
 	}
 }
 

frontend/src/container/AlertHistory/Timeline/Table/Table.styles.scss

@@ -19,20 +19,9 @@
 			font-size: 12px;
 			font-weight: 500;
 			padding: 12px 16px 8px !important;
-			&:last-of-type
-			// TODO(shaheer): uncomment when we display value column
-			// ,
-			// &:nth-last-of-type(2)
-			{
-				text-align: right;
-			}
 		}
 		&-tbody > tr > td {
 			border: none;
-			&:last-of-type,
-			&:nth-last-of-type(2) {
-				text-align: right;
-			}
 		}
 	}
 
@@ -52,7 +41,7 @@
 	}
 	.alert-rule {
 		&-value,
-		&-created-at {
+		&__created-at {
 			font-size: 14px;
 			color: var(--text-vanilla-400);
 		}
@@ -60,7 +49,7 @@
 			font-weight: 500;
 			line-height: 20px;
 		}
-		&-created-at {
+		&__created-at {
 			line-height: 18px;
 			letter-spacing: -0.07px;
 		}

frontend/src/container/AlertHistory/Timeline/Table/useTimelineTable.tsx

@@ -1,3 +1,5 @@
+import { EllipsisOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
 import { ColumnsType } from 'antd/es/table';
 import { ConditionalAlertPopover } from 'container/AlertHistory/AlertPopover/AlertPopover';
 import AlertLabels from 'pages/AlertDetails/AlertHeader/AlertLabels/AlertLabels';
@@ -10,43 +12,42 @@ export const timelineTableColumns = (): ColumnsType<AlertRuleTimelineTableRespon
 		title: 'STATE',
 		dataIndex: 'state',
 		sorter: true,
-		width: '12.5%',
+		width: 140,
-		render: (value, record): JSX.Element => (
+		render: (value): JSX.Element => (
-			<ConditionalAlertPopover
+			<div className="alert-rule-state">
-				relatedTracesLink={record.relatedTracesLink}
+				<AlertState state={value} showLabel />
-				relatedLogsLink={record.relatedLogsLink}
+			</div>
-			>
-				<div className="alert-rule-state">
-					<AlertState state={value} showLabel />
-				</div>
-			</ConditionalAlertPopover>
 		),
 	},
 	{
 		title: 'LABELS',
 		dataIndex: 'labels',
-		width: '54.5%',
+		render: (labels): JSX.Element => (
-		render: (labels, record): JSX.Element => (
+			<div className="alert-rule-labels">
-			<ConditionalAlertPopover
+				<AlertLabels labels={labels} />
-				relatedTracesLink={record.relatedTracesLink}
+			</div>
-				relatedLogsLink={record.relatedLogsLink}
-			>
-				<div className="alert-rule-labels">
-					<AlertLabels labels={labels} />
-				</div>
-			</ConditionalAlertPopover>
 		),
 	},
 	{
 		title: 'CREATED AT',
 		dataIndex: 'unixMilli',
-		width: '32.5%',
+		width: 200,
-		render: (value, record): JSX.Element => (
+		render: (value): JSX.Element => (
+			<div className="alert-rule__created-at">{formatEpochTimestamp(value)}</div>
+		),
+	},
+	{
+		title: 'ACTIONS',
+		width: 140,
+		align: 'right',
+		render: (record): JSX.Element => (
 			<ConditionalAlertPopover
 				relatedTracesLink={record.relatedTracesLink}
 				relatedLogsLink={record.relatedLogsLink}
 			>
-				<div className="alert-rule-created-at">{formatEpochTimestamp(value)}</div>
+				<Button type="text" ghost>
+					<EllipsisOutlined className="dropdown-icon" />
+				</Button>
 			</ConditionalAlertPopover>
 		),
 	},