only show text background color picker if text tool is active

src/index.html

@@ -134,7 +134,11 @@
                 <button tool="text" title="write text" type="button" class="whiteboard-tool">
                     <i class="fas fa-font"></i>
                 </button>
-                <button title="text background-color">
+                <button
+                    id="textboxBackgroundColorPickerBtn"
+                    style="display: none"
+                    title="text background-color"
+                >
                     <div
                         id="textboxBackgroundColorPicker"
                         style="
@@ -142,6 +146,9 @@
                             height: 23px;
                             border-radius: 3px;
                             border: 1px solid darkgrey;
+                            left: -4px;
+                            top: -2px;
+                            position: relative;
                         "
                         data-color="#f5f587"
                     ></div>

src/js/main.js

@@ -304,6 +304,12 @@ function initWhiteboard() {
                 } else {
                     $(".activeToolIcon").html($(this).html()); //Set Active icon the same as the button icon
                 }
+
+                if (activeTool == "text") {
+                    $("#textboxBackgroundColorPickerBtn").show();
+                } else {
+                    $("#textboxBackgroundColorPickerBtn").hide();
+                }
             });
 
         // upload image button