jan-henrik/respira
1
0
Fork 0
mirror of https://github.com/jhbruhn/respira.git synced 2026-01-27 10:23:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add icons to action buttons and improve button styling

Browse source 
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>
This commit is contained in:
Jan-Henrik 2025-12-07 13:17:51 +01:00
parent c573c6414c
commit 3ef9ca14c1
3 changed files with 15 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/App.tsx
View file

@ -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"
>

7
src/components/FileUpload.tsx
View file

@ -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>

15
src/components/ProgressMonitor.tsx
View file

@ -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>
)}