From 523ab0f0532be8ef7a0f6b25a4aae54fc2afcbf3 Mon Sep 17 00:00:00 2001
From: Jeremy Dixon <j.dixon.meta@gmail.com>
Date: Sun, 8 Aug 2021 13:02:22 -0500
Subject: [PATCH] color adjustments for added visibility

---
 components/toolbar.html |  2 +-
 script_foreground.js    |  3 +++
 styles.css              | 13 ++++++++++++-
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/components/toolbar.html b/components/toolbar.html
index eb21b15..a28bb0b 100644
--- a/components/toolbar.html
+++ b/components/toolbar.html
@@ -1,4 +1,4 @@
-<div id='toolbar'>
+<div id='toolbar' class="waiting">
     <h1>Ask<span>Assist</span></h1>
     <div id="volume">
         <div></div>
diff --git a/script_foreground.js b/script_foreground.js
index 29d55d4..9542b66 100644
--- a/script_foreground.js
+++ b/script_foreground.js
@@ -154,8 +154,10 @@ function appendTool(html){
         let watching = document.querySelector('#watching');
         let waitBrach = document.querySelector('#waiting-branch');
         let watchBrach = document.querySelector('#watching-branch');
+        let toolbarDiv = document.querySelector('#toolbar');
         let volume = document.querySelector('#volume');
         waiting.addEventListener('click', function(){
+            toolbarDiv.classList = "watching";
             waitBrach.style.display = "none";
             watchBrach.style.display = "inline";
             timer = setInterval(function(){
@@ -168,6 +170,7 @@ function appendTool(html){
             return timer;
         });
         watching.addEventListener('click', function(){
+            toolbarDiv.classList = "waiting";
             waitBrach.style.display = "inline";
             watchBrach.style.display = "none";
             clearInterval(timer);   
diff --git a/styles.css b/styles.css
index 83b534b..4fac356 100644
--- a/styles.css
+++ b/styles.css
@@ -15,11 +15,16 @@
     width: 30px;
     background-color:transparent;
     border-radius: 15px;
-    border-right: 3px solid #5FB4D8;
     display: inline;
     float: left;
     position: absolute;
 }
+#toolbar.waiting>#volume div{
+    border-right: 3px solid rgb(220, 89, 96);
+}
+#toolbar.watching>#volume div{
+    border-right: 3px solid #5FB4D8;
+}
 
 #volume div:first-child{
     bottom: 40%;
@@ -64,6 +69,12 @@
     font-style: italic;
     font-weight: bold;
 }
+#toolbar.watching>h1>span{
+    color:#5FB4D8;
+}
+#toolbar.waiting>h1>span{
+    color: rgb(220, 89, 96);
+}
 
 [contenteditable="true"]{
     cursor: text !important;