From b2ecf60a13a868d8f7c22bf2ab1c40d724f8b499 Mon Sep 17 00:00:00 2001
From: Dries Augustyns <inbox@driaug.com>
Date: Sat, 6 Dec 2025 10:06:11 +0100
Subject: [PATCH] Improve UI/UX Consistency

---
 .../src/components/EmailEditor/Toolbar.tsx    |   2 +-
 apps/web/src/components/QuickStart.tsx        |   9 +-
 apps/web/src/components/WorkflowBuilder.tsx   |  26 +-
 apps/web/src/pages/contacts/index.tsx         |   4 +-
 apps/web/src/pages/segments/index.tsx         | 278 +++++++++---------
 apps/web/src/pages/settings/index.tsx         |   4 +-
 apps/web/src/pages/templates/index.tsx        |  35 +--
 apps/web/src/pages/workflows/index.tsx        |   6 +-
 packages/ui/src/components/atoms/Button.tsx   |  10 +-
 9 files changed, 185 insertions(+), 189 deletions(-)

diff --git a/apps/web/src/components/EmailEditor/Toolbar.tsx b/apps/web/src/components/EmailEditor/Toolbar.tsx
index 2e326e7..0b78b54 100644
--- a/apps/web/src/components/EmailEditor/Toolbar.tsx
+++ b/apps/web/src/components/EmailEditor/Toolbar.tsx
@@ -474,7 +474,7 @@ export function Toolbar({editor, onInsertVariable, onInsertImage, canUploadImage
                           type="button"
                           onMouseDown={e => e.preventDefault()}
                           onClick={handleColorClick}
-                          className="w-8 h-8 rounded border-2 border-neutral-300 hover:border-neutral-500 hover:scale-110 transition-all relative group"
+                          className="w-8 h-8 rounded border-2 border-neutral-300 hover:border-neutral-500 hover:scale-105 transition-all relative group"
                           style={{backgroundColor: color}}
                           title={color}
                         >
diff --git a/apps/web/src/components/QuickStart.tsx b/apps/web/src/components/QuickStart.tsx
index 26f6b36..7509afa 100644
--- a/apps/web/src/components/QuickStart.tsx
+++ b/apps/web/src/components/QuickStart.tsx
@@ -28,16 +28,16 @@ function HelpResources() {
       <p className="text-xs font-medium text-neutral-500 mb-3">Need help?</p>
       <div className="flex flex-col sm:flex-row gap-2">
         <Link href={WIKI_URI} target="_blank" className="flex-1">
-          <button className="w-full flex items-center justify-center gap-2 px-3 py-2 text-xs font-medium text-neutral-700 bg-white border border-neutral-200 rounded-lg hover:bg-neutral-50 hover:border-neutral-300 transition-all">
+          <Button variant="outline" size="sm" className="w-full">
             <BookOpen className="h-3.5 w-3.5" />
             Documentation
-          </button>
+          </Button>
         </Link>
         <Link href={`${LANDING_URI}/discord`} target="_blank" className="flex-1">
-          <button className="w-full flex items-center justify-center gap-2 px-3 py-2 text-xs font-medium text-neutral-700 bg-white border border-neutral-200 rounded-lg hover:bg-neutral-50 hover:border-neutral-300 transition-all">
+          <Button variant="outline" size="sm" className="w-full">
             <MessageCircle className="h-3.5 w-3.5" />
             Join Discord
-          </button>
+          </Button>
         </Link>
       </div>
     </div>
@@ -237,7 +237,6 @@ export function QuickStart({setupState, isLoading}: QuickStartProps) {
                   <Button
                     size="sm"
                     variant={step.isCompleted ? 'outline' : 'default'}
-                    className="h-9 transition-all group-hover:shadow-sm"
                   >
                     {step.linkText}
                   </Button>
diff --git a/apps/web/src/components/WorkflowBuilder.tsx b/apps/web/src/components/WorkflowBuilder.tsx
index 9388b3e..7534fcb 100644
--- a/apps/web/src/components/WorkflowBuilder.tsx
+++ b/apps/web/src/components/WorkflowBuilder.tsx
@@ -133,9 +133,9 @@ function AddStepNode({data}: {data: {label: string; onClick?: () => void}}) {
         }}
       />
 
-      <div className="cursor-pointer hover:scale-110 transition-transform" onClick={data.onClick}>
-        <div className="w-16 h-16 rounded-full bg-gradient-to-br from-neutral-100 to-neutral-200 border-2 border-dashed border-neutral-400 hover:border-neutral-600 hover:from-blue-50 hover:to-blue-100 hover:border-blue-400 flex items-center justify-center shadow-md hover:shadow-lg transition-all">
-          <Plus className="h-8 w-8 text-neutral-500 hover:text-blue-600 transition-colors" />
+      <div className="cursor-pointer hover:scale-105 transition-transform" onClick={data.onClick}>
+        <div className="w-16 h-16 rounded-full bg-gradient-to-br from-neutral-100 to-neutral-200 border-2 border-dashed border-neutral-400 hover:border-neutral-600 hover:from-blue-50 hover:to-blue-100 hover:border-blue-400 flex items-center justify-center shadow-md transition-all">
+          <Plus className="h-8 w-8 text-neutral-500 transition-colors" />
         </div>
         {data.label && <div className="text-xs text-neutral-500 text-center mt-2 font-medium">{data.label}</div>}
       </div>
@@ -192,26 +192,30 @@ function CustomNode({
         {/* Action buttons - shown on hover */}
         {showActions && data.type !== 'TRIGGER' && (
           <div className="absolute -top-3 -right-3 flex gap-1.5 z-10">
-            <button
+            <Button
               onClick={e => {
                 e.stopPropagation();
                 data.onEdit?.();
               }}
-              className="p-1.5 bg-white border-2 border-neutral-300 rounded-lg shadow-md hover:border-neutral-400 hover:bg-neutral-50 transition-all"
+              variant="outline"
+              size="icon"
+              className="h-7 w-7 shadow-md"
               title="Edit step"
             >
-              <Settings className="h-3.5 w-3.5 text-neutral-700" />
-            </button>
-            <button
+              <Settings className="h-3.5 w-3.5" />
+            </Button>
+            <Button
               onClick={e => {
                 e.stopPropagation();
                 data.onDelete?.();
               }}
-              className="p-1.5 bg-white border-2 border-red-300 rounded-lg shadow-md hover:border-red-400 hover:bg-red-50 transition-all"
+              variant="outline"
+              size="icon"
+              className="h-7 w-7 shadow-md hover:bg-red-50 hover:border-red-400"
               title="Delete step"
             >
-              <Trash2 className="h-3.5 w-3.5 text-red-600" />
-            </button>
+              <Trash2 className="h-3.5 w-3.5" />
+            </Button>
           </div>
         )}
 
diff --git a/apps/web/src/pages/contacts/index.tsx b/apps/web/src/pages/contacts/index.tsx
index 95bdbe5..2e62298 100644
--- a/apps/web/src/pages/contacts/index.tsx
+++ b/apps/web/src/pages/contacts/index.tsx
@@ -289,7 +289,7 @@ export default function ContactsPage() {
                                   </Button>
                                 </Link>
                                 <Button variant="ghost" size="sm" onClick={() => promptDelete(contact.id)}>
-                                  <Trash2 className="h-4 w-4 text-red-600" />
+                                  <Trash2 className="h-4 w-4" />
                                 </Button>
                               </div>
                             </td>
@@ -334,7 +334,7 @@ export default function ContactsPage() {
                               </Button>
                             </Link>
                             <Button variant="ghost" size="sm" onClick={() => promptDelete(contact.id)}>
-                              <Trash2 className="h-4 w-4 text-red-600" />
+                              <Trash2 className="h-4 w-4" />
                             </Button>
                           </div>
                         </div>
diff --git a/apps/web/src/pages/segments/index.tsx b/apps/web/src/pages/segments/index.tsx
index c508a80..52c7bd2 100644
--- a/apps/web/src/pages/segments/index.tsx
+++ b/apps/web/src/pages/segments/index.tsx
@@ -72,147 +72,149 @@ export default function SegmentsPage() {
       <NextSeo title="Segments" />
       <DashboardLayout>
         <div className="space-y-6">
-        {/* Header */}
-        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-          <div className="flex-1 min-w-0">
-            <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Segments</h1>
-            <p className="text-neutral-500 mt-2 text-sm sm:text-base">
-              Create dynamic audience groups based on contact attributes and behaviors
-            </p>
+          {/* Header */}
+          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+            <div className="flex-1 min-w-0">
+              <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Segments</h1>
+              <p className="text-neutral-500 mt-2 text-sm sm:text-base">
+                Create dynamic audience groups based on contact attributes and behaviors
+              </p>
+            </div>
+            <Link href="/segments/new" className="w-full sm:w-auto">
+              <Button className="w-full sm:w-auto">
+                <Plus className="h-4 w-4" />
+                <span className="hidden sm:inline">Create Segment</span>
+                <span className="sm:hidden">Create</span>
+              </Button>
+            </Link>
           </div>
-          <Link href="/segments/new" className="w-full sm:w-auto">
-            <Button className="w-full sm:w-auto">
-              <Plus className="h-4 w-4" />
-              <span className="hidden sm:inline">Create Segment</span>
-              <span className="sm:hidden">Create</span>
-            </Button>
-          </Link>
+
+          {/* Warning if too many segments */}
+          {showLimitWarning && (
+            <Alert variant="default">
+              <AlertTriangle className="h-4 w-4" />
+              <AlertDescription>
+                Showing first {segments?.length} segments. Consider archiving old segments to improve performance.
+              </AlertDescription>
+            </Alert>
+          )}
+
+          {/* Segments Grid */}
+          {isLoading ? (
+            <div className="flex items-center justify-center py-12">
+              <div className="text-center">
+                <svg
+                  className="h-8 w-8 animate-spin mx-auto text-neutral-900"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                >
+                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                  <path
+                    className="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  />
+                </svg>
+                <p className="mt-2 text-sm text-neutral-500">Loading segments...</p>
+              </div>
+            </div>
+          ) : segments?.length === 0 ? (
+            <Card>
+              <CardContent className="py-12">
+                <div className="text-center">
+                  <Filter className="h-12 w-12 text-neutral-400 mx-auto mb-4" />
+                  <h3 className="text-lg font-medium text-neutral-900 mb-2">No segments yet</h3>
+                  <p className="text-neutral-500 mb-6">
+                    Create your first segment to group contacts based on attributes and behaviors
+                  </p>
+                  <Link href="/segments/new">
+                    <Button>
+                      <Plus className="h-4 w-4" />
+                      Create Segment
+                    </Button>
+                  </Link>
+                </div>
+              </CardContent>
+            </Card>
+          ) : (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {segments?.map(segment => (
+                <Card key={segment.id}>
+                  <CardHeader>
+                    <div className="flex items-start justify-between">
+                      <div className="flex-1">
+                        <CardTitle className="text-lg">{segment.name}</CardTitle>
+                        {segment.description && (
+                          <CardDescription className="mt-1">{segment.description}</CardDescription>
+                        )}
+                      </div>
+                    </div>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="space-y-4">
+                      {/* Stats */}
+                      <div className="flex items-center justify-between">
+                        <div className="flex items-center gap-2">
+                          <Users className="h-4 w-4 text-neutral-500" />
+                          <span className="text-sm text-neutral-600">Members</span>
+                        </div>
+                        <span className="text-lg font-semibold text-neutral-900">{segment.memberCount}</span>
+                      </div>
+
+                      <div className="flex items-center justify-between">
+                        <div className="flex items-center gap-2">
+                          <Filter className="h-4 w-4 text-neutral-500" />
+                          <span className="text-sm text-neutral-600">Filters</span>
+                        </div>
+                        <span className="text-sm font-medium text-neutral-900">
+                          {countFiltersInCondition(segment.condition)}
+                        </span>
+                      </div>
+
+                      {/* Actions */}
+                      <div className="flex items-center gap-2 pt-2 border-t border-neutral-200">
+                        <Link href={`/segments/${segment.id}`} className="flex-1">
+                          <Button variant="outline" size="sm" className="w-full">
+                            <Edit className="h-4 w-4" />
+                            Edit
+                          </Button>
+                        </Link>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => {
+                            setSegmentToDelete(segment.id);
+                            setShowDeleteDialog(true);
+                          }}
+                          className="text-red-600 hover:text-red-700 hover:bg-red-50"
+                        >
+                          <Trash2 className="h-4 w-4" />
+                        </Button>
+                      </div>
+
+                      {/* Metadata */}
+                      <div className="text-xs text-neutral-500 pt-2 border-t border-neutral-200">
+                        Created {new Date(segment.createdAt).toLocaleDateString()}
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          )}
         </div>
 
-        {/* Warning if too many segments */}
-        {showLimitWarning && (
-          <Alert variant="default">
-            <AlertTriangle className="h-4 w-4" />
-            <AlertDescription>
-              Showing first {segments?.length} segments. Consider archiving old segments to improve performance.
-            </AlertDescription>
-          </Alert>
-        )}
-
-        {/* Segments Grid */}
-        {isLoading ? (
-          <div className="flex items-center justify-center py-12">
-            <div className="text-center">
-              <svg
-                className="h-8 w-8 animate-spin mx-auto text-neutral-900"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-              >
-                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-                <path
-                  className="opacity-75"
-                  fill="currentColor"
-                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                />
-              </svg>
-              <p className="mt-2 text-sm text-neutral-500">Loading segments...</p>
-            </div>
-          </div>
-        ) : segments?.length === 0 ? (
-          <Card>
-            <CardContent className="py-12">
-              <div className="text-center">
-                <Filter className="h-12 w-12 text-neutral-400 mx-auto mb-4" />
-                <h3 className="text-lg font-medium text-neutral-900 mb-2">No segments yet</h3>
-                <p className="text-neutral-500 mb-6">
-                  Create your first segment to group contacts based on attributes and behaviors
-                </p>
-                <Link href="/segments/new">
-                  <Button>
-                    <Plus className="h-4 w-4" />
-                    Create Segment
-                  </Button>
-                </Link>
-              </div>
-            </CardContent>
-          </Card>
-        ) : (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {segments?.map(segment => (
-              <Card key={segment.id} className="hover:shadow-lg transition-shadow">
-                <CardHeader>
-                  <div className="flex items-start justify-between">
-                    <div className="flex-1">
-                      <CardTitle className="text-lg">{segment.name}</CardTitle>
-                      {segment.description && <CardDescription className="mt-1">{segment.description}</CardDescription>}
-                    </div>
-                  </div>
-                </CardHeader>
-                <CardContent>
-                  <div className="space-y-4">
-                    {/* Stats */}
-                    <div className="flex items-center justify-between">
-                      <div className="flex items-center gap-2">
-                        <Users className="h-4 w-4 text-neutral-500" />
-                        <span className="text-sm text-neutral-600">Members</span>
-                      </div>
-                      <span className="text-lg font-semibold text-neutral-900">{segment.memberCount}</span>
-                    </div>
-
-                    <div className="flex items-center justify-between">
-                      <div className="flex items-center gap-2">
-                        <Filter className="h-4 w-4 text-neutral-500" />
-                        <span className="text-sm text-neutral-600">Filters</span>
-                      </div>
-                      <span className="text-sm font-medium text-neutral-900">
-                        {countFiltersInCondition(segment.condition)}
-                      </span>
-                    </div>
-
-                    {/* Actions */}
-                    <div className="flex items-center gap-2 pt-2 border-t border-neutral-200">
-                      <Link href={`/segments/${segment.id}`} className="flex-1">
-                        <Button variant="outline" size="sm" className="w-full">
-                          <Edit className="h-4 w-4" />
-                          Edit
-                        </Button>
-                      </Link>
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        onClick={() => {
-                          setSegmentToDelete(segment.id);
-                          setShowDeleteDialog(true);
-                        }}
-                        className="text-red-600 hover:text-red-700 hover:bg-red-50"
-                      >
-                        <Trash2 className="h-4 w-4" />
-                      </Button>
-                    </div>
-
-                    {/* Metadata */}
-                    <div className="text-xs text-neutral-500 pt-2 border-t border-neutral-200">
-                      Created {new Date(segment.createdAt).toLocaleDateString()}
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-            ))}
-          </div>
-        )}
-      </div>
-
-      <ConfirmDialog
-        open={showDeleteDialog}
-        onOpenChange={setShowDeleteDialog}
-        onConfirm={handleDelete}
-        title="Delete Segment"
-        description="Are you sure you want to delete this segment? This action cannot be undone."
-        confirmText="Delete"
-        variant="destructive"
-      />
-    </DashboardLayout>
+        <ConfirmDialog
+          open={showDeleteDialog}
+          onOpenChange={setShowDeleteDialog}
+          onConfirm={handleDelete}
+          title="Delete Segment"
+          description="Are you sure you want to delete this segment? This action cannot be undone."
+          confirmText="Delete"
+          variant="destructive"
+        />
+      </DashboardLayout>
     </>
   );
 }
diff --git a/apps/web/src/pages/settings/index.tsx b/apps/web/src/pages/settings/index.tsx
index ca49552..9c116d1 100644
--- a/apps/web/src/pages/settings/index.tsx
+++ b/apps/web/src/pages/settings/index.tsx
@@ -545,9 +545,9 @@ export default function Settings() {
                       </div>
                       <Button
                         type="button"
-                        variant="default"
+                        variant="destructive"
                         onClick={() => setShowDeleteDialog(true)}
-                        className="shrink-0 bg-red-600 hover:bg-red-700 text-white shadow-sm hover:shadow-md transition-all"
+                        className="shrink-0"
                       >
                         Delete Project
                       </Button>
diff --git a/apps/web/src/pages/templates/index.tsx b/apps/web/src/pages/templates/index.tsx
index ad970de..076b3f5 100644
--- a/apps/web/src/pages/templates/index.tsx
+++ b/apps/web/src/pages/templates/index.tsx
@@ -126,39 +126,30 @@ export default function TemplatesPage() {
 
                 {/* Type Filter */}
                 <div className="flex gap-2">
-                  <button
+                  <Button
                     type="button"
                     onClick={() => setTypeFilter('ALL')}
-                    className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
-                      typeFilter === 'ALL'
-                        ? 'bg-neutral-900 text-white'
-                        : 'bg-neutral-100 text-neutral-600 hover:bg-neutral-200'
-                    }`}
+                    variant={typeFilter === 'ALL' ? 'default' : 'secondary'}
+                    size="sm"
                   >
                     All Templates
-                  </button>
-                  <button
+                  </Button>
+                  <Button
                     type="button"
                     onClick={() => setTypeFilter('MARKETING')}
-                    className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
-                      typeFilter === 'MARKETING'
-                        ? 'bg-neutral-900 text-white'
-                        : 'bg-neutral-100 text-neutral-600 hover:bg-neutral-200'
-                    }`}
+                    variant={typeFilter === 'MARKETING' ? 'default' : 'secondary'}
+                    size="sm"
                   >
                     Marketing
-                  </button>
-                  <button
+                  </Button>
+                  <Button
                     type="button"
                     onClick={() => setTypeFilter('TRANSACTIONAL')}
-                    className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
-                      typeFilter === 'TRANSACTIONAL'
-                        ? 'bg-neutral-900 text-white'
-                        : 'bg-neutral-100 text-neutral-600 hover:bg-neutral-200'
-                    }`}
+                    variant={typeFilter === 'TRANSACTIONAL' ? 'default' : 'secondary'}
+                    size="sm"
                   >
                     Transactional
-                  </button>
+                  </Button>
                 </div>
               </form>
             </CardContent>
@@ -246,7 +237,7 @@ export default function TemplatesPage() {
                               setShowDeleteDialog(true);
                             }}
                           >
-                            <Trash2 className="h-4 w-4 text-red-600" />
+                            <Trash2 className="h-4 w-4" />
                           </Button>
                         </div>
                       </div>
diff --git a/apps/web/src/pages/workflows/index.tsx b/apps/web/src/pages/workflows/index.tsx
index 62944f0..081711e 100644
--- a/apps/web/src/pages/workflows/index.tsx
+++ b/apps/web/src/pages/workflows/index.tsx
@@ -220,9 +220,9 @@ export default function WorkflowsPage() {
                             onClick={() => handleToggleEnabled(workflow.id, workflow.enabled)}
                           >
                             {workflow.enabled ? (
-                              <PowerOff className="h-4 w-4 text-orange-600" />
+                              <PowerOff className="h-4 w-4" />
                             ) : (
-                              <Power className="h-4 w-4 text-green-600" />
+                              <Power className="h-4 w-4" />
                             )}
                           </Button>
                           <Link href={`/workflows/${workflow.id}`}>
@@ -238,7 +238,7 @@ export default function WorkflowsPage() {
                               setShowDeleteDialog(true);
                             }}
                           >
-                            <Trash2 className="h-4 w-4 text-red-600" />
+                            <Trash2 className="h-4 w-4" />
                           </Button>
                         </div>
                       </div>
diff --git a/packages/ui/src/components/atoms/Button.tsx b/packages/ui/src/components/atoms/Button.tsx
index 9b55b13..75596f5 100644
--- a/packages/ui/src/components/atoms/Button.tsx
+++ b/packages/ui/src/components/atoms/Button.tsx
@@ -5,14 +5,14 @@ import * as React from 'react';
 import {cn} from '../../lib';
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer',
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer',
   {
     variants: {
       variant: {
-        default: 'bg-neutral-900 text-neutral-50 shadow hover:bg-neutral-900/90',
-        destructive: 'bg-red-500 text-neutral-50 shadow-sm hover:bg-red-500/90',
-        outline: 'border border-neutral-200 bg-white shadow-sm hover:bg-neutral-100 hover:text-neutral-900',
-        secondary: 'bg-neutral-100 text-neutral-900 shadow-sm hover:bg-neutral-100/80',
+        default: 'bg-neutral-900 text-neutral-50 shadow hover:bg-neutral-900/90 hover:shadow-md',
+        destructive: 'bg-red-500 text-neutral-50 shadow-sm hover:bg-red-500/90 hover:shadow-md',
+        outline: 'border border-neutral-200 bg-white shadow-sm hover:bg-neutral-100 hover:text-neutral-900 hover:shadow-md',
+        secondary: 'bg-neutral-100 text-neutral-900 shadow-sm hover:bg-neutral-100/80 hover:shadow-md',
         ghost: 'hover:bg-neutral-100 hover:text-neutral-900',
         link: 'text-neutral-900 underline-offset-4 hover:underline',
       },