Allocations: add Budget Detail page

[chadoh]

Fixes #1575

A lot changed to support this. If you have questions about specific changes, you can check individual commits & commit messages, which are quite detailed.

There's a bit in Card/Budget.js where indentation changed. To hide this noise, view the diff with indentation changes hidden.

[chadoh]

@javieralaves @stellarmagnet I've requested reviews from both of you because I'd love if you could check out the attached gif and see if you can spot any style issues before this gets merged.

[chadoh]

Thanks, @javieralaves!

• Would it be possible to make the whole card clickable instead of just the title? This will be done as part of #1573
• Budget title text should be set to content style (hex: 212B36) You mean the title in the card? This will also be part of #1573
• [x] Context menu item icons should should be set to surfaceIcon style (hex: 8FA4B5) Done
• [x] Remove the 'Budget' column in the detail view table Done
• Change the single check icon for a double check icon as shown in the designs (Emilio must have already uploaded the svg file since it's also being used in Rewards) and set the text color to positive (hex: 2CC68F) This strikes me as a separate task from any current issues that we have, so I created #1763 for it)
• The styling of the 'New allocation' panel input container labels has to be updated. Look at how you've designed the 'Reactivate budget' panel, those are the correct styles :) I made this part of #1731

I've updated the GIF in the description to show the two improvements. Do you think it looks good and that it makes sense to work these other items in other PRs?

[chadoh]

@javieralaves I was mistaken about this one:

• Would it be possible to make the whole card clickable instead of just the title?

As #1573 was already implemented, I do need to take care of this now. I've updated it to work like this:

This is a big change from the design, because I removed the context menu. The context menu does not work, when the entire card is clickable. It also provides little value on this Overview page, and less value once #1642 is implemented.

I've freestyled the hover styles here. Let me know what you think of all of this.

[stellarmagnet]

I don't necessarily agree with removing the context menu from the budget card. The court has cards + context menu coming up. We should ask Pierre if they intend to enable this functionality (cards being clickable + context menu).

[ottodevs]

The context menu does not work, when the entire card is clickable. It also provides little value on this Overview page, and less value once #1642 is implemented.

This seems not quite accurate, a simple stopPropagation in the click handler for the context menu should be enough to fix that situation, here is some reference in case you ask

As a user I really think that saving one click is a good UX design, in this case removing the context menu from the overview is adding an extra click - at least - so I am not fully satisfied about your decision Chad, anyway the designers should have the last word about this, just adding my technical take on this, and my opinion as potential user, in case that makes sense.

[javieralaves]

This seems not quite accurate, a simple stopPropagation in the click handler for the context menu should be enough to fix that situation, here is some reference in case you ask

@ottodevs Does this mean that it's possible to have both a clickable card and a context menu?

That said – As @chadoh points out, once #1642 is implemented, most day to day interactions will be readily available with one or two clicks; regardless of whether there is a context menu or not. I guess this would no longer hold true if we were to add some form of additional functionality that a context menu could provide room for, so sticking to the pattern won't hurt for now.

What I wanted to originally avoid (and still want to avoid) is having the card title be styled with the link color.