changed radion button color | 20

src/App.scss

@@ -5,34 +5,33 @@
 @import "./views/Home/Landscape/Page2/Mobile/index";
 @import "./views/Home/Landscape/Page1/Lights/index.scss";
 
-*{
+* {
   font-family: Regular;
 }
 
-
+.ltr {
-.ltr{
   direction: ltr;
 }
 
-.rtl{
+.rtl {
   direction: rtl;
 }
 
-.scrolling-carousel button{
+.scrolling-carousel button {
   display: none;
 }
 
-.bold{
+.bold {
   font-family: ExtraBold;
 }
 
-.shadow-all{
+.shadow-all {
-  box-shadow: 0px 0px 10px rgba(0,0,0,0.08);
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.08);
 }
 
 //slider
-.styles-module_item-tracker__3bypy{
+.styles-module_item-tracker__3bypy {
-  padding-top : 20px !important;
+  padding-top: 20px !important;
   // transform: translateY(-20px) !important;
 }
 
@@ -82,45 +81,46 @@
 }
 
 //map
-.mapboxgl-map{
+.mapboxgl-map {
   width: 100% !important;
   height: 100% !important;
   border-radius: 20px !important;
-  .marker{
+
+  .marker {
     width: 20px;
-    height: 20px
+    height: 20px;
   }
 }
 
-.container{
+.container {
   width: 100%;
-  margin : 0px auto;
+  margin: 0px auto;
 }
 
-@media screen and (min-width : $xs){
+@media screen and (min-width: $xs) {
-  .container{
+  .container {
     max-width: 80%;
   }
 }
 
-@media screen and (min-width : $lg){
+@media screen and (min-width: $lg) {
-  .container{
+  .container {
     max-width: 100%;
   }
 }
 
-@media screen and (min-width : $xl){
+@media screen and (min-width: $xl) {
-  .container{
+  .container {
     max-width: 1200px;
   }
 }
 
-@media screen  and (min-width : $xxl) {
+@media screen and (min-width: $xxl) {
-  .container{
+  .container {
     max-width: 1480px;
   }
 }
 
-.Toastify *{
+.Toastify * {
   font-size: 13px;
 }

src/components/Radio/index.js

@@ -4,7 +4,14 @@ import "./index.scss";
 export default function Radio(props) {
   return (
     <div className="radio flex items-center">
-      <input id="radio-1" name={props.name} type="radio" checked={props.active} onChange={() => {}} />
+      <input
+        id="radio-1"
+        name={props.name}
+        type="radio"
+        className="accent-pink-500"
+        checked={props.active}
+        onChange={() => {}}
+      />
       <label htmlFor="radio-1" className="radio-label text-xs">
         {/* {props.label} */}
       </label>

src/components/Radio/index.scss

@@ -1,58 +1,58 @@
 $color1: #f4f4f4;
-$color2: #3197EE;
+$color2: #12cf7f;
 
 .radio {
-    input[type="radio"] {
+  input[type="radio"] {
-      position: absolute;
+    position: absolute;
-      opacity: 0;
+    opacity: 0;
+    + .radio-label {
+      &:before {
+        content: "";
+        background: $color1;
+        border-radius: 100%;
+        border: 1px solid darken($color1, 25%);
+        display: inline-block;
+        width: 1.7em;
+        height: 1.7em;
+        position: relative;
+        vertical-align: top;
+        margin-left: 0.5em;
+        cursor: pointer;
+        text-align: center;
+        transition: all 250ms ease;
+      }
+    }
+    &:checked {
       + .radio-label {
         &:before {
-          content: '';
+          background-color: $color2;
-          background: $color1;
+          box-shadow: inset 0 0 0 4px $color1;
-          border-radius: 100%;
-          border: 1px solid darken($color1, 25%);
-          display: inline-block;
-          width: 1.7em;
-          height: 1.7em;
-          position: relative;
-          vertical-align: top;
-          margin-left: 0.5em;
-          cursor: pointer;
-          text-align: center;
-          transition: all 250ms ease;
-        }
-      }
-      &:checked {
-        + .radio-label {
-          &:before {
-            background-color: $color2;
-            box-shadow: inset 0 0 0 4px $color1;
-          }
         }
       }
-      &:focus {
+    }
-        + .radio-label {
+    &:focus {
-          &:before {
+      + .radio-label {
-            outline: none;
+        &:before {
-            border-color: $color2;
+          outline: none;
-          }
+          border-color: $color2;
         }
       }
-      &:disabled {
+    }
-        + .radio-label {
+    &:disabled {
-          &:before {
+      + .radio-label {
-            box-shadow: inset 0 0 0 4px $color1;
+        &:before {
-            border-color: darken($color1, 25%);
+          box-shadow: inset 0 0 0 4px $color1;
-            background: darken($color1, 25%);
+          border-color: darken($color1, 25%);
-          }
+          background: darken($color1, 25%);
         }
       }
-      + .radio-label {
+    }
-        &:empty {
+    + .radio-label {
-          &:before {
+      &:empty {
-            margin-right: 0;
+        &:before {
-          }
+          margin-right: 0;
         }
       }
     }
-  }
+  }
+}