From 6ecdc33933fe07ec056bdd2a8a0cef54711638b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Tue, 3 Mar 2026 10:36:19 +0100
Subject: [PATCH] feat: add cardBtn style for card title row buttons

Smaller variant for buttons that sit next to section labels in card headers
(Preview, Color, Results rows). Applied to QRPreview, FontPreview,
ColorManipulation, and FileConverter.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/ascii/FontPreview.tsx       | 10 +++++-----
 components/color/ColorManipulation.tsx |  4 ++--
 components/media/FileConverter.tsx     |  4 ++--
 components/qrcode/QRPreview.tsx        |  8 ++++----
 lib/utils/styles.ts                    |  4 ++++
 5 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/components/ascii/FontPreview.tsx b/components/ascii/FontPreview.tsx
index 584b405..a2fbeae 100644
--- a/components/ascii/FontPreview.tsx
+++ b/components/ascii/FontPreview.tsx
@@ -13,7 +13,7 @@ import {
   MessageSquareCode,
   Type,
 } from 'lucide-react';
-import { cn, actionBtn } from '@/lib/utils';
+import { cn, actionBtn, cardBtn } from '@/lib/utils';
 import { toast } from 'sonner';
 
 export type CommentStyle = 'none' | '//' | '#' | '--' | ';' | '/* */' | '<!-- -->' | '"""';
@@ -133,20 +133,20 @@ export function FontPreview({
         </div>
         <div className="flex items-center gap-1.5 flex-wrap">
           {onCopy && (
-            <button onClick={onCopy} className={actionBtn}>
+            <button onClick={onCopy} className={cardBtn}>
               <Copy className="w-3 h-3" /> Copy
             </button>
           )}
           {onShare && (
-            <button onClick={onShare} className={actionBtn}>
+            <button onClick={onShare} className={cardBtn}>
               <Share2 className="w-3 h-3" /> Share
             </button>
           )}
-          <button onClick={handleExportPNG} className={actionBtn}>
+          <button onClick={handleExportPNG} className={cardBtn}>
             <ImageIcon className="w-3 h-3" /> PNG
           </button>
           {onDownload && (
-            <button onClick={onDownload} className={actionBtn}>
+            <button onClick={onDownload} className={cardBtn}>
               <Download className="w-3 h-3" /> TXT
             </button>
           )}
diff --git a/components/color/ColorManipulation.tsx b/components/color/ColorManipulation.tsx
index b4d5075..aa412cc 100644
--- a/components/color/ColorManipulation.tsx
+++ b/components/color/ColorManipulation.tsx
@@ -10,7 +10,7 @@ import { ExportMenu } from '@/components/color/ExportMenu';
 import { useColorInfo, useGeneratePalette, useGenerateGradient } from '@/lib/color/api/queries';
 import { Loader2, Share2, Plus, X, Palette, Layers } from 'lucide-react';
 import { toast } from 'sonner';
-import { cn, actionBtn } from '@/lib/utils';
+import { cn, actionBtn, cardBtn } from '@/lib/utils';
 import { MobileTabs } from '@/components/ui/mobile-tabs';
 
 type HarmonyType = 'monochromatic' | 'analogous' | 'complementary' | 'triadic' | 'tetradic';
@@ -126,7 +126,7 @@ function ColorManipulationContent() {
               <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">
                 Color
               </span>
-              <button onClick={handleShare} className={actionBtn}>
+              <button onClick={handleShare} className={cardBtn}>
                 <Share2 className="w-3 h-3" /> Share
               </button>
             </div>
diff --git a/components/media/FileConverter.tsx b/components/media/FileConverter.tsx
index 8db9d40..1dbf5c2 100644
--- a/components/media/FileConverter.tsx
+++ b/components/media/FileConverter.tsx
@@ -17,7 +17,7 @@ import { addToHistory } from '@/lib/media/storage/history';
 import { downloadBlobsAsZip, generateOutputFilename } from '@/lib/media/utils/fileUtils';
 import type { ConversionJob, ConversionFormat, ConversionOptions } from '@/types/media';
 import { ShieldCheck, Download, RotateCcw, Loader2 } from 'lucide-react';
-import { cn, actionBtn } from '@/lib/utils';
+import { cn, actionBtn, cardBtn } from '@/lib/utils';
 
 type MobileTab = 'upload' | 'convert';
 
@@ -470,7 +470,7 @@ export function FileConverter() {
                   Results
                 </span>
                 {completedCount > 0 && (
-                  <button onClick={handleDownloadAll} className={actionBtn}>
+                  <button onClick={handleDownloadAll} className={cardBtn}>
                     <Download className="w-3 h-3" />
                     {completedCount > 1 ? `Download all (${completedCount}) as ZIP` : 'Download'}
                   </button>
diff --git a/components/qrcode/QRPreview.tsx b/components/qrcode/QRPreview.tsx
index 23bc0b0..6ba8b59 100644
--- a/components/qrcode/QRPreview.tsx
+++ b/components/qrcode/QRPreview.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { Copy, Share2, Image as ImageIcon, FileCode, QrCode } from 'lucide-react';
-import { cn, actionBtn } from '@/lib/utils';
+import { cn, actionBtn, cardBtn } from '@/lib/utils';
 import type { ExportSize } from '@/types/qrcode';
 
 interface QRPreviewProps {
@@ -42,11 +42,11 @@ export function QRPreview({
           Preview
         </span>
 
-        <button onClick={onCopyImage} disabled={!svgString} className={actionBtn}>
+        <button onClick={onCopyImage} disabled={!svgString} className={cardBtn}>
           <Copy className="w-3 h-3" />Copy
         </button>
 
-        <button onClick={onShare} disabled={!svgString} className={actionBtn}>
+        <button onClick={onShare} disabled={!svgString} className={cardBtn}>
           <Share2 className="w-3 h-3" />Share
         </button>
 
@@ -77,7 +77,7 @@ export function QRPreview({
           </div>
         </div>
 
-        <button onClick={onDownloadSvg} disabled={!svgString} className={actionBtn}>
+        <button onClick={onDownloadSvg} disabled={!svgString} className={cardBtn}>
           <FileCode className="w-3 h-3" />SVG
         </button>
       </div>
diff --git a/lib/utils/styles.ts b/lib/utils/styles.ts
index 8d902d4..00fb2de 100644
--- a/lib/utils/styles.ts
+++ b/lib/utils/styles.ts
@@ -2,6 +2,10 @@
  * Shared Tailwind class strings for consistent UI patterns across tools.
  */
 
+/** Smaller button for card title rows (copy, share, export icons next to a section label) */
+export const cardBtn =
+  'flex items-center gap-1 px-2 py-1 text-[10px] font-mono glass rounded-md border border-border/30 text-muted-foreground hover:text-primary hover:border-primary/30 hover:bg-primary/10 transition-all disabled:opacity-40 disabled:cursor-not-allowed';
+
 /** Standard action button used throughout all tools (copy, download, share, apply…) */
 export const actionBtn =
   'flex items-center gap-1.5 px-3 py-1.5 text-xs font-mono glass rounded-lg border border-border/30 text-muted-foreground hover:text-primary hover:border-primary/30 hover:bg-primary/10 transition-all disabled:opacity-40 disabled:cursor-not-allowed';