Merge branch 'main' into Issue-94

devhatt · May 17, 2024 · 2cf8f3d · 2cf8f3d
2 parents ce8a60d + da86a42
commit 2cf8f3d
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 24 deletions.
diff --git a/src/components/Checkbox/index.scss b/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;
     }
   }

diff --git 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
@@ -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
@@ -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);