Fix RadioButton style

Signed-off-by: Ajay Bura <ajbura@gmail.com>

diff --git a/src/app/atoms/button/RadioButton.jsx b/src/app/atoms/button/RadioButton.jsx
index b10e0cfdfc0fa9c95d49154a37aef8c150e60806..c14a334453120fd9779826291f27e45d89cd34ce 100644 (file)
--- a/src/app/atoms/button/RadioButton.jsx
+++ b/src/app/atoms/button/RadioButton.jsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import './RadioButton.scss';
 
 function RadioButton({ isActive, onToggle }) {
+  if (onToggle === null) return <span className={`radio-btn${isActive ? ' radio-btn--active' : ''}`} />;
   return (
     // eslint-disable-next-line jsx-a11y/control-has-associated-label
     <button
@@ -15,11 +16,12 @@ function RadioButton({ isActive, onToggle }) {
 
 RadioButton.defaultProps = {
   isActive: false,
+  onToggle: null,
 };
 
 RadioButton.propTypes = {
   isActive: PropTypes.bool,
-  onToggle: PropTypes.func.isRequired,
+  onToggle: PropTypes.func,
 };
 
 export default RadioButton;

diff --git a/src/app/atoms/button/RadioButton.scss b/src/app/atoms/button/RadioButton.scss
index 924c655a670535be7ce4ca55f771819d69d3a880..f76eefbb722ebf22e09ef9853fbd13df005d7661 100644 (file)
--- a/src/app/atoms/button/RadioButton.scss
+++ b/src/app/atoms/button/RadioButton.scss
@@ -2,23 +2,25 @@
 
 .radio-btn {
   @extend .cp-fx__row--c-c;
-  width: 24px;
-  height: 24px;
+  width: 20px;
+  height: 20px;
   border-radius: 50%;
-  background-color: var(--bg-surface-low);
-  box-shadow: var(--bs-surface-border);
+  background-color: var(--bg-surface-border);
+  border: 2px solid var(--bg-surface-border);
   cursor: pointer;
 
+  &::before {
+    content: '';
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    background-color: var(--bg-surface-border);
+    border-radius: 50%;
+  }
   &--active {
-    background-color: var(--bg-positive);
-
+    border: 2px solid var(--bg-positive);
     &::before {
-      content: '';
-      display: inline-block;
-      width: 16px;
-      height: 16px;
-      background-color: white;
-      border-radius: 50%;
+      background-color: var(--bg-positive);
     }
   }
 }
\ No newline at end of file