feat(ux): improve download cid

[hacdias]

Closes #1135.

I'm working on improving the UX around downloading a CID content. Since Electron does not support prompts natively, I need to implement them! I need to have two color schemes: for dark and light themes that match minimally macOS and Windows so they look relatively good when compared to the native dialogs.

Or we can take a IPFS-looking approach.

Here is what I have for the dark mode now:

@jessicaschilling @lidel could you help me with the color schemes? And the copy, please? 😄

[jessicaschilling]

Some suggestions for text changes - @lidel should validate these too though 😊

[jessicaschilling]

I left some comments on the text -- thank you!
As for colors ... rather than not match any OS's dark or light mode, maybe we specifically match one OS color scheme? What's our most frequently used OS?

[hacdias]

@jessicaschilling the downloads say Windows. The statistics say Linux, which I doubt. Even though there are much more sessions on macOS and Windows, it says the number of unique visitors is really small.

I don't believe 39 visitors can make 31 thousand sessions.

The sessions I believe they're correct, just not the visitors. Wdyt @lidel?

[hacdias]

So, after a bit of experimentation. Here's how they look on macOS:

On Windows (the colors actually match better than I thought):

Unfortunately, Windows and Electron still have some problems recognizing dark themes so there are things such as title bars that are not yet dark, but... we can't do anything about that!

(About button disposition: https://www.nngroup.com/articles/ok-cancel-or-cancel-ok)

[jessicaschilling]

Good call on following NN guidance on buttons!

[lidel]

For some reason the current flow is confusing to me (or I should 💤 🤔 ):

1. click on "Download" in the menu,
2. see a window where you enter CID with a "Download" button
   • "download where? I guess MFS?"
3. click "Download"
   • surprise: you don't download CID to your MFS, but are asked to select a destination via a directory picker provided by operating system.

What if:

• label above the input sets expectation about what will happen next?
  "Enter a CID or IPFS path. In the next step you will select destination where to download its contents."
  or something along those lines?
• "Download" should be renamed to "Proceed" ?

---

Not sure about the blue button, it looks alien on mac and linux:

Perhaps it will look better if we reuse ipfs-css in this dialog, make it feel like a part of webui family?

[hacdias]

label above the input sets expectation about what will happen next?

I don't mind changing, but I think @jessicaschilling should give their opinion here 😃

"Download" should be renamed to "Proceed"

Hmm... but we are, effectively, downloading something, aren't we?

Not sure about the blue button, it looks alien on mac and linux:

Haha macOS actually uses blue buttons for the default option. However, I'm pretty sure is not that blue.

Edit: see comment bellow.

Perhaps it will look better if we reuse ipfs-css in this dialog, make it feel like a part of webui family?

I didn't want to bring ipfs-css and/or tachyons because it would just slow down the window opening. I thought about it, yes, but for that reason, avoided it. We could, certainly, reuse the CSS.

Also, by bringing more external files, we need to take in account how to load them. Right now I'm just feeding a base64 URL with the entire HTML for simplicity.

In addition, since we have more dialogs and those use the OS UI, I was trying to match the most I could one OS. In this case, it matches better macOS, but I think it looks great on Windows too.

[hacdias]

Colors tweaked, match macOS best (got colors from official Guidelines):

Windows:

AND OMG the menubar NOW uses the dark mode on WINDOWS TOO! No one told me that!

[jessicaschilling]

Sorry to miss the thread earlier on the download dialog only being a middle step. I’d suggest that changing the active button to “Next” and removing the phrase “to download its contents” takes care of the problem without having to explicitly explain what’s about to happen.

[hacdias]

Text updated:

[hacdias]

Ping @lidel :)

[lidel]

LGTM, this PR made this a pretty handy feature (saves time by skipping MFS in some workflows). Especially useful when downloading directories!

UX when downloading bigger directories will be awkward (you see no progress and then after a few minutes/hours get a popup telling you download is done 🙃 ), but that can be addressed in the future.

Tiny nits below, but no blockers on my end.

[jessicaschilling]

Not relevant to this PR in particular, but ...

UX when downloading bigger directories will be awkward (you see no progress and then after a few minutes/hours get a popup telling you download is done 🙃 ), but that can be addressed in the future.

There are a number of issues in our backlog for Desktop/WebUI for various progress feedback indicators. Maybe we want to think about tackling these together for the sake of consistent experience? Not sure where this would fit into our overall prioritization (I'd say P1?) but it might be an interesting problem for @rafaelramalho19 to pull apart?

[hacdias]

@jessicaschilling @lidel about the UX in this case: with the new ctl, we're getting the new API (#1411), we'll be able to get "some" progress when downloading directories. Maybe we can do something like what we do with the GC and update the status with some informational message.

What we could do too was to update the icon on the tray and show some loading animation, but that requires more work and needs to be ensured to work on Windows, macOS and the most used linux distros.

And yes, @jessicaschilling, I think it would be nice to have one issue of that kind on each repository (webui and desktop), aggregating the feedback UX improvements on each app.

---

Just a little FYI: even though I've been quite dedicated to Desktop/Web UI this past week, I'm not yet back to PL from my break to finish my bachelor's degree. I'll always try to reply to everything since this covid-situation is making me have a bit more time and that's why I've been dedicating a few hours on fixing issues here 😄 Everything I'm doing is mostly out of pure joy eheh

[jessicaschilling]

@hacdias any time you need more joy in your life, you're more than welcome to come hang out in gui-land, haha!