Update the "How to earn" page

[henriquecbuss]

What we have
A page that shows the actions/objectives and some information/numbers about the community, with an old design

Proposal
Use a new design, where there are 2 pages:

• actions/objectives
• community info/numbers

Why
This is part of our efforts of updating accessibility and the look & feel of the app (#622)

How
Use these designs: https://www.figma.com/file/l2HhpioJFpVSUW6E5ZjBn9/?node-id=303%3A1494

Additional context
N/A

[rafachadud]

@NeoVier Figma is updated with the spacings and typefaces. Ready to go. :D

I'll work on 2 extra updates regarding this issue:

• Dashboard with the community page link;
• Action with image.

I'll update them soon and let you know.

[lucca65]

@NeoVier @rafachadud What do you think we transform this page in a modal?

[henriquecbuss]

+1!

[rafachadud]

@lucca65 @NeoVier I like that idea, but do you think it will work for mobile?

[henriquecbuss]

That's a good point @rafachadud. Do you think it wouldn't look good in an almost-full-screen modal on mobile?

[lucca65]

Folks, that's how a modal looks on mobile, for reference (also extra translation error we didn't noticed)

Modals work better on mobile because they hide away the menu and help the user focus on a single element, without ever leaving the page and losing the context on what they are doing

[henriquecbuss]

(also extra translation error we didn't noticed)

That was fixed on #658:

[lucca65]

nice! Sweet! Can't wait for the next release, its been three months since the last one

[rafachadud]

@lucca65 what I'm afraid is that the modal will become too long and scrolls on mobile doesn't work very well.
They might be too long because I'm working on a feature that the admins can add images to the claims, and I was thinking about using a modal to open the image, so we don't have the image too crazily long.

By the way @NeoVier and @lucca65 what's the best way to include this image feature in the claims for the end user? For the admins will just add a new field in the settings, but I'm struggling to find solutions for the claim cards.

[rafachadud]

This cards here might have an image attached to them.

[henriquecbuss]

@rafachadud Just a reminder: action and objective descriptions can now be edited with rich text, and we will soon add support for images on the rich text editor (#666). Of course, we can always just disable certain functionalities on certain pages (e.g. not allowing images on action descriptions).

With that said, I think the best place to add an image would be between the title and the reward (unless that would be too much information/too crowded?)... we could limit it to a certain height so the card doesn't stretch too much, and the user could click the image to expand it, or click on the card and get an expanded view of the entire card

[lucca65]

@lucca65 what I'm afraid is that the modal will become too long and scrolls on mobile doesn't work very well.

but we already use a modal that scrolls on mobile: the claim modal is big enough that it scrolls... it actually is nice because, if it weren't a modal, we would need to render the top bar before the actual content, hiding part of the content under a scroll. Check it out, and ignore the different font sizes:

Claim shown in a modal

Claim shown in a normal page

Notice how much space we loose by rendering the top bar. If our concern is to avoid scroll, modal will be the best solution for mobile, since it hides the top bar and footer

[lucca65]

By the way @NeoVier and @lucca65 what's the best way to include this image feature in the claims for the end user? For the admins will just add a new field in the settings, but I'm struggling to find solutions for the claim cards.

I would love it to be like a banner on top of the card, with the right pixel density and usage of color it can convey important information and work like an eye candy:

We could also allow our users to get creative with the images they show, like highlighting the amount of tokens they earn, like having an arrow pointing at a specific button or element that always exist on the card (like the claim button, or the amount it gives as a reward):

__ My terrible editing skills put to the test__

[henriquecbuss]

I love this banner idea! I think that kind of card looks really nice, and it's also kind of similar to the new shop cards:

[rafachadud]

@lucca65, @NeoVier can we allow users to open the images if they are displayed like a banner?
Just because the use case may be displaying an event banner with text info, so users need to have the ability to open the image in full size/full screen.

[lucca65]

Not on the list display, but they can open it on the details page, right?

[henriquecbuss]

@rafachadud what's the status on this? Is there something left to do on the design side, or can we start working on it?

[rafachadud]

@lucca65 @NeoVier this is done but the image.

I prepared a couple of solutions to exemplify, the use case for displaying the images is for event related claims, so community users can check the banner.

I made this two examples:
https://www.figma.com/file/l2HhpioJFpVSUW6E5ZjBn9/Acessibilidade?node-id=651%3A14003
https://www.figma.com/file/l2HhpioJFpVSUW6E5ZjBn9/Acessibilidade?node-id=656%3A20543

I personally dislike displaying the image on the card as a banner, just because most of the image will have text, and that disturbs the communication a lot. I would rather display it like "Option A", and upon clicking the user can go to the claim detail and open the image on full.

Karla thought about doing something more interactive, like flipping a card to see the image, but I'm not sure of how the usability of this, since they can click on the whole card to access the claim detail.

What do you guys think?

Just this detail to discuss, overall everything else is finished in terms of design. 👯

[lucca65]

I personally dislike displaying the image on the card as a banner, just because most of the image will have text, and that disturbs the communication a lot. I would rather display it like "Option A", and upon clicking the user can go to the claim detail and open the image on full.

As long as it open in a modal, should not be disruptive at all, if its on a new page I do think its bad because we have to reload everything and we will loose navigation.

What do you guys think?

I still have some points and suggestions for the discussion 😀

• I still think with the claim button being on the bottom of the card, we loose some room for the community admins to be creative with the banner image
• For me as a user claiming the action the validators are not relevant at all.. we have a different page, admin only where this information is more relevant. The text, if it requires an image and the reward should be the top informations. I would give a big font for the reward amount and would make the claim button like a block (as the cancel and send on the modal that asks for the image evidence)
• Since images can be text, but can also simply be plain images we could add default backgrounds in the case the admin don't upload anything

[henriquecbuss]

Just so we don't lose context if we come back to this after a while, we're also discussing this on Slack: https://cambiatus.slack.com/archives/CB0UA5SBE/p1646331483070599?thread_ts=1646236731.046819&cid=CB0UA5SBE