RI-7554 Rework the actions button on the browser page

[valkirilov]

Description

Rework the visuals of the actions button on the Browser page.

• change the "Bulk Actions" button type
• remove the "+" icon from the "Add keys" button

Before	After
Normal state	-
Hover state	-

[github-actions]

Code Coverage - Frontend unit tests

St.❔	Category	Percentage	Covered / Total
🟢	Statements	82.16%	20007/24351
🟡	Branches	67.55%	8678/12847
🟡	Functions	76.29%	5324/6979
🟢	Lines	82.58%	19587/23718

Test suite run success

5157 tests passing in 677 suites.

Report generated by 🧪jest coverage report action from 83e52f6

[ArtemHoruzhenko]

I can see that buttons are not aligned vertically

[valkirilov]

I can see that buttons are not aligned vertically

This is what I call "sharp eyes", thanks for spotting that!

Edit: After feedback from the Redis UI team, it seems like we shouldn't extend the TextButton to support multiple sizes, so we're going with what we have:

• vertically center the items between each other
• align the action buttons with the navigation

The issue was caused by the fact that the TextButton (Bulk Actions) wasn't supporting the same sizes as the RegularButton (Add Keys), leading to them both being misaligned.

Redis UI provides a single fixed size for the TextButton, so I had to extend its interface and make it support the same sizes as the rest of the buttons (small, medium, and large). And to keep it consistent, we'll use the same sizes, provided by Redis UI. I hope that one day they may support this behavior by default.

Here is the end result:

Example	Guidelines	Centered

[ArtemHoruzhenko]

lgtm

[pd-redis]

this is bugging me, but I guess it should be fixed in dedicated ticket

[valkirilov]

This is a fix to make the action buttons and the navigation in line.

[pd-redis]

I mean the inline style is bugging me, not the value :)