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")}

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)]",
+    );
   });
 });