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

[sarahfossheim]

Includes:

• Disable dropdowns until the filters are done loading
• Improvements to the hover effects on the dropdowns: Tech Report: Drop down click area #1001
• Icons don't move down to a new line when rescaling the screen anymore
• Improvements to the dark mode (incl. color contrast issues)
• Style selected items in the table (yellow background)
• Style hovers in the tables (blue background)

[tunetheweb]

I'm having trouble seeing any different with this change?:

Disable dropdowns until the filters are done loading

Can you explain exactly what changed here?

The rest looks good!

[sarahfossheim]

@tunetheweb when the page loads the dropdowns for technology/category, geo, and rank are disabled (and with subtle less contrast grayed out styling) until the API returns the list of technologies, geos and ranks to populate it with. Then the disabled attribute is removed and the <select> is populated with the <option>s.

---

Previously while API is loading:

Currently while API is loading:

After the API call is finished:
&

[tunetheweb]

Ah OK I can see it. But as the disabled attribute is added by JavaScript you get the following:

1. Page loads
2. Dropdown is rendered from HTML without disabled
3. JavaScript kicks in and adds disabled while API is loading?
4. API finishes loading and removes disabled.

This particular apparent when you use "Disable cache" and 3G settings in DevTools and reload when the time between steps 2 and 3 is load, but between 3 and 4 is short. And that is what I was testing and missed the bit between steps 3 and 4.

See this video:

screenrecording.mov

Shouldn't we set the disabled attribute in the original HTML and remove step 3?

[sarahfossheim]

@tunetheweb that should be updated and ready for another review :)

[tunetheweb]

This works well now in the Technologies page, but not the Comparisons page. Should we merge this and fix that in another PR? Or fix it in this PR?

[sarahfossheim]

@tunetheweb it's updated, but I can create a follow-up PR to make the code cleaner (there's two different filter sidebars with almost identical elements, can make it one reusable component)

[tunetheweb]

SGTM. Yeah noticed the duplicated myself, which is why I didn't do a suggestion :-)