From 37ce8a9fe680a92227fd5bdf5e19d6e35203c8e1 Mon Sep 17 00:00:00 2001
From: Vamsi Krishna <46787868+vamsikrishnamathala@users.noreply.github.com>
Date: Tue, 9 Sep 2025 13:42:40 +0530
Subject: [PATCH]  [WEB-4800]chore: settings header component refactor #7669

---
 apps/web/core/components/settings/heading.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/apps/web/core/components/settings/heading.tsx b/apps/web/core/components/settings/heading.tsx
index 620801d33..b9b332c7a 100644
--- a/apps/web/core/components/settings/heading.tsx
+++ b/apps/web/core/components/settings/heading.tsx
@@ -1,4 +1,4 @@
-import { Button } from "@plane/ui";
+import { Button, cn } from "@plane/ui";
 
 type Props = {
   title: string | React.ReactNode;
@@ -10,6 +10,7 @@ type Props = {
     label: string;
     onClick: () => void;
   };
+  className?: string;
 };
 
 export const SettingsHeading = ({
@@ -19,8 +20,14 @@ export const SettingsHeading = ({
   appendToRight,
   customButton,
   showButton = true,
+  className,
 }: Props) => (
-  <div className="flex flex-col md:flex-row gap-2 items-start md:items-center justify-between border-b border-custom-border-100 pb-3.5">
+  <div
+    className={cn(
+      "flex flex-col md:flex-row gap-2 items-start md:items-center justify-between border-b border-custom-border-100 pb-3.5",
+      className
+    )}
+  >
     <div className="flex flex-col items-start gap-1">
       {typeof title === "string" ? <h3 className="text-xl font-medium">{title}</h3> : title}
       {description && <div className="text-sm text-custom-text-300">{description}</div>}