Improve UX of IPNS publishing

[lidel]

Now that we've added basic UI for publishing CIDs to IPNS (#1973) 🥳
it may be a good time to go an extra mile and refine the UI.

Namely, I feel we could improve presentation of key names and CIDs (right now it is a bland monospace font).
Perhaps we could also add one-line explainer to the first modal (imagine user clicking "Publish to IPNS" and not knowing what it is):

Below is the current state:

Before Publishing	Published

any ideas are welcome, cc @juliaxbow @hacdias

[hacdias]

Two thoughts:

• Make the monospace font surrounded by some box with some padding and round borders. The box would have a "copy" icon that would copy the CID/IPNS Key to the clipboard.
• Make the IPNS Key clickable with either href=ipns://key or href=defaultPublicGateway/ipns/key.

[juliaxbow]

• +1 hacdias's suggestion for a copy icon (or even "copy"). Could look something like:

OR

• Then I would recommend changing the bottom right button to "Done" or "Finish" (unless there are more steps afterwards?) to indicate that IPNS publishing steps are complete at this stage

[lidel]

I like the idea of:

• separating Done and Copy link actions. 👍
• IPNS Key clickable with href=defaultGateway/ipns/key (should be the same link as one on Settings screen)

@hacdias sounds like an easy win, interested in applying these before you start phasing out GUI activities?

[hacdias]

@lidel done #1998 :) Not yet 100% sure I'll leave GUI, but we'll see.

[ipfs-gui-bot]

🎉 This issue has been resolved in version 2.18.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