From 3ee43cea235e98a28b07aa2edba8ed4e105c4fb3 Mon Sep 17 00:00:00 2001
From: remsky <jeremy.braun@ucalgary.ca>
Date: Wed, 5 Feb 2025 23:00:19 -0700
Subject: [PATCH] Enhance button styles, add loading animation for generate
 button, and update cancel button appearance

---
 web/index.html          |  2 +-
 web/styles/controls.css | 60 +++++++++++++++++++++++++++++++++++++++++
 web/styles/player.css   | 19 ++++++++++---
 3 files changed, 77 insertions(+), 4 deletions(-)

diff --git a/web/index.html b/web/index.html
index ecc0f88..596df3e 100644
--- a/web/index.html
+++ b/web/index.html
@@ -111,7 +111,7 @@
                             <option value="pcm">PCM</option>
                         </select>
                     </div>
-                    <button id="cancel-btn" class="cancel-btn" style="display: none;">
+                    <button id="cancel-btn" class="player-btn cancel" style="display: none;">
                         Cancel
                     </button>
                 </div>
diff --git a/web/styles/controls.css b/web/styles/controls.css
index 8d23c36..89d1920 100644
--- a/web/styles/controls.css
+++ b/web/styles/controls.css
@@ -328,6 +328,66 @@
     color: var(--text);
 }
 
+/* Loading Animation */
+.loader {
+    display: none;
+    width: 24px;
+    height: 24px;
+    position: absolute;
+}
+
+.loader::before,
+.loader::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    border: 2px solid transparent;
+}
+
+.loader::before {
+    border-top-color: var(--text);
+    animation: spin 1s linear infinite;
+}
+
+.loader::after {
+    border-bottom-color: var(--fg-color);
+    animation: spin 1.5s linear infinite reverse;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+#generate-btn {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#generate-btn.loading .btn-text {
+    visibility: hidden;
+}
+
+#generate-btn.loading .loader {
+    display: block;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.5));
+}
+
+#generate-btn.loading .loader::before {
+    animation: spin 1s cubic-bezier(0.6, 0.2, 0.4, 0.8) infinite;
+}
+
+#generate-btn.loading .loader::after {
+    animation: spin 1.5s cubic-bezier(0.6, 0.2, 0.4, 0.8) infinite reverse;
+}
+
 /* Responsive Styles */
 @media (max-width: 768px) {
     .voice-options {
diff --git a/web/styles/player.css b/web/styles/player.css
index ffb66aa..f4f21de 100644
--- a/web/styles/player.css
+++ b/web/styles/player.css
@@ -187,6 +187,18 @@
     box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
 }
 
+/* Cancel Button Styles */
+.player-btn.cancel {
+    background: #976161;
+    color: #070707;
+    border: 1px solid #ffb3b3;
+}
+
+.player-btn.cancel:hover {
+    background: #ffbaba;
+    box-shadow: 0 4px 12px rgba(255, 87, 87, 0.2);
+}
+
 .wave-container {
     width: 100%;
     height: 60px;
@@ -210,7 +222,7 @@
     }
 
     .download-button {
-        top: 0.5rem;
+        bottom: 0.5rem;
         right: 0.5rem;
         width: 26px;
         height: 26px;
@@ -357,7 +369,7 @@
 
 .download-button {
     position: absolute;
-    top: 0.75rem;
+    bottom: 0.75rem;
     right: 0.75rem;
     width: 32px;
     height: 32px;
@@ -368,6 +380,7 @@
     transition: transform 0.2s ease;
     opacity: 0;
     pointer-events: none;
+    z-index: 10;
 }
 
 .download-button.ready {
@@ -381,7 +394,7 @@
     background: conic-gradient(
         from 0deg,
         var(--fg-color),
-        var(--success),
+        #6366f1,
         var(--fg-color)
     );
     border-radius: 4px;