UI Improvements: dark mode fixes, clearer hover styles, disable dropdowns, and responsive design table (#1024)

* update dropdown hovers, tech icons, gradients,

* improve darmode

* update color contrast darkmode

* fix css and html linting

* disable dropdowns in html

* disable category dropdowns until loaded

Author: sarahfossheim

src/js/components/drilldownHeader.js

@@ -34,13 +34,19 @@ function setCategories(categories) {
       cellTemplate.textContent = `+ ${more} more`;
       list.appendChild(cellTemplate);
     }
+  } else {
+    const list = document.querySelector('.intro .category-list');
+    list.remove();
   }
 }
 
 function setDescription(description) {
   if(description && description !== "") {
     const descr = document.querySelector('p.app-description');
     descr.textContent = description;
+  } else {
+    const descr = document.querySelector('p.app-description');
+    descr.remove();
   }
 }
 

src/js/techreport/index.js

@@ -366,6 +366,7 @@ class TechReport {
       },
     ];
 
+    const filters = document.querySelectorAll('.filters select');
     Promise.all(filterApis.map(api => {
       const url = `${Constants.apiBase}/${api.endpoint}`;
 
@@ -380,6 +381,8 @@ class TechReport {
       FilterComponent.updateTechnologies();
       FilterComponent.updateRank();
       FilterComponent.updateGeo();
+
+      filters.forEach(filter => filter.removeAttribute('disabled'));
     });
   }
 

src/js/techreport/tableLinked.js

@@ -102,18 +102,22 @@ class TableLinked {
               cell = document.createElement('th');
               cell.classList.add('app-cell');
 
+              const wrapper = document.createElement('span');
+              wrapper.classList.add('app-wrapper');
+
               const img = document.createElement('span');
               const imgUrl = `https://cdn.httparchive.org/static/icons/${encodeURI(technology[0]?.icon)}`;
               img.setAttribute('aria-hidden', 'true');
               img.setAttribute('style', `background-image: url(${imgUrl})`);
               img.classList.add('app-img');
-              cell.append(img);
+              wrapper.append(img);
 
               const formattedApp = DataUtils.formatAppName(app);
               const link = document.createElement('a');
               link.setAttribute('href', `/reports/techreport/tech?tech=${app}&geo=${geo}&rank=${rank}`);
               link.innerHTML = formattedApp;
-              cell.append(link);
+              wrapper.append(link);
+              cell.append(wrapper);
             } else if (column.type === 'checkbox') {
               cell = this.addColumnCheckbox(app);
             } else if(column.key === 'client') {

static/css/techreport/general.css

@@ -39,7 +39,7 @@ strong {
 }
 
 :is(a, button, select):focus-visible {
-  outline: 1.5px solid var(--color-teal-dark);
+  outline: 1.5px solid var(--focus-default);
   outline-offset: 1.5px;
   border-radius: 3px;
 }
@@ -68,7 +68,7 @@ nav li:hover {
   padding: 1.5rem;
   background: var(--color-card-background);
   border-radius: var(--card-radius);
-  border: 1px solid var(--color-card-border-light);
+  border: 1px solid var(--color-card-border);
   box-shadow: var(--card-shadow);
   transition: padding 0.35s;
 }
@@ -124,6 +124,7 @@ nav li:hover {
   width: 25rem;
   max-width: 100vw;
   position: relative;
+  border-right: 1px solid var(--color-card-border);
 }
 
 .split-view:has(.filters.hidden) .page-content {