Design

[andreivcodes]

styling and layout according to the design at https://www.figma.com/design/bLEBwz5KSP6CNRZ2ooyJto/Light-wallet-files?node-id=0-1&t=ZOgYNwfzZScZwOrO-0

[brusherru]

It breaks up the mobile version.

Needs to be fixed and tuned for mobile.
Left comprehensive comments in Slack, here are some screenshots for the protocol.

Does not check accounts with transactions and rewards, vault account with unlocked balance, and how it works on desktop.

[pigmej]

I dislike it, honestly. It is way too wide, and functionality is affected by it.

Smidgh is also I guess not defined shortcut too.

[brusherru]

Well, it's better, but still:

1. Horizontal scroll on the unlock page.
   The fact that some pages still has this problem, and some not means that something implemented wrong.
   It should be part of basic template / components.

2. Transaction list still has excessive padding
   

3. Regression: Vault account lost the feature that shows unlocked amount (Show available unlocked amount on Vault accounts #46)

4. I don't like that modals now lost the "darkening" of the underlaying content (or this darkening is almost invisible)
   
   Also I think such a big paddings are excessive. Let's use the space wisely.

5. And I totally does not like this part:
   
   There are two problems:

   • a lot of empty space on mobile because all of this does not fit in a single line
   • address, account name and switch, and it's balance are falling apart and seems not related

   For clarity, here is what we currently have:
   

   All account related info is grouped in the single block

6. Rewards looks well enough, but I'd tweak padding a little bit to make it looks more accurate

7. Big amounts looks bad:
   

8. Not sure that it makes sense to use a full width of the page on a desktop. It's harder to work with.
   

Let's work on this better and without rush.
I think there is nothing critical to release the wallet as is, less "fancy" but more solid and logical.
And later release a really good GUI.

[noamnelke]

One thing I didn't see mentioned is the color choice. I think the "really dark green" and "slightly less dark, but still really dark green" don't have enough contrast between them. I had to turn up the brightness on my display because I wasn't even sure it was two different colors...

[monikasmolarek]

I've reviewed the figma files and left some feedback there. Once the final layout established and implemented here, I will check this PR as well.

[brusherru]

Let's use named sizes instead of pixels, e.g.:

Suggested change

	fontSize={{ base: '18px', md: '22px' }}
	fontSize={{ base: 'lg', md: 'x-large' }}

[brusherru]

I'm not sure it is a good solution.

Chakra's theme system supposed that there is variants.
For buttons it is solid, outline, link and ghost.
And then if you want to have different styles — use colorCheme. It provides a variety of different colors, but for the branding we need less, so in this case it might be good to name them like primary, secondary, danger, and mb primaryDark for cases when buttons on dark bg should be different...

But here we have a mix of these, and names are not very clear when which to use. And as I said above, I don't like that all the buttons have the same accents, for example "Add party" and "Add account" looks the same, and which is even more confusing "Cancel" and "Next" the same as well :)

To sum up, I'd like to have:

1. clear naming,
2. probably separate variants and colors (if it make sense to avoid having a big amount of variants),
3. default styles for every component, so we don't need to put variant="whiteModal" in every component

[brusherru]

Btw, now slot does not react when you drag a word over it...
Please bring back the usage of isOver and ensure that the color is differ from bg...

[brusherru]

I still dislike it, but since we really need to officially release it and we need to have it "branded" — I'm merging it.
Hopefully all defects (design & code) will be fixed very soon.