From 069cff2fcd1dd672a03b232693348babd6b016cd Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Tue, 3 Nov 2026 19:22:17 -0700
Subject: [PATCH] Use the filled Create rule button on the standard header so
 it matches that navigation variant.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../navigation/Top/Top.container.tsx          |  2 +-
 tests/components/Top.test.tsx                 | 35 ++++++++++++-------
 2 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/app/components/navigation/Top/Top.container.tsx b/app/components/navigation/Top/Top.container.tsx
index 64f3964..6fdcb1a 100644
--- a/app/components/navigation/Top/Top.container.tsx
+++ b/app/components/navigation/Top/Top.container.tsx
@@ -170,7 +170,7 @@ const TopContainer = memo<TopProps>(
       return (
         <Button
           size="xsmall"
-          buttonType="ghost"
+          buttonType={folderTop ? "ghost" : "filled"}
           palette="default"
           onClick={handleCreateRuleClick}
           ariaLabel={t("ariaLabels.createNewRule")}
diff --git a/tests/components/Top.test.tsx b/tests/components/Top.test.tsx
index 4861618..55f393d 100644
--- a/tests/components/Top.test.tsx
+++ b/tests/components/Top.test.tsx
@@ -107,19 +107,28 @@ describe('Top "Create rule" button', () => {
     expect(nav.className).not.toContain("min-h-[var(--space-1000)]");
   });
 
-  it("uses ghost for Create rule", () => {
-    for (const folderTop of [false, true]) {
-      const { unmount } = renderWithProviders(<Top folderTop={folderTop} />);
-      const button = screen.getByRole("button", {
-        name: /create a new rule/i,
-      });
-      expect(button.className).toContain("bg-transparent");
-      expect(button.className).toContain(
-        "text-[var(--color-content-default-brand-primary)]",
-      );
-      expect(button.className).toContain("hover:border-transparent");
-      unmount();
-    }
+  it("uses a filled Create rule button on the standard header", () => {
+    renderWithProviders(<Top folderTop={false} />);
+    const button = screen.getByRole("button", {
+      name: /create a new rule/i,
+    });
+    expect(button.className).toContain(
+      "bg-[var(--color-surface-invert-primary)]",
+    );
+    expect(button.className).toContain(
+      "text-[var(--color-content-invert-primary)]",
+    );
+  });
+
+  it("uses a ghost Create rule button on the folder header", () => {
+    renderWithProviders(<Top folderTop />);
+    const button = screen.getByRole("button", {
+      name: /create a new rule/i,
+    });
+    expect(button.className).toContain("bg-transparent");
+    expect(button.className).toContain(
+      "text-[var(--color-content-default-brand-primary)]",
+    );
   });
 });