[FEATURE REQUEST] New UI for "Manage accounts" view

[JuancaG05]

EPIC:

• [EPIC] New "Manage accounts" view #4314

Currently, the Manage accounts view looks like this:

This is a little bit outdated in terms of design, and shows a pretty empty screen unless you have several accounts. The aim here is to move this view to a dialog showing the same info, just like modern apps that follow the Material Design standards are doing lately:

Play Store	Gmail	Maps

This implies changing the click listener of the avatar in the top bar, that will open this new dialog instead of going to the current screen, which will be deleted.

In addition, we'll remove the second menu of the drawer menu, which shows redundant options for managing accounts (adding an account, a link to the manage accounts screen and the other accounts), so that everything related to managing accounts is centralized in just 1 place. The click listener of the avatar in the drawer menu could be changed as well to open the new dialog.

Past proposals:

• [FEATURE REQUEST] New account management #2849

More proposals welcome!

TASKS

• Research (if needed)
• Create branch feature/new_ui_manage_accounts
• Development tasks
  • Design mockups
  • Switch between accounts
  • Add a new account functionality
  • Clean account local storage functionality
  • suscribeToViewModels function
  • Hide the main dialog when you click on the remove account button
  • Refresh the file list when a new account is added
  • Remove second menu of the drawer menu, mini avatars and all the related stuff
  • Remove AccountsManagementActivity and its related tests
  • Implement unit tests (if needed)
  • Add feature to Release Notes (if required)
• Code review and apply changes requested
• Design test plan
• QA
• Merge branch feature/new_ui_manage_accounts into master

[joragua]

I've designed two different mockups related with manage accounts view.

• The first option looks like Google apps for example Gmail, Maps, Play Store, etc..
• The second one has the same structure than legacy but in this case is a dialog and not a new view.

First Option	Second Option

In case you have more accounts linked with your device, both mockups look like this:

First Option (Multi account)	Second Option (Multi account)

@JuancaG05 @Aitorbp @jesmrec @tbsbdr Take a look if you can and share your opinions about this 😃

[jesmrec]

In case of multiaccount, the "clean" and "delete" options are not clearly attached to the account. The compacted version (on the right) likes me the most. I know that they are mockups to make ourselves an idea, but i miss some beautifiers there.

[JuancaG05]

For a first iteration, I'd go for the second option. That is, keeping the current design but in a dialog instead of a new screen. Technically, it will be easier as well 😄

[joragua]

After first iteration, I've redesigned the second option and that is the result:

[tbsbdr]

Thumbs up 👍 lets go, looks very good!

Summay of what we just discussed in addition:
Improvement for the future:

• Problem: the brush icon is not very intuitiv, its not self-explaining.
• Possible Solution:
  • show text next to the icon
  • maybe within an collapsible or dedicated dialog/drawer or alike

[joragua]

WORK TO DO:

• Hide the main dialog when you click on remove account button. If you confirm, you have to see files of the remaining account. Also, if you click on cancel option the main dialog would appear again.
• Refresh the file list when a new account is added
• suscribeToViewModels function