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({
-        logo: true,
-        hamburgerMenu: true,
-        qr: true,
-        title: false,
-        back: false,
-        shown: true,
-        menu: false,
-      });
-    }
-
+    setHeaderOptions(headerOptions);
     getProvince();
     getCity({ provinceId: profile.provinceId });
   }, []);
@@ -216,259 +206,215 @@ function Profile({
   // if (setDone) return <Navigate path="/" />;
 
   return isMobile ? (
-    <div className="profile main d-flex justify-content-center">
-      <main>
-        <header className="d-flex align-items-center justify-content-between">
-          <div>
-            <h1>{window.t("حساب کاربری")}</h1>
-            <p>{window.t("لطفا مشخصات خود را به صورت کامل نمایید.")}</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()}>
-          <div className="profile__box--section">
-            <div className="mb-2 desktop justify-content-center">
-              <Upload
-                name="file"
-                value={formData?.file}
-                onChange={onChange}
-                label={window.t("فایل")}
-              />
-            </div>
-            <div className="mb-2">
-              <Input
-                name="firstName"
-                label={window.t("نام")}
-                align="right"
-                onInput={onInput.persianOnly}
-                value={formData?.firstName}
-                onChange={(name, value) =>
-                  setFormData({ ...formData, [name]: value })
-                }
-                regex={(val) => val}
-              />
-            </div>
-            <div className="mb-2">
-              <Input
-                name="lastName"
-                label={window.t("نام نام خانوادگی")}
-                align="right"
-                value={formData?.lastName}
-                onChange={(name, value) =>
-                  setFormData({ ...formData, [name]: value })
-                }
-                onInput={onInput.persianOnly}
-                regex={(val) => val}
-              />
-            </div>
-            <div className="mb-2">
-              <Input
-                name="username"
-                label={window.t("نام کاربری")}
-                value={formData?.username}
-                onChange={(name, value) =>
-                  setFormData({ ...formData, [name]: value })
-                }
-                align="left"
-                regex={(val) => onInput.englishAndNumberWithoutSpace(val)}
-              />
-            </div>
-            <div className="mb-2">
-              <Gender
-                options={[window.t("دختر"), window.t("پسر")]}
-                name="gender"
-                selectedOption={formData?.gender}
-                onChange={(name, value) =>
-                  setFormData({ ...formData, [name]: value })
-                }
-                label=""
-              />
-            </div>
-            <div className="mb-2">
-              <Input
-                name="nationalId"
-                label={window.t("کد ملی/اتباع")}
-                align="left"
-                maxLength={13}
-                value={formData?.nationalId}
-                onChange={(name, value) =>
-                  setFormData({ ...formData, [name]: value })
-                }
-                regex={(val) => onInput.numberOnly(val)}
-              />
-            </div>
-            <div className="mb-2">
-              <Birthdate
-                name="birthDate"
-                onChange={(name, value) =>
-                  setFormData({ ...formData, [name]: value })
-                }
-                value={formData?.birthDate}
-              />
-            </div>
-            <div className="mb-2">
-              <Input
-                name="password"
-                label={window.t("رمز عبور")}
-                onChange={(name, value) =>
-                  setFormData({ ...formData, [name]: value })
-                }
-                value={formData?.password}
-                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"
-                label={window.t("عنوان")}
-                selectedOption={formData?.status}
-                onChange={onChange}
-              />
-            </div>
-            {formData?.status === 1 ? (
-              <div className="mb-2">
-                <Select
-                  options={grades}
-                  name="gradeIds"
-                  label={window.t("پایه تحصیلی")}
-                  selectedOptions={formData?.gradeIds}
-                  onChange={(name, value) =>
-                    setFormData({ ...formData, [name]: value })
-                  }
-                />
-              </div>
-            ) : null}
-            {formData?.status === 2 ? (
-              <div className="mb-2">
-                <MultipleSelector
-                  options={grades}
-                  name="gradeIds"
-                  label={window.t("پایه تحصیلی")}
-                  selectedOptions={formData?.gradeIds}
-                  onChange={(name, value) =>
-                    setFormData({ ...formData, [name]: value })
-                  }
-                  align="right"
-                  defaultValue={profile}
-                />
-              </div>
-            ) : null}
+    <div className="flex flex-col gap-6 lg:hidden px-4 pb-20">
+      <header className="flex flex-col gap-2 w-full">
+        <h1 className="text-base text-gray1">{window.t("حساب کاربری")}</h1>
+        <p className="text-sm text-gray1">
+          {window.t("لطفا مشخصات خود را به صورت کامل نمایید.")}
+        </p>
+      </header>
+      <form
+        className="flex flex-col items-center w-full gap-4"
+        onSubmit={(e) => e.preventDefault()}
+      >
+        <Upload
+          name="file"
+          value={formData?.file}
+          onChange={onChange}
+          label={window.t("فایل")}
+        />
+        <Input
+          name="firstName"
+          label={window.t("نام")}
+          align="right"
+          onInput={onInput.persianOnly}
+          value={formData?.firstName}
+          onChange={(name, value) =>
+            setFormData({ ...formData, [name]: value })
+          }
+          regex={(val) => val}
+        />
+        <Input
+          name="lastName"
+          label={window.t("نام نام خانوادگی")}
+          align="right"
+          value={formData?.lastName}
+          onChange={(name, value) =>
+            setFormData({ ...formData, [name]: value })
+          }
+          onInput={onInput.persianOnly}
+          regex={(val) => val}
+        />
+        <Input
+          name="username"
+          label={window.t("نام کاربری")}
+          value={formData?.username}
+          onChange={(name, value) =>
+            setFormData({ ...formData, [name]: value })
+          }
+          align="left"
+          regex={(val) => onInput.englishAndNumberWithoutSpace(val)}
+        />
+        <Gender
+          options={[window.t("دختر"), window.t("پسر")]}
+          name="gender"
+          selectedOption={formData?.gender}
+          onChange={(name, value) =>
+            setFormData({ ...formData, [name]: value })
+          }
+          label="جنسیت"
+        />
+        <Input
+          name="nationalId"
+          label={window.t("کد ملی/اتباع")}
+          align="left"
+          maxLength={13}
+          value={formData?.nationalId}
+          onChange={(name, value) =>
+            setFormData({ ...formData, [name]: value })
+          }
+          regex={(val) => onInput.numberOnly(val)}
+        />
+        <Birthdate
+          name="birthDate"
+          onChange={(name, value) =>
+            setFormData({ ...formData, [name]: value })
+          }
+          value={formData?.birthDate}
+        />
+        <Input
+          name="password"
+          label={window.t("رمز عبور")}
+          onChange={(name, value) =>
+            setFormData({ ...formData, [name]: value })
+          }
+          value={formData?.password}
+          align="left"
+          regex={(val) => onInput.englishAndNumberWithoutSpace(val)}
+        />
+        <Gender
+          options={[window.t("معلم"), window.t("دانش آموز")]}
+          name="status"
+          label={window.t("عنوان")}
+          selectedOption={formData?.status}
+          onChange={onChange}
+        />
+        {formData?.status === 1 ? (
+          <Select
+            options={grades}
+            name="gradeIds"
+            label={window.t("پایه تحصیلی")}
+            selectedOptions={formData?.gradeIds}
+            onChange={(name, value) =>
+              setFormData({ ...formData, [name]: value })
+            }
+          />
+        ) : null}
+        {formData?.status === 2 ? (
+          <MultipleSelector
+            options={grades}
+            name="gradeIds"
+            label={window.t("پایه تحصیلی")}
+            selectedOptions={formData?.gradeIds}
+            onChange={(name, value) =>
+              setFormData({ ...formData, [name]: value })
+            }
+            align="right"
+            defaultValue={profile}
+          />
+        ) : null}
 
-            {formData?.status === window.t("دانش آموز") &&
-            formData?.gradeIds > 9 ? (
-              <div className="mb-2">
-                <Select
-                  options={[
-                    window.t("ریاضی"),
-                    window.t("تجربی"),
-                    window.t("انسانی"),
-                    window.t("فنی حرفه‌ای"),
-                    window.t("کاردانش"),
-                    window.t("معارف"),
-                  ]}
-                  name="field"
-                  label={window.t("رشته تحصیلی")}
-                  selectedOptions={formData?.gradeIds}
-                  onChange={(name, value) =>
-                    setFormData({ ...formData, [name]: value })
-                  }
-                />
-              </div>
-            ) : null}
-            <div className="mb-2" style={{ minWidth: "100%" }}>
-              <Select
-                options={provinceList}
-                name="provinceId"
-                label={window.t("استان")}
-                selectedOptions={formData?.provinceId}
-                onChange={(name, value) =>
-                  setFormData({ ...formData, [name]: value })
-                }
-              />
-            </div>
-            <div className="mb-2">
-              <Select
-                options={cityList}
-                name="cityId"
-                label={window.t("شهرستان")}
-                selectedOptions={formData?.cityId}
-                onChange={(name, value) =>
-                  setFormData({ ...formData, [name]: value })
-                }
-              />
-            </div>
-            {formData?.status == 1 ? (
-              <div className="mb-2">
-                <Input
-                  name="schools"
-                  label={window.t("نام مدرسه")}
-                  value={formData?.schoolId}
-                  regex={(val) => onInput.persianOnly(val)}
-                  onChange={(name, value) =>
-                    setFormData({ ...formData, [name]: value })
-                  }
-                />
-              </div>
-            ) : null}
-            {formData?.status == 2 ? (
-              <div className="mb-2">
-                <Input
-                  name="schools"
-                  label={window.t("محل تدریس")}
-                  defaultValue={formData}
-                  regex={(val) => onInput.persianOnly(val)}
-                  onChange={onChange}
-                />
-              </div>
-            ) : null}
-            {formData?.status == 2 ? (
-              <Document
-                onChange={(name, value) =>
-                  setFormData({ ...formData, [name]: value })
-                }
-                value={formData?.docFileIds}
-                name="docFileIds"
-              />
-            ) : null}
-            <div className="mb-2">
-              <Input
-                name="postalCode"
-                placeholder={window.t("کد پستی")}
-                align="left"
-                onChange={onChange}
-                maxLength={10}
-                inputMode="numeric"
-                value={formData?.postalCode}
-                regex={(val) => onInput.numberOnly(val)}
-              />
-            </div>
-            <div className="mb-2">
-              <TextArea
-                placeholder={window.t("آدرس محل سکونت")}
-                name="address"
-                value={formData?.address}
-                onChange={(name, value) =>
-                  setFormData({ ...formData, [name]: value })
-                }
-              />
-            </div>
-            <div className="profile__box--form__footer d-flex justify-content-center">
-              <button onClick={() => onSubmit()}>{window.t("ذخیره")}</button>
-            </div>
-          </div>
-        </div>
-      </main>
+        {formData?.status === window.t("دانش آموز") &&
+        formData?.gradeIds > 9 ? (
+          <Select
+            options={[
+              window.t("ریاضی"),
+              window.t("تجربی"),
+              window.t("انسانی"),
+              window.t("فنی حرفه‌ای"),
+              window.t("کاردانش"),
+              window.t("معارف"),
+            ]}
+            name="field"
+            label={window.t("رشته تحصیلی")}
+            selectedOptions={formData?.gradeIds}
+            onChange={(name, value) =>
+              setFormData({ ...formData, [name]: value })
+            }
+          />
+        ) : null}
+        <Select
+          options={provinceList}
+          name="provinceId"
+          label={window.t("استان")}
+          selectedOptions={formData?.provinceId}
+          onChange={(name, value) =>
+            setFormData({ ...formData, [name]: value })
+          }
+        />
+        <Select
+          options={cityList}
+          name="cityId"
+          label={window.t("شهرستان")}
+          selectedOptions={formData?.cityId}
+          onChange={(name, value) =>
+            setFormData({ ...formData, [name]: value })
+          }
+        />
+        {formData?.status == 1 ? (
+          <Input
+            name="schools"
+            label={window.t("نام مدرسه")}
+            value={formData?.schoolId}
+            regex={(val) => onInput.persianOnly(val)}
+            onChange={(name, value) =>
+              setFormData({ ...formData, [name]: value })
+            }
+          />
+        ) : null}
+        {formData?.status == 2 ? (
+          <Input
+            name="schools"
+            label={window.t("محل تدریس")}
+            defaultValue={formData}
+            regex={(val) => onInput.persianOnly(val)}
+            onChange={onChange}
+          />
+        ) : null}
+        {formData?.status == 2 ? (
+          <Document
+            onChange={(name, value) =>
+              setFormData({ ...formData, [name]: value })
+            }
+            value={formData?.docFileIds}
+            name="docFileIds"
+          />
+        ) : null}
+        <Input
+          name="postalCode"
+          placeholder={window.t("کد پستی")}
+          align="left"
+          onChange={onChange}
+          maxLength={10}
+          inputMode="numeric"
+          value={formData?.postalCode}
+          regex={(val) => onInput.numberOnly(val)}
+        />
+        <TextArea
+          placeholder={window.t("آدرس محل سکونت")}
+          name="address"
+          value={formData?.address}
+          onChange={(name, value) =>
+            setFormData({ ...formData, [name]: value })
+          }
+        />
+        <button
+          className="w-full bg-blueC0 py-3 text-base text-white rounded-sm"
+          onClick={() => onSubmit()}
+        >
+          {window.t("ذخیره")}
+        </button>
+      </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>
   );
 }