style(web): update page headers and button styles for improved UI consistency across pages

Author: bchapuis

apps/web/src/pages/api-keys-page.tsx

@@ -178,13 +178,13 @@ export function ApiKeysPage() {
 
   return (
     <InsetLayout title="API Keys">
-      <div className="flex items-center justify-between mb-6">
+      <div className="flex items-center justify-between mb-6 min-h-10">
         <div className="text-sm text-muted-foreground max-w-2xl">
-          Create, manage, and delete API keys to control access for your
-          applications.
+          Manage API keys to access your workflows programmatically.
         </div>
-        <Button onClick={() => setIsCreateDialogOpen(true)} size="sm">
-          <Plus /> Create API Key
+        <Button onClick={() => setIsCreateDialogOpen(true)}>
+          <Plus className="mr-2 h-4 w-4" />
+          Create API Key
         </Button>
       </div>
       <DataTable

apps/web/src/pages/datasets-page.tsx

@@ -208,17 +208,14 @@ export function DatasetsPage() {
   return (
     <TooltipProvider>
       <InsetLayout title="Datasets">
-        <div className="flex items-center justify-between mb-6">
+        <div className="flex items-center justify-between mb-6  min-h-10">
           <div className="text-sm text-muted-foreground max-w-2xl">
-            Create, manage, and organize your datasets. Upload, process, and
-            share your data with ease.
-          </div>
-          <div className="flex gap-2">
-            <Button onClick={() => setIsCreateDialogOpen(true)}>
-              <Plus className="mr-2 h-4 w-4" />
-              Create New Dataset
-            </Button>
+            Create and manage datasets for your workflows.
           </div>
+          <Button onClick={() => setIsCreateDialogOpen(true)}>
+            <Plus className="mr-2 h-4 w-4" />
+            Create New Dataset
+          </Button>
         </div>
         <DataTable
           columns={columns}

apps/web/src/pages/deployments-page.tsx

@@ -206,17 +206,14 @@ export function DeploymentsPage() {
   return (
     <TooltipProvider>
       <InsetLayout title="Deployments">
-        <div className="flex items-center justify-between mb-6">
+        <div className="flex items-center justify-between mb-6 min-h-10">
           <div className="text-sm text-muted-foreground max-w-2xl">
-            View and manage versioned snapshots of workflows ready for
-            execution.
-          </div>
-          <div className="flex gap-2">
-            <Button onClick={handleOpenDialog}>
-              <ArrowUpToLine className="mr-2 h-4 w-4" />
-              Deploy Workflow
-            </Button>
+            Deploy your workflows and track their versions.
           </div>
+          <Button onClick={handleOpenDialog}>
+            <ArrowUpToLine className="mr-2 h-4 w-4" />
+            Deploy Workflow
+          </Button>
         </div>
         <DataTable
           columns={createColumns(getOrgUrl)}

apps/web/src/pages/executions-page.tsx

@@ -195,9 +195,11 @@ export function ExecutionsPage() {
   return (
     <TooltipProvider>
       <InsetLayout title="Executions">
-        <p className="text-muted-foreground mb-4">
-          Monitor the execution history of your workflows.
-        </p>
+        <div className="flex items-center justify-between mb-6 min-h-10">
+          <div className="text-sm text-muted-foreground max-w-2xl">
+            Monitor the executions of your workflows.
+          </div>
+        </div>
         <DataTable
           columns={createColumns(getOrgUrl)}
           data={paginatedExecutions}

apps/web/src/pages/members-page.tsx

@@ -8,6 +8,7 @@ import { toast } from "sonner";
 import { InsetError } from "@/components/inset-error";
 import { InsetLoading } from "@/components/inset-loading";
 import { InsetLayout } from "@/components/layouts/inset-layout";
+import { usePageBreadcrumbs } from "@/hooks/use-page";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import {
   AlertDialog,
@@ -186,6 +187,7 @@ const columns: ColumnDef<{
 
 export function MembersPage() {
   const { handle } = useParams<{ handle: string }>();
+  const { setBreadcrumbs } = usePageBreadcrumbs([]);
 
   // Debug: Log the handle value
   console.log("MembersPage - handle:", handle);
@@ -339,6 +341,10 @@ export function MembersPage() {
     };
   }, [handleUpdateRoleEvent, handleRemoveMemberEvent]);
 
+  useEffect(() => {
+    setBreadcrumbs([{ label: "Members" }]);
+  }, [setBreadcrumbs]);
+
   if (isMembershipsLoading && !memberships) {
     return <InsetLoading title="Organization Members" />;
   } else if (membershipsError) {
@@ -351,14 +357,14 @@ export function MembersPage() {
   }
 
   return (
-    <InsetLayout title="Organization Members">
-      <div className="flex items-center justify-between mb-6">
+    <InsetLayout title="Members">
+      <div className="flex items-center justify-between mb-6 min-h-10">
         <div className="text-sm text-muted-foreground max-w-2xl">
-          Manage your organization members and their roles. Add new members,
-          update roles, or remove members as needed.
+          Manage organization members and roles.
         </div>
-        <Button onClick={() => setIsAddMemberDialogOpen(true)} size="sm">
-          <Plus /> Add Member
+        <Button onClick={() => setIsAddMemberDialogOpen(true)}>
+          <Plus className="mr-2 h-4 w-4" />
+          Add Member
         </Button>
       </div>
 

apps/web/src/pages/organizations-page.tsx

@@ -200,12 +200,13 @@ export function OrganizationsPage() {
 
   return (
     <InsetLayout title="Organizations">
-      <div className="flex items-center justify-between mb-6">
+      <div className="flex items-center justify-between mb-6 min-h-10">
         <div className="text-sm text-muted-foreground max-w-2xl">
-          Manage your organizations and switch between different workspaces.
+          Manage your organizations and workspaces.
         </div>
-        <Button onClick={() => setIsCreateDialogOpen(true)} size="sm">
-          <Plus /> Create Organization
+        <Button onClick={() => setIsCreateDialogOpen(true)}>
+          <Plus className="mr-2 h-4 w-4" />
+          Create Organization
         </Button>
       </div>
 

apps/web/src/pages/secrets-page.tsx

@@ -257,13 +257,13 @@ export function SecretsPage() {
 
   return (
     <InsetLayout title="Secrets">
-      <div className="flex items-center justify-between mb-6">
+      <div className="flex items-center justify-between mb-6 min-h-10">
         <div className="text-sm text-muted-foreground max-w-2xl">
-          Store and manage encrypted secrets for your organization. These can be
-          used in workflows and accessed via API.
+          Store encrypted secrets for your workflows.
         </div>
-        <Button onClick={() => setIsCreateDialogOpen(true)} size="sm">
-          <Plus /> Create Secret
+        <Button onClick={() => setIsCreateDialogOpen(true)}>
+          <Plus className="mr-2 h-4 w-4" />
+          Create Secret
         </Button>
       </div>
       <DataTable

apps/web/src/pages/workflows-page.tsx

@@ -441,10 +441,9 @@ export function WorkflowsPage() {
   return (
     <TooltipProvider>
       <InsetLayout title="Workflows">
-        <div className="flex items-center justify-between mb-6">
+        <div className="flex items-center justify-between mb-6 min-h-10">
           <div className="text-sm text-muted-foreground max-w-2xl">
-            Create, manage, and run your workflows. Break it, fix it, prompt it,
-            automatic.
+            Build and test your workflows.
           </div>
           <div className="flex gap-2">
             <Button onClick={() => setIsCreateDialogOpen(true)}>