[Do not review] UI refreshment

[RolandUI]

Fixes https://github.com/zkSNACKs/WalletWasabi/issues/12294 Fixes https://github.com/zkSNACKs/WalletWasabi/issues/12136 Fixes https://github.com/zkSNACKs/WalletWasabi/issues/10534 Fixes https://github.com/zkSNACKs/WalletWasabi/issues/10584 Fixes https://github.com/zkSNACKs/WalletWasabi/issues/11270

WIP

[MaxHillebrand]

Beautiful.

[danwalmsley]

Note re: https://github.com/zkSNACKs/WalletWasabi/pull/12260/commits/78bebdfe154671d6a2b53636b6068ffce89d2c10

This commit is needed due to some issues in Avalonias binding system, specifically with OneWayToSource and Readonly properties (like IsPointerOver and IsSelected)

The issues causes the OneWayToSourceBinding to be replaced with a TwoWay binding, and then the View sets the Property on the ViewModel, it fires PropertyChanged event, the View tries to update the readonly property, and then Sets the ViewModel property yet again, at this point we are in an endless loop and stackoverflow occurs.

Avalonias binding system is being refactored and that may resolve this issue.

[RolandUI]

@wieslawsoltes in the history the amount field should be colored in the case if it is positive. Could you implement it?

[wieslawsoltes]

@wieslawsoltes in the history the amount field should be colored in the case if it is positive. Could you implement it?

@soosr What color I should use?

[RolandUI]

@wieslawsoltes in the history the amount field should be colored in the case if it is positive. Could you implement it?

@soosr What color I should use?

6E934A

[wieslawsoltes]

@wieslawsoltes in the history the amount field should be colored in the case if it is positive. Could you implement it?

@soosr Done https://github.com/zkSNACKs/WalletWasabi/pull/12260/commits/cd06a116665f527add4b788be1988fd13a29a4a2

[RolandUI]

@wieslawsoltes need your help.

For some reason in the Wallet Coins dialog, there is a weird gap between the child items. It doesn't reproduce in history. I think it might be related to the Dialog, because if put the wallet home screen into a dialog, I can repro the issue in the history too. Could you take a look?

Change the background color too make it more noticeable:

[wieslawsoltes]

@wieslawsoltes need your help.

For some reason in the Wallet Coins dialog, there is a weird gap between the child items. It doesn't reproduce in history. I think it might be related to the Dialog, because if put the wallet home screen into a dialog, I can repro the issue in the history too. Could you take a look?

Change the background color too make it more noticeable:

Looks like rounding error, try resizing window and it can go away

[wieslawsoltes]

@wieslawsoltes need your help. For some reason in the Wallet Coins dialog, there is a weird gap between the child items. It doesn't reproduce in history. I think it might be related to the Dialog, because if put the wallet home screen into a dialog, I can repro the issue in the history too. Could you take a look? Change the background color too make it more noticeable:

Looks like rounding error, try resizing window and it can go away

This is caused by animations in DialogTransitionAttachedBehavior, when disabled it looks ok:

[wieslawsoltes]

@soosr Change this line to

https://github.com/soosr/WalletWasabi/blob/40d8903acc2e4cf799324e9aa5b0b95a3f215843/WalletWasabi.Fluent/Controls/Dialog.axaml#L58

<behaviors:DialogTransitionAttachedBehavior OpacityDuration="0:0:0.50" ScaleDuration="0:0:0.35" EnableScale="False" />

[wieslawsoltes]

@soosr I think its either the expression math is wrong here or issue with animation system:

https://github.com/soosr/WalletWasabi/blob/40d8903acc2e4cf799324e9aa5b0b95a3f215843/WalletWasabi.Fluent/Behaviors/DialogTransitionAttachedBehavior.cs#L76-L77

[wieslawsoltes]

@soosr The ExpressionKeyFrame for scale animation depends on Target.Opacity so with different time the scale was not 1.0 and it caused rounding errors. Pushed fix, please try if it fixed the issue.

[RolandUI]

