From 10fd2d43404744ecf17f0598af01403b3edd447b Mon Sep 17 00:00:00 2001
From: mahdi <andalibmahdi45@gmail.com>
Date: Sun, 19 Jun 2022 14:36:11 +0430
Subject: [PATCH] changed radion button color | 20

---
 src/App.scss                    | 48 +++++++++---------
 src/components/Radio/index.js   |  9 +++-
 src/components/Radio/index.scss | 88 ++++++++++++++++-----------------
 3 files changed, 76 insertions(+), 69 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index e4d22ee..b788a71 100644
--- a/src/App.scss
+++ b/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{
-  box-shadow: 0px 0px 10px rgba(0,0,0,0.08);
+.shadow-all {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.08);
 }
 
 //slider
-.styles-module_item-tracker__3bypy{
-  padding-top : 20px !important;
+.styles-module_item-tracker__3bypy {
+  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){
-  .container{
+@media screen and (min-width: $xs) {
+  .container {
     max-width: 80%;
   }
 }
 
-@media screen and (min-width : $lg){
-  .container{
+@media screen and (min-width: $lg) {
+  .container {
     max-width: 100%;
   }
 }
 
-@media screen and (min-width : $xl){
-  .container{
+@media screen and (min-width: $xl) {
+  .container {
     max-width: 1200px;
   }
 }
 
-@media screen  and (min-width : $xxl) {
-  .container{
+@media screen and (min-width: $xxl) {
+  .container {
     max-width: 1480px;
   }
 }
 
-.Toastify *{
+.Toastify * {
   font-size: 13px;
 }
diff --git a/src/components/Radio/index.js b/src/components/Radio/index.js
index c344df2..2add3f0 100644
--- a/src/components/Radio/index.js
+++ b/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>
diff --git a/src/components/Radio/index.scss b/src/components/Radio/index.scss
index 89f8049..4f427a3 100644
--- a/src/components/Radio/index.scss
+++ b/src/components/Radio/index.scss
@@ -1,58 +1,58 @@
 $color1: #f4f4f4;
-$color2: #3197EE;
+$color2: #12cf7f;
 
 .radio {
-    input[type="radio"] {
-      position: absolute;
-      opacity: 0;
+  input[type="radio"] {
+    position: absolute;
+    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: $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;
-          }
+          background-color: $color2;
+          box-shadow: inset 0 0 0 4px $color1;
         }
       }
-      &:focus {
-        + .radio-label {
-          &:before {
-            outline: none;
-            border-color: $color2;
-          }
+    }
+    &:focus {
+      + .radio-label {
+        &:before {
+          outline: none;
+          border-color: $color2;
         }
       }
-      &:disabled {
-        + .radio-label {
-          &:before {
-            box-shadow: inset 0 0 0 4px $color1;
-            border-color: darken($color1, 25%);
-            background: darken($color1, 25%);
-          }
+    }
+    &:disabled {
+      + .radio-label {
+        &:before {
+          box-shadow: inset 0 0 0 4px $color1;
+          border-color: darken($color1, 25%);
+          background: darken($color1, 25%);
         }
       }
-      + .radio-label {
-        &:empty {
-          &:before {
-            margin-right: 0;
-          }
+    }
+    + .radio-label {
+      &:empty {
+        &:before {
+          margin-right: 0;
         }
       }
     }
-  }
\ No newline at end of file
+  }
+}