DH/Improve navigation button style

[cmoinier]

Description

This PR addresses the request to have a return button (in record page) that is easier to find. Some users struggle to find the current return button with a complex background image :

After consulting Lucile it was decided to invert the button style, and have a white and transparent background and the text in back + a shadow.

[github-actions]

Affected libs: ui-inputs, feature-dataviz, feature-record, feature-router, feature-editor, feature-search, feature-map, ui-elements, feature-catalog, ui-catalog, ui-search,
Affected apps: metadata-converter, metadata-editor, datahub, demo, webcomponents, search, datafeeder, map-viewer,

• 🚀 Build and deploy storybook and demo on GitHub Pages
• 📦 Build and push affected docker images

[coveralls]

coverage: 81.96% (-4.7%) from 86.617%
when pulling ab9e549 on DH/improve-record-page-return-btn
into 5f1c197 on main.

[jahow]

Maybe we could also leverage https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode to make sure that buttons on top of any background are visible?

[jahow]

There's also this which can be very useful: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter

Wide spread support is still quite fresh but e.g. blurring the backdrop of an element is a great effect for readability.

[cmoinier]

@jahow Thanks for the suggestions! Last commit adds a shadow (it couldnt render in first commit) + the best mix-blend option I could find.

Backdrop-filter also looks interesting, but I don't think we can keep the shadow if we use this (both together look weird IMO). Having a shadow is quite important in case of very light/white backgrounds. What do you think?

[jahow]

I tried using the backdrop blur and reworked the markup a bit:

This is the markup that I used:

<button
  type="button"
  class="relative backdrop-blur group flex items-center justify-center p-1 text-white rounded overflow-hidden"
>
  <div
    class="absolute -z-0 inset-0 bg-primary opacity-40 group-hover:opacity-100 transition duration-[20ms]"
  ></div>
  <mat-icon class="z-0 material-symbols-outlined align-middle">{{
    icon
  }}</mat-icon>
  <span class="z-0 mx-2 hidden group-hover:inline">{{ label }}</span>
</button>

The backdrop that changes opacity is a separate element, the rest is always at full opacity. What do you think?

PS: I tried using the blend modes but it won't work all the time un less we do invert or something (which looks weird).

[jahow]

Also I tried using the same technique on the badges below the search input and it looks ok I think?

BTW we should make sure to use the same component everywhere, currently there are three different kinds

[cmoinier]

With a pink-ish image in the background, it's hard to find though :

[jahow]

Yes that's true.

[fgravin]

Definitely backdrop-filter is great, it's what is used in Felt for the popups over the map, and the rendering is way better than just transparent.
backdrop-filter: blur(10px);

[fgravin]

BTW, if anyone could animate the back to search button with a transition, it will be a nice 🎁
🤩

[fgravin]

I've made it simple, works well for Saint Dizier. I did not want to have a complete different button than the others (shadow, color etc...)
I've homogeneized transparent button

• opacity 50
• blur(8px)