Enhancement/user settings page

henriquecbuss commented 2 years ago

What issue does this PR close

Closes #796

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

[x] Create a new /settings page, with account settings for the user
[x] Remove the preferences that are now in /settings from /profile/:user
[x] Add a link in the menu (hovering the user's picture) to /settings
[x] Change how the menu (hovering the user's picture) looks
[x] Figure out what to do regarding this: https://cambiatus.slack.com/archives/CA83HJAAD/p1661873170294309

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

Go to the new settings page (from the menu accessible on your avatar on the top right)
Check that everything looks ok and everything works ok
Go to your profile, and make sure these preferences aren't there anymore, and the profile still looks ok
Check the new menu (hovering the user's picture) style

netlify[bot] commented 2 years ago

Deploy Preview for cambiatus-elm-book ready!

Name	Link
Latest commit	bab98955f847529fa460f65d280e1be8f6122b1d
Latest deploy log	https://app.netlify.com/sites/cambiatus-elm-book/deploys/6310eb8eb8c1570008700b27
Deploy Preview	https://deploy-preview-823--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.

netlify[bot] commented 2 years ago

Deploy done!

Name	Link
Latest commit	bab98955f847529fa460f65d280e1be8f6122b1d
Latest deploy log	https://app.netlify.com/sites/cambiatus/deploys/6310eb8ecd55500008532a19
Deploy Preview	https://deploy-preview-823--cambiatus.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 commented 2 years ago

The only thing missing now is to figure out if we should delete KYC and address or just KYC

henriquecbuss commented 2 years ago

I adjusted the size of the icons to be closer to the font size. However, I don't think there's a straightforward way to change the thickness of the icons with css. It would be great if we had a scale of weights for icons, but I think the thickness is kind of ok for now. Apple's Human Design Guidelines is a great example for icons: https://developer.apple.com/design/human-interface-guidelines/foundations/sf-symbols

I also adjusted the height of each item to be a little smaller. Let me know what you think 😁

henriquecbuss commented 2 years ago

I've found a little bug, when navigating with tab key, it skips the new option for configurations. goes from profile to language.

I can't seem to replicate that 🤔

https://user-images.githubusercontent.com/39280468/187767349-57c5fb53-aefd-40d0-a197-5a3c75388fdd.mov

lucca65 commented 2 years ago

safari maybe?? 🤔

https://user-images.githubusercontent.com/1082127/187782700-d22554e9-bd1d-4b2d-9255-a73f9fc4764f.mov

lucca65 commented 2 years ago

Shift Tab also has strange behavior https://user-images.githubusercontent.com/1082127/187783204-bddf521d-2fea-408f-98fc-9bb4729768fd.mov

henriquecbuss commented 2 years ago

That video I sent was on safari 🤔

If you click on the link, does it work? If it does, I don't see why tab wouldn't work. Can you try on an anonymous tab just to be sure?

Also, that second video you sent isn't loading for some reason

lucca65 commented 2 years ago

I've made a new video showing both behaviors. Both for regular tabs. Hover on the profile tag, hit tab.. Then hitting shift tab a few times. It gets out of the profile and goes to the search and community selector https://user-images.githubusercontent.com/1082127/187790235-60882f51-61aa-48dd-a2b8-f7abae38cdca.mov

lucca65 commented 2 years ago

meh, the new video don't load either, Ill send over slack

henriquecbuss commented 2 years ago

@juramos-2020 @rafachadud também testei uma versão do menu de hover do perfil com cantos menos arredondados (discuti isso com o @lucca65 no Slack), e ficamos indecisos. O que opinam? Ficamos com os cantos mais arredondados, mais típicos da Cambiatus, ou mudamos para cantos menos arredondados?

rafachadud commented 2 years ago

https://ionic.io/ionicons

@lucca65 @NeoVier @juramos-2020 +1 to start using one library for icons. Actually me and Ju started using one source for the new icons (https://tablericons.com/), but I'm not sure how the documentation is for dev, but they are all outlined.

We can discuss and agree on using one library and I can work on updating the design system accordingly. I think only one or two icons where we have the Cambiatus' logo will need to be custom thought.

@NeoVier I liked the menu less rounded than usual, it seems to fir better in cases there are a longer user name, and all spacings look the same. +1 for me on that change.

henriquecbuss commented 2 years ago

Seems pretty easy to use these icons. Docs for devs are on their GitHub repository: https://github.com/tabler/tabler-icons

henriquecbuss commented 2 years ago

So we don't pollute this PR with this, I've created an issue: https://github.com/cambiatus/frontend/issues/825. I don't think we should address this in this PR, as it will be quite a bit of work, not necessarily related to this PR

juramos-2020 commented 2 years ago

@NeoVier podemos manter o espaçamento que vc está usando nas laterais na área de cima, entre o nome e topo do menu. Acho que é de 16px, correto?

Screenshot_2022-09-01-11-55-57-054_com.android.chrome.jpg

henriquecbuss commented 2 years ago

@juramos-2020 aumentei o espaçamento de cima (para 12px que é o que tem nos lados), vê se ficou melhor 😁. Agora dá pra ver pelo deploy preview: https://deploy-preview-823--cambiatus.netlify.app/dashboard

juramos-2020 commented 2 years ago

Ja Posso fazer o teste?

henriquecbuss commented 2 years ago

Pode sim

juramos-2020 commented 2 years ago

@NeoVier quanto que tem de espaçamento em cada opção do menu? Acho que precisamos aumentar um pouco pois uma opção está muito próxima da outra.

henriquecbuss commented 2 years ago

Nesse estilo de menu geralmente não tem nenhum espaçamento entre os itens. Pelo menos é o que eu vejo por aí. Alguns exemplos que abri aqui rapidinho: Slack, GitHub, macOS, Figma, Whatsapp, Spotify, Miro. Até o nosso próprio app, na tela de configuração de categorias, tem um menu assim, e também não tem nenhum espaçamento entre os itens.

Podemos adicionar se quiser, só estou citando a maneira como geralmente é feito

juramos-2020 commented 2 years ago

OI @NeoVier

a altura de cada opção esta em 48px? se tiver ok, se não tiver só sugiro fazer essa alteração. No design tava com uma altura de 24px, fiz a correção agora. A sugestão foi seguindo o material.io para melhorar a usabilidade, visto que algumas pessoas tem dedos "gordinhos" e faz com que cliquem na opção errada quando estas apresentam muito unidas.

Mas como disse, se ja tiver 48px beleza ta tudo certo.

juramos-2020 commented 2 years ago

Também poderia alinhar o texto ao toggle

Screenshot_2022-09-01-14-03-07-074_com.android.chrome.jpg

henriquecbuss commented 2 years ago

Feito ✅

No desktop, mantive a altura dos itens em 32px (achei que 48px ficou gigante) - o material UI também faz isso no desktop, com a versão Dense do dropdown.

No mobile, aumentei a altura

juramos-2020 commented 2 years ago

Maravilha @NeoVier

Já ia pedir para aproximar mais o texto do toggle, para 8px, conforme ta no nosso desing. Mas vi que esse espaçamento grande está em todo o webapp 😅 Talvez possamos resolver isso no futuro em outra issue né?!

henriquecbuss commented 2 years ago

Sim, melhor resolver separado 😅. Consegue abrir uma issue @juramos-2020?

juramos-2020 commented 2 years ago

Beleza consigo sim ☺️

henriquecbuss commented 2 years ago

@juramos-2020 em relação a esse PR, ainda falta alguma coisa ou está tudo ok?

juramos-2020 commented 2 years ago

Sim está tudo certo em relação a esse PR ☺️

cambiatus / frontend