update 5 files

src/components/Input/index.js

@@ -19,11 +19,11 @@ export default function Input(props) {
 
   return (
     <div
-      className="input flex flex-col relative my-2 dark:bg-opacity-10 w-full"
+      className="input flex flex-col relative dark:bg-opacity-10 w-full"
       style={{ width }}
     >
       <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"}`}
+        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 lg:text-xs text-sm" : "top-1/2 text-tiny lg:text-sm"} ${focusToggle ? "text-blueC0" : "text-gray1"}`}
       >
         {label}
       </label>

src/components/Select/index.js

@@ -10,7 +10,7 @@ function Select({
   onChange,
   name,
   defaultValue,
-  width = "w-1/2",
+  width = "w-full",
   selectProvince,
 }) {
   return (

src/components/Textarea/index.js

@@ -7,7 +7,7 @@ export default function Textarea({ placeholder, onChange, value, name }) {
       <textarea
         className={_.join(
           [
-            "my-2 border border-gray-300 rounded-md text-xs lg:text-sm py-6 px-3 outline-none focus:border-greenB9",
+            "border w-full border-gray-300 rounded-md text-xs lg:text-sm py-6 px-3 outline-none focus:border-greenB9",
             // backgroundColor,
           ],
           " "

src/router.js

@@ -34,6 +34,7 @@ import Dialog from "./components/Dialog";
 import Address from "./views/Address";
 import Favorites from "./views/Favorites";
 import Addresses from "./views/Dashboard/layouts/Mobile/ProfileAddress";
+import Profile from "./views/Auth/Profile"
 
 function Router({
   isDark,
@@ -567,6 +568,24 @@ function Router({
                 />
               }
             />
+            <Route
+              path="/profile"
+              exact
+              element={
+                <Profile
+                  headerOptions={{
+                    logo: false,
+                    hamburgerMenu: false,
+                    qr: false,
+                    title: false,
+                    back: true,
+                    shown: true,
+                    menu: false,
+                    // bookmark: "contentId",
+                  }}
+                />
+              }
+            />
             <Route
               path="*"
               exact

src/views/Auth/Profile/index.js

@@ -29,6 +29,7 @@ function Profile({
   provinceList,
   cityList,
   setHeaderOptions,
+  headerOptions,
   loading,
 }) {
   let navigate = useNavigate();
@@ -69,18 +70,7 @@ function Profile({
   }, [user]);
 
   useEffect(() => {
-    if (!isMobile) {
+    setHeaderOptions(headerOptions);
-      setHeaderOptions({
-        logo: true,
-        hamburgerMenu: true,
-        qr: true,
-        title: false,
-        back: false,
-        shown: true,
-        menu: false,
-      });
-    }
-
     getProvince();
     getCity({ provinceId: profile.provinceId });
   }, []);
@@ -216,33 +206,23 @@ function Profile({
   // if (setDone) return <Navigate path="/" />;
 
   return isMobile ? (
-    <div className="profile main d-flex justify-content-center">
+    <div className="flex flex-col gap-6 lg:hidden px-4 pb-20">
-      <main>
+      <header className="flex flex-col gap-2 w-full">
-        <header className="d-flex align-items-center justify-content-between">
+        <h1 className="text-base text-gray1">{window.t("حساب کاربری")}</h1>
-          <div>
+        <p className="text-sm text-gray1">
-            <h1>{window.t("حساب کاربری")}</h1>
+          {window.t("لطفا مشخصات خود را به صورت کامل نمایید.")}
-            <p>{window.t("لطفا مشخصات خود را به صورت کامل نمایید.")}</p>
+        </p>
-          </div>
-          <div className="mobile justify-content-center">
-            <Upload
-              name="file"
-              value={formData?.file}
-              onChange={onChange}
-              label={window.t("فایل")}
-            />
-          </div>
       </header>
-        <div className="profile__box d-flex" onSubmit={(e) => onSubmit()}>
+      <form
-          <div className="profile__box--section">
+        className="flex flex-col items-center w-full gap-4"
-            <div className="mb-2 desktop justify-content-center">
+        onSubmit={(e) => e.preventDefault()}
+      >
         <Upload
           name="file"
           value={formData?.file}
           onChange={onChange}
           label={window.t("فایل")}
         />
-            </div>
-            <div className="mb-2">
         <Input
           name="firstName"
           label={window.t("نام")}
@@ -254,8 +234,6 @@ function Profile({
           }
           regex={(val) => val}
         />
-            </div>
-            <div className="mb-2">
         <Input
           name="lastName"
           label={window.t("نام نام خانوادگی")}
@@ -267,8 +245,6 @@ function Profile({
           onInput={onInput.persianOnly}
           regex={(val) => val}
         />
-            </div>
-            <div className="mb-2">
         <Input
           name="username"
           label={window.t("نام کاربری")}
@@ -279,8 +255,6 @@ function Profile({
           align="left"
           regex={(val) => onInput.englishAndNumberWithoutSpace(val)}
         />
-            </div>
-            <div className="mb-2">
         <Gender
           options={[window.t("دختر"), window.t("پسر")]}
           name="gender"
@@ -288,10 +262,8 @@ function Profile({
           onChange={(name, value) =>
             setFormData({ ...formData, [name]: value })
           }
-                label=""
+          label="جنسیت"
         />
-            </div>
-            <div className="mb-2">
         <Input
           name="nationalId"
           label={window.t("کد ملی/اتباع")}
@@ -303,8 +275,6 @@ function Profile({
           }
           regex={(val) => onInput.numberOnly(val)}
         />
-            </div>
-            <div className="mb-2">
         <Birthdate
           name="birthDate"
           onChange={(name, value) =>
@@ -312,8 +282,6 @@ function Profile({
           }
           value={formData?.birthDate}
         />
-            </div>
-            <div className="mb-2">
         <Input
           name="password"
           label={window.t("رمز عبور")}
@@ -324,10 +292,6 @@ function Profile({
           align="left"
           regex={(val) => onInput.englishAndNumberWithoutSpace(val)}
         />
-            </div>
-          </div>
-          <div className="profile__box--section">
-            <div className="mb-2" style={{ minWidth: "100%" }}>
         <Gender
           options={[window.t("معلم"), window.t("دانش آموز")]}
           name="status"
@@ -335,9 +299,7 @@ function Profile({
           selectedOption={formData?.status}
           onChange={onChange}
         />
-            </div>
         {formData?.status === 1 ? (
-              <div className="mb-2">
           <Select
             options={grades}
             name="gradeIds"
@@ -347,10 +309,8 @@ function Profile({
               setFormData({ ...formData, [name]: value })
             }
           />
-              </div>
         ) : null}
         {formData?.status === 2 ? (
-              <div className="mb-2">
           <MultipleSelector
             options={grades}
             name="gradeIds"
@@ -362,12 +322,10 @@ function Profile({
             align="right"
             defaultValue={profile}
           />
-              </div>
         ) : null}
 
         {formData?.status === window.t("دانش آموز") &&
         formData?.gradeIds > 9 ? (
-              <div className="mb-2">
           <Select
             options={[
               window.t("ریاضی"),
@@ -384,9 +342,7 @@ function Profile({
               setFormData({ ...formData, [name]: value })
             }
           />
-              </div>
         ) : null}
-            <div className="mb-2" style={{ minWidth: "100%" }}>
         <Select
           options={provinceList}
           name="provinceId"
@@ -396,8 +352,6 @@ function Profile({
             setFormData({ ...formData, [name]: value })
           }
         />
-            </div>
-            <div className="mb-2">
         <Select
           options={cityList}
           name="cityId"
@@ -407,9 +361,7 @@ function Profile({
             setFormData({ ...formData, [name]: value })
           }
         />
-            </div>
         {formData?.status == 1 ? (
-              <div className="mb-2">
           <Input
             name="schools"
             label={window.t("نام مدرسه")}
@@ -419,10 +371,8 @@ function Profile({
               setFormData({ ...formData, [name]: value })
             }
           />
-              </div>
         ) : null}
         {formData?.status == 2 ? (
-              <div className="mb-2">
           <Input
             name="schools"
             label={window.t("محل تدریس")}
@@ -430,7 +380,6 @@ function Profile({
             regex={(val) => onInput.persianOnly(val)}
             onChange={onChange}
           />
-              </div>
         ) : null}
         {formData?.status == 2 ? (
           <Document
@@ -441,7 +390,6 @@ function Profile({
             name="docFileIds"
           />
         ) : null}
-            <div className="mb-2">
         <Input
           name="postalCode"
           placeholder={window.t("کد پستی")}
@@ -452,8 +400,6 @@ function Profile({
           value={formData?.postalCode}
           regex={(val) => onInput.numberOnly(val)}
         />
-            </div>
-            <div className="mb-2">
         <TextArea
           placeholder={window.t("آدرس محل سکونت")}
           name="address"
@@ -462,13 +408,13 @@ function Profile({
             setFormData({ ...formData, [name]: value })
           }
         />
-            </div>
+        <button
-            <div className="profile__box--form__footer d-flex justify-content-center">
+          className="w-full bg-blueC0 py-3 text-base text-white rounded-sm"
-              <button onClick={() => onSubmit()}>{window.t("ذخیره")}</button>
+          onClick={() => onSubmit()}
-            </div>
+        >
-          </div>
+          {window.t("ذخیره")}
-        </div>
+        </button>
-      </main>
+      </form>
     </div>
   ) : (
     <div
@@ -504,7 +450,6 @@ function Profile({
             setFormData({ ...formData, [name]: value })
           }
           regex={(val) => val}
-          padding="py-4"
           value={formData?.lastName}
         />
       </div>
@@ -569,7 +514,12 @@ function Profile({
         />
         <div className="w-full"></div>
       </div>
-      <button className="w-full bg-blueC0 py-3 text-tiny text-white rounded-sm" 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>
   );
 }