From 8df77c92216f3d941ba826e3367d764d0db937fc Mon Sep 17 00:00:00 2001
From: SagarRajput-7 <162284829+SagarRajput-7@users.noreply.github.com>
Date: Thu, 3 Apr 2025 12:59:39 +0530
Subject: [PATCH] fix: fixed trace funnel - header style overriding other pages
 (#7512)

* fix: fixed trace funnel - header style overriding other pages

* fix: fixed trace funnel - header style overriding other pages

* fix: handled nesting
---
 .../components/Header/Header.styles.scss           | 14 +++++++-------
 .../TracesFunnels/components/Header/Header.tsx     |  8 +++++---
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/frontend/src/pages/TracesFunnels/components/Header/Header.styles.scss b/frontend/src/pages/TracesFunnels/components/Header/Header.styles.scss
index e8529f890c..647ad5d958 100644
--- a/frontend/src/pages/TracesFunnels/components/Header/Header.styles.scss
+++ b/frontend/src/pages/TracesFunnels/components/Header/Header.styles.scss
@@ -1,9 +1,9 @@
-.header {
+.traces-funnels-header {
 	display: flex;
 	flex-direction: column;
 	gap: 4px;
 
-	&__title {
+	.traces-funnels-header-title {
 		color: var(--bg-vanilla-100);
 		font-size: 18px;
 		font-style: normal;
@@ -13,7 +13,7 @@
 		margin: 0;
 	}
 
-	&__subtitle {
+	.traces-funnels-header-subtitle {
 		color: var(--bg-vanilla-400);
 		font-size: 14px;
 		line-height: 20px;
@@ -21,13 +21,13 @@
 }
 
 .lightMode {
-	.header {
-		&__title {
+	.traces-funnels-header {
+		.traces-funnels-header-title {
 			color: var(--bg-ink-500);
 		}
 
-		&__subtitle {
+		.traces-funnels-header-subtitle {
 			color: var(--bg-ink-400);
 		}
 	}
-} 
+}
diff --git a/frontend/src/pages/TracesFunnels/components/Header/Header.tsx b/frontend/src/pages/TracesFunnels/components/Header/Header.tsx
index c08fcf030b..5679541b25 100644
--- a/frontend/src/pages/TracesFunnels/components/Header/Header.tsx
+++ b/frontend/src/pages/TracesFunnels/components/Header/Header.tsx
@@ -1,8 +1,10 @@
 function Header(): JSX.Element {
 	return (
-		<div className="header">
-			<div className="header__title">Funnels</div>
-			<div className="header__subtitle">Create and manage tracing funnels.</div>
+		<div className="traces-funnels-header">
+			<div className="traces-funnels-header-title">Funnels</div>
+			<div className="traces-funnels-header-subtitle">
+				Create and manage tracing funnels.
+			</div>
 		</div>
 	);
 }