[GoodId] changes required for onboardscreen for wallet support

GoodDollar / GoodWeb3-Mono

mono repo with GoodDollar's web3 UI components and SDK

https://gooddollar-storybook.vercel.app

0 stars 0 forks source link

[GoodId] changes required for onboardscreen for wallet support #155

Open sirpy opened 2 months ago

sirpy commented 2 months ago

Logic changes

[x] Add certificate checks in OnboardScreenController
[x] Add onSkip callback to be called if screen should not be displayed (ie user have certificates)
[x] Rename navigateTo callback to onFV
[x] The G "stickers" next to unverified-gender etc... they do not appear in the design reference, should they be there? only when verified?

Design changes

these are my observations but should be based on figma and what lauren and sana say

[x] width should be 100%
[x] gray box should also probably expand
[x] blue button should also probably expand?
[x] bottom part should be centered

Design reference from ticket #4254

How it looks in wallet

How it looks in wallet when centered

sirpy commented 2 months ago

@decentralauren See how it looks in wallet vs how it looks centered. i'm not sure how the screens were designed. but it seems Lewis made them with a fixed width of 375. Are they supposed to expand? because wallet width > 375. Should my suggested design changes above be made or should we simply use the "centered version"

decentralauren commented 2 months ago

@sirpy @L03TJ3 the centered looks more as intended, so please go with that approach.

Also the padding between the header bar and the H1 text is too tight. Please reference the padding in the Figma.

Thank you both for your attention to detail!

L03TJ3 commented 2 months ago

@sirpy the icons and 'unverified' fields fixes are already pending in this PR: https://github.com/GoodDollar/GoodWeb3-Mono/pull/154

L03TJ3 commented 2 months ago

@SanaJamm can you have a look at the width for the wallet screens?

All screens are set at 375, wallet uses a width on 475 All current existing screens in the wallet follow this.

Is @sirpy right, that it should be larger (and not fixed at 375) and fill the full screen?

L03TJ3 commented 2 months ago

@sirpy besides waiting on final design. what was missing was props for native-base styles.

The idea is that all we do is define a base-theme/style. any using parent app should be able to override these styles to fit into their screens/color-schemes etc. Any design component should be used as if it is a native-base component

added the missing container props here: https://github.com/GoodDollar/GoodWeb3-Mono/pull/156/commits/e3992fbc59bcc7477a587254fe90321bbc3d1a76

so can now handle any style-props that you would able to define for a base component

SanaJamm commented 2 months ago

@sirpy @L03TJ3 I design on 375 because it's usually the smallest screens.. if it's 475 then the section/components fill the space and not be centered. of course items on feed with image should remain with the 16:9 ratio I made an example on Figma:

screenshot:

link to design: https://www.figma.com/file/ihw1PxBvLxacTHnN2aj4lC/3.-Product?type=design&node-id=16902%3A106686&mode=design&t=QplIkMw9aiMhuaJD-1

sirpy commented 2 months ago

@SanaJamm in your designs you need to explain which items should expand to fill the screen and which shouldnt. which items should be centered relative to the screen width and which just have margins from the edges.

SanaJamm commented 2 months ago

@sirpy no problem...are there certain screens that you have questions about for now? so I can clarify

sirpy commented 2 months ago

@SanaJamm maybe you can give some general instructions about repeating items. like titles, buttons, cards etc.. @L03TJ3 please make sure to ask Sana when working on screens about responsiveness expectations

SanaJamm commented 2 months ago

@sirpy @L03TJ3 I'll work on this on Sunday

vldkhh commented 3 weeks ago

verified on storybook. Looks good for me