fix: success colors

fix(multiselect): surface clear icon and remove dropdown double-scroll
- add .ant-select-clear color override so the multiselect clear (x) icon is visible on the dark selector (the single-select had it, multiselect didn't) - raise the dropdown max-height so the react-virtuoso list (<=300px) plus the header/footer fits, leaving the list as the single scroller instead of the list and the container both scrolling - StatsCard: drop the unnecessary !important on .count-label color
2026-06-02 23:20:34 +01:00 · 2026-06-03 01:14:13 +05:30 · 2026-06-03 00:32:45 +05:30 · 2026-06-02 18:18:28 +05:30
13 changed files with 81 additions and 52 deletions
--- a/frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx
+++ b/frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx
@@ -359,8 +359,7 @@ function CustomTimePickerPopoverContent({
 						<Clock
 							color={Color.BG_ROBIN_400}
 							className="timezone-container__clock-icon"
-							height={12}
-							width={12}
+							size={14}
 						/>

 						<span className="timezone__name">{timezone.name}</span>
--- a/frontend/src/components/NewSelect/styles.scss
+++ b/frontend/src/components/NewSelect/styles.scss
@@ -109,6 +109,16 @@ $custom-border-color: #2c3044;
 		color: color-mix(in srgb, var(--l2-foreground) 45%, transparent);
 	}

+	.ant-select-clear {
+		background-color: var(--l2-background);
+		color: var(--l2-foreground);
+		font-size: 12px;
+
+		&:hover {
+			color: var(--l1-foreground);
+		}
+	}
+
 	// Customize tags in multiselect (dark mode by default)
 	.ant-select-selection-item {
 		background-color: var(--l1-border);
@@ -392,7 +402,9 @@ $custom-border-color: #2c3044;
 // Custom dropdown styles for multi-select
 .custom-multiselect-dropdown {
 	padding: 8px 0 0 0;
-	max-height: 350px;
+	// Tall enough to hold the react-virtuoso list (<=300px) + header/footer
+	// so only the list scrolls (avoids a second scrollbar on this container).
+	max-height: 410px;
 	overflow-y: auto;
 	overflow-x: hidden;
 	scrollbar-width: thin;
@@ -483,8 +495,12 @@ $custom-border-color: #2c3044;
 		.option-checkbox {
 			width: 100%;

-			> span:not(.ant-checkbox) {
-				width: 100%;
+			// @signozhq/ui Checkbox renders children inside a <label> that is
+			// content-sized by default. Make it fill the row (min-width: 0 lets it
+			// shrink) so the option text below can truncate instead of overflowing.
+			> label {
+				flex: 1 1 auto;
+				min-width: 0;
 			}

 			.all-option-text {
@@ -501,7 +517,12 @@ $custom-border-color: #2c3044;
 				width: 100%;

 				.option-label-text {
+					flex: 1 1 auto;
+					min-width: 0;
 					margin-bottom: 0;
+					overflow: hidden;
+					white-space: nowrap;
+					text-overflow: ellipsis;
 				}

 				.option-badge {
@@ -514,26 +535,30 @@ $custom-border-color: #2c3044;
 				}
 			}

-			.only-btn {
-				display: none;
-			}
+			// Size the buttons to the row's resting content height (20px) and fully
+			// override antd's default 32px Button box, so revealing them on hover
+			// never changes the row height.
+			.only-btn,
 			.toggle-btn {
 				display: none;
-			}
+				align-items: center;
+				justify-content: center;
+				height: 18px;
+				min-height: 0;
+				padding: 0 6px;
+				font-size: 12px;
+				line-height: 1;
+				border: none;
+				box-shadow: none;

-			.only-btn:hover {
-				background-color: unset;
-			}
-			.toggle-btn:hover {
-				background-color: unset;
+				&:hover {
+					background-color: unset;
+				}
 			}

 			.option-content:hover {
 				.only-btn {
 					display: flex;
-					align-items: center;
-					justify-content: center;
-					height: 21px;
 				}
 				.toggle-btn {
 					display: none;
@@ -548,9 +573,6 @@ $custom-border-color: #2c3044;
 		.option-checkbox:hover {
 			.toggle-btn {
 				display: flex;
-				align-items: center;
-				justify-content: center;
-				height: 21px;
 			}
 			.option-badge {
 				display: none;
--- a/frontend/src/container/AlertHistory/Statistics/StatsCard/StatsCard.styles.scss
+++ b/frontend/src/container/AlertHistory/Statistics/StatsCard/StatsCard.styles.scss
@@ -67,8 +67,8 @@
 	gap: 4px;

 	&--success {
-		background: color-mix(in srgb, var(--success-background) 10%, transparent);
-		color: var(--success-foreground);
+		background: color-mix(in srgb, var(--text-forest-500) 10%, transparent);
+		color: var(--text-forest-400);
 	}

 	&--error {
--- a/frontend/src/container/CreateAlertV2/NotificationSettings/styles.scss
+++ b/frontend/src/container/CreateAlertV2/NotificationSettings/styles.scss
@@ -153,6 +153,7 @@
 				font-size: 10px;
 				color: var(--l2-foreground);
 				margin-top: 4px;
+				display: block;
 			}
 		}

--- a/frontend/src/container/DashboardContainer/DashboardSettings/DashboardSettingsContent.styles.scss
+++ b/frontend/src/container/DashboardContainer/DashboardSettings/DashboardSettingsContent.styles.scss
@@ -47,18 +47,10 @@
 		}

 		.ant-tabs-tab-active {
-			.overview-btn {
-				border-radius: 2px 0px 0px 2px;
-				background: var(--l1-border);
-			}
-
-			.variables-btn {
-				border-radius: 2px 0px 0px 2px;
-				background: var(--l1-border);
-			}
-
+			.overview-btn,
+			.variables-btn,
 			.public-dashboard-btn {
-				border-radius: 2px 0px 0px 2px;
+				color: var(--primary-background);
 				background: var(--l1-border);
 			}
 		}
--- a/frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/VariableItem.styles.scss
+++ b/frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/VariableItem.styles.scss
@@ -127,6 +127,15 @@
 					align-items: center;
 					justify-content: center;
 					gap: 4px;
+
+					.sidenav-beta-tag {
+						margin-left: 4px;
+					}
+
+					div {
+						display: flex;
+						align-items: center;
+					}
 				}

 				.variable-type-btn + .variable-type-btn {
@@ -177,6 +186,7 @@

 		.multiple-values-section {
 			justify-content: space-between;
+			align-items: flex-start;
 			margin-bottom: 0;

 			.typography-variables {
@@ -193,6 +203,7 @@

 		.all-option-section {
 			justify-content: space-between;
+			align-items: flex-start;
 			margin-bottom: 0;

 			.typography-variables {
--- a/frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/VariableItem.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/VariableItem.tsx
@@ -518,7 +518,6 @@ function VariableItem({
 										size={14}
 										style={{
 											color: isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500,
-											marginTop: 1,
 										}}
 									/>
 								}
@@ -614,7 +613,6 @@ function VariableItem({
 												size={14}
 												style={{
 													color: isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500,
-													marginTop: 1,
 												}}
 											/>
 										}
--- a/frontend/src/container/FormAlertRules/QuerySection.styles.scss
+++ b/frontend/src/container/FormAlertRules/QuerySection.styles.scss
@@ -19,6 +19,7 @@
 		}
 		.ant-btn-default {
 			border-color: transparent;
+			box-shadow: none;
 		}
 	}
 	.ant-tabs-tab-active {
--- a/frontend/src/container/PlannedDowntime/PlannedDowntime.styles.scss
+++ b/frontend/src/container/PlannedDowntime/PlannedDowntime.styles.scss
@@ -72,8 +72,20 @@
 	.alert-rule-scope {
 		margin-bottom: 12px;

-		.ant-radio-wrapper {
-			color: var(--l1-foreground);
+		// `.createForm label` styles field labels (font-weight 500, 14px,
+		// 6px bottom padding). Those bleed into the @signozhq/ui RadioGroup
+		// option labels, making them bold and vertically misaligned with the
+		// radio control. Reset them back to plain option-text styling.
+		label {
+			padding: 0;
+			font-weight: 400;
+			line-height: normal;
+		}
+
+		// Loosen the design-system default (grid gap 0.5rem) between options.
+		.silence-alerts-radio-group {
+			margin-top: 8px;
+			gap: 12px;
 		}
 	}

@@ -144,10 +156,7 @@
 			display: flex;
 			align-items: center;
 			gap: 8px;
-
-			.ant-btn {
-				margin-top: 8px;
-			}
+			margin-top: 12px;
 		}

 		.schedule-created-at {
--- a/frontend/src/container/PlannedDowntime/PlannedDowntimeForm.tsx
+++ b/frontend/src/container/PlannedDowntime/PlannedDowntimeForm.tsx
@@ -54,8 +54,7 @@ import {
 } from './PlannedDowntimeutils';

 import './PlannedDowntime.styles.scss';
-import { RadioGroupItem } from '@signozhq/ui/radio-group';
-import { RadioGroup } from '@signozhq/ui/radio-group';
+import { RadioGroupItem, RadioGroup } from '@signozhq/ui/radio-group';

 dayjs.locale('en');
 dayjs.extend(utc);
@@ -471,7 +470,7 @@ export function PlannedDowntimeForm(
 						initialValue="specific"
 						className="alert-rule-scope"
 					>
-						<RadioGroup>
+						<RadioGroup className="silence-alerts-radio-group">
 							<RadioGroupItem value="all">All alert rules</RadioGroupItem>
 							<RadioGroupItem value="specific">Specific alert rules</RadioGroupItem>
 						</RadioGroup>
--- a/frontend/src/container/RoutingPolicies/styles.scss
+++ b/frontend/src/container/RoutingPolicies/styles.scss
@@ -35,10 +35,7 @@
 			display: flex;
 			align-items: center;
 			gap: 8px;
-
-			.ant-btn {
-				margin-top: 8px;
-			}
+			margin-top: 12px;
 		}

 		.routing-policies-table {
--- a/frontend/src/container/TopNav/AutoRefreshV2/AutoRefreshV2.styles.scss
+++ b/frontend/src/container/TopNav/AutoRefreshV2/AutoRefreshV2.styles.scss
@@ -8,7 +8,7 @@
 			139deg,
 			color-mix(in srgb, var(--card) 80%, transparent) 0%,
 			color-mix(in srgb, var(--card) 90%, transparent) 98.68%
-		);
+		) !important;
 		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
 		backdrop-filter: blur(20px);
 		padding: 0;
@@ -34,9 +34,9 @@
 }

 .refresh-interval-text {
-	padding: 12px 14px 8px 14px;
+	padding: 12px 14px 8px 14px !important;
 	color: var(--muted-foreground);
-	font-size: 11px;
+	font-size: 13px;
 	font-style: normal;
 	font-weight: 500;
 	line-height: 18px; /* 163.636% */
--- a/frontend/src/pages/MetricsExplorer/MetricsExplorerPage.styles.scss
+++ b/frontend/src/pages/MetricsExplorer/MetricsExplorerPage.styles.scss
@@ -9,7 +9,7 @@
 	}

 	.ant-tabs-nav {
-		padding: 0 8px;
+		padding-left: 16px;
 		margin-bottom: 0px;

 		&::before {