Atualizar a fonte e tipologia do app de acordo com o novo padrão

[lucca65]

What we have
Usamos um determinado tamanho de fonte, contraste e espaçamento

Proposal
Melhorar a legibilidade e uso geral do app para as novas diretrizes especificadas aqui

Why
Enquanto esperamos atualizações do backend para o novo shop, podemos adiantar essas melhorias, que na realidade afetam todo o app

How

Additional context

Páginas analisadas

• Login (Enhancement/new typography #625)
• Register (Enhancement/new typography #625)
• Join (Enhancement/new typography #625)
• Dashboard (New typography/dashboard #646)
• All form elements (Create/use a standard way to deal with forms #585)
• Shop (Shop facelift #657)
• Community/How to earn (Update the "How to earn" page #670)
• Community settings (Improve community settings flow #726)
• Notification (Allow marking notification as read without opening it + Group by community #685)
• My claims
• My analysis
• Transfer
• Community creation page (Renovate community creation page #514)

[heltonlr]

Fala @NeoVier , vamos lá:

Essas são as principais mudanças:

FONTE PRINCIPAL
font-family: Nunito Sans;
font-style: normal;
font-weight: normal;
font-size: 15px;
line-height: 22px;
color: #333;

FONTE DOS BOTÕES
font-family: Nunito Sans;
font-style: normal;
font-weight: bold;
font-size: 15px;
line-height: 20px;
color: #FFF;

FONTE DOS TÍTULOS (Uppercase)
font-family: Nunito Sans;
font-style: normal;
font-weight: bold;
font-size: 12px;
line-height: 15px;
color: #000;
text-transform: uppercase;

Basicamente todas essas fontes aumentaram 1px para dar melhor leitura e passaremos a usar o color: #333 (para texto descritivo e #000 para títulos) em vez do #999 para os textos, com exceção dos textos das máscaras dos campos. E também deixaremos de usar aquele verde claro para alguns títulos, principalmente para formulários.

Todos o detalhado da fonte está aqui:
https://www.figma.com/file/fKgkKTTDfR7Vq2R6h4LWQz/Typography?node-id=0%3A1

Aqui está a nova orientação para os formulários, onde estamos basicamente aumentando a fonte em 1px e passando a usar o color: #000, como falei anteriormente:
https://www.figma.com/file/oZJUIyHRmLyLIKDxYebvLg/Form-elements?node-id=0%3A1

Acho que essas são as principais mudanças e sendo aplicadas, já teremos grande melhorias de acessibilidade. Pode não estar tão simples de entender, então pode me chamar se tiver alguma dúvida e acho que daí podem ser feitas entregas em ondas para que eu e a @juramos-2020 possamos navegar em todo o app em staging analisando página por página.

[henriquecbuss]

@heltonlr pode confirmar pra mim se vamos usar Nunito ou Nunito Sans? No figma aparecem as duas (mas com o mesmo nome na propriedade font-family). Por exemplo, o feedback de falha usa uma (sans) e o de sucesso mostra outra (normal). A diferença parece ser que a Nunito normal é mais arredondada.

[heltonlr]

Algo saiu errado com esse feedbacks de sucesso...nós vamos usar apenas a Nunito Sans, @NeoVier

[rafachadud]

Hello @lucca65 and @NeoVier, here's a first proposal for updating the page "How to earn ..." for feedback.
https://www.figma.com/file/l2HhpioJFpVSUW6E5ZjBn9/?node-id=303%3A1494

Beyond the new design, the biggest change is that we separated the content into 2 pages "How to earn..." and a community page, dedicated to the community.

I kept all the spaces Helton used before, but I'll document them in this new designs later this week. Let me know if there is any concerns/questions meanwhile. ;D

[henriquecbuss]

Great @rafachadud! I really like the idea of separating those 2 pages, they've always felt like separate things to me

[lucca65]

@NeoVier can you make a new issue for this page implementation? So we can link back here! Can you also add to our board's inbox

[henriquecbuss]

New issue created here: #670

[lucca65]

thanks bro!

[lucca65]

One more done! Getting there @NeoVier