From 77503666549aa0783405ef6373bf1aa158b44059 Mon Sep 17 00:00:00 2001
From: Ajay Bura <ajbura@gmail.com>
Date: Fri, 24 Dec 2021 15:03:57 +0530
Subject: [PATCH] Fix RadioButton style

Signed-off-by: Ajay Bura <ajbura@gmail.com>
---
 src/app/atoms/button/RadioButton.jsx  |  4 +++-
 src/app/atoms/button/RadioButton.scss | 26 ++++++++++++++------------
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/app/atoms/button/RadioButton.jsx b/src/app/atoms/button/RadioButton.jsx
index b10e0cf..c14a334 100644
--- 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 924c655..f76eefb 100644
--- 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