More style improvements

Author: samejr

references/nextjs-realtime/src/app/runs/[id]/ClientRunDetails.tsx

@@ -23,7 +23,7 @@ function RunDetailsWrapper({ runId }: { runId: string }) {
   if (!run) {
     return (
       <div className="w-full min-h-screen bg-gray-900 py-4 px-6 grid place-items-center">
-        <Card className="w-fit bg-gray-800 shadow-md">
+        <Card className="w-fit bg-gray-800 border border-gray-700 shadow-md">
           <CardContent className="pt-6">
             <p className="text-gray-200">Loading run details…</p>
           </CardContent>

references/nextjs-realtime/src/app/uploads/[id]/ClientUploadDetails.tsx

@@ -23,8 +23,8 @@ function UploadDetailsWrapper({ fileId }: { fileId: string }) {
 
   if (!run) {
     return (
-      <div className="w-full min-h-screen bg-gray-900 py-4 px-6 grid place-items-center">
-        <Card className="w-fit bg-gray-800 shadow-md">
+      <div className="w-full min-h-screen bg-gray-900 py-4 px-8 grid place-items-center">
+        <Card className="w-fit bg-gray-800 border border-gray-700 shadow-md">
           <CardContent className="pt-6">
             <p className="text-gray-200">Loading run details…</p>
           </CardContent>

references/nextjs-realtime/src/components/UploadImageDisplay.tsx

@@ -37,7 +37,7 @@ export default function ImageDisplay({
       {/* Main uploaded image */}
       <div className="mb-12 max-w-3xl mx-auto">
         <p className="text-base text-gray-400 mb-2">Original</p>
-        <div className="relative w-full aspect-video border border-gray-800 rounded-lg">
+        <div className="relative w-full aspect-video border border-gray-700 rounded-lg">
           <Image
             src={uploadedImage}
             alt={uploadedCaption}
@@ -56,7 +56,7 @@ export default function ImageDisplay({
         {gridImages.map((image, index) => (
           <div className="flex flex-col">
             <p className="text-base text-gray-400 mb-2">Style {index + 1}</p>
-            <Card key={index} className="overflow-hidden border border-gray-800 rounded-lg">
+            <Card key={index} className="overflow-hidden border border-gray-700 rounded-lg">
               <CardContent className="p-0">
                 <div
                   className={`relative aspect-video h-full  ${
@@ -67,13 +67,13 @@ export default function ImageDisplay({
                     <Image src={image.src} alt={image.caption} fill className="object-cover" />
                   ) : (
                     <div className="absolute inset-0 flex flex-col items-center justify-center p-4">
-                      <LoaderCircleIcon className="size-8 animate-spin text-blue-500 mb-2" />
-                      <p className="text-sm text-white text-center">Processing: {image.message}</p>
+                      <LoaderCircleIcon className="size-8 animate-spin text-blue-500 mb-4" />
+                      <p className="text-sm text-white text-center">Model: {image.message}</p>
                     </div>
                   )}
                 </div>
                 {image.status === "completed" && (
-                  <p className="p-2 text-center text-xs text-gray-200 bg-gray-800">
+                  <p className="p-2 text-center text-xs text-gray-400 bg-gray-800">
                     {image.caption}
                   </p>
                 )}