styled remaining cards

Author: D-K-P

product-image-generator/app/components/CustomPromptCard.tsx

@@ -103,7 +103,6 @@ export default function CustomPromptCard({
         baseImageUrl,
         productAnalysis,
         customPrompt: customPrompt.trim(),
-        size: "1024x1792",
       });
 
       if (result.success) {
@@ -135,7 +134,6 @@ export default function CustomPromptCard({
         baseImageUrl,
         productAnalysis,
         customPrompt: customPrompt.trim(),
-        size: "1024x1792",
       });
 
       if (result.success) {
@@ -245,16 +243,6 @@ export default function CustomPromptCard({
             >
               <Download className="h-4 w-4" />
             </Button>
-            <Button
-              size="sm"
-              variant="secondary"
-              className="w-8 h-8 rounded-full p-0 backdrop-blur-sm bg-white/90 hover:bg-white"
-              onClick={handleReset}
-              disabled={isRegenerating && isGenerating}
-              title="Create new image"
-            >
-              <RotateCcw className="h-4 w-4" />
-            </Button>
           </div>
           {/* Title overlay */}
           <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-3">
@@ -268,10 +256,10 @@ export default function CustomPromptCard({
         <div className="h-full flex flex-col p-4">
           <div className="flex-1 flex flex-col justify-center">
             <form onSubmit={handleSubmit} className="space-y-4">
-              <div>
+              <div className="flex flex-col gap-2 items-center">
                 <label
                   htmlFor="custom-prompt"
-                  className="block text-sm font-medium text-foreground mb-4"
+                  className="block text-sm font-medium text-foreground mb-2"
                 >
                   Add another product shot
                 </label>
@@ -281,7 +269,7 @@ export default function CustomPromptCard({
                   value={customPrompt}
                   onChange={(e) => setCustomPrompt(e.target.value)}
                   disabled={isGenerating}
-                  className="w-full h-20 px-3 text-sm border border-input bg-transparent rounded-md shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 resize-none"
+                  className="w-full h-48 p-3 text-sm border border-input bg-transparent rounded-md shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 resize-none"
                   rows={3}
                   autoFocus
                 />

product-image-generator/app/components/GeneratedCard.tsx

@@ -248,9 +248,11 @@ export default function GeneratedCard({
       ) : (
         // Show loading/waiting state
         <div className="h-full flex flex-col items-center justify-center p-6 text-center">
-          <div className="w-12 h-12 rounded-lg bg-gray-300/20 flex items-center justify-center mb-4">
+          <div className="w-12 h-12 rounded-lg  flex items-center justify-center mb-4">
             {isTaskRunning && generationProgress === "generating" ? (
-              <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary"></div>
+              <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary">
+                <Loader2 className="h-6 w-6 text-gray-500" />
+              </div>
             ) : baseImageUrl && productAnalysis && !hasTriggered ? (
               <Button
                 size="sm"
@@ -276,18 +278,25 @@ export default function GeneratedCard({
                 ? "Click to generate"
                 : "Waiting for upload...")}
           </p>
-          {progressData && generationProgress === "generating" && (
+
+          {(isTaskRunning || progressData) && (
             <>
               <div className="w-full bg-gray-200 rounded-full h-2 mb-2">
                 <div
                   className="bg-primary h-2 rounded-full transition-all duration-300"
                   style={{
-                    width: `${(progressData.step / progressData.total) * 100}%`,
+                    width: `${
+                      progressData
+                        ? (progressData.step / progressData.total) * 100
+                        : 0
+                    }%`,
                   }}
                 ></div>
               </div>
               <p className="text-xs text-muted-foreground">
-                Step {progressData.step} of {progressData.total}
+                {progressData
+                  ? `Step ${progressData.step} of ${progressData.total}`
+                  : "Starting..."}
               </p>
             </>
           )}