From da86a4291cdba245deba2d2bc02fa480dd0b1c01 Mon Sep 17 00:00:00 2001
From: Klebson Mateus <klebsonbm@gmail.com>
Date: Thu, 16 May 2024 20:24:16 -0300
Subject: [PATCH] Issue 188 (#206)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* style: Alterações RadioButton e Checkbox

* style: Adicionada cor $gray250: rgb(172, 172, 181)

* style: Alterar cor de borda ao clicar no RadioButton

* style: Finalizando edição do RadioButton

* refactor: Remover comentários do index.js do RadioButton

* style: Pequenos ajustes RadioButton
---
 src/components/Checkbox/index.scss    |  8 +++-----
 src/components/RadioButton/index.js   |  3 +--
 src/components/RadioButton/index.scss | 28 +++++++++++----------------
 src/styles/colors.scss                |  1 +
 4 files changed, 16 insertions(+), 24 deletions(-)

diff --git a/src/components/Checkbox/index.scss b/src/components/Checkbox/index.scss
index 812167ef..4666bad2 100644
--- a/src/components/Checkbox/index.scss
+++ b/src/components/Checkbox/index.scss
@@ -13,7 +13,7 @@
     height: 2.2rem;
 
     margin: 0.8rem;
-    border: 0.2rem solid colors.$gray500;
+    border: 2px solid colors.$gray250;
 
     border-radius: 0.5rem;
 
@@ -21,15 +21,13 @@
     appearance: none;
 
     &:checked {
-      border-color: colors.$primary500;
+      border-color: colors.$primary200;
 
-      background: colors.$primary500 url('./images/check.svg') no-repeat center
+      background: colors.$primary200 url('./images/check.svg') no-repeat center
         center/70%;
     }
 
     &:disabled {
-      border-color: colors.$gray500;
-
       cursor: not-allowed;
     }
   }
diff --git a/src/components/RadioButton/index.js b/src/components/RadioButton/index.js
index 1ef8e7bf..c9400f68 100644
--- a/src/components/RadioButton/index.js
+++ b/src/components/RadioButton/index.js
@@ -30,11 +30,10 @@ export default function RadioButton({
   this.setValue(value);
   this.setName(name);
   this.setDisabled(disabled);
-
   const $radioButton = this.selected.get('radio-button');
 
   $radioButton.addEventListener('change', (e) => {
-    this.setChecked(e.target.checked);
+    this.setCheck(e.target.checked);
   });
 }
 
diff --git a/src/components/RadioButton/index.scss b/src/components/RadioButton/index.scss
index ad8be176..d3405e9b 100644
--- a/src/components/RadioButton/index.scss
+++ b/src/components/RadioButton/index.scss
@@ -6,30 +6,29 @@
 
   align-items: center;
 
+  color: colors.$gray600;
+
   padding: 1rem 8rem 1rem 1rem;
-  border: 0.15rem solid colors.$gray600;
+  border: 0.15rem solid colors.$gray200;
 
-  border-radius: 2rem;
+  border-radius: 1.5rem;
 
   transition: border-color 0.3s;
 
   cursor: pointer;
 
-  &:focus-within {
-    border-color: colors.$primary200;
+  &:has(&__input:checked) {
+    color: colors.$primary200;
 
-    .radio-dot {
-      color: colors.$primary200;
-    }
+    border-color: colors.$primary200;
   }
 
   &__input {
-    width: 2.2rem;
-    height: 2.2rem;
+    width: 1.6rem;
+    height: 1.6rem;
 
     margin: 0.8rem;
-    border: 0.15rem solid colors.$gray600;
-    border-color: colors.$primary200;
+    border: 1px solid colors.$gray200;
 
     border-radius: 50%;
 
@@ -39,23 +38,18 @@
     &:checked {
       border-color: colors.$primary200;
 
-      background: url('./images/ellipse.svg') no-repeat center center/60%;
+      background: url('./images/ellipse.svg') no-repeat center center/70% 70%;
     }
 
     &:disabled {
       border-color: colors.$gray200;
 
       cursor: not-allowed;
-
-      + .checkmark {
-        color: colors.$gray200;
-      }
     }
   }
 
   &__dot {
     font-family: fonts.$primaryFont;
-    color: colors.$gray600;
     font-size: fonts.$xs;
   }
 }
diff --git a/src/styles/colors.scss b/src/styles/colors.scss
index e76a1389..0dbdbfc8 100644
--- a/src/styles/colors.scss
+++ b/src/styles/colors.scss
@@ -25,6 +25,7 @@ $error100: rgb(179, 38, 30);
 $gray100: rgb(236, 239, 242);
 $gray150: rgb(236, 239, 242);
 $gray200: rgb(224, 224, 224);
+$gray250: rgb(172, 172, 181);
 $gray300: rgb(179, 190, 205);
 $gray400: rgb(141, 141, 141);
 $gray500: rgb(96, 104, 115);