Issue 188 (#206)

* 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

@@ -13,23 +13,21 @@
     height: 2.2rem;
 
     margin: 0.8rem;
-    border: 0.2rem solid colors.$gray500;
+    border: 2px solid colors.$gray250;
 
     border-radius: 0.5rem;
 
     cursor: pointer;
     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;
     }
   }

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);
   });
 }
 

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;
   }
 }

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);