Update app.py

app.py

@@ -838,51 +838,58 @@ def create_interface():
     # Custom CSS for the interface
     css = """
     #analyze-btn {
-        background-color: #FF8C00 !important;
+        background-color: #FF8C00 !important; /* Keep your analyze button style */
         border-color: #FF8C00 !important;
         color: white !important;
     }
     
-    /* Style the file upload to be more compact */
+    /* Style the file upload component container */
     .file-upload {
-        width: 150px !important;
-        margin-left: 15px !important;
+        min-width: 150px !important; /* Set a minimum width */
+        max-width: 200px !important; /* Set a maximum width */
+        margin-left: 15px !important; /* Keep the margin */
+        flex-grow: 0 !important; /* Prevent it from expanding too much */
+        overflow: hidden; /* Hide any overflowing default elements */
     }
     
-    /* Hide file preview elements */
-    .file-upload .file-preview,
-    .file-upload p:not(.file-upload p:first-child),
-    .file-upload svg,
-    .file-upload [data-testid="chunkFileDropArea"],
-    .file-upload .file-drop {
-        display: none !important;
-    }
-    
-    /* Style the upload button */
-    .file-upload button {
-        height: 40px !important;
-        width: 100% !important;
-        background-color: #f0f0f0 !important;
-        border: 1px solid #d9d9d9 !important;
+    /* Style the actual button inside the file component */
+    .file-upload > div > button.secondary { /* More specific selector for the button */
+        height: 40px !important; /* Match the desired height */
+        width: 100% !important; /* Make button fill the container width */
+        background-color: #e0e0e0 !important; /* A cleaner light grey */
+        border: 1px solid #bdbdbd !important; /* A slightly darker border */
         border-radius: 4px !important;
-        color: #333 !important;
+        color: #333 !important; /* Dark grey text for readability */
         font-size: 14px !important;
+        font-weight: 500; /* Slightly bolder text */
         display: flex !important;
         align-items: center !important;
         justify-content: center !important;
-        margin: 0 !important;
-        padding: 0 !important;
+        padding: 0 10px !important; /* Horizontal padding */
+        text-align: center;
+        line-height: normal !important; /* Use normal line height */
+        box-shadow: none !important; /* Remove default shadows */
+        transition: background-color 0.2s ease; /* Add a hover effect */
     }
     
-    /* Hide the "or" text */
-    .file-upload .or {
+    .file-upload > div > button.secondary:hover {
+        background-color: #d5d5d5 !important; /* Darken slightly on hover */
+    }
+    
+    
+    /* Hide unnecessary default text elements within the file component */
+    .file-upload > div > div[data-testid="block-label"], /* Hide the block label */
+    .file-upload > div > div > p, /* Hide paragraphs like 'or Drag-and-Drop' */
+    .file-upload > div > div > .or /* Hide the 'or' text */
+    {
         display: none !important;
     }
     
-    /* Make the container compact */
-    .file-upload [data-testid="block"] {
-        margin: 0 !important;
-        padding: 0 !important;
+    /* Clean up the styling of the area containing the button */
+    .file-upload > div > div > .w-full {
+         padding: 0 !important; /* Remove padding */
+         border: none !important; /* Remove border */
+         background: none !important; /* Remove any background */
     }
     """