Making the Initial Setup Nicer (#198)

[s-rah]

This commit makes some updates to the initial setup UI with the aim of
making it a nicer experience for new users.

The initial setup is the first thing a new user of Ricochet sees when
they start up the software - it should be a place where we a) reassure
them that the software is working b) help them perform intiial setup
which we can't figure out and c) help the user form a connection to the
software so we are better able to present intuitive messages to the
user when we do need their input e.g. if the software discovers
something which needs the users attention like their connection to the
Tor network is blocked.

Presenting complex topics, like proxies and bridges, to a first time
user can be daunting and so the idea behind this initial setup is to
dress up the initial dialogue and present the user with a sane
default "Press Connect".

There are still issues with this initial setup - in particular when there
is additional configuration needed - we need to refine ways to work with
the user and, where we can, offer suggestions in a safe and secure
manner.

Image copyright information: The images in this commit were created by me
and are distributed under CC BY-SA 4.0 (this is conveyed in the image files)
with the exception of the "police officer icon at the center of the censored.png"
which is from the Symbola font package http://users.teilar.gr/~g1951d/ which
carries the following licensing terms: "Fonts and documents in this site are not
pieces of property or merchandise items; they carry no trademark, copyright,
license or other market tags; they are free for any use."

[rburchell]

I'd be interested in how it looks on other platforms too, but that generally looks pretty good. :)

[rburchell]

what's the problem here?

(SVGs are kind of a good thing, since then you get retina support, say, for free)

[special]

One useful hint is to use sourceSize { width: n; height: n } at the desired size for SVGs. That should make it render at the right resolution.

[s-rah]

Thanks I will give that a try.

[special]

Here's OS X/Retina:

The text wrapping makes it very crowded! I think this needs a lot more padding everywhere. I think even your screenshot could use more blank space. Don't hesitate to make the window larger and add lots of whitespace if it comes out looking cleaner.

[special]

I've never really liked this phrase. What do you think of "connection is unfiltered"? "connection is free" sounds too much like it's talking about money, I suppose. Hmm.

[s-rah]

I'd like to avoid complex terms here especially with negative prefixes. How about "connection is not censored, filtered and does not use a proxy?" to mimic the right hand side. Although I think a positive phrase would be better....

Although there aren't many positive options...clear? "connection is clear of obstacles".

[special]

Hmm, yes, positive is better. "not censored ..." is too similar to the other side.

"This computer's Internet connection is clear"
"This computer's Internet connection is clear and open"
"This computer's Internet connection is not blocked"
"This computer can access the Internet without restrictions"
"This computer can freely access the Internet"

[s-rah]

"This computer can freely access the Internet"

Is probably my favourite there. Close second:"This computer can access the Internet without restrictions"

I'll have a play around and a think.

[s-rah]

Updated diff taking into account, comments, new screenshot in commit messages reflecting what it now looks like on Linux (Ubuntu) - would be interested to see how this looks elsewhere. Much more white space now (Maybe too much...I'm not sure...I've gone back and forth).

Also removed hardcoding width and switched to sourceSize which fixed the logo display issue.

[rburchell]

It's not a good idea to use bindings for sourceSize. Every time it changes, the image will be reloaded (so every time parent.width changes..) which can cause a bad UX on resize (bad performance)

[rburchell]

Screenshot looks nice. I haven't tried it myself :)