💄 📦 use fontawesome icons in AppBar

[jdhoffa]

• 📦 gains fontawesome dependency
• use fontawesome icons instead of buttons

Before

After

Towards #91

[jdhoffa]

I will wait for @MonikaFu 's review here, as this PR adds a new dependency (and also is a totally superfluous style change, so not urgent)

[github-actions]

Docker build status

commit_time	git_sha	image
2024-12-08T22:07:49Z	51fbef5	ghcr.io/rmi-pacta/pacta-dashboard-svelte:pr-108

[MonikaFu]

Not sure if it is a good change. Maybe for GitHub it is but not sure if the save is clear enough as an icon to be honest.

[jdhoffa]

Not sure if it is a good change. Maybe for GitHub it is but not sure if the save is clear enough as an icon to be honest.

Yup totally fair enough. I thought it looked more elegant than the buttons, but perhaps also less user friendly.

With that said, I imagine if a user was curious they would just click the icon, and relatively quickly understand that it saves a data_archive ¯_(ツ)_/¯

[jdhoffa]

I do feel that the icons look more professional though...

Before

After

[jdhoffa]

I added a hover effect which could be a compromise (although I'm also not convinced of this):

(Sorry the screenshot is sort of bogus)

[jdhoffa]

@MonikaFu FYI, a call with @hodie lead to the following feedback:

• The icons look more professional than the buttons
• The buttons/ text is more user-friendly than the icons
• Both features in question (GitHub, downloading an archive of the data) are likely reserved for pretty advanced users either way

A general comment was also made:
These icons probably shouldn't be in the AppBar, but rather in a footer of the dashboard. They should exist and be available to advanced users who know what they want/ know that the buttons are there, but don't need to be front and center.

Overall actions then are:

• Review/ merge this PR
• Probably open a new issue/ PR to move icons to the footer of the page (not critically important right now)
  • Tracked in 🎨 move advanced features to a less dominant part of the dashboard #135

[hodie]

@MonikaFu FYI, a call with @hodie lead to the following feedback:

• The icons look more professional than the buttons
• The buttons/ text is more user-friendly than the icons
• Both features in question (GitHub, downloading an archive of the data) are likely reserved for pretty advanced users either way

A general comment was also made: These icons probably shouldn't be in the AppBar, but rather in a footer of the dashboard. They should exist and be available to advanced users who know what they want/ know that the buttons are there, but don't need to be front and center.

Overall actions then are:

• Review/ merge this PR

• Probably open a new issue/ PR to move icons to the footer of the page (not critically important right now)

  • Tracked in 🎨 move advanced features to a less dominant part of the dashboard #135

Just one clarification: the conclusion was to have icons.

If/when we have a proper bottom bar (like e.g. here on GitHub) there should be a text for GitHub just as there should be for Terms, Security, Contact. The download action probably does make sense to have on top since it's an action about the content.

But the whole top bar will need to be reviewed once we can test it end-to-end and the dashboard is embedded into another page. Seems like a top-bar and especially the RMI logo will be confusing in that context.

[github-actions]

PR Preview Action v1.4.8
Preview removed because the pull request was closed.
2024-12-09 12:51 UTC

[jdhoffa]

FYI @MonikaFu I removed the hover over effect cause it was clunky and distracting, but this is ready for review now.

[MonikaFu]

Adding a title to the icons results in a small banner appearing when they hover over the icon for longer. I think it adds a bit to the user friendliness without sacrificing the lean look of the icons.

[MonikaFu]

LGTM