update 3 files and delete 1 file

src/components/Input/index.js

@@ -1,39 +1,13 @@
 import React, { useState } from "react";
 import _ from "lodash";
-import "./index.scss";
-
-const langDetector = (lang, option1, option2) => {
-  return lang === "fa" ? option1 : option2;
-};
-
-const inputStatusHandler = (value, focus, status, primary, success, danger) => {
-  if (!focus) {
-    return "";
-  } else {
-    if (!value) {
-      return primary;
-    } else {
-      if (status) {
-        return success;
-      } else {
-        return;
-      }
-    }
-  }
-};
 
 export default function Input(props) {
   const [focusToggle, setFocusToggle] = useState(false);
 
   const {
-    backgroundColor,
-    lang,
-    theme,
     inputMode,
     label,
-    status,
     maxLength,
-    message,
     onChange,
     align,
     name,
@@ -45,136 +19,27 @@ export default function Input(props) {
 
   return (
     <div
-      className={_.join(
-        [
-          "input flex flex-col relative my-2 dark:bg-opacity-10  w-full",
-          langDetector(lang, "fa", "en"),
-        ],
-        " "
-      )}
+      className="input flex flex-col relative my-2 dark:bg-opacity-10 w-full"
       style={{ width }}
     >
-      {/* <label
-        className={_.join(
-          [
-            "absolute top-1/2 transform -translate-y-1/2 text-gray-500 dark:text-white  px-2 text-xs transition-all duration-300",
-            langDetector(lang, "right-2", "left-2"),
-            inputStatusHandler(
-              value,
-              focusToggle,
-              status,
-              "input__labelFocus",
-              "input__labelSuccess",
-              "input__labelDanger"
-            ),
-          ],
-          " "
-        )}
-        onClick={() => setFocusToggle(true)}
+      <label
+        className={`absolute right-2 transform bg-white -translate-y-1/2 dark:text-white  px-2 text-xs transition-all duration-300 pointer-events-none ${value || focusToggle ? "top-0 text-xs" : "top-1/2 text-sm"} ${focusToggle ? "text-blueC0" : "text-gray1"}`}
       >
         {label}
-      </label> */}
+      </label>
       <input
         type="text"
         inputMode={inputMode}
-        placeholder={label}
-        className={_.join(
-          [
-            `flex-1 border border-gray-300 dark:bg-opacity-10 dark:text-white  rounded-md outline-none py-3 px-4 text-tiny ${
-              backgroundColor ? backgroundColor : "bg-transparent"
-            } ${align}`,
-            inputStatusHandler(
-              value,
-              focusToggle,
-              status,
-              "input__inputActive",
-              "input__inputSuccess",
-              "input__inputDanger"
-            ),
-            "transition",
-          ],
-          " "
-        )}
+        // placeholder={label}
+        className={`flex-1 border border-gray-300 dark:bg-opacity-10 dark:text-white focus:border-blueC0  rounded-md outline-none py-3 px-4 text-tiny ${align} ${direction}`}
         value={value}
-        style={{ direction: direction }}
         onChange={(e) =>
           onChange(name, (e.target.value = regex(e.target.value)))
         }
         onFocus={() => setFocusToggle(true)}
-        onBlur={() => (!value ? setFocusToggle(false) : setFocusToggle(true))}
+        onBlur={() => setFocusToggle(false)}
         maxLength={maxLength}
       />
-      {/* {!status && value && (
-        <img
-          src={danger}
-          alt={langDetector(lang, "اشتباه", "wrong")}
-          className={_.join(
-            [
-              "w-4 h-4 absolute top-1/2 transform -translate-y-1/2",
-              langDetector(lang, "left-2", "right-2"),
-            ],
-            " "
-          )}
-        />
-      )} */}
-      {/* {status && value && (
-        <img
-          src={tick}
-          alt={langDetector(lang, "درست", "right")}
-          className={_.join(
-            [
-              "w-4 h-4 absolute top-1/2 transform -translate-y-1/2",
-              langDetector(lang, "left-2", "right-2"),
-            ],
-            " "
-          )}
-        />
-      )} */}
-
-      {value && !status && (
-        <span
-          className={_.join(
-            [
-              "input__message text-xs absolute -bottom-5",
-              langDetector(lang, "right-2", "left-2"),
-              inputStatusHandler(
-                value,
-                focusToggle,
-                status,
-                "",
-                "input__messageSuccess",
-                "input__messageDanger"
-              ),
-              "transition",
-            ],
-            " "
-          )}
-        >
-          {message}
-        </span>
-      )}
-      {/* {value && (
-        <span
-          className={_.join(
-            [
-              "input__length absolute -bottom-5 text-xs",
-              langDetector(lang, "left-2", "right-2"),
-              inputStatusHandler(
-                value,
-                focusToggle,
-                status,
-                "",
-                "input__lengthSuccess",
-                "input__lengthDanger"
-              ),
-              "transition",
-            ],
-            " "
-          )}
-        >
-          {value.length + "/" + maxLength}
-        </span>
-      )} */}
     </div>
   );
 }

src/components/Input/index.scss

@@ -1,60 +0,0 @@
-$primary: #23C933;
-$gray: #dbdbdb;
-$danger: #E00A0A;
-$success: #23C933;
-
-.input {
-  &__labelFocus{
-    top: 0px !important;
-    font-size: 9px !important;
-    color: $primary !important;
-  }
-  &__labelDanger{
-    top: 0px !important;
-    font-size: 9px !important;
-    color: $danger !important;
-  }
-  &__labelSuccess{
-    top: 0px !important;
-    font-size: 9px !important;
-    color: $success !important;
-  }
-
-
-  &__inputActive{
-    border-color: $primary !important;
-  }
-  &__inputSuccess{
-    border-color: $success !important;
-  }
-  &__inputDanger{
-    border-color: $danger !important;
-  }
-
-  &__message{
-    &Success{
-      color: $success;
-    }
-    &Danger{
-      color: $danger;
-    }
-  }
-  &__length{
-    &Success{
-      color: $success;
-    }
-    &Danger{
-      color: $danger;
-    }
-  }
-}
-
-.en {
-  direction: ltr;
-  text-align: left;
-}
-
-.fa {
-  direction: rtl;
-  text-align: right;
-}

src/views/Auth/Profile/GenderSwitch/index.js

@@ -1,5 +1,5 @@
 import React from "react";
-import './index.scss';
+import "./index.scss";
 
 export default function GenderSwitch({
   onChange,
@@ -9,18 +9,21 @@ export default function GenderSwitch({
   label,
 }) {
   return (
-    <div className="gender flex justify-between items-center">
+    <div className="flex flex-col w-full gap-4">
+      <strong className="text-sm text-gray1">{label}</strong>
+      <div className="flex w-full items-center gap-4">
+        {options?.map((option, index) => (
           <div
-        className={selectedOption === 2 && "gender__active"}
-        onClick={() => onChange(name, 2)}
+            className={`rounded-sm py-3 flex-1 transition-all border border-solid border-blueC0 duration-500 cursor-pointer text-center ${
+              selectedOption === index + 1
+                ? "bg-blueC0 text-white"
+                : "  text-blueC0"
+            }`}
+            onClick={() => onChange(name, index + 1)}
           >
-        {options[0]}
+            {option}
           </div>
-      <div
-        className={selectedOption === 1 && "gender__active"}
-        onClick={() => onChange(name, 1)}
-      >
-        {options[1]}
+        ))}
       </div>
     </div>
   );

src/views/Auth/Profile/index.js

@@ -472,7 +472,7 @@ function Profile({
     </div>
   ) : (
     <div
-      className="flex flex-col items-center gap-5 w-full pt-5"
+      className="flex flex-col items-center gap-5 w-full pt-5 select-none"
       onSubmit={(e) => onSubmit()}
     >
       <Upload
@@ -565,7 +565,7 @@ function Profile({
           onChange={(name, value) =>
             setFormData({ ...formData, [name]: value })
           }
-          label=""
+          label="جنسیت"
         />
         <div className="w-full"></div>
       </div>