feat(2624): add design and modify flow in MASE

[lengyel-arpad85]

Changes proposed in this pull request

solves most of #2624

• removed / renamed shoe-shop page/url to mock-idp/consent for it to make more sense
• added functionality to create a new account
• added edit account functionality & a way to add funds to an account
• added consistent design to pages (see screenshots)
• made modifications to the consent pages, in structure and design

Screenshots (v2)

---

Screenshots (old)

Context

Checklist

• [x] Related issues linked using fixes #number
• [ ] Tests added/updated
• [ ] Documentation added
• [x] Make sure that all checks pass
• [ ] Bruno collection updated

[netlify[bot]]

✅ Deploy Preview for brilliant-pasca-3e80ec canceled.

Name	Link
🔨 Latest commit	c657cc7c590d5cc9c0dd8b5045bfdb4311c7b778
🔍 Latest deploy log	https://app.netlify.com/sites/brilliant-pasca-3e80ec/deploys/6660bc1862d4970008e629bd

[mkurapov]

A few of us took a look at the screenshots, and had some comments:

In general, looks much better, thank you! The main thing we wanted to do was to distinguish it a bit more from the Admin UI, just to avoid any confusion for people working through the local playground, between what would be part of Rafiki, or something external.

Some thoughts we had:

• Adding the name of the instance (eg "Happy Life Bank" or "Cloud Nine Wallet") instead of "Mock ASE" , and adding some kind of icon to go along with it, either the wallet icon (like the one in the new test wallet/rafiki.money redesign) or the bank icon
• Adding something like global disclaimer to the footer of the page, explaining that this is just a "Mock ASE" and not for use as a production interface
• Mainly to differentiate from the Rafiki UI, there was an idea was to move the two tabs to the top of the page (at least somewhere other than the left side bar)
• And in general, some minor changes in the color, to contribute to the separation between the mock ASE and Admin UI

I'll start a thread in slack in case someone else had additional thoughts.

[JoblersTune]

How about this for a different look: We could have a different background for the wallet ASE using it's wallet svg instead of the banks.

[JoblersTune]

Colors:

• EBF8FF
• 3533A0
• 242374

Assets:

[lengyel-arpad85]

A few of us took a look at the screenshots, and had some comments:

In general, looks much better, thank you! The main thing we wanted to do was to distinguish it a bit more from the Admin UI, just to avoid any confusion for people working through the local playground, between what would be part of Rafiki, or something external.

Some thoughts we had:

• Adding the name of the instance (eg "Happy Life Bank" or "Cloud Nine Wallet") instead of "Mock ASE" , and adding some kind of icon to go along with it, either the wallet icon (like the one in the new test wallet/rafiki.money redesign) or the bank icon
• Adding something like global disclaimer to the footer of the page, explaining that this is just a "Mock ASE" and not for use as a production interface
• Mainly to differentiate from the Rafiki UI, there was an idea was to move the two tabs to the top of the page (at least somewhere other than the left side bar)
• And in general, some minor changes in the color, to contribute to the separation between the mock ASE and Admin UI

I'll start a thread in slack in case someone else had additional thoughts.

The update:

• changed left menubar to top menu
• added the separate logos and background image for each instance
• added instance name to meta title and topmenu
• added infobar to bottom of pages with the disclaimer
• changed colors used (see new screenshots)