ui: improve balance spacing, coloring and grouping

[theborakompanioni]

Resolves #690.

Styles the "insignificant" digits of the balance component making the value more readable and easy on the eyes.

📸 Before/After

[editwentyone]

👏 awesome, thanks for the fast development

next logical step is to get rid of "Display amounts in sats" under settings and thus we also don't need the kebab sats logo anymore/ anywhere.

what do you think? do you like it?

[theborakompanioni]

👏 awesome, thanks for the fast development

next logical step is to get rid of "Display amounts in sats" under settings and thus we also don't need the kebab sats logo anymore/ anywhere.

Yeah, however, let's ask users first if they even use the option to display amounts in sats. Currently, we also have all input fields representing amounts in sats, not in BTC. At least we should discuss this in a separate, dedicated ticket. Okay for you?

what do you think? do you like it?

I really like the visual representation, yes. I do not like the current implementation as it uses opacity instead of the more accurate mix-blend-mode.. I did not get good results with mix-blend-mode yet - but will keep trying to improve it.

[theborakompanioni]

Newest commit styles the amount with css only. I'd say, that is "good enough" - at least better than before. Would you check again if it satisfies your expectations @editwentyone? Colors can be still be adapted, of course! Please check both, dark and light mode! Thanks 🙏

[theborakompanioni]

Yo, @editwentyone, this is now ready for review again.

One remark: Instead of color #536475 it uses #212529 in light mode for highlighted balance digits. Otherwise it's quite hard to distinguish from de-emphasized digits.

[editwentyone]

Yo, @editwentyone, this is now ready for review again.

One remark: Instead of color #536475 it uses #212529 in light mode for highlighted balance digits. Otherwise it's quite hard to distinguish from de-emphasized digits.

lets do: #344353 instead of #212529 if its ok for you

[theborakompanioni]

lets do: #344353 instead of #212529 if its ok for you

This also feels rather unfavorable visually. Too little contrast, imho, don't you think? What about all the people with color weakness, like me? 😬

[editwentyone]

ok how about #0B3A69?

[theborakompanioni]

ok how about #0B3A69?

This is quite bluish.. but contrast ist good, imho.
Should it be applied? 🤔