web: Use meaningful icons in Storage proposal page

[dgdavid]

During the presentation of #1138, it was seen that the shadow icon chosen for some of the actions opening a dialog created confusion in some attendees when other no-iconized actions opened a dialog too.

Somehow, it was forgotten one of the principles followed in the Agama UI until now: an action (link, button, button dressed up as a link, menu item, etc) should be easily recognizable by users as an element they can interact with in the way they use to do it. I.e., it's not needed to identify if the action opens a dialog, navigates to another page, to another section of the same page, opens a menu, shows or hides a sidebar, etc, since the same action that today opens a dialog in the future might navigate to another page instead.

Proposed changes here fix the issue by replacing these icons with ones that represent the concept of the action or by none when it would hamper more than help. Keep in mind that icons are merely cosmetic aids for sight people, reason why the meaning of the actions must not be determined by them. The UI must still be meaningful if, for whatever reason, icons disappear.

Of course, the ones proposed here can be changed at any point when better suggestions arise. But remember that at this moment we're mainly relying on https://fonts.google.com/icons. We can change our mind in the future, but choosing a consistent library of icons instead of grabbing them from here and there. For example, Lucid icons could be a good candidate for a library replacement, but in a future PLEASE.

Before	After

[coveralls]

coverage: 74.817% (-0.002%) from 74.819%
when pulling 17f45a0 on fix-storage-proposal-icons
into 589663f on master.

[joseivanlopez]

LGTM

[ancorgs]

I like all the changes

I'm just not sure about the icon for "Find Space". I admit it's a very challenging one, but I believe this one would fit better (absolutely subjective opinion):

Or maybe also any of these other options:

I understand none of them is great, but the one on this pull request looks too much like a searching functionality... which "Find Space" is not.

[dgdavid]

Yeah, it was suspicious to get the PR merged as quick as it was 😉

To be honest, for this case I like none of your proposals. But, I do not like the magnifying glass neither. Moreover, I believe I even do not like the "Find space" label neither, nor the final implementation we have in that dialog.

But, I just wanted to go ahead having in mind that icons should be just an (small, insignificant) aid. Without any intention of play down the importance they deserves, I wouldn't like to focus more than needed now in the tiny details.

That said, let me explain why I have chosen that icon even when I'm not fully happy with it:

• If you search "scan", you can see that Qr and barcode scan icons are enclosed in the same square

  

• I actually wanted to use "Flex Wrap" or "Flex No Wrap", which looks more meaningful to me since I think they could represent empty and full spaces. But, I though adding one of them would raise a discussion 🥲

  

• What is more, I liked one icon from Lucid Icons, but I feel I should not invest my time right now in a proposal for switching from one library to another, since I'd like to think slowly about it before make the movement.
  

But, please, do not hesitate on making a PR if you feel the "Tune" one will be less confusing for the users. You'll have my LGTM for getting rid of the current one 😉

[dgdavid]

• I actually wanted to use "Flex Wrap" or "Flex No Wrap", which looks more meaningful to me since they represents empty and full spaces. But, I though adding one of them would raise a discussion

I also was tempted on using the "Qr scan" one, but it's too tied to a widely known concept for using it.