feat: create pet avatar component #261
Conversation
|
Comentários resolvidos! |
|
Seria legal vc ver com o Eliabe um hover para o seu componente, mas é so uma sugestão, ele ta bom, pra mim ta aprovado, parabéns!!! |
Hover adicionado! |
| .pet-container { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 1rem; | ||
|
|
||
| align-items: center; | ||
|
|
||
| text-decoration: none; | ||
| aspect-ratio: 1/1; | ||
|
|
There was a problem hiding this comment.
Coloca um transition aqui pra ficar mais bonitinho a animcaçào de hover
| @@ -84,6 +84,14 @@ | |||
| font-style: fonts.$normal; | |||
| } | |||
|
|
|||
| &__avatar-yourpet { | |||
There was a problem hiding this comment.
acredito que aqui pra ficar um nome mais legal seria avatars-yourpet ou algo assim, esse é um container que contem avatares, do jeito que ta parece que esse estilo é um estilo dos avatares em si!
| @@ -10,6 +10,7 @@ import notificacoes from './images/notifications.svg'; | |||
| import perfil from './images/perfil.svg'; | |||
| import petdex from './images/petdex.svg'; | |||
| import './index.scss'; | |||
| import PetAvatar from '../../../../components/PetAvatar'; | |||
There was a problem hiding this comment.
Move esse import uma linha pra cima, vamos sempre manter a importação do CSS como a ultima importação
| &:not(:hover) { | ||
| opacity: 0.9; | ||
| } |
There was a problem hiding this comment.
Não precisamos desse not! Quando estiver hover, o ideal é que evitemos ter que pensar muito no css, no caso sim isso funciona, mas acaba sendo melhor colocar no .pet-container esse opacity: 0.9 e ai no hover colocar o opacity: 1
Não é como se isso fosse errado e talz, a questão é apenas q podemos fazer a mesma coisa num código mais simples, sem precisar do not, no fim sempre que não tiver no hover ele já é not(:hover)!
Closes #231
Feature
Create Pet Avatar component and display it in Home.
Visual evidences 🖼️
Checklist
Additional info
N/A