feat: added lightMode styles for kafka 2.0 (#6400)

SigNoz · Nov 8, 2024 · d148a80 · d148a80
1 parent 4a48590
commit d148a80
Show file tree

Hide file tree

Showing 5 changed files with 171 additions and 0 deletions.
diff --git a/frontend/src/pages/MessagingQueues/MQDetails/DropRateView/DropRateView.styles.scss b/frontend/src/pages/MessagingQueues/MQDetails/DropRateView/DropRateView.styles.scss
@@ -28,3 +28,16 @@
 	width: 200px;
 	margin: 6px;
 }
+
+.lightMode {
+	.evaluation-time-selector {
+		.eval-title {
+			color: var(--bg-ink-400);
+		}
+
+		.ant-selector {
+			background-color: var(--bg-vanilla-200);
+			border: 1px solid var(--bg-ink-400);
+		}
+	}
+}
diff --git a/frontend/src/pages/MessagingQueues/MQDetails/MQDetails.style.scss b/frontend/src/pages/MessagingQueues/MQDetails/MQDetails.style.scss
@@ -114,3 +114,67 @@
 		}
 	}
 }
+
+.lightMode {
+	.mq-overview-container {
+		background: var(--bg-vanilla-200);
+		border: 1px solid var(--bg-vanilla-300);
+
+		.mq-overview-title {
+			color: var(--bg-ink-400);
+		}
+
+		.mq-details-options {
+			.ant-radio-button-wrapper {
+				border-color: var(--bg-vanilla-300);
+				color: var(--bg-slate-200);
+			}
+			.ant-radio-button-wrapper-checked {
+				color: var(--bg-slate-200);
+				background: var(--bg-vanilla-300);
+			}
+			.ant-radio-button-wrapper-disabled {
+				background: var(--bg-vanilla-100);
+				color: var(--bg-vanilla-400);
+			}
+		}
+	}
+
+	.droprate-view {
+		.mq-table {
+			.ant-table-content {
+				border: 1px solid var(--bg-vanilla-300);
+			}
+
+			.ant-table-tbody {
+				.ant-table-cell {
+					background-color: var(--bg-vanilla-100);
+				}
+			}
+
+			.ant-table-thead {
+				.ant-table-cell {
+					background-color: var(--bg-vanilla-100);
+					border-bottom: 1px solid var(--bg-vanilla-300);
+				}
+			}
+		}
+
+		.no-data-style {
+			border: 1px solid var(--bg-vanilla-300);
+		}
+	}
+
+	.trace-id-list {
+		.traceid-style {
+			.traceid-text {
+				border: 1px solid var(--bg-vanilla-300);
+				background: var(--bg-vanilla-300);
+			}
+
+			.remaing-count {
+				color: var(--bg-ink-400);
+			}
+		}
+	}
+}
diff --git a/frontend/src/pages/MessagingQueues/MQDetails/MetricPage/MetricPage.styles.scss b/frontend/src/pages/MessagingQueues/MQDetails/MetricPage/MetricPage.styles.scss
@@ -110,3 +110,19 @@
 		}
 	}
 }
+
+.lightMode {
+	.metric-page {
+		.row-panel {
+			.row-panel-section {
+				.row-icon {
+					color: var(--bg-ink-300);
+				}
+
+				.section-title {
+					color: var(--bg-ink-300);
+				}
+			}
+		}
+	}
+}
diff --git a/...src/pages/MessagingQueues/MessagingQueueHealthCheck/MessagingQueueHealthCheck.styles.scss b/...src/pages/MessagingQueues/MessagingQueueHealthCheck/MessagingQueueHealthCheck.styles.scss
@@ -166,3 +166,77 @@
 		padding-right: 8px;
 	}
 }
+
+.lightMode {
+	.mq-health-check-modal {
+		.ant-modal-content {
+			border: 1px solid var(--bg-vanilla-400);
+			background: var(--bg-vanilla-200);
+
+			.ant-modal-header {
+				border-bottom: 1px solid var(--bg-vanilla-400);
+				background: var(--bg-vanilla-200);
+
+				.ant-modal-title {
+					color: var(--bg-ink-300);
+				}
+			}
+
+			.modal-content {
+				background: var(--bg-vanilla-100);
+
+				.attribute-select {
+					.ant-select-selector {
+						border: 1px solid var(--bg-vanilla-300);
+						background: var(--bg-vanilla-200);
+					}
+				}
+
+				.tree-text {
+					color: var(--bg-ink-300);
+				}
+
+				.ant-tree {
+					.ant-tree-title {
+						.attribute-error-title {
+							color: var(--bg-amber-500);
+
+							.tree-text {
+								color: var(--bg-amber-500);
+							}
+						}
+
+						.attribute-success-title {
+							.success-attribute-icon {
+								color: var(--bg-ink-300);
+							}
+						}
+					}
+				}
+			}
+
+			.loader-container {
+				background: var(--bg-ink-300);
+			}
+		}
+	}
+
+	.config-btn {
+		background: var(--bg-vanilla-300);
+
+		&.missing-config-btn {
+			background: var(--bg-amber-100);
+			color: var(--bg-amber-500);
+
+			&:hover {
+				color: var(--bg-amber-600) !important;
+			}
+		}
+
+		.missing-config-btn {
+			.config-btn-content {
+				border-right: 1px solid var(--bg-amber-600);
+			}
+		}
+	}
+}
diff --git a/frontend/src/pages/MessagingQueues/MessagingQueues.styles.scss b/frontend/src/pages/MessagingQueues/MessagingQueues.styles.scss
@@ -331,6 +331,10 @@
 		.messaging-breadcrumb {
 			color: var(--bg-ink-400);
 			border-bottom: 1px solid var(--bg-vanilla-300);
+
+			.message-queue-text {
+				color: var(--bg-ink-400);
+			}
 		}
 		.messaging-header {
 			color: var(--bg-ink-400);