From 6e950bb45f0a65299df5aae80694353b929814ae Mon Sep 17 00:00:00 2001
From: Michal Vrba <michal.vrba@gmai.com>
Date: Fri, 12 Dec 2025 21:21:31 +0100
Subject: [PATCH] Improve UX and update UI color scheme to blue

- Add @onblur and @onmousedown handlers to input/button for better focus and click behavior
- Change download button disabling logic to only depend on processing state
- Update progress bars, status, and card colors from green to blue
- Add .output-message CSS class for blue-themed output messages
- Adjust pulse animation to use blue tones
- Add OnInputBlur and PreventDefault methods for improved input/button interaction
---
 TuneRipper/Pages/Home.razor | 45 +++++++++++++++++++++++++++++--------
 1 file changed, 36 insertions(+), 9 deletions(-)

diff --git a/TuneRipper/Pages/Home.razor b/TuneRipper/Pages/Home.razor
index af0dafc..0b95567 100644
--- a/TuneRipper/Pages/Home.razor
+++ b/TuneRipper/Pages/Home.razor
@@ -32,12 +32,14 @@
                 <input type="text" 
                        @bind="youtubeUrl" 
                        @onkeypress="HandleKeyPress"
+                       @onblur="OnInputBlur"
                        placeholder="Paste your YouTube link here..." 
                        class="url-input"
                        disabled="@isProcessing" />
                 <button @onclick="DownloadMp3" 
+                        @onmousedown="PreventDefault"
                         class="download-btn" 
-                        disabled="@(string.IsNullOrWhiteSpace(youtubeUrl) || isProcessing)">
+                        disabled="@(isProcessing)">
                     <span class="btn-icon">🎵</span>
                     @if (isProcessing)
                     {
@@ -167,7 +169,7 @@
     .progress-bar {
         width: 100%;
         height: 8px;
-        background-color: #e0e0e0;
+        background-color: #e8ecf4;
         border-radius: 4px;
         overflow: hidden;
         margin-bottom: 10px;
@@ -175,14 +177,15 @@
 
     .progress-container.with-video-details .progress-bar {
         height: 6px;
-        background-color: #d1d9ff;
+        background-color: #e1e5ed;
     }
 
     .progress-fill {
         height: 100%;
-        background: linear-gradient(90deg, #4CAF50, #45a049);
+        background: linear-gradient(90deg, #1e88e5, #2196f3);
         border-radius: 4px;
         transition: width 0.3s ease;
+        box-shadow: 0 0 8px rgba(33, 150, 243, 0.4);
     }
 
     .progress-text {
@@ -314,8 +317,8 @@
     }
 
     .video-info-card.processing {
-        border-color: #4CAF50;
-        box-shadow: 0 2px 12px rgba(76, 175, 80, 0.15);
+        border-color: #1e88e5;
+        box-shadow: 0 2px 12px rgba(30, 136, 229, 0.15);
     }
 
     .video-thumbnail {
@@ -375,10 +378,20 @@
         text-align: center;
     }
 
+    .output-message {
+        margin-top: 15px;
+        padding: 12px;
+        background: #f0f9ff;
+        border: 1px solid #bae6fd;
+        border-radius: 8px;
+        color: #0369a1;
+        text-align: center;
+    }
+
     .conversion-status {
         margin-top: 8px;
         padding: 8px 12px;
-        background: linear-gradient(90deg, #4CAF50, #45a049);
+        background: linear-gradient(90deg, #1e88e5, #2196f3);
         color: white;
         border-radius: 6px;
         display: flex;
@@ -406,11 +419,11 @@
     @@keyframes pulse {
         0%, 100% { 
             transform: scale(1);
-            box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.4);
+            box-shadow: 0 0 0 0 rgba(30, 136, 229, 0.4);
         }
         50% { 
             transform: scale(1.02);
-            box-shadow: 0 0 0 10px rgba(76, 175, 80, 0);
+            box-shadow: 0 0 0 10px rgba(30, 136, 229, 0);
         }
     }
 
@@ -692,4 +705,18 @@
             await DownloadMp3();
         }
     }
+
+    // Prevent default blur behavior to allow immediate button clicking
+    private void OnInputBlur()
+    {
+        // This method intentionally left empty to capture blur event without action
+        // This helps maintain focus state for better UX
+    }
+
+    // Prevent mousedown default to allow immediate button click
+    private async Task PreventDefault(MouseEventArgs e)
+    {
+        // Allow the button click to proceed immediately without waiting for blur
+        await Task.CompletedTask;
+    }
 }