@soosr The ExpressionKeyFrame for scale animation depends on Target.Opacity so with different time the scale was not 1.0 and it caused rounding errors. Pushed fix, please try if it fixed the issue.

Fixed! Thanks.

[RolandUI]

TODO:

1. Flashing animation in History doesn't work.
2. Scrolling in History breaks the action button section.
   • Have an item that has SpeedUp or Cancel action button.
   • Scroll down, scroll up.
   • See bug.

@SuperJMN Please investigate and fix the first one (commit directly to this branch). @wieslawsoltes Please try to find a workaround for the second issue.

[SuperJMN]

TODO:

1. Flashing animation in History doesn't work. @SuperJMN Please investigate and fix the first one (commit directly to this branch). @wieslawsoltes Please try to find a workaround for the second issue.

Fixed. But I can't push to your repo. I've created a PR for it: https://github.com/soosr/WalletWasabi/pull/27

[wieslawsoltes]

2. Scrolling in History breaks the action button section.

   • Have an item that has SpeedUp or Cancel action button.
   • Scroll down, scroll up.
   • See bug.

@soosr hopefully fixed by https://github.com/zkSNACKs/WalletWasabi/pull/12260/commits/cbf87ad491a90389e34a3764b6982ef998900bd8

[Kruwed]

-Will the fee be added to the outgoing amounts for payments in the history? https://github.com/zkSNACKs/WalletWasabi/issues/10584#issuecomment-1785562579 Coinjoins show the fees paid, so this would keep the behavior consistent.

-The selection boxes on the "Wallet Coins" screen are inconsistent if you are viewing a pocket with multiple coins using the same label:

-The description text on the wallet coins screen could be improved to emphasize that entire coins will be spent without creation of change

-I am no longer able to click on the green bar under privacy progress to display the UTXOs ring

-Hovering over the bar below the privacy progress shows a tooltip for "private funds" and "semi private funds" but there is no tooltip for non private funds

-There's no more separator in between unconfirmed transactions and confirmed transactions in the history.

[turbolay]

The contrast between how vivid is the colour palette of the actionable buttons and the paleness of the rest of the colours is so huge that it makes it really hard and exhausting to focus on the information that has to be focused on (such as the amounts etc) because you always have to fight against the attraction of these static buttons, which is especially true when those buttons have a white text, as pointed out by Max.

It's too late now I believe, as everything in this PR is built that way, but SystemAccentColor would benefit a lot from having less yellow. If you check dark mode green actionable buttons of other software (such as Github's Comment button) they are never as vivid, which makes them look important while not attracting too much the eye).

[RolandUI]

Thanks for the feedback, everyone! @SuperJMN and I will go through all of them and fix the valid ones. I will leave an explanation about those that won't be fixed, if you need more info on why please contact me on Slack so that this PR won't be flooded.

Thanks!

[RolandUI]

@MaxHillebrand

the action button inside a dialog is a white text, should it be black like the Done button? ![2024-04-03-153006]

No. In Setting or Wallet Settings all the switches and actionable items are Green, White. so it fits better among them. Changing it to Black, Green would kinda break the view as those setting buttons would lean more toward the dialog button.

The light mode seems to have more shadows underneith the tiles than the dark mode.

It's on purpose. In the Dark theme, There are no shadows of Tiles or the main area to have a clean look. In light mode, we had to use to have a good contrast between those UI elements. Sadly what worked for the dark theme, looked bad for the light. This is fine. People don't use the light one, we only have it for those who have some eye disorder and cannot see properly on Dark theme.

[RolandUI]

@MarnixCroes

• Wallet Coins dialog can be black/empty: go to wallet coins -> select coin to send -> at preview tx screen -> click back at top-right -> wallet coins dialog is empty

