Apps bar quick fixes

[edenhernandez-suse]

We have identified several quick fixes/improvements to the Apps bar:

• Blocks borders While using a highly contrasted active background colour, the selected Cluster block should not have a border:

• Burger icon section bottom border The burger icon button is separated from the rest of the bar with a bottom border. We should remove it so the whole Apps bar looks like the same piece of UI:

............

• Pin icon size Resize the icon to 14px to compensate for the 2px of surrounding air.

• Deployed bar shadow Add a subtle shadow for the deployed version. Try first an already existing shadow variable, if it does not work in one or both themes we'll design a new one.

• Reduced transitions time All transitions (apps bar expanded/collapsed, category titles transformations, etc.) should be reduced to .25s.

• Add a magnifier icon to the search input + Resize reset button There is already a filter input on every resource page. We can use it to keep consistency...

... or use a new one, where we can add a magnifier glass, very useful since we don't have a label for this input field:

@scures will take care of them.

• [x] Blocks borders
• [x] Burger icon section bottom border
• [x] Pin icon size
• [x] Deployed bar shadow
• [x] Reduced transitions time
• [x] Filter input field

[nwmac]

Needs sizing

[IsaSih]

IsaSih said: For the blocks border, I still see the borders as shown in the screenshot @scures

[IsaSih]

Filter bar does not have the magnifier icon nor the inside text "Filter clusters by..." in both the home page and the cluster management list. Is this expected to be implemented in all filter bars?

[edenhernandez-suse]

@IsaSih the filter text field was designed for the Apps Bar specifically.

Since it is not a shared component, other filters are not affected. It would be nice to have a consistent approach to this kind of fields but tables (and their filtering options) will be redesigned at some point, so for the time being it's fine to keep them as they are.

[gaktive]

We'll need to note this when we redesign the table in an upcoming version.

Internal reference: UXUI-199

[IsaSih]

Tests pass on v2.9-16190ecee0aa3fb4aa570aa0fc932a36d9dcd082-head