feat: welcome page

[jessicaschilling]

In this PR

Make the "welcome" page at #/welcome available by clicking the IPFS cube logo in the navbar, and adjust details for continuity.

Done

• Make connection icon in top right of screen go to status page (not welcome page) with "Advanced" section expanded, and recolor as red (not orange) if not connected to IPFS API
• Update files screen when there are no files:
  • Remove WelcomeInfo box as it didn't really make sense there and added clutter
  • As a result, remove info-boxes/welcome-info and add its contents to WelcomePage.js; move welcomeInfo i18n text into welcome.json
  • Update outdated reference to "Add files" button in no-files state to ready "Import" instead
• On welcome page, in both connected and disconnected states:
  • Rewrite WelcomeInfo and AboutIpfs content for clarity
• On welcome page, in connected state:
  • Replace text that's essentially duplicated in WelcomeInfo with shorter, friendly messaging
  • Add check-mark icon for continuity with Companion
  • Remove <ApiAddressForm> box, since it's rarely relevant here (but add to settings page to account for edge cases; see below)
• On welcome page, in disconnected state:
  • Add alert icon for continuity with Companion
  • Rewrite troubleshooting guidance for clarity and update docs link
  • For CORS section of troubleshooting guidance, add option to select between OS/flavor in <Shell> header, to streamline and avoid showing user commands they don't need (thanks @rafaelramalho19!)
  • Move <ApiAddressForm> into the troubleshooting guidance (thanks @rafaelramalho19!)
• On status page, upon connection interruption:
  • Update "Is your daemon running?" guidance to align with edits to welcome page disconnected state
• On status page, always:
  • Add "Edit" link next to API line in "Advanced"; this takes user to <ApiAddressForm> section of settings page (thanks @rafaelramalho19!)
• On settings page:
  • Add box for <ApiAddressForm> above "IPFS Config" box, to account for users who are already connected but want to connect to a different IPFS API
  • Adjust font size/style for consistency
• Update Joyride guidance throughout to account for the above changes, particularly to emphasize entry points for changing API address

Open questions

• Does anything need to be modified as a result of feat: replace redux-bundle with ipfs-provider #1563 ?
• This PR involves a number of changes to running copy; will Transifex take care of reconciling differences between locales/en files to remove outdated i18n text, or does anything else need to be done first?

Extra note

These changes will require updating screenshots across a number of locations in our ecosystem. I'll take care of that in separate PR(s) once we know when we'd ship a release.

Screenshots

Welcome page, connected

Welcome page, disconnected

Files page when no files

Status page upon connection interruption

Closes #1463. Also refs #1406 about adding a link to Awesome IPFS somewhere in welcome content.

[jessicaschilling]

@lidel and @rafaelramalho19 -- I believe this is ready for your review, thanks for all your help in the meantime 😊
Please note there are two open questions in the description above.
Thanks so much!

[lidel]

Big 👍 for effort to make the connectivity troubleshooting so much more intuitive!

Below answers to your questions and some nits at the end.

Does anything need to be modified as a result of #1563 ?

I don't believe there are any conflicts, but you may rebase on top of latest master just to be sure.

[..] will Transifex take care of reconciling differences between locales/en files to remove outdated i18n text, or does anything else need to be done first?

Transifex will automatically update itself within 24h after this PR is merged, no need for additional steps. The next time we pull translations before the release, locale files for languages other than en will get updated. In the meantime, en version will be used as a fallback.

---

I've found some UX nits when transitioning "online" → "offline" (eg. when I shut down my go-ipfs node):

1. Connection error is displayed, and the graphs get faded out, but they keep showing the last bandwidth values:

   

   I'd expect "offline" state to set them to zeroes.

2. Files, Explore, Peers in navbar are not being correctly disabled. I can go to each and there is either error or an outdated cached data that does not update. If I refresh page (F5) then those screens are replaced with connection error on status page.

3. The flow that starts with clicking on → Expanded Status → API multiaddr Edit → Settings → API multiaddr input is really nice. It encourages user to intuitively discover things.

   The problem: when in offline status, clicking on the does nothing. It can't expand node info, because API is down and that block is hidden. Perhaps the fix is to skip expand step and immediately open the Settings and scroll to API address input?

[lidel]

Clarification: nits I described were already present in old version, so ok to merge this and tackle them separately

[jessicaschilling]

Sounds good; see #1575 for node shutoff experience tweaks. I'll rebase against latest master and merge if all well. Thanks!