fix: add aspect-ratio to UploadImaghe component

DominMFD · Mar 27, 2024 · f40359a · f40359a
1 parent 4bf8f3e
commit f40359a
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 11 deletions.
diff --git a/src/components/UploadImage/index.js b/src/components/UploadImage/index.js
@@ -5,20 +5,20 @@ import plusIcon from './img/plus-icon.svg';
 import photoIcon from './img/photo-icon.svg';
 
 const html = `
-  <div class="container">
-    <div class="container__animation">
-      <div class="container__circle"></div>
-      <div class="container__circle-duplicate"></div>
+  <div class="container-upload-image">
+    <div class="container-upload-image__animation">
+      <div class="container-upload-image__circle"></div>
+      <div class="container-upload-image__circle-duplicate"></div>
     </div>
-    <label for="input-file" class="container__label">
-      <div class="container__image-container">
-        <img class="container__placeholder-image" src="${placeholderImage}" alt="Placeholder">
-        <img class="container__preview-image hidden" data-select="image-preview" alt="Imagem carregada">
+    <label for="input-file" class="container-upload-image__label">
+      <div class="container-upload-image__image-container">
+        <img class="container-upload-image__placeholder-image" src="${placeholderImage}" alt="Placeholder">
+        <img class="container-upload-image__preview-image hidden" data-select="image-preview" alt="Imagem carregada">
       </div>
-      <div class='container__button'>
+      <div class='container-upload-image__button'>
         <img data-select="button-icon" src="${plusIcon}">
       </div>
-      <input class="container__input" id="input-file" name="input-file" type="file" accept="image/*" data-select="upload-input">
+      <input class="container-upload-image__input" id="input-file" name="input-file" type="file" accept="image/*" data-select="upload-input">
     </label>
   </div>
 `;

diff --git a/src/components/UploadImage/index.scss b/src/components/UploadImage/index.scss
@@ -1,5 +1,6 @@
-.container {
+.container-upload-image {
   position: relative;
+  aspect-ratio: 1 / 1;
 
   &__label {
     cursor: pointer;
@@ -11,6 +12,7 @@
 
   &__image-container {
     min-width: 186px;
+    height: 100%;
     min-height: 186px;
 
     overflow: hidden;