fix: light mode design for qb v2 (SigNoz#6052)

syaifulnizamiphone7 · Sep 23, 2024 · a6b05f0 · a6b05f0
1 parent f69aaa2
commit a6b05f0
Show file tree

Hide file tree

Showing 2 changed files with 167 additions and 0 deletions.
diff --git a/.../src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.styles.scss b/.../src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.styles.scss
@@ -2,6 +2,10 @@
 	display: flex;
 	gap: 4px;
 
+	.ant-select-dropdown {
+		padding: 0px;
+	}
+
 	.show-all-filters {
 		.content {
 			.rc-virtual-list-holder {
@@ -259,3 +263,110 @@
 		}
 	}
 }
+
+.lightMode {
+	.query-builder-search-v2 {
+		.content {
+			.operator-for {
+				.operator-for-text {
+					color: var(--bg-ink-200);
+				}
+
+				.operator-for-value {
+					background: rgba(255, 255, 255, 0.1);
+					color: var(--bg-ink-200);
+				}
+			}
+
+			.value-for {
+				.value-for-text {
+					color: var(--bg-ink-200);
+				}
+
+				.value-for-value {
+					background: rgba(255, 255, 255, 0.1);
+					color: var(--bg-ink-400);
+				}
+			}
+			.example-queries {
+				cursor: default;
+				.heading {
+					color: var(--bg-slate-50);
+				}
+
+				.query-container {
+					.example-query {
+						background: var(--bg-vanilla-200);
+						color: var(--bg-ink-400);
+					}
+
+					.example-query:hover {
+						color: var(--bg-ink-100);
+					}
+				}
+			}
+		}
+
+		.keyboard-shortcuts {
+			border: 1px solid var(--bg-vanilla-300);
+			background: var(--bg-vanilla-200);
+
+			.icons {
+				border-top: 1.143px solid var(--bg-ink-200);
+				border-right: 1.143px solid var(--bg-ink-200);
+				border-bottom: 2.286px solid var(--bg-ink-200);
+				border-left: 1.143px solid var(--bg-ink-200);
+				background: var(--bg-vanilla-300);
+			}
+
+			.keyboard-text {
+				color: var(--bg-ink-400);
+			}
+
+			.navigate {
+				border-right: 1px solid #1d212d;
+			}
+
+			.show-all-filter-items {
+				border-left: 1px solid #1d212d;
+			}
+		}
+
+		.qb-search-bar-tokenised-tags {
+			.ant-tag {
+				border: 1px solid var(--bg-slate-100);
+				background: var(--bg-vanilla-300);
+				box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+
+				.ant-typography {
+					color: var(--bg-ink-100);
+				}
+
+				&.resource {
+					border: 1px solid rgba(242, 71, 105, 0.2);
+
+					.ant-typography {
+						color: var(--bg-sakura-400);
+						background: rgba(245, 108, 135, 0.1);
+					}
+
+					.ant-tag-close-icon {
+						background: rgba(245, 108, 135, 0.1);
+					}
+				}
+				&.tag {
+					border: 1px solid rgba(189, 153, 121, 0.2);
+
+					.ant-typography {
+						color: var(--bg-sienna-400);
+						background: rgba(189, 153, 121, 0.1);
+					}
+
+					.ant-tag-close-icon {
+						background: rgba(189, 153, 121, 0.1);
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/Suggestions.styles.scss b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/Suggestions.styles.scss
@@ -168,3 +168,59 @@
 		}
 	}
 }
+
+.lightMode {
+	.text {
+		color: var(--bg-ink-400);
+	}
+
+	.option {
+		.container {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
+			.right-section {
+				.data-type {
+					background: var(--bg-vanilla-300);
+				}
+			}
+			.option-meta-data-container {
+				display: flex;
+				gap: 8px;
+			}
+		}
+
+		.container-without-tag {
+			.left {
+				.OPERATOR {
+					color: var(--bg-ink-400);
+				}
+
+				.VALUE {
+					color: var(--bg-ink-400);
+				}
+			}
+
+			.right {
+				.data-type {
+					background: var(--bg-vanilla-300);
+				}
+			}
+		}
+	}
+	.option:hover {
+		.container {
+			.left-section {
+				.value {
+					color: var(--bg-ink-100);
+				}
+			}
+		}
+		.container-without-tag {
+			.value {
+				color: var(--bg-ink-100);
+			}
+		}
+	}
+}