(EDIT: Fixed https://github.com/zkSNACKs/WalletWasabi/pull/12260/commits/bb9cc6a09a819306970d9af517968cc04d37aeae)

• ban icon should be on the left side? from script type

(EDIT: Fixed https://github.com/zkSNACKs/WalletWasabi/pull/12260/commits/56401296971568a9418f521c6835ab25386f5937)

• date sorting at wallet coins?

(EDIT: It doesn't have dates, won't be fixed)

• sorting on Status both at history and wallet coins gives different result: I expect the opposite between arrow up and down, but the result is not opposite sorting

(EDIT: This PR didn't change the behavior, out of scope)

• in history, the sorting icon gets slightly highlighted when clicking to open another dialog

Thanks, I will take a look. (EDIT: Fixed https://github.com/zkSNACKs/WalletWasabi/pull/12260/commits/66ee4ca0ae4ee3901af663cfda0a060e83df48c9)

• when clicking on the sorted arrow, I expect it to undo the sorting

TDG doesn't support undoing sorting. Won't be implemented.

[RolandUI]

@Kruwed

-Will the fee be added to the outgoing amounts for payments in the history? #10584 (comment) Coinjoins show the fees paid, so this would keep the behavior consistent.

Out of scope of this PR.

-The selection boxes on the "Wallet Coins" screen are inconsistent if you are viewing a pocket with multiple coins using the same label:

That's by design. It not just another indicator for the pocket is opened. But also gives the feeling that grey background "moved" to the child items so any action on the Pocket's checkbox will also "move" and be applied on the child items. Won't be changed.

-The description text on the wallet coins screen could be improved to emphasize that entire coins will be spent without creation of change

Will extend it, thanks. (Note: Sending whole coin feature will be moved from that dialog very soon) (EDIT: Fixed https://github.com/zkSNACKs/WalletWasabi/pull/12260/commits/80eeddff21ad5865a4c95d8611c36926459b17bb)

-I am no longer able to click on the green bar under privacy progress to display the UTXOs ring

@SuperJMN will fix it. (EDIT: Fixed https://github.com/zkSNACKs/WalletWasabi/pull/12260/commits/1933dc093e54db277671e9255379f6aeb59df518)

-Hovering over the bar below the privacy progress shows a tooltip for "private funds" and "semi private funds" but there is no tooltip for non private funds

@SuperJMN will fix it. (EDIT: Fixed https://github.com/zkSNACKs/WalletWasabi/pull/12260/commits/3510755b5d85a8ad2edecd782138bf6b29f9dc6f)

-There's no more separator in between unconfirmed transactions and confirmed transactions in the history.

By design, won't be fixed.

[RolandUI]

@turbolay

The contrast between how vivid is the colour palette of the actionable buttons and the paleness of the rest of the colours is so huge that it makes it really hard and exhausting to focus on the information that has to be focused on (such as the amounts etc) because you always have to fight against the attraction of these static buttons, which is especially true when those buttons have a white text, as pointed out by Max.

It's too late now I believe, as everything in this PR is built that way, but SystemAccentColor would benefit a lot from having less yellow. If you check dark mode green actionable buttons of other software (such as Github's Comment button) they are never as vivid, which makes them look important while not attracting too much the eye).

The green is the branding green and the only identification mark of our branding. On the other hand, I see your point. Will discuss it with the management and marketing team if it is ok to decrease it's vividness. Thanks for the report.

(EDIT: Discussed with the management and the marketing team, the branding green has been adjusted so it works better with white text and is also less vivid. Fixed https://github.com/zkSNACKs/WalletWasabi/pull/12260/commits/8d0f41fa40c62005a9477e1812ecdee1a9b7c258)

[RolandUI]

@yahiheb

• As stated by Clement above the actionable buttons get too much attention and make it hard to focus on other information.

Will see what can be done. https://github.com/zkSNACKs/WalletWasabi/pull/12260#issuecomment-2036557951

• The Send, Receive, Buy Anything buttons look unnecessarily big. Maybe their icons should be removed.

Icons are very important, won't be removed. Decreased the padding also found that the spacing in BuyAnything button was not consistent, fixed. https://github.com/zkSNACKs/WalletWasabi/pull/12260/commits/d1df2e07366dd4231ca29e8902474a53a0684a8c

• The lists are confusing without a header title for each column.

They are fine, Bitcoin.design also suggests using a very similar layout.

• The list looks empty. Maybe add some horizontal spacing between columns.

I don't understand what you mean, please elaborate more.

• Maybe decrease the character size of the date column to make the amount more visible.

The fontsize of the date cells are even now one size smaller than the default, making it smaller one more look really bad. Making the Amount one size bigger also looks really bad. As of now the Amount is well noticeable, we can improve it when Avalonia 11.s is released with the font features.

• The green color of the semi private coins is not visible.

The colors there were already adjusted and approved by the management. Won't be changed. (EDIT: On the PrivacyBar the colors were hardcoded and not the adjusted ones were in use. Fixed https://github.com/zkSNACKs/WalletWasabi/pull/12260/commits/1fa9c50c08e2163d687cb196d399fa843e74eb2f)

• The checkbox and tx details buttons on the right looks very weird. They are on the left side on most software.

In order to know if you need to tick that checkbox first you need to read the row. So you can process it from left to right and make a decision as your focus is already at the end of the row. Once you finish with the selection, your cursor and your attention are on the right so you are very close to the Dialog's next button.

It's much better to have it on the right, won't be changed.

• When minimized Wasabi's icon is barely visible.

Tried to obey the branding and, will discuss it with the marketing team and see what can we do. (EDIT: Fixed https://github.com/zkSNACKs/WalletWasabi/pull/12260/commits/950ae38aadd99bf3a24a3851f1b5aa028e552e67)

[RolandUI]

All review comments have been explained or fixed, please do another round of testing. If nothing comes up tomorrow morning I will hit the merge button.

Thanks everyone!

[Kruwed]

The color for incoming amounts is a dull color (reminds me of dead grass). It lacks contrast with the background, could it be more bold?

Here's some examples of other wallets/services that use green for positive amounts, which appear more vibrant -

LNMarkets:

Phoenix:

Blixt:

What do you think about using the same shade of green as the one that appears in the bar for fully private coins?

[RolandUI]

• at CJ details the Fees has a minus/negative amount, while at outgoing tx the Fee is a positive value?

Fixed https://github.com/zkSNACKs/WalletWasabi/pull/12260/commits/1d88af0090aa87b87b75a2347474f608169ab2e2, https://github.com/zkSNACKs/WalletWasabi/pull/12260/commits/454540a486bb53c946a2000c9105b669bbc862b1

• everytime I open tx details of outgoing tx, the block hash value flickers a bit

Seems like Avalonia rendering issue, won't be fixed for now.

• on tx's of today and yesterday I prefer to have the time displayed, without needing to hover over

The time most of the time is irrelevant, Bitcoin.design also does as we do. Won't be changed.

• and when having done multiple coinjoins on the same date, I prefer to see the time instead of 10x date x

Fixed https://github.com/zkSNACKs/WalletWasabi/pull/12260/commits/7f48819a25f21b12819619c1e27197823048105c.

• that the scrollbar is only visible on hover (at multiple places) is not the best UX IMO

In the modern world where people are scrolling with a mouse scroll, gesture on a touchscreen or touchpad hiding the scrollbar to reduce the cognitive load is the best UX. Won't be changed.

• at wallet coins, the AScore of some coins can be a bit cut off: open wallet coins -> scroll down -> scroll back up-> AScore cut off last bit

It was the same scrolling issue that we had with the Action area, fixed with @wieslawsoltes's custom control. https://github.com/zkSNACKs/WalletWasabi/pull/12260/commits/8783a236d41d7063a87bf47a34d0fd0d9a9e11e2

it crashed

Was not related to the PR, https://github.com/zkSNACKs/WalletWasabi/pull/12787 fixed it.

[RolandUI]

The color for incoming amounts is a dull color (reminds me of dead grass). It lacks contrast with the background, could it be more bold?

That color pick was on purpose, nothing can be more emphasized than the Function buttons (Send, Receive)

What do you think about using the same shade of green as the one that appears in the bar for fully private coins?

That green is dedicated to indicating if something is Private. (Semi-private also has its own color) So users can pair that color with privacy. Should not be used for anything else.

The current color is good enough, won't be changed.

[MaxHillebrand]

Congrats, this is a huge PR. 🚀

[molnard]