From 34ecaaffb1eebef6d509ed73db336c7bdb181e76 Mon Sep 17 00:00:00 2001
From: "A.J. Shulman" <Shulman.aj@gmail.com>
Date: Thu, 8 May 2025 15:54:56 -0400
Subject: improve: enhance ChatBox UI with consistent styling and better
 accessibility
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

• Fixed dictation button styling to match send button dimensions and colors
• Created dedicated DictationButton.scss for better button styling
• Removed vertical movement animations from all buttons for a more stable UI
• Fixed empty space issue below the "Show Agent Thoughts/Actions" button
• Implemented consistent hover effects across all interactive elements
• Ensured font size scaling works for agent thoughts/actions content
• Used Dash blue colors (#487af0, #3b6cd7) for consistent branding
• Improved microphone button state visualization with pulse animation
---
 src/client/views/DictationButton.scss | 73 +++++++++++++++++++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 src/client/views/DictationButton.scss

(limited to 'src/client/views/DictationButton.scss')

diff --git a/src/client/views/DictationButton.scss b/src/client/views/DictationButton.scss
new file mode 100644
index 000000000..ac8740c0f
--- /dev/null
+++ b/src/client/views/DictationButton.scss
@@ -0,0 +1,73 @@
+.dictation-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    min-width: 48px;
+    border-radius: 50%;
+    border: none;
+    background-color: #487af0;
+    color: white;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    box-shadow: 0 2px 8px rgba(72, 122, 240, 0.3);
+    padding: 0;
+    margin-left: 5px;
+    position: relative;
+    overflow: hidden;
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.3));
+        opacity: 0;
+        transition: opacity 0.25s ease;
+    }
+
+    &:hover {
+        background-color: #3b6cd7; /* Slightly darker blue */
+        box-shadow: 0 3px 10px rgba(72, 122, 240, 0.4);
+
+        &::before {
+            opacity: 1;
+        }
+
+        svg {
+            transform: scale(1.1);
+        }
+    }
+
+    &:active {
+        background-color: #3463cc; /* Even darker for active state */
+        box-shadow: 0 2px 6px rgba(72, 122, 240, 0.3);
+    }
+
+    &.recording {
+        background-color: #ef4444;
+        color: white;
+        animation: pulse 1.5s infinite;
+    }
+
+    svg {
+        width: 22px;
+        height: 22px;
+        transition: transform 0.2s ease;
+    }
+}
+
+@keyframes pulse {
+    0% {
+        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);
+    }
+    70% {
+        box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
+    }
+    100% {
+        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
+    }
+}
-- 
cgit v1.2.3-70-g09d2