Detail page frame component.

Greenstand / treetracker-wallet-app

The Greenstand Wallet App

https://wallet.treetracker.org

14 stars 43 forks source link

Detail page frame component. #146

Closed dadiorchen closed 4 months ago

dadiorchen commented 3 years ago

To build a common component for the second type of detail page, check the demo below. This is a common component so don't need to implement the page content in the panel, just the frame with background (semi-transparent) on the top and back button.

Reference:

https://github.com/Greenstand/treetracker-wallet-web/issues/38

Some hints for building components:

Our Figma design is here: https://www.figma.com/file/XtReDuYYGDVQBv4JfzVG0g/Greenstand---Wallet?node-id=7%3A71
A tutorial of how to use Cypress component tool to build components: https://github.com/Greenstand/treetracker-wallet-web#how-to-build-a-component
We are using MaterialUI to build the app: https://material-ui.com/
When you are ready to raise PR for the component, please attach the screenshot of the component for review.
If you want to join the slack community (some resources need the community member's permission), please leave your email address.

dtabarini commented 3 years ago

I would like to take this!

dtabarini commented 3 years ago

To be clear, what are the difference between this detail page and the one referenced as #38? It seems that it just sets lower, is this correct?

dadiorchen commented 3 years ago

@dtabarini sorry about the confusion, the newest design is here: https://www.figma.com/file/vOCKDnXrejCASuQQyZPYYR/Wallet-Web-App---Master?node-id=1035%3A1375 let me know if you met access problem.

These two pages are different, the tree details page put the tree image in the panel, the planter details page put the planter photo above the panel, as a background.

Here is some background about the UI/UX: https://github.com/Greenstand/treetracker-wallet-web/issues/86 note this issue is just about the static component, I will open another issue for the interaction with the panel/background discussed in the UI design issue.

dtabarini commented 3 years ago

I don't have access to that link. My account is dtabarini@gmail.com. For this component, how is the image passed in through the props, is it a file path?

dadiorchen commented 3 years ago

@rgesulfo I'm confused by this, we seems to have to different version of the UI on figma? This is the stale version: https://www.figma.com/file/XtReDuYYGDVQBv4JfzVG0g/Greenstand---Wallet?node-id=7%3A71

rgesulfo commented 3 years ago

Hi @dadiorchen, I'm really sorry about the confusion. Greenstand now has an official Figma account, so I migrated all my files in there. Unfortunately I had to duplicate them. I added [⚠️ deprecated] in the name of the file to avoid future confusion, hopefully. Regarding the wallet app, everything is up-to-date here: https://www.figma.com/files/project/37239783/%F0%9F%92%B5-Wallet-Web-App?fuid=364872749885043964 Hope this is clearer now :)

dtabarini commented 3 years ago

@rgesulfo Can I be added to the figma? The link says I do not have access

dadiorchen commented 3 years ago

@rgesulfo me too: