Completed template

app/components/utility/CreateFlowTopNav/CreateFlowTopNav.container.tsx

@@ -15,6 +15,7 @@ const CreateFlowTopNavContainer = memo<CreateFlowTopNavProps>(
     onExport,
     onEdit,
     onExit,
+    buttonPalette,
     className = "",
   }) => {
     const router = useRouter();
@@ -38,6 +39,7 @@ const CreateFlowTopNavContainer = memo<CreateFlowTopNavProps>(
         onExport={onExport}
         onEdit={onEdit}
         onExit={handleExit}
+        buttonPalette={buttonPalette}
         className={className}
       />
     );

app/components/utility/CreateFlowTopNav/CreateFlowTopNav.types.ts

@@ -1,6 +1,6 @@
 /**
  * Type definitions for CreateFlowTopNav component
- * 
+ *
  * Top navigation bar for the create rule flow.
  * Includes logo and action buttons (Share, Export, Edit, Exit).
  */
@@ -42,6 +42,11 @@ export interface CreateFlowTopNavProps {
    * Callback when Exit/Save & Exit button is clicked
    */
   onExit?: () => void;
+  /**
+   * Palette for nav buttons (e.g. "inverse" on completed page to match teal background)
+   * @default "default"
+   */
+  buttonPalette?: "default" | "inverse";
   /**
    * Additional CSS classes
    */

app/components/utility/CreateFlowTopNav/CreateFlowTopNav.view.tsx

@@ -1,4 +1,4 @@
-import Logo from "../../icons/Logo";
+import Logo from "../../asset/logo";
 import Button from "../../buttons/Button";
 import type { CreateFlowTopNavProps } from "./CreateFlowTopNav.types";
 
@@ -11,6 +11,7 @@ export function CreateFlowTopNavView({
   onExport,
   onEdit,
   onExit,
+  buttonPalette = "default",
   className = "",
 }: CreateFlowTopNavProps) {
   const exitButtonText = loggedIn ? "Save & Exit" : "Exit";
@@ -27,14 +28,14 @@ export function CreateFlowTopNavView({
         aria-label="Create Flow Navigation"
       >
         {/* Logo - Left */}
-        <Logo size="createFlow" showText={true} />
+        <Logo size="createFlow" wordmark palette={buttonPalette} />
 
         {/* Button Group - Right */}
         <div className="flex items-center gap-[var(--spacing-scale-012,12px)]">
           {hasShare && (
             <Button
               buttonType="outline"
-              palette="default"
+              palette={buttonPalette}
               size="xsmall"
               onClick={onShare}
               ariaLabel="Share"
@@ -47,7 +48,7 @@ export function CreateFlowTopNavView({
           {hasExport && (
             <Button
               buttonType="outline"
-              palette="default"
+              palette={buttonPalette}
               size="xsmall"
               onClick={onExport}
               ariaLabel="Export"
@@ -74,7 +75,7 @@ export function CreateFlowTopNavView({
           {hasEdit && (
             <Button
               buttonType="outline"
-              palette="default"
+              palette={buttonPalette}
               size="xsmall"
               onClick={onEdit}
               ariaLabel="Edit"
@@ -86,7 +87,7 @@ export function CreateFlowTopNavView({
 
           <Button
             buttonType="outline"
-            palette="default"
+            palette={buttonPalette}
             size="xsmall"
             onClick={onExit}
             ariaLabel={exitButtonText}