color adjustments for added visibility

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>

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);   

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;