From 3ef9ca14c12e1051bb92de77d759b62512258108 Mon Sep 17 00:00:00 2001
From: Jan-Henrik Bruhn <hi@jhbruhn.de>
Date: Sun, 7 Dec 2025 13:17:51 +0100
Subject: [PATCH] Add icons to action buttons and improve button styling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

FileUpload:
- Added FolderOpenIcon to "Choose PES File" button

ProgressMonitor:
- Start Sewing button takes 2x space (flex-[2]) as primary action
- Trace Again button takes 1x space (flex-1) as secondary action
- Added PlayIcon to Start/Resume Sewing buttons
- Added ArrowPathIcon to Trace Again button
- Buttons fill full width with proper flex distribution
- Sizing consistent with rest of UI (text-xs, px-3 py-2)

Header:
- Disconnect button turns red on hover for clear destructive action

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/App.tsx                        |  2 +-
 src/components/FileUpload.tsx      |  7 +++++--
 src/components/ProgressMonitor.tsx | 15 +++++++++------
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index b4edf53..cb797ac 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -146,7 +146,7 @@ function App() {
                   <>
                     <button
                       onClick={machine.disconnect}
-                      className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded text-xs font-medium bg-white/10 hover:bg-white/20 text-blue-100 hover:text-white border border-white/20 hover:border-white/30 cursor-pointer transition-all flex-shrink-0"
+                      className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded text-xs font-medium bg-white/10 hover:bg-red-600 text-blue-100 hover:text-white border border-white/20 hover:border-red-600 cursor-pointer transition-all flex-shrink-0"
                       title="Disconnect from machine"
                       aria-label="Disconnect from machine"
                     >
diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx
index d959594..85e35d4 100644
--- a/src/components/FileUpload.tsx
+++ b/src/components/FileUpload.tsx
@@ -3,7 +3,7 @@ import { convertPesToPen, type PesPatternData } from '../utils/pystitchConverter
 import { MachineStatus } from '../types/machine';
 import { canUploadPattern, getMachineStateCategory } from '../utils/machineStateHelpers';
 import { PatternInfoSkeleton } from './SkeletonLoader';
-import { ArrowUpTrayIcon, CheckCircleIcon, DocumentTextIcon } from '@heroicons/react/24/solid';
+import { ArrowUpTrayIcon, CheckCircleIcon, DocumentTextIcon, FolderOpenIcon } from '@heroicons/react/24/solid';
 
 interface FileUploadProps {
   isConnected: boolean;
@@ -210,7 +210,10 @@ export function FileUpload({
               <span>Locked</span>
             </>
           ) : (
-            <span>Choose PES File</span>
+            <>
+              <FolderOpenIcon className="w-3.5 h-3.5" />
+              <span>Choose PES File</span>
+            </>
           )}
         </label>
 
diff --git a/src/components/ProgressMonitor.tsx b/src/components/ProgressMonitor.tsx
index 3ff86c5..215fa82 100644
--- a/src/components/ProgressMonitor.tsx
+++ b/src/components/ProgressMonitor.tsx
@@ -7,7 +7,8 @@ import {
   ClockIcon,
   PauseCircleIcon,
   ExclamationCircleIcon,
-  ChartBarIcon
+  ChartBarIcon,
+  ArrowPathIcon
 } from '@heroicons/react/24/solid';
 import type { PatternInfo, SewingProgress } from '../types/machine';
 import { MachineStatus } from '../types/machine';
@@ -270,13 +271,13 @@ export function ProgressMonitor({
       )}
 
       {/* Action buttons */}
-      <div className="flex gap-2 flex-wrap">
+      <div className="flex gap-2">
         {/* Resume has highest priority when available */}
         {canResumeSewing(machineStatus) && (
           <button
             onClick={onResumeSewing}
             disabled={isDeleting}
-            className="flex items-center gap-2 px-3 py-2 bg-blue-600 dark:bg-blue-700 text-white rounded font-semibold text-xs hover:bg-blue-700 dark:hover:bg-blue-600 active:bg-blue-800 dark:active:bg-blue-500 transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
+            className="flex-1 flex items-center justify-center gap-1.5 px-3 py-2 bg-blue-600 dark:bg-blue-700 text-white rounded font-semibold text-xs hover:bg-blue-700 dark:hover:bg-blue-600 active:bg-blue-800 dark:active:bg-blue-500 transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
             aria-label="Resume sewing the current pattern"
           >
             <PlayIcon className="w-3.5 h-3.5" />
@@ -284,14 +285,15 @@ export function ProgressMonitor({
           </button>
         )}
 
-        {/* Start Sewing - primary action */}
+        {/* Start Sewing - primary action, takes more space */}
         {canStartSewing(machineStatus) && !canResumeSewing(machineStatus) && (
           <button
             onClick={onStartSewing}
             disabled={isDeleting}
-            className="px-3 py-2 bg-blue-600 dark:bg-blue-700 text-white rounded font-semibold text-xs hover:bg-blue-700 dark:hover:bg-blue-600 active:bg-blue-800 dark:active:bg-blue-500 transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
+            className="flex-[2] flex items-center justify-center gap-1.5 px-3 py-2 bg-blue-600 dark:bg-blue-700 text-white rounded font-semibold text-xs hover:bg-blue-700 dark:hover:bg-blue-600 active:bg-blue-800 dark:active:bg-blue-500 transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
             aria-label="Start sewing the pattern"
           >
+            <PlayIcon className="w-3.5 h-3.5" />
             Start Sewing
           </button>
         )}
@@ -301,9 +303,10 @@ export function ProgressMonitor({
           <button
             onClick={onStartMaskTrace}
             disabled={isDeleting}
-            className="px-3 py-2 bg-gray-600 dark:bg-gray-700 text-white rounded font-semibold text-xs hover:bg-gray-700 dark:hover:bg-gray-600 active:bg-gray-800 dark:active:bg-gray-500 transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
+            className="flex-1 flex items-center justify-center gap-1.5 px-3 py-2 bg-gray-600 dark:bg-gray-700 text-white rounded font-semibold text-xs hover:bg-gray-700 dark:hover:bg-gray-600 active:bg-gray-800 dark:active:bg-gray-500 transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
             aria-label={isMaskTraceComplete ? 'Start mask trace again' : 'Start mask trace'}
           >
+            <ArrowPathIcon className="w-3.5 h-3.5" />
             {isMaskTraceComplete ? 'Trace Again' : 'Start Mask Trace'}
           </button>
         )}