From 30c0c224936c12c85c5e6505fe3935b00b2037b7 Mon Sep 17 00:00:00 2001
From: Shubham-Sharma-77 <shubham.sharma@srijan.net>
Date: Tue, 28 Sep 2021 12:58:26 +0530
Subject: [PATCH] Fixed Radio Button Checked

---
 stories/Atom/Form/Checkbox/checkbox.scss |  5 +++--
 stories/Atom/Form/Radio/Radio.jsx        | 14 +++++++++----
 stories/Atom/Form/Radio/radio.scss       | 26 ++++++++++++++----------
 stories/assets/scss/_mixins.scss         |  4 ++--
 4 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/stories/Atom/Form/Checkbox/checkbox.scss b/stories/Atom/Form/Checkbox/checkbox.scss
index 298af6c38..145dcd3f5 100644
--- a/stories/Atom/Form/Checkbox/checkbox.scss
+++ b/stories/Atom/Form/Checkbox/checkbox.scss
@@ -5,10 +5,11 @@
 /* checkbox */
 .checkbox-wrapper {
     position: relative;
-    padding-left: 20px;
     display: inline-block;
+    margin-right: $spacing-16;
+    padding-left: $spacing-24;
     input[type=checkbox] {
-        top: 2px;
+        top: 5px;
         left: 0;
         opacity: 0;
         z-index: 1;
diff --git a/stories/Atom/Form/Radio/Radio.jsx b/stories/Atom/Form/Radio/Radio.jsx
index d93b99d59..24725e11c 100644
--- a/stories/Atom/Form/Radio/Radio.jsx
+++ b/stories/Atom/Form/Radio/Radio.jsx
@@ -3,9 +3,15 @@ import './radio.scss';
 
 export const Radio = ({ label }) => {
   return (
-    <div className="radio-wrapper">
-      <input type="radio" id="edit-radio" className="custom-control-input"/>
-      <label id="checkmark" for="edit-radio" name="radioone" className="custom-control-label">{ label }</label>
-    </div>
+    <>
+      <div className="radio-wrapper">
+        <input type="radio" id="undp" name="fav_language" value="undp" className="custom-control-input"/>
+        <label for="undp" className="custom-control-label"><span className="radio_border"></span>{ label }</label>
+      </div>
+      <div className="radio-wrapper">
+        <input type="radio" id="undp2" name="fav_language" value="undp2" className="custom-control-input"/>
+        <label for="undp2" className="custom-control-label"><span className="radio_border"></span>{ label }</label>
+      </div>
+    </>
   );
 };
diff --git a/stories/Atom/Form/Radio/radio.scss b/stories/Atom/Form/Radio/radio.scss
index 08fa282a8..8d2402886 100644
--- a/stories/Atom/Form/Radio/radio.scss
+++ b/stories/Atom/Form/Radio/radio.scss
@@ -5,8 +5,9 @@
 /* radio */
 .radio-wrapper {
     position: relative;
-    padding-left: 20px;
     display: inline-block;
+    margin-right: $spacing-16;
+    padding-left: $spacing-24;
     input[type=radio] {
         top: 2px;
         left: 0;
@@ -14,21 +15,24 @@
         position: absolute;
         & + label {
             cursor: pointer;
-            &:hover::before {
-                border-color: $color-light-pink;
-            }
-            &::before {
-                @extend %checbox-radio-before;
+            .radio_border {
                 border-radius: 50%;
+                @extend %checbox-radio-before;
+            }
+            &:hover .radio_border {
+                border-color: $color-light-pink;
             }
         }
-        &:checked + label::after {
-            top: -3px;
+        &:checked + label .radio_border::after {
+            top: 50%;
             left: 3px;
-            content: "•";
-            color: $color-dark-red;
-            font-size: 19px;
+            content: "";
+            width: 6px;
+            height: 6px;
             position: absolute;
+            background: $color-dark-red;
+            border-radius: 50%;
+            transform: translateY(-50%);
         }
     }
 }
diff --git a/stories/assets/scss/_mixins.scss b/stories/assets/scss/_mixins.scss
index 7ea4d6c44..2085c7f06 100755
--- a/stories/assets/scss/_mixins.scss
+++ b/stories/assets/scss/_mixins.scss
@@ -85,9 +85,9 @@
   }
 }
 
-%checbox-radio-before{
+%checbox-radio-before {
   left: 0;
-  top: 2px;
+  top: 5px;
   content: "";
   width: 12px;
   height: 12px;