The group headers in the OPTIMADE client are not visually distinguished and clickable

[csadorf]

Describe the bug

When using the OPTIMADE client for structure selection, the group headers ("General", "Projects", etc.) are not visually distinguished and clickable.

To Reproduce
Steps to reproduce the behavior:

1. In a terminal, run:

git clone https://github.com/aiidalab/aiidalab-docker-stack
cd ./aiidalab-docker-stack/
pip install -r requirements-manage.txt  # for docker-compose and click
./manage.py configure --app quantum-espresso==21.10.0b1
./manage.py --develop -v up

2. Open the QE app.
3. Select the "OPTIMADE" tab for the structure selection.
4. Select "Materials Cloud" as the provider.
5. Open the list of databases.

qe-app-issue-134_how2reproduce.mp4

Version (if known)

• App version: v21.11.0b1

Additional context

This problem is related to the following issues:

• Group headers in DropdownExtended not visually distinguished and clickable CasperWA/voila-optimade-client#369
• Grouping formatting and HTML attributes not always working CasperWA/ipywidgets-extended#48
  Add any other context about the problem here.

[unkcpz]

I think this needs to be fixed on repo https://github.com/CasperWA/ipywidgets-extended. Will take a look at it.