feat(ui): Add text labels to action buttons for clarity

[NoorChasib]

Description:

This PR enhances UI clarity by adding descriptive text labels to header icons and implementing tooltips for the main action icon buttons.

Motivation:

The goal is to improve usability and reduce potential confusion for all users. Explicit text labels in the header section make the function of those elements immediately clear. For the main action buttons (like Info, Undo, etc.), tooltips were added to clarify icon function upon hover, providing necessary context without permanently adding text to that potentially dense button area.

Changes:

• Added descriptive text labels next to icons in the header section.
• Implemented descriptive tooltips for main action icon buttons (Info, Undo, Download, Copy, etc.). (Changed from original plan of adding text labels here).
• Included corresponding translations for the new header labels and action button tooltip text.
• Code has been formatted using npm run format.

Visuals:

Before:

After:

[stonith404]

Thanks for your contribution :)

I would suggest to use tooltips instead of adding the text directly to the buttons. This would keep the UI compact but still describe each action for new users.

[NoorChasib]

Hi @stonith404, thank you for the feedback!

That's a good point about keeping the UI compact. My initial reason for adding text directly was for mobile users, since tooltips aren't really a thing there. But if you think tooltips are the better overall approach, I'm happy to switch to that

[stonith404]

I just think especially on mobile the buttons just take too much space:

But regarding mobile users, you could use the Mantine Tooltip which also supports touch devices.

[NoorChasib]

@stonith404 I hadn't realized Mantine Tooltip was also available on mobile. Since that's the case, I'll adjust the PR and switch to using tooltips!

[NoorChasib]

@stonith404 Please take a look over, when you get a chance!

[stonith404]

Sorry for my late response. Here are some things I would recommend to change.

[stonith404]

I think this looks a bit inconsistent. I would keep the icon buttons but add a tooltip.

[stonith404]

I would keep the download buttons purple, because that's the primary color.

[stonith404]

Could you create a component that wraps Tooltip with its common properties? For example the position, multiline and events are the same for every tooltip.