feat: new ui for mnemonic onboarding

[pavanjoshi914]

Describe the changes you have made in this PR

ui improvements for mnemonic onboarding

Link this PR to an issue [optional]

Fixes #2932

Type of change

(Remove other not matching type)

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

Checklist

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

[reneaaron]

When there is no key yet and I click on "Generate new Master Key" I don't see the 3 list items explaining the backup of the Master Key:

They are currently only being shown when visiting the backup page (after generating). I think it would be useful to add these 3 points there as well.

Most users probably will never visit the backup page (as they confirm the backup while generating the key). cc @stackingsaunter

[stackingsaunter]

@pavanjoshi914 here you have 2x illustrations in png and svg

[pavanjoshi914]

@reneaaron we still need the designs for generating the master key page. @stackingsaunter is working on it i think!

[stackingsaunter]

This icon is a png, here's svg:

There's also a copy duplication:

[stackingsaunter]

@pavanjoshi914 cc @reneaaron

you meant this right? (when user deletes their master key)
I'd like settings to look like this

User, when after deleting Master Key

The generation itself would look the same (and could happen after users click Continue on explenation page?)

I posted designs in the file as well

Other screens:

User with MK

User with MK, but imported Nostr wallet

[pavanjoshi914]

@reneaaron there is separate pr for default master key generation. with this user will only see back everytime and generate master key screen will be only seen when user delete existing key and want to generate new key. #2988

shall we keep generate screen same as backup screen @stackingsaunter ? we don't have desings for this screen yet

[stackingsaunter]

In my opinion yes, what would you change? @pavanjoshi914
What;s your opinion @reneaaron ?

[pavanjoshi914]

[stackingsaunter]

I though the goal was to autogenerate the key, does it make sense to make it separate from UI then? In this PR there's no autogeneration cc @reneaaron @pavanjoshi914

Some feedback:

• As we discussed on Slack, it's better to revert to white bg in text field everywhere (also in seed fields)
• I think we can delete the recovery phrase explanation points in "Import" screen, and keep them only in generate/backup screens
• This is minor, but it would be great if we can have those inputs somehow aligned. If it's too hard then I'd say don't worry about it:

In Figma I did it by defining the width of number in front of the field the same size, so for double digits, and centered the numbers:

• This may be unrelated to this PR and could get another one but I'd not use emojis in the notification bars. And instead use icons:

Maybe for now you can just delete the emoji

[pavanjoshi914]

@stackingsaunter autogeneration is here #2988 there was separate issue so i created separate pr

[reneaaron]

tACK