restore fixed chat window height, listening button colors

NeonGeckoCom · Jan 21, 2024 · a8c995d · a8c995d
1 parent 6e44fd4
commit a8c995d
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/neon_iris/static/scripts/audio.js b/neon_iris/static/scripts/audio.js
@@ -102,8 +102,10 @@ startButton.addEventListener("click", function () {
   // Update the button's text and class based on the recording state
   if (AudioHandler.isRecording()) {
     startButton.classList.add("listening");
+    startButton.classList.toggle("bg-blue-500");
     startButton.textContent = "Listening...";
   } else {
+    startButton.classList.toggle("bg-blue-500");
     startButton.classList.remove("listening");
     startButton.textContent = "Start Listening";
   }

diff --git a/neon_iris/static/styles.css b/neon_iris/static/styles.css
@@ -1,6 +1,7 @@
 #startButton.listening {
-  background-color: #03a9f4;
+  background-color: var(--color-neon-green);
 }
+
 /* Style for user messages */
 .user-message {
   background-color: #007bff; /* Blue background for user messages */
@@ -30,4 +31,6 @@
   flex-direction: column;
   height: 100%;
   background-color: #1a1a1a;
+  overflow: auto;
+  max-height: calc(100vh - 20vh);
 }
diff --git a/neon_iris/templates/index.html b/neon_iris/templates/index.html
@@ -32,15 +32,16 @@
       </div>
       <button
         id="startButton"
-        class="btn mx-auto my-6 px-6 py-3 rounded shadow-lg text-white transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-green-700 dark:bg-neon-green"
-        style="background-color: var(--color-neon-green)"
+        class="btn mx-auto my-6 px-6 py-3 rounded shadow-lg text-white transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-blue-700 bg-blue-500"
       >
         Start Recording
       </button>
-      <div class="chat-window flex-grow p-4 overflow-auto">
+      <div
+        class="chat-window flex flex-col flex-grow max-h-full overflow-hidden md:max-h-3/4"
+      >
         <div
           id="chatHistory"
-          class="flex flex-col items-start space-y-2 overflow-y-auto"
+          class="flex flex-col items-start space-y-2 overflow-y-auto p-4"
         >
           <!-- Chat messages will appear here -->
         </div>