Implement allowances and sites pages UX/UI improvements

[GabrielSoga]

Describe the changes you have made in this PR

Budgets UX/UI improvements:

• On popup view of a page that has not have a budget set, there should be a link to do it instead of empty budget bar (right now). Clicking it leads to Edit Preferences modal.
• An icon button of that opens Edit Preferences modal should be in the corner of site box.
• Modal has updated copy
• New disconnect button in Edit Preferences modal.
• New design for the Progress Bar
• Changing "ACTIVE" badge to "BUDGET"
• A revamp of website page views:
  • Logo, name and URL is on the left side
  • Site settings button that opens Edit Preferences modal
  • Displaying info about payments, budget and permissions (badges). If budget not set, showing a link

Link this PR to an issue

#2458

Type of change

(Remove other not matching type)

• feat: New feature (non-breaking change which adds functionality)

How has this been tested?

Manual testing

Checklist

• Self-review of changed code
• Manual testing
• Added automated tests where applicable
• Update Docs & Guides
• For UI-related changes
• Darkmode
• Responsive layout

[stackingsaunter]

Thanks for the PR! I can't test it without a build though

[reneaaron]

@fczuardi @GabrielSoga Thanks for this PR! 👍 Could you please have a look at the unit tests? Some of them seem to fail currently.

Planning to test / review this PR later today / start of next week.

[reneaaron]

@GabrielSoga Great job with this PR! 👍 From a functional perspective everything seemed to work as expected, I've pushed some minor improvements / fixes to this branch here:

https://github.com/getAlby/lightning-browser-extension/tree/budgets-new-ux
(for some reason I am not able to push to your branch, maybe you need to allow maintainers of getAlby to edit this PR?)

Will continue with the code review next week. Have a nice weekend! 😎

[fczuardi]

@fczuardi @GabrielSoga Thanks for this PR! 👍 Could you please have a look at the unit tests? Some of them seem to fail currently.

Planning to test / review this PR later today / start of next week.

Unit tests are updated.

[fczuardi]

Thanks for the PR! I can't test it without a build though

Builds are good now @stackingsaunter :)

[stackingsaunter]

Tested, looks really nice, great job @GabrielSoga !!!

Thanks you!

[stackingsaunter]

tAck

[fczuardi]

@reneaaron can we do something to help this branch? what are the next steps?

[reneaaron]

Thanks very much again for this PR, great work guys! 💯

I've added some minor fixes (responsive layout, color usage, created a Modal component to avoid code reuse, etc) and left a few comments.

Apart from the "division by zero" this looks good to merge from my side.

I've now also fixed those things.

tACK

[fczuardi]

nice cleanup! we like it :)