From d148a807372bf3a968542afe3d723f570d0c2a5e Mon Sep 17 00:00:00 2001
From: SagarRajput-7 <162284829+SagarRajput-7@users.noreply.github.com>
Date: Fri, 8 Nov 2024 16:41:35 +0530
Subject: [PATCH] feat: added lightMode styles for kafka 2.0 (#6400)

---
 .../DropRateView/DropRateView.styles.scss     | 13 ++++
 .../MQDetails/MQDetails.style.scss            | 64 ++++++++++++++++
 .../MetricPage/MetricPage.styles.scss         | 16 ++++
 .../MessagingQueueHealthCheck.styles.scss     | 74 +++++++++++++++++++
 .../MessagingQueues.styles.scss               |  4 +
 5 files changed, 171 insertions(+)

diff --git a/frontend/src/pages/MessagingQueues/MQDetails/DropRateView/DropRateView.styles.scss b/frontend/src/pages/MessagingQueues/MQDetails/DropRateView/DropRateView.styles.scss
index b36a46a8ec..39481dbd7c 100644
--- 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
index 34937b124f..0e78feabf4 100644
--- 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
index 985d17376f..cc955c0739 100644
--- 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/frontend/src/pages/MessagingQueues/MessagingQueueHealthCheck/MessagingQueueHealthCheck.styles.scss b/frontend/src/pages/MessagingQueues/MessagingQueueHealthCheck/MessagingQueueHealthCheck.styles.scss
index 22a1bed584..4e7bd9a64c 100644
--- a/frontend/src/pages/MessagingQueues/MessagingQueueHealthCheck/MessagingQueueHealthCheck.styles.scss
+++ b/frontend/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
index 9959bebe26..2deddd26f9 100644
--- 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);