UI Refreshment

[soosr]

📜 Preamble:

UI Refreshment by @soosr

📖 TL;DR - Too Long, Didn't Read:

Dark theme is preferred widely among our users, but it is not an actual dark theme, it is more like a blue theme. The problem with this the base color should be a neutral color, otherwise the brain has a much harder work to notice the key elements. And also, the blue color has been removed from the branding colors, so the software should follow it.

Separator, sharp edges are outdated. Clean UI and rounded elements are in trend now. This change has been happening for a year and all the big companies migrating such as YouTube, Facebook, Twitter, etc.

🌟 Specification, Scope, and Features:

• Grey-based dark theme
• Cleaner UI the reduce the cognitive load
• Better play of colors
• Refactoring the design of TreeDataGrid (History, CoinControl, Addresses)
  • Why? Because we are not an Excel table to display those in a grid-based layout.

⚔️ Motivation:

Software UI trends have changed recently, Wasabi needs to adapt and follow them.

📜 Rationale:

People do judge by the cover of the book, a good-looking UI is fundamental to enticing users. It's an Industry standard to use a neutral color as a base and use the branding colors to emphasize UI elements, currently, Wasabi ignores it (blue is the base, and it does not use the branding colors at all).

🌌 Backward Compatibility:

No problem with the backward compatibility.

📚 Reference Implementation (optional):

The design is not public until Nopara reviews it.

🧑‍🏫 Team involvement

Lead: @soosr UI team

💪 Subtasks

• [ ] Create designs in figma @soosr 🕐 4 weeks
  • Tx history
  • Remove separators and sharp edges
  • Coin control
  • Unused receive addresses
  • Wallet coins
  • Label design
• [ ] Implement the design in code @soosr 🕐 5 weeks
  • Change treedatagrid template to 4 places: history, coin control, unused receive, and wallet coins. 2 weeks
  • Label design 2 days
  • Remove separators and make edges round 1 week
  • Recoloring, dark theme and light theme 2 weeks
• [ ] Research wallet coins accessibility and redesign in figma @soosr 🕐 3 weeks
• [ ] Implement the new wallet coin interface @soosr 🕐 2 weeks
  • Minor change in MusicBox

[molnard]

Very good 🤝 Please format it like this: https://github.com/molnard/The-release-game-v2-0-4-1/issues/4

Sorry for the extra work, these details are forming right now during the game.

[soosr]

Very good 🤝 Please format it like this: #4

Done

[molnard]

I don't understand this part, probably the same as what I said in the Motivation section.

Go through the specifications one by one. Why is that good for the user? Describe what will be the actual way of achieving that. Why did you choose that solution? Are there other alternatives?

Do not talk about implementation details just in general.

[soosr]

I don't understand this part, probably the same as what I said in the Motivation section.

Go through the specifications one by one. Why is that good for the user? Describe what will be the actual way of achieving that. Why did you choose that solution? Are there other alternatives?

Do not talk about implementation details just in general.

updated

[Gustavojfe]

Love this. My comments:

1. There's 9 variants of the typography. Even Apps like Slack don't have that many and are way more complex. I would reduce this. The ALL CAPS TITLES for Balance, Privacy Progress and Exchange Rate are particularly bad to my eyes.
2. During wallet generation, some warnings should be in red or apparent in some other way. Instructions can also be better placed to be clearer.
3. When you have initialized the wallet, there's no need to show the titles of the transaction table before there's any transaction, such as "Date / Time", "Labels", etc.

[molnard]

Noble Author,

Your Quest has been selected for further progress! The devil is in the details - so you need to elaborate and show your quest is not evil. We only embrace quests that are leading us to the light! To prove that you will need to add the following Sections to the Quest description above:

⚠️ Sections to add to the Quest descriptions

• Team involvement: [ui / code / integrations / marketing ] can be one or more.
• Subtasks. Try to break it down as much as possible. Think about teams and jobs that can be done in parallel. Phrase it like a Todo list with elements. If something is not clear yet do not forget to add a task - "research this or that"...

ℹ️ Tips

• Try to break down the task to Teams and then to Subtasks.
• Try to be as detailed as possible.
• Do your best to estimate or to get an estimation from the right ppl. If required you can arrange a meeting and invite team leaders or ppl you believe could be involved or have something to add.

🕐 Please make this the utmost importance - we do not have much time left!

[Pule08]

~14 week of duration