wallet-ext: settings menu redesign

[pchrysochoidis]

• storybook add memory router to every story

• ui button component add styles tiny size and plain variant

  • 

• move loading functionality from Button to ButtonOrLink component so we can reuse it

• update PageTitle component and use it in every page

  • 
  • 
  • 

• add Link component

  https://user-images.githubusercontent.com/10210143/218554452-2a118a62-e1bf-432a-a349-03fbfc5c2d72.mov

• add Pill component

https://user-images.githubusercontent.com/10210143/218798176-7a5addd8-af26-4688-87aa-fe44bad8af44.mov

• add InputWithAction component

https://user-images.githubusercontent.com/10210143/218797944-21b00be8-953d-4310-b83d-6ed8f239a42b.mov

• update Settings Menu

https://user-images.githubusercontent.com/10210143/218555029-f528d9dc-7c91-4bfb-88a5-5ca256dd84b6.mov

closes: APPS-285

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

4 Ignored Deployments

Name	Status	Preview	Comments	Updated
explorer	⬜️ Ignored (Inspect)			Feb 14, 2023 at 6:48PM (UTC)
explorer-storybook	⬜️ Ignored (Inspect)			Feb 14, 2023 at 6:48PM (UTC)
frenemies	⬜️ Ignored (Inspect)			Feb 14, 2023 at 6:48PM (UTC)
wallet-adapter	⬜️ Ignored (Inspect)			Feb 14, 2023 at 6:48PM (UTC)

[mystie711]

Looking great over all @pchrysochoidis! Some observations,

[mystie711]

Also noticed a Figma inconsistency. Updated design. Please update the padding on left/right for the settings rows as well.

[pchrysochoidis]

@mystie711

• Logo position should be a bit better now after merging https://github.com/MystenLabs/sui/pull/7902 (there is a small difference still but we need to replace the logo font icon with an svg - will do it in another PR)

before	after

• menu item arrow is bigger now
• fixed menu item row is height
• removed icon from faucet button
• Terms of Service -> Terms of service
• fixed padding
• double checked colors seem the same as figma

before	after

Also kept the red color for Logout until we implement the confirmation modal

[mystie711]

Great progress @pchrysochoidis! Just a few more items,

• The "<- " icon in header seems to be smaller than one in Figma. Please double check the icon size in use.
• The input box ui and interaction seems to have delta from Figma? Please also double check the font style of the auto-lock description text. the font leading is to tight compared to Figma.

[pchrysochoidis]

Great progress @pchrysochoidis! Just a few more items,

• The "<- " icon in header seems to be smaller than one in Figma. Please double check the icon size in use.
• The input box ui and interaction seems to have delta from Figma? Please also double check the font style of the auto-lock description text. the font leading is to tight compared to Figma.

@mystie711 these should be addressed now

[mystie711]

Awesome! Could the "spinner" show inside the (SAVE) button pill...effectively replacing the SAVE text while it is in progress? This should probably be a part of the button component like we discussed in-person.

Going to also capture this in Figma component section for easy reference.

[pchrysochoidis]

Awesome! Could the "spinner" show inside the (SAVE) button pill...effectively replacing the SAVE text while it is in progress? This should probably be a part of the button component like we discussed in-person.

Going to also capture this in Figma component section for easy reference.

Could the "spinner" show inside the (SAVE) button pill

Yes, this is inside the Save Pill, it hides the text and displays the spinner. The problem is probably that when disabled the Pill does't have any border/background. (based of figma here)

[pchrysochoidis]

@mystie711 Done

https://user-images.githubusercontent.com/10210143/218798356-24cbe794-3262-429a-9c52-e53166516915.mov