From 7534a42f4d6f2b7d8059e038f70036b30a255f5b Mon Sep 17 00:00:00 2001
From: Math <mf635097@gmail.com>
Date: Wed, 25 Sep 2024 10:13:51 -0300
Subject: [PATCH] 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
---
 src/layouts/pages/PetVet/images/check.svg |  3 +++
 src/layouts/pages/PetVet/index.js         | 12 ++++++----
 src/layouts/pages/PetVet/index.scss       | 27 +++++++++++++++++++++++
 3 files changed, 38 insertions(+), 4 deletions(-)
 create mode 100644 src/layouts/pages/PetVet/images/check.svg

diff --git a/src/layouts/pages/PetVet/images/check.svg b/src/layouts/pages/PetVet/images/check.svg
new file mode 100644
index 00000000..b2c1c369
--- /dev/null
+++ b/src/layouts/pages/PetVet/images/check.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 4.23077L4.5 8L11 1" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/layouts/pages/PetVet/index.js b/src/layouts/pages/PetVet/index.js
index e9b2d28f..b3f52464 100644
--- 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
index 3b25cd52..591e42a1 100644
--- 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;