refactor: remove border and fix the design to be the same as figma (#308

) * refactor: remove border and fix the design to be the same as figma * refactor: fix background color input and border
devhatt · Sep 25, 2024 · 7534a42 · 7534a42
1 parent 9398e3b
commit 7534a42
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 4 deletions.
diff --git a/src/layouts/pages/PetVet/images/check.svg b/src/layouts/pages/PetVet/images/check.svg
diff --git a/src/layouts/pages/PetVet/index.js b/src/layouts/pages/PetVet/index.js
@@ -25,7 +25,7 @@ const html = `
             <div class="petvet-page__card-content">
               <p>O seu pet amigo foi castrado?</p>
               <form>
-              <fieldset data-select="neutered-radio"></fieldset>
+              <fieldset data-select="neutered-radio" class="petvet-page__neutered-radio"></fieldset>
               </form>
             </div>
           </div>
@@ -38,7 +38,7 @@ const html = `
             <div class="petvet-page__card-content">
               <p>Cuidados especiais</p>
               <form>
-                <fieldset data-select="special-care-radio"></fieldset>
+                <fieldset data-select="special-care-radio" class="petvet-page__special-care-radio"></fieldset>
               </form>
             </div>
           </div>
@@ -68,8 +68,8 @@ function getBooleanValue(value) {
   return value in radiosValue ? radiosValue[value] : false;
 }
 
-function createAndMount({ name, text, mountTo, value }) {
-  const radio = new Radio({ name, text, value });
+function createAndMount({ name, text, mountTo, value, borderless }) {
+  const radio = new Radio({ name, text, value, borderless });
   radio.selected
     .get('radio-button')
     .setAttribute('aria-label', `${getAriaLabel(name)}-${text.toLowerCase()}`);
@@ -94,24 +94,28 @@ export default function PetVetPage({ vaccines = [] } = {}) {
     text: 'Não',
     mountTo: $specialCareRadio,
     value: 'notSpecialCare',
+    borderless: true,
   });
   const specialCare = createAndMount({
     name: 'specialCare',
     text: 'Sim',
     mountTo: $specialCareRadio,
     value: 'specialCare',
+    borderless: true,
   });
   createAndMount({
     name: 'neutered',
     text: 'Não',
     mountTo: $neuteredRadio,
     value: 'notNeutered',
+    borderless: true,
   });
   createAndMount({
     name: 'neutered',
     text: 'Sim',
     mountTo: $neuteredRadio,
     value: 'neutered',
+    borderless: true,
   });
 
   this.specialCareText = new TextArea({

diff --git a/src/layouts/pages/PetVet/index.scss b/src/layouts/pages/PetVet/index.scss
@@ -80,6 +80,33 @@
     gap: 2rem;
   }
 
+  &__neutered-radio,
+  &__special-care-radio {
+    display: flex;
+    gap: 2.9rem;
+
+    .radio-container {
+      &__input {
+        border-radius: 0.3rem;
+
+        &:checked {
+          border-color: colors.$primary200;
+
+          background-color: colors.$primary200;
+
+          background-image: url('./images/check.svg');
+          background-repeat: no-repeat;
+          background-position: center;
+          background-size: 70% 70%;
+        }
+
+        &:checked + .radio-container__dot {
+          color: colors.$gray800;
+        }
+      }
+    }
+  }
+
   &__img {
     max-width: 5.4rem;
     max-height: 5.4rem;