cosmetics

app.py

@@ -66,6 +66,7 @@ def create_ui():
             display: flex;
             align-items: center;
             cursor: pointer;
+            justify-content: space-between;
         }
         .step-status {
             margin-right: 10px;
@@ -76,7 +77,7 @@ def create_ui():
             align-items: center;
             justify-content: center;
             font-weight: bold;
-            color: white;
+            color: white !important;
             font-size: 16px;
             text-shadow: 0px 0px 1px rgba(0,0,0,0.5);
         }
@@ -106,6 +107,14 @@ def create_ui():
             font-weight: 500;
             text-align: center;
         }
+        .arrow-indicator {
+            margin-left: auto;
+            font-size: 16px;
+            transition: transform 0.3s ease;
+        }
+        .arrow-down {
+            transform: rotate(90deg);
+        }
         </style>
         """)
         
@@ -117,7 +126,7 @@ def create_ui():
             
             return """<div class="progress-container">
                      <div class="progress-status">✅ File uploaded successfully</div>
-                   </div>""", gr.update()
+                   </div>""", gr.update(visible=False)
         
         def on_validate(file):
             if file is None:
@@ -136,9 +145,12 @@ def create_ui():
                 
                 html += f'''
                 <div class="validation-step" id="step-{i}">
-                    <div class="step-header" onclick="document.getElementById('details-{i}').style.display = document.getElementById('details-{i}').style.display === 'none' ? 'block' : 'none'">
-                        <div class="step-status {status_class}">{status_icon}</div>
-                        <div class="step-title">{test_name}</div>
+                    <div class="step-header" onclick="toggleDetails('{i}')">
+                        <div class="step-left" style="display: flex; align-items: center;">
+                            <div class="step-status {status_class}">{status_icon}</div>
+                            <div class="step-title">{test_name}</div>
+                        </div>
+                        <div class="arrow-indicator" id="arrow-{i}">▶</div>
                     </div>
                     <div class="step-details" id="details-{i}" style="display: none;">
                         {message}
@@ -148,6 +160,23 @@ def create_ui():
             
             html += '</div>'
             
+            html += '''
+            <script>
+            function toggleDetails(id) {
+                const details = document.getElementById('details-' + id);
+                const arrow = document.getElementById('arrow-' + id);
+                
+                if (details.style.display === 'none') {
+                    details.style.display = 'block';
+                    arrow.classList.add('arrow-down');
+                } else {
+                    details.style.display = 'none';
+                    arrow.classList.remove('arrow-down');
+                }
+            }
+            </script>
+            '''
+            
             return gr.update(value=html, visible=True)
         
         file_input.change(on_file_upload, inputs=file_input, outputs=[upload_progress, validation_results])