Onboarding screens UI and copy improvements and fixes

[stackingsaunter]

Part of #2917 epic

Improvements across all screens

• Button color in these designs are different, you can ignore that
• For detailed views and more handoff files/screenshots that will felp you work on it, see Figma file here, also check out dev mode to inspect better

1. Delete "Welcome to Alby" from the top

Right now cards are centred and "Welcome to the Alby" can stick to the card in a buggy way. Let's delete this at all so it does not take space and force user to scroll and not see buttons on smaller screens.

2. Cards styling

• Delete card shadows
• Add border 1px inner gray200 / dark: neutral700
• Change corner radius to rounded-2xl
• Put buttons inside the card, center and fix 256px (w-64)
• all cards should have p-10 padding (40px)

3. Use icons from Popicons

See #2920 (comment)

There are also some custom icons that are not available in this set, which I provide seperately

Icons color (except color ones): gray600 / dark: neutral400

Improvements per screen

1. Create Unlock Passcode

• center content
• delete copy from the above of the image
• add two points with icons from Popicons

2. Choose Your Wallet

• changes to copy all over
• make both cards width w-96 (384px)
• spacing between them p-6
• use Popicons for listed points
• buttons 100% width inside cards (only here)

Needed icon for "bring your own wallet":

3. Wallet connector screens

• delete shadow on connector selection cards
• add 1px border gray 200 dark:neutral700]
• make sure individual connector flow cards are max-w-xl (576px) and have p-10 padding (40px)
• buttons 256px inside the cards (w-64)
• If you see any differences from how it's implemented now and how it looks in Figma, I appreciate If you change it as well 🙏

4. Pin extension screen

• General overhaul of this page, new copy
• "Pin me here!" pointer in the top-right place of the screen. Make sure Alby bee head in dark-mode has white stroke
• Shortcut buttons that are highlighted when user types those keys (the middle should reflect user system: mac keyboard "⌥" or and Windows "Alt"

Content of what's in the popup is a separate issue, here only for reference to show popup is triggered

Alby bee and head and in case it's not in the extension files already
(light mode and dark mode):

Puzzle icon:

[Nkiriobasi]

And also take this up

[stackingsaunter]

@Nkiriobasi I just finished writing this issue, please double check If you want to work on this!

[Nkiriobasi]

Yeah, I'll still take it up.

[stackingsaunter]

Choose your wallet screens are addressed here #2952 so no need to work on those

[pavanjoshi914]

welcome to alby heading is fixed recently. maybe no need to delete it now. #2954