feat: create pet avatar component

devhatt · Jul 8, 2024 · 2c137ac · 2c137ac
1 parent 243bc2b
commit 2c137ac
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 10 deletions.
diff --git a/src/components/PetAvatar/index.scss b/src/components/PetAvatar/index.scss
@@ -11,6 +11,10 @@
   text-decoration: none;
   aspect-ratio: 1/1;
 
+  opacity: 0.85;
+
+  transition: 0.3s ease-in-out;
+
   &__img {
     height: 100%;
 
@@ -28,8 +32,6 @@
   }
 
   &__title {
-    overflow: hidden;
-
     font-family: fonts.$fourthFont;
 
     color: colors.$gray200;
@@ -47,9 +49,6 @@
 
   &:hover {
     transform: scale(1.02);
-  }
-
-  &:not(:hover) {
-    opacity: 0.9;
+    opacity: 1;
   }
 }
diff --git a/src/layouts/app/components/SideMenu/index.js b/src/layouts/app/components/SideMenu/index.js
@@ -9,8 +9,8 @@ import meusPets from './images/meuspets.svg';
 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';
+import './index.scss';
 
 const html = `
   <nav class="side-menu-nav">
@@ -28,7 +28,7 @@ const html = `
       <div class="side-menu-content__line"></div>
       <div class="side-menu-content__yourpet">
         <h2 class="side-menu-content__title-yourpet">Seu Pet</h2>
-        <div class="side-menu-content__avatar-yourpet"  data-select="avatar-container"></div>
+        <div class="side-menu-content__avatars-yourpet"  data-select="avatar-container"></div>
       </div>
       <div class="side-menu-content__line"></div>
       <div class="side-menu-content__itens" alt="itens-um">

diff --git a/src/layouts/app/components/SideMenu/index.scss b/src/layouts/app/components/SideMenu/index.scss
@@ -84,7 +84,7 @@
     font-style: fonts.$normal;
   }
 
-  &__avatar-yourpet {
+  &__avatars-yourpet {
     display: grid;
     grid-template-columns: repeat(3, 6rem);
     grid-gap: 2rem;

diff --git a/src/stories/PetAvatar.stories.js b/src/stories/PetAvatar.stories.js
@@ -6,7 +6,9 @@ export default {
   title: 'Components/PetAvatar',
   render: (args) => {
     const $container = document.createElement('div');
-    $container.style.width = '6rem';
+    $container.style.width = '60px';
+    $container.style.height = '90px';
+    $container.style.overflow = 'visible';
     const petAvatar = new PetAvatar(args);
     petAvatar.mount($container);