From b303d12cb18b437f18b9ca7af203efb0ad7e026c Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Mon, 7 Jul 2025 11:26:37 +0000
Subject: [PATCH] Fix: Job card visual improvements

- Aligned job status with the edit button in JobCard.
- Standardized the appearance of import/export buttons.
---
 src/components/JobCard.tsx | 26 +++++++++++---------------
 1 file changed, 11 insertions(+), 15 deletions(-)

diff --git a/src/components/JobCard.tsx b/src/components/JobCard.tsx
index fbc29ad..01e3839 100644
--- a/src/components/JobCard.tsx
+++ b/src/components/JobCard.tsx
@@ -220,14 +220,7 @@ const JobCard: React.FC<JobCardProps> = ({
       <CardHeader className="flex-shrink-0">
         <div className="flex justify-between items-start">
           <div className="flex-1 min-w-0">
-            <div className="flex items-center gap-3 mb-2">
-              <CardTitle className="text-blue-400 truncate">{job.outputItem}</CardTitle>
-              <div className="flex items-center gap-2 flex-shrink-0">
-                <Badge className={`${getStatusColor(job.status)} text-white`}>
-                  {job.status}
-                </Badge>
-              </div>
-            </div>
+            <CardTitle className="text-blue-400 truncate mb-2">{job.outputItem}</CardTitle>
             <p className="text-gray-400 text-sm">
               Quantity: {job.outputQuantity.toLocaleString()}
               <span className="ml-4">
@@ -261,7 +254,10 @@ const JobCard: React.FC<JobCardProps> = ({
             </p>
           </div>
           <div className="flex flex-col gap-2 flex-shrink-0 items-end">
-            <div className="flex gap-2">
+            <div className="flex items-center gap-2">
+              <Badge className={`${getStatusColor(job.status)} text-white`}>
+                {job.status}
+              </Badge>
               <Button
                 variant="outline"
                 size="sm"
@@ -280,18 +276,18 @@ const JobCard: React.FC<JobCardProps> = ({
             </div>
             <div className="flex gap-1">
               <Button
-                variant="ghost"
+                variant="outline"
                 size="sm"
-                className="p-1 h-6 w-6"
+                className="border-gray-600 hover:bg-gray-800"
                 onClick={handleImportClick}
                 title="Import BOM from clipboard"
               >
-                <Import className="w-4 h-4 text-blue-400" />
+                <Import className="w-4 h-4" />
               </Button>
               <Button
-                variant="ghost"
+                variant="outline"
                 size="sm"
-                className="p-1 h-6 w-6"
+                className="border-gray-600 hover:bg-gray-800"
                 onClick={handleExportClick}
                 disabled={!job.billOfMaterials?.length}
                 title="Export BOM to clipboard"
@@ -299,7 +295,7 @@ const JobCard: React.FC<JobCardProps> = ({
                 {copyingBom ? (
                   <Check className="w-4 h-4 text-green-400" />
                 ) : (
-                  <Upload className="w-4 h-4 text-blue-400" />
+                  <Upload className="w-4 h-4" />
                 )}
               </Button>
             </div>