From 65f7287639bcd09cce377878b19d36d6eac5a702 Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Tue, 18 Aug 2026 18:41:50 -0600
Subject: [PATCH] Use filled invert for the top-nav Create rule button.

Matches the Figma Filled Invert variant so the label stays white on the dark pill.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 app/components/navigation/Top/Top.container.tsx |  8 ++------
 tests/components/Top.test.tsx                   | 16 ++++++++++++++++
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/app/components/navigation/Top/Top.container.tsx b/app/components/navigation/Top/Top.container.tsx
index 066d578..ed14a7f 100644
--- a/app/components/navigation/Top/Top.container.tsx
+++ b/app/components/navigation/Top/Top.container.tsx
@@ -189,15 +189,11 @@ const TopContainer = memo<TopProps>(
       containerSize: "small" | "medium" | "large" | "xlarge",
       avatarSize: "small" | "medium" | "large" | "xlarge",
     ) => {
-      // Use ghost type when folderTop is true, filled (default) otherwise
-      const buttonType = folderTop ? "ghost" : "filled";
-      const palette = "default";
-
       return (
         <Button
           size={buttonSize}
-          buttonType={buttonType}
-          palette={palette}
+          buttonType="filled"
+          palette="inverse"
           onClick={handleCreateRuleClick}
           ariaLabel={t("ariaLabels.createNewRule")}
         >
diff --git a/tests/components/Top.test.tsx b/tests/components/Top.test.tsx
index a47e7ca..cb85a49 100644
--- a/tests/components/Top.test.tsx
+++ b/tests/components/Top.test.tsx
@@ -100,4 +100,20 @@ describe('Top "Create rule" button', () => {
       window.localStorage.getItem(CORE_VALUE_DETAILS_STORAGE_KEY),
     ).toBeNull();
   });
+
+  it("uses filled invert for Create rule", () => {
+    for (const folderTop of [false, true]) {
+      const { unmount } = renderWithProviders(<Top folderTop={folderTop} />);
+      const [button] = screen.getAllByRole("button", {
+        name: /create a new rule/i,
+      });
+      expect(button.className).toContain(
+        "bg-[var(--color-surface-default-primary)]",
+      );
+      expect(button.className).toContain(
+        "text-[var(--color-content-default-primary)]",
+      );
+      unmount();
+    }
+  });
 });