Enhancement/how to earn

[henriquecbuss]

What issue does this PR close

Closes #670

Changes Proposed ( a list of new changes introduced by this PR)

• Change the objectives page
• New claim designs
• Create an "about the community" page

How to test ( a list of instructions on how to test this PR)

Go through the app and see if the screens look like the designs and keep their functionality

[netlify]

✅ Deploy Preview for cambiatus-elm-book ready!

Name	Link
🔨 Latest commit	866f086
🔍 Latest deploy log	https://app.netlify.com/sites/cambiatus-elm-book/deploys/62616c5754fbe7000878850a
😎 Deploy Preview	https://deploy-preview-716--cambiatus-elm-book.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[henriquecbuss]

+1, fiquei muito feliz com o resultado final e gostei muito (além de aprender muita coisa e usar ferramentas novas) de desenvolver essas telas, principalmente a de objetivos. Diria que é a interface mais complexa do nosso app até agora:

• O grid, com masonry layout, é difícil de acertar, e acho que ficou perfeito, com direito a animações! Além disso, é 100% reutilizável, feito com um webcomponent
• O carrossel ficou com uma boa acessibilidade, o que é geralmente bem difícil de conseguir, e ele usa algumas coisas legais como scroll-snap e IntersectionObserver, que eu sempre tinha curiosidade de usar 😅
• Conseguimos acomodar esses dois componentes sem mexer na DOM! Ambos têm a mesma estrutura, só diferem em algumas classes de CSS e algumas chamadas de JS

Foi um ótimo desafio! Valeu pelos designs @rafachadud !

---

Fiquei sentindo falta de um botão que levasse da tela da comunidade para a tela de objetivos, como o que temos agora.

Experimentei colocar um card igual ao que tem na tela de objetivos que leva para a página sobre a comunidade, mas preferi deixar no card com a descrição da comunidade

Quando uma comunidade não possui apoiadores ou noticias o card de descrição fica bem pequeno e centralizado na tela, será que daria pra deixá-lo maior?

Tinha deixado desse tamanho pra deixar alinhado com os cards de "Nossos números", mas concordo que ficou pequeno. Aumentei pra ocupar o tamanho de 2 desses cards (mas centralizado na tela), acho que ficou melhor! Acredito que não fica legal deixar do tamanho inteiro da tela

[lucca65]

Gostei! Ficou show!!

[juramos-2020]

Oi @NeoVier

primeiramente ficou incrível, parabéns! Foi lindo de ver o carinho que você depositou construindo tudo isso e adicionando aquele efeito, achei lindo demais 💚

Seguem alguns pequenos ajustes:

• Na página da comunidade, atualizar os ícones com seus respectivos nomes conforme design
• Na página de "How to earn", no último card, centralizar o texto "Visite a página da comunidade para saber mais sobre" e adicionar um espaçamento de 08 px entre ele e o cachorrinho.
• Na versão mobile, em "How to earn", dentro de um objetivo sem ações, o texto do empty state deve estar centralizado também.
• No card das ações, adicionar o elemento de "Members claimed this action" conforme design.
• No card das ações os textos relacionados a prova fotográfica, deve ser alinhado a esquerda conforme design

[henriquecbuss]

Feito @juramos-2020!

No card das ações, adicionar o elemento de "Members claimed this action"

Pensei que tínhamos conversado de deixar esse elemento só no modal de claim (quando o usuário realmente clica em "Reivindicar"). Coloquei pra ver como ficava para poder ter a opinião de vocês... eu pessoalmente gosto do card limpo, bem simples, mas por outro lado, pode ser interessante (mas não essencial) ter essa informação antes de reivindicar a ação.

Enfim, o que acham @lucca65 @juramos-2020 @rafachadud, deixamos esse elemento de contagem de claims da ação no card da ação também, ou só no modal de claim?

[juramos-2020]

Oi @NeoVier, eu lembro bem vagamente da conversa e se eu não me engano acho que foi o @lucca65 que tinha sugerido essa melhoria. Sinceramente não tenho nenhum argumento que defenda a permanência ou a ausência dessa informação no card. Como você disse, é algo interessante mas realmente não é essencial. Bom... vou deixar a critério de vcs @lucca65 e @rafachadud 😉

[juramos-2020]

@NeoVier

ao clicar em "Ganhe Buss" no card do perfil da comunidade e abrir a página de "How to earn", o scrol vai direto para o final da página (para o card do cachorrinho). Nesse caso, deveria abrir no início da página.

E ao usar o scrol lateral para fazer a rolagem dos cards, vi que está acontecendo tipo uma falha. Mas não sei se isso é um bug do meu celular...

card.acoes.mp4

[henriquecbuss]

Não é bug no celular não, @juramos-2020 😅. É uma rara ocasião em que funciona no Safari, mas não nos outros browsers. Estou investigando pra resolver 🏃‍♂️

[henriquecbuss]

Deve estar resolvido agora @juramos-2020 💪

Fico no aguardo da resposta do @lucca65 e da @rafachadud sobre o elemento de contagem de claims no card da ação

[juramos-2020]

Maravilha @NeoVier ficou show de bola ✨😉✌🎉

[lucca65]

Pessoal, por mim fica dentro do modal!

[henriquecbuss]

👍 Removi o elemento do card pra ficar só no modal

Acredito que esteja tudo resolvido, só preciso de uma aprovação pra ter certeza @lucca65

[lucca65]

Incrível! vou preparar a release draft