Interledger test wallet redesign

[huijing]

Grantees are conflating Rafiki and rafiki.money (which is the URL for Interledger test wallet), and mistakenly thinking that they have to integrate the Interledger test wallet instead of Rafiki.

We have decided that by diverging the look and feel of Testnet from any of our actual products like Interledger Pay or Rafiki, people will be less inclined to confuse any of our testnet assets with Rafiki.

The key here is we are not making any functional or layout changes, we are only updating the following:

• Site colours
• Site logo
• Site font

Of course, due to the change in font, there might be some tweaks required to element widths or heights but this is really a pure theme change.

Please refer to this more detailed write-up explaining the rationale behind the new visual direction: https://docs.google.com/document/d/1oGq2TCnbD6zpWovwdDu5oKKsLzQjMw0er2aL6VJtjhA/edit

New colour codes

Please see https://testnet-mockup.surge.sh/wallet/styleguide/

Proposed interaction styles

For focus, hover and active styles, you can see them in action on the frontend mockups at https://testnet-mockup.surge.sh/wallet/. You need to toggle dark mode because the glows are only used on dark mode. The CSS code for the glow effects are also on https://testnet-mockup.surge.sh/wallet/styleguide/.

Again, because this was just to recreate the elements on the original test wallet, any of the padding and margin differences between the mock-up and the real code should be ignored. This Codepen is meant to show the hover states, focus states and active states, plus how the new colors look like applied on the existing elements.

Attached asset files

dejavu-mono.zip