ready

src/ui/drop_zone.rs

@@ -15,7 +15,7 @@ impl DropZone {
         F: FnMut(Vec<PathBuf>),
     {
         let available_width = ui.available_width();
-        let height = 120.0;
+        let height = 140.0;
 
         // Check for drag-and-drop hover state
         let is_hovering = ui.ctx().input(|i| !i.raw.hovered_files.is_empty());
@@ -82,35 +82,57 @@ impl DropZone {
             }
         }
 
-        // Draw text
-        let text = if self.is_hovering {
-            "Drop files here"
-        } else {
-            "Drag and drop files here\nor click to browse"
-        };
-
+        // Text colors
         let text_color = if self.is_hovering {
             Color32::WHITE
         } else {
             Color32::from_gray(180)
         };
 
-        ui.painter().text(
-            rect.center(),
-            egui::Align2::CENTER_CENTER,
-            text,
-            egui::FontId::proportional(16.0),
-            text_color,
-        );
+        let font = egui::FontId::proportional(20.0);
+        let hint_font = egui::FontId::proportional(15.0);
 
-        // Supported formats hint
-        ui.painter().text(
-            egui::pos2(rect.center().x, rect.max.y - 20.0),
-            egui::Align2::CENTER_CENTER,
-            "GIF, PNG, JPEG, WebP, MP4, MOV, WebM",
-            egui::FontId::proportional(11.0),
-            Color32::from_gray(120),
-        );
+        // Calculate vertical positions for all text elements to be visually centered together
+        // Main text line height ~24px, hint ~18px, spacing between ~12px
+        // Total height: 24 + 24 + 12 + 18 = ~78px for non-hover, center that in rect
+        let total_text_height = 78.0;
+        let top_of_text = rect.center().y - total_text_height / 2.0;
+
+        if self.is_hovering {
+            // Single line when hovering - center it
+            ui.painter().text(
+                rect.center(),
+                egui::Align2::CENTER_CENTER,
+                "Drop files here",
+                font,
+                text_color,
+            );
+        } else {
+            // Line 1: "Drag and drop files here"
+            ui.painter().text(
+                egui::pos2(rect.center().x, top_of_text + 12.0),
+                egui::Align2::CENTER_CENTER,
+                "Drag and drop files here",
+                font.clone(),
+                text_color,
+            );
+            // Line 2: "or click to browse"
+            ui.painter().text(
+                egui::pos2(rect.center().x, top_of_text + 38.0),
+                egui::Align2::CENTER_CENTER,
+                "or click to browse",
+                font,
+                text_color,
+            );
+            // Hint line at bottom of text block
+            ui.painter().text(
+                egui::pos2(rect.center().x, top_of_text + 66.0),
+                egui::Align2::CENTER_CENTER,
+                "GIF, PNG, JPEG, WebP, MP4, MOV, WebM",
+                hint_font,
+                Color32::from_gray(140),
+            );
+        }
 
         // Handle click to open file dialog
         if response.clicked() {