icon

docs/IMAGE_GENERATION_CHANGELOG.md

@@ -236,5 +236,41 @@ Example:
 
 ---
 
+---
+
+## Stage 1 Updates: Modal Styling Improvements
+
+**Date:** 2025-01-XX  
+**Status:** Completed
+
+### Changes Made:
+
+1. **Updated Modal Background**
+   - Changed from `bg-black bg-opacity-50` to standard modal backdrop
+   - Now uses `Modal` component with `bg-gray-400/50 backdrop-blur-[32px]` (standard glass effect)
+   - Matches all other modals in the system
+
+2. **Replaced Emojis with React Icons**
+   - Header: Replaced 🎨 emoji with `FileIcon` component
+   - Pending status: Replaced ⏳ emoji with `TimeIcon` component
+   - Processing status: Added spinning SVG icon
+   - Completed status: Uses `CheckCircleIcon` component
+   - Failed status: Uses `ErrorIcon` component
+
+3. **Standard Modal Width**
+   - Changed from custom width to `max-w-4xl` (standard modal width)
+   - Uses `Modal` component which provides consistent styling across system
+
+### Files Modified:
+- ✅ `frontend/src/components/common/ImageQueueModal.tsx` (UPDATED)
+
+### Visual Improvements:
+- Modal now has proper blur/glass backdrop effect
+- Icons are consistent with system design
+- Modal width matches other modals in the system
+- Better visual hierarchy with icon in header
+
+---
+
 **End of Stage 1 Changelog**
 

frontend/src/components/common/ImageQueueModal.tsx

@@ -5,7 +5,8 @@
  */
 
 import React, { useEffect, useState } from 'react';
-import { CloseIcon as XIcon } from '../../icons';
+import { Modal } from '../ui/modal';
+import { FileIcon, TimeIcon, CheckCircleIcon, ErrorIcon } from '../../icons';
 
 export interface ImageQueueItem {
   imageId: number | null;
@@ -52,15 +53,20 @@ export default function ImageQueueModal({
   const getStatusIcon = (status: string) => {
     switch (status) {
       case 'pending':
-        return '⏳';
+        return <TimeIcon className="w-4 h-4" />;
       case 'processing':
-        return '🔄';
+        return (
+          <svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+          </svg>
+        );
       case 'completed':
-        return '✅';
+        return <CheckCircleIcon className="w-4 h-4" />;
       case 'failed':
-        return '❌';
+        return <ErrorIcon className="w-4 h-4" />;
       default:
-        return '⏳';
+        return <TimeIcon className="w-4 h-4" />;
     }
   };
 
@@ -98,27 +104,26 @@ export default function ImageQueueModal({
   const allDone = localQueue.every(item => item.status === 'completed' || item.status === 'failed');
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+    <Modal
-      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-4xl w-full max-h-[80vh] overflow-hidden flex flex-col">
+      isOpen={isOpen}
-        {/* Header */}
+      onClose={onClose}
-        <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
+      className="max-w-4xl w-full max-h-[80vh] overflow-hidden flex flex-col"
+      showCloseButton={!isProcessing}
+    >
+      {/* Header */}
+      <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <FileIcon className="w-6 h-6 text-blue-500" />
           <div>
             <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
-              🎨 Generating Images
+              Generating Images
             </h3>
             <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
               Total: {totalImages} image{totalImages !== 1 ? 's' : ''} in queue
             </p>
           </div>
-          <button
-            onClick={onClose}
-            className="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300 disabled:opacity-50 disabled:cursor-not-allowed"
-            disabled={isProcessing}
-            title={isProcessing ? 'Please wait for generation to complete' : 'Close'}
-          >
-            <XIcon className="w-5 h-5" />
-          </button>
         </div>
+      </div>
 
         {/* Queue List */}
         <div className="flex-1 overflow-y-auto px-6 py-4">
@@ -150,8 +155,9 @@ export default function ImageQueueModal({
                       <span className="flex-1 text-xs text-gray-500 dark:text-gray-400 truncate">
                         {item.contentTitle}
                       </span>
-                      <span className="text-xs font-semibold text-gray-600 dark:text-gray-300 whitespace-nowrap">
+                      <span className="text-xs font-semibold text-gray-600 dark:text-gray-300 whitespace-nowrap flex items-center gap-1">
-                        {getStatusIcon(item.status)} {getStatusText(item.status)}
+                        {getStatusIcon(item.status)}
+                        <span>{getStatusText(item.status)}</span>
                       </span>
                     </div>
 
@@ -212,7 +218,6 @@ export default function ImageQueueModal({
             )}
           </div>
         </div>
-      </div>
+    </Modal>
-    </div>
   );
 }