Further ux improvements

Author: mchwalek

popup.css

@@ -2,7 +2,7 @@
     display: grid;
     grid-template-columns: 1fr 180px 65px;
     gap: 1px 0;
-    background-color: #000;
+    background-color: #bbb;
     width: 500px;
 }
 
@@ -23,7 +23,6 @@
 #content > #no-data-placeholder {
     grid-area: 3 / 1 / 3 / -1;
     text-align: center;
-    display: none;
     font-size: 15px;
     font-weight: bold;
 }

popup.html

@@ -17,7 +17,7 @@
             <div></div>
             <div></div>
         </div>
-        <div id="no-data-placeholder">no data</div>
+        <div id="no-data-placeholder">no data to display</div>
         <div id="token-table">
         </div>
     </div>

popup.js

@@ -38,6 +38,7 @@ function loadTokenTable(filterUrl) {
             tokenTable.appendChild(copyButtonDiv);
         }
 
+        toggleSearchContainer(filterUrl, tokensPresent);
         toggleNoDataPlaceholder(tokensPresent);
     });
 
@@ -91,6 +92,11 @@ function loadTokenTable(filterUrl) {
         return buttonDiv;
     }
 
+    function toggleSearchContainer(filterUrl, tokensPresent) {
+        const searchContainer = document.getElementById("search-container");
+        searchContainer.style.display = !filterUrl && !tokensPresent ? "none" : "contents";
+    }
+
     function toggleNoDataPlaceholder(tokensPresent) {
         const noDataPlaceholder = document.getElementById("no-data-placeholder");
         noDataPlaceholder.style.display = tokensPresent ? "none" : "block";