update 5 files

src/assets/icons/camera-white.svg

@@ -0,0 +1,6 @@
+<svg id="camera" xmlns="http://www.w3.org/2000/svg" width="28.512" height="28.512" viewBox="0 0 28.512 28.512">
+  <path id="Vector" d="M5.367,23.76h12.45c3.279,0,4.586-2.008,4.74-4.455l.618-9.813a4.459,4.459,0,0,0-4.455-4.74A1.952,1.952,0,0,1,17,3.695l-.855-1.723A3.921,3.921,0,0,0,12.959,0H10.238a3.924,3.924,0,0,0-3.2,1.972L6.187,3.695A1.952,1.952,0,0,1,4.465,4.752,4.459,4.459,0,0,0,.009,9.492l.618,9.813C.77,21.752,2.088,23.76,5.367,23.76Z" transform="translate(2.664 2.376)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+  <path id="Vector-2" data-name="Vector" d="M0,0H3.564" transform="translate(12.474 9.504)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+  <path id="Vector-3" data-name="Vector" d="M3.861,7.722A3.861,3.861,0,1,0,0,3.861,3.869,3.869,0,0,0,3.861,7.722Z" transform="translate(10.395 13.662)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+  <path id="Vector-4" data-name="Vector" d="M0,0H28.512V28.512H0Z" fill="none" opacity="0"/>
+</svg>

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

@@ -6,13 +6,13 @@ function Birthdate({ value, name, onChange, isDesktop, ...props }) {
   const [isFocused, setIsFocused] = React.useState(false);
 
   return (
-    <div className="flex bg-background relative justify-center lg:w-full border border-solid focus:border-blueMarine dark:focus:border-blueCurious border-surfaceBorder rounded-md py-4 px-4">
+    <div className="flex bg-white relative justify-center lg:w-full border border-solid focus:border-blueC0 dark:focus:border-blueC0 border-gray-300 rounded-md py-3 px-4">
       {isDesktop && (
         <label
-          className={`text-tiny text-blueMarine bg-background dark:bg-grayDarkJungle font-4 right-4 absolute transform -translate-y-1/2 transition-all ${
+          className={`text-gray20 bg-white dark:bg-grayDarkJungle font-4 right-4 absolute transform -translate-y-1/2 transition-all ${
             isFocused
-              ? "top-0 text-blueMarine text-sm dark:text-blueCurious"
+              ? "top-0 text-blueC0 text-xs dark:text-blueCurious"
-              : "top-1/2 text-grayBattleShip text-tiny"
+              : "top-1/2 text-gray1 text-sm"
           }`}
           onClick={() => setIsFocused(true)}
         >

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

@@ -1,5 +1,5 @@
 import React from "react";
-
+import './index.scss';
 
 export default function GenderSwitch({
   onChange,
@@ -9,7 +9,7 @@ export default function GenderSwitch({
   label,
 }) {
   return (
-    <div className="gender d-flex justify-content-between align-items-center">
+    <div className="gender flex justify-between items-center">
       <div
         className={selectedOption === 2 && "gender__active"}
         onClick={() => onChange(name, 2)}

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

@@ -3,17 +3,17 @@
   margin-bottom: 10px;
   div {
     border-radius: 10px;
-    font-family: numeralLight;
+    font-family: Medium;
     padding: 13px 0px;
     width: 45%;
     text-align: center;
     cursor: pointer;
-    color: #ccc;
+    color: #12CF7F;
-    background-color: black;
+    background-color: white;
-    border: 1px solid $gray1;
+    border: 1px solid #12CF7F;
   }
   &__active{
-    background-color: $green4 !important;
+    background-color: #12CF7F !important;
     color: white !important;
     border: none !important;
   }

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

@@ -1,6 +1,8 @@
 import React, { useState, useMemo } from "react";
 import { connect } from "react-redux";
+
 //assets
+import camera from "../../../../assets/icons/camera-white.svg";
 
 const reader = new FileReader();
 function Upload({ name, value: initValue, onChange }) {
@@ -11,10 +13,13 @@ function Upload({ name, value: initValue, onChange }) {
     setSelected(null);
   }, [initValue]);
   return (
-    <div className="flex justify-center bg-surface rounded-full items-center overflow-hidden relative max-w-[100px] max-h-[100px] w-[100px] h-[100px]">
+    <div
+      className="flex justify-center bg-green-400 rounded-full items-center overflow-hidden relative"
+      style={{ width: 100, height: 100 }}
+    >
       <div
         className={`h-full  w-full rounded-full flex justify-center items-center ${
-          value ? "" : "bg-surface"
+          value ? "" : "bg-green-400"
         }`}
       >
         <img
@@ -23,7 +28,7 @@ function Upload({ name, value: initValue, onChange }) {
               ? value?.indexOf("data") > -1
                 ? value
                 : "https://iranesch.com/api/v1/file/" + value
-              : "/icons/camera-white.svg"
+              : camera
           }
           alt=""
           className={`rounded-full ${
@@ -32,8 +37,8 @@ function Upload({ name, value: initValue, onChange }) {
         />
       </div>
       {value && (
-        <div className="rounded-full flex justify-center bg-surface items-center absolute right-0 bottom-0 w-7 h-7 z-20">
+        <div className="rounded-full flex justify-center bg-surface items-center absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-7 h-7 z-20">
-          <img src={"/icons/camera-white.svg"} alt="camera" className="w-2/3" />
+          <img src={camera} alt="camera" className="w-2/3" />
         </div>
       )}
       <input
@@ -49,7 +54,6 @@ function Upload({ name, value: initValue, onChange }) {
   );
 }
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = (state) => ({});
-});
 
 export default connect(mapStateToProps)(Upload);

src/views/Auth/Profile/index.js

@@ -569,7 +569,7 @@ function Profile({
         />
         <div className="w-full"></div>
       </div>
-      <button onClick={() => onSubmit()}>{window.t("ذخیره")}</button>
+      <button className="w-full bg-blueC0 py-3 text-tiny text-white rounded-sm" onClick={() => onSubmit()}>{window.t("ذخیره")}</button>
     </div>
   );
 }