[WEB-1622] chore: profile setting layout improvement (#4840)

* chore: profile setting content header and wrapper component added

* chore: profile setting content header and wrapper component added

* chore: profile settings layout code refactor

web/app/profile/activity/page.tsx

@@ -6,9 +6,12 @@ import { observer } from "mobx-react";
 import { Button } from "@plane/ui";
 // components
 import { PageHead } from "@/components/core";
-import { SidebarHamburgerToggle } from "@/components/core/sidebar";
 import { EmptyState } from "@/components/empty-state";
-import { ProfileActivityListPage } from "@/components/profile";
+import {
+  ProfileActivityListPage,
+  ProfileSettingContentHeader,
+  ProfileSettingContentWrapper,
+} from "@/components/profile";
 // constants
 import { EmptyStateType } from "@/constants/empty-state";
 
@@ -51,22 +54,17 @@ const ProfileActivityPage = observer(() => {
   return (
     <>
       <PageHead title="Profile - Activity" />
-      <section className="mx-auto mt-5 md:mt-16 h-full w-full flex flex-col overflow-hidden px-5 md:px-8 pb-8 lg:w-3/5">
-        <div className="flex items-center border-b border-custom-border-100 gap-4 pb-3.5">
-          <SidebarHamburgerToggle />
-          <h3 className="text-xl font-medium">Activity</h3>
-        </div>
-        <div className="vertical-scrollbar scrollbar-md flex h-full w-full flex-col overflow-y-auto">
-          {activityPages}
-          {isLoadMoreVisible && (
-            <div className="flex w-full items-center justify-center text-xs">
-              <Button variant="accent-primary" size="sm" onClick={handleLoadMore}>
-                Load more
-              </Button>
-            </div>
-          )}
-        </div>
-      </section>
+      <ProfileSettingContentWrapper>
+        <ProfileSettingContentHeader title="Activity" />
+        {activityPages}
+        {isLoadMoreVisible && (
+          <div className="flex w-full items-center justify-center text-xs">
+            <Button variant="accent-primary" size="sm" onClick={handleLoadMore}>
+              Load more
+            </Button>
+          </div>
+        )}
+      </ProfileSettingContentWrapper>
     </>
   );
 });

web/app/profile/appearance/page.tsx

@@ -7,7 +7,8 @@ import { useTheme } from "next-themes";
 import { setPromiseToast } from "@plane/ui";
 // components
 import { LogoSpinner } from "@/components/common";
-import { CustomThemeSelector, ThemeSwitch, PageHead, SidebarHamburgerToggle } from "@/components/core";
+import { CustomThemeSelector, ThemeSwitch, PageHead } from "@/components/core";
+import { ProfileSettingContentHeader, ProfileSettingContentWrapper } from "@/components/profile";
 // constants
 import { I_THEME_OPTION, THEME_OPTIONS } from "@/constants/themes";
 // hooks
@@ -50,11 +51,8 @@ const ProfileAppearancePage = observer(() => {
     <>
       <PageHead title="Profile - Theme Prefrence" />
       {userProfile ? (
-        <div className="mx-auto mt-10 h-full w-full overflow-y-auto md:px-6 px-4 pb-8 md:mt-14 lg:px-20 vertical-scrollbar scrollbar-md">
-          <div className="flex items-center border-b border-custom-border-100 gap-4 pb-3.5">
-            <SidebarHamburgerToggle />
-            <h3 className="text-xl font-medium">Appearance</h3>
-          </div>
+        <ProfileSettingContentWrapper>
+          <ProfileSettingContentHeader title="Appearance" />
           <div className="grid grid-cols-12 gap-4 py-6 sm:gap-16">
             <div className="col-span-12 sm:col-span-6">
               <h4 className="text-lg font-semibold text-custom-text-100">Theme</h4>
@@ -65,7 +63,7 @@ const ProfileAppearancePage = observer(() => {
             </div>
           </div>
           {userProfile?.theme?.theme === "custom" && <CustomThemeSelector />}
-        </div>
+        </ProfileSettingContentWrapper>
       ) : (
         <div className="grid h-full w-full place-items-center px-4 sm:px-0">
           <LogoSpinner />
@@ -75,4 +73,4 @@ const ProfileAppearancePage = observer(() => {
   );
 });
 
-export default ProfileAppearancePage;
+export default ProfileAppearancePage;

web/app/profile/notifications/page.tsx

@@ -1,17 +1,14 @@
 "use client";
 
 import useSWR from "swr";
-// layouts
-import { PageHead, SidebarHamburgerToggle } from "@/components/core";
+// components
+import { PageHead } from "@/components/core";
+import { ProfileSettingContentHeader, ProfileSettingContentWrapper } from "@/components/profile";
 import { EmailNotificationForm } from "@/components/profile/notification";
 import { EmailSettingsLoader } from "@/components/ui";
-// ui
-// components
 // services
 import { UserService } from "@/services/user.service";
-// type
 
-// services
 const userService = new UserService();
 
 export default function ProfileNotificationPage() {
@@ -27,18 +24,13 @@ export default function ProfileNotificationPage() {
   return (
     <>
       <PageHead title="Profile - Email Preference" />
-      <div className="mx-auto mt-8 h-full w-full md:px-6 px-4 lg:px-20 pb-8 vertical-scrollbar scrollbar-md">
-        <div className="flex gap-4 items-start pt-4 sm:pt-6 mb-2 pb-6 border-b border-custom-border-100">
-          <SidebarHamburgerToggle />
-          <div className="grow">
-            <div className="pb-1 text-xl font-medium text-custom-text-100">Email notifications</div>
-            <div className="text-sm font-normal text-custom-text-300">
-              Stay in the loop on Issues you are subscribed to. Enable this to get notified.
-            </div>
-          </div>
-        </div>
+      <ProfileSettingContentWrapper>
+        <ProfileSettingContentHeader
+          title="Email notifications"
+          description="Stay in the loop on Issues you are subscribed to. Enable this to get notified."
+        />
         <EmailNotificationForm data={data} />
-      </div>
+      </ProfileSettingContentWrapper>
     </>
   );
 }

web/app/profile/page.tsx

@@ -17,8 +17,8 @@ import { ImagePickerPopover, UserImageUploadModal, PageHead } from "@/components
 // ui
 // icons
 // components
-import { SidebarHamburgerToggle } from "@/components/core/sidebar";
 // constants
+import { ProfileSettingContentWrapper } from "@/components/profile";
 import { TIME_ZONES } from "@/constants/timezones";
 import { USER_ROLES } from "@/constants/workspace";
 // hooks
@@ -137,322 +137,309 @@ const ProfileSettingsPage = observer(() => {
   return (
     <>
       <PageHead title="Profile - General Settings" />
-      <div className="flex h-full flex-col">
-        <div className="block flex-shrink-0 border-b border-custom-border-200 p-4 md:hidden">
-          <SidebarHamburgerToggle />
-        </div>
-        <div className="overflow-hidden">
-          <Controller
-            control={control}
-            name="avatar"
-            render={({ field: { onChange, value } }) => (
-              <UserImageUploadModal
-                isOpen={isImageUploadModalOpen}
-                onClose={() => setIsImageUploadModalOpen(false)}
-                isRemoving={isRemoving}
-                handleDelete={() => handleDelete(currentUser?.avatar, true)}
-                onSuccess={(url) => {
-                  onChange(url);
-                  handleSubmit(onSubmit)();
-                  setIsImageUploadModalOpen(false);
-                }}
-                value={value && value.trim() !== "" ? value : null}
+      <ProfileSettingContentWrapper>
+        <Controller
+          control={control}
+          name="avatar"
+          render={({ field: { onChange, value } }) => (
+            <UserImageUploadModal
+              isOpen={isImageUploadModalOpen}
+              onClose={() => setIsImageUploadModalOpen(false)}
+              isRemoving={isRemoving}
+              handleDelete={() => handleDelete(currentUser?.avatar, true)}
+              onSuccess={(url) => {
+                onChange(url);
+                handleSubmit(onSubmit)();
+                setIsImageUploadModalOpen(false);
+              }}
+              value={value && value.trim() !== "" ? value : null}
+            />
+          )}
+        />
+        <DeactivateAccountModal isOpen={deactivateAccountModal} onClose={() => setDeactivateAccountModal(false)} />
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <div className="flex w-full flex-col gap-8">
+            <div className="relative h-44 w-full">
+              <img
+                src={watch("cover_image") ?? "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"}
+                className="h-44 w-full rounded-lg object-cover"
+                alt={currentUser?.first_name ?? "Cover image"}
               />
-            )}
-          />
-          <DeactivateAccountModal isOpen={deactivateAccountModal} onClose={() => setDeactivateAccountModal(false)} />
-          <div className="vertical-scrollbar scrollbar-md mx-auto flex h-full w-full flex-col space-y-10 overflow-y-auto px-4 md:px-8 pb-8 pt-10 md:pt-16 lg:w-3/5">
-            <form onSubmit={handleSubmit(onSubmit)}>
-              <div className="flex w-full flex-col gap-8">
-                <div className="relative h-44 w-full">
-                  <img
-                    src={watch("cover_image") ?? "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"}
-                    className="h-44 w-full rounded-lg object-cover"
-                    alt={currentUser?.first_name ?? "Cover image"}
-                  />
-                  <div className="absolute -bottom-6 left-8 flex items-end justify-between">
-                    <div className="flex gap-3">
-                      <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-custom-background-90">
-                        <button type="button" onClick={() => setIsImageUploadModalOpen(true)}>
-                          {!watch("avatar") || watch("avatar") === "" ? (
-                            <div className="h-16 w-16 rounded-md bg-custom-background-80 p-2">
-                              <CircleUserRound className="h-full w-full text-custom-text-200" />
-                            </div>
-                          ) : (
-                            <div className="relative h-16 w-16 overflow-hidden">
-                              <img
-                                src={watch("avatar") || undefined}
-                                className="absolute left-0 top-0 h-full w-full rounded-lg object-cover"
-                                onClick={() => setIsImageUploadModalOpen(true)}
-                                alt={currentUser?.display_name}
-                                role="button"
-                              />
-                            </div>
-                          )}
-                        </button>
-                      </div>
-                    </div>
-                  </div>
-
-                  <div className="absolute bottom-3 right-3 flex">
-                    <Controller
-                      control={control}
-                      name="cover_image"
-                      render={({ field: { value, onChange } }) => (
-                        <ImagePickerPopover
-                          label={"Change cover"}
-                          onChange={(imageUrl) => onChange(imageUrl)}
-                          control={control}
-                          value={value ?? "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"}
-                          isProfileCover
-                        />
+              <div className="absolute -bottom-6 left-8 flex items-end justify-between">
+                <div className="flex gap-3">
+                  <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-custom-background-90">
+                    <button type="button" onClick={() => setIsImageUploadModalOpen(true)}>
+                      {!watch("avatar") || watch("avatar") === "" ? (
+                        <div className="h-16 w-16 rounded-md bg-custom-background-80 p-2">
+                          <CircleUserRound className="h-full w-full text-custom-text-200" />
+                        </div>
+                      ) : (
+                        <div className="relative h-16 w-16 overflow-hidden">
+                          <img
+                            src={watch("avatar") || undefined}
+                            className="absolute left-0 top-0 h-full w-full rounded-lg object-cover"
+                            onClick={() => setIsImageUploadModalOpen(true)}
+                            alt={currentUser?.display_name}
+                            role="button"
+                          />
+                        </div>
                       )}
-                    />
+                    </button>
                   </div>
                 </div>
+              </div>
 
-                <div className="item-center mt-4 flex justify-between md:px-8">
-                  <div className="flex flex-col">
-                    <div className="item-center flex text-lg font-semibold text-custom-text-100">
-                      <span>{`${watch("first_name")} ${watch("last_name")}`}</span>
-                    </div>
-                    <span className="text-sm tracking-tight">{watch("email")}</span>
-                  </div>
+              <div className="absolute bottom-3 right-3 flex">
+                <Controller
+                  control={control}
+                  name="cover_image"
+                  render={({ field: { value, onChange } }) => (
+                    <ImagePickerPopover
+                      label={"Change cover"}
+                      onChange={(imageUrl) => onChange(imageUrl)}
+                      control={control}
+                      value={value ?? "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"}
+                      isProfileCover
+                    />
+                  )}
+                />
+              </div>
+            </div>
 
-                  {/* <Link href={`/profile/${currentUser.id}`}>
+            <div className="item-center mt-4 flex justify-between md:px-8">
+              <div className="flex flex-col">
+                <div className="item-center flex text-lg font-semibold text-custom-text-100">
+                  <span>{`${watch("first_name")} ${watch("last_name")}`}</span>
+                </div>
+                <span className="text-sm tracking-tight">{watch("email")}</span>
+              </div>
+
+              {/* <Link href={`/profile/${currentUser.id}`}>
               <span className="flex item-center gap-1 text-sm text-custom-primary-100 underline font-medium">
                 <ExternalLink className="h-4 w-4" />
                 Activity Overview
               </span>
             </Link> */}
-                </div>
+            </div>
 
-                <div className="grid grid-cols-1 gap-6 md:px-8 lg:grid-cols-2 2xl:grid-cols-3">
-                  <div className="flex flex-col gap-1">
-                    <h4 className="text-sm">
-                      First name<span className="text-red-500">*</span>
-                    </h4>
-                    <Controller
-                      control={control}
+            <div className="grid grid-cols-1 gap-6 md:px-8 lg:grid-cols-2 2xl:grid-cols-3">
+              <div className="flex flex-col gap-1">
+                <h4 className="text-sm">
+                  First name<span className="text-red-500">*</span>
+                </h4>
+                <Controller
+                  control={control}
+                  name="first_name"
+                  rules={{
+                    required: "First name is required.",
+                  }}
+                  render={({ field: { value, onChange, ref } }) => (
+                    <Input
+                      id="first_name"
                       name="first_name"
-                      rules={{
-                        required: "First name is required.",
-                      }}
-                      render={({ field: { value, onChange, ref } }) => (
-                        <Input
-                          id="first_name"
-                          name="first_name"
-                          type="text"
-                          value={value}
-                          onChange={onChange}
-                          ref={ref}
-                          hasError={Boolean(errors.first_name)}
-                          placeholder="Enter your first name"
-                          className={`w-full rounded-md ${errors.first_name ? "border-red-500" : ""}`}
-                          maxLength={24}
-                        />
-                      )}
+                      type="text"
+                      value={value}
+                      onChange={onChange}
+                      ref={ref}
+                      hasError={Boolean(errors.first_name)}
+                      placeholder="Enter your first name"
+                      className={`w-full rounded-md ${errors.first_name ? "border-red-500" : ""}`}
+                      maxLength={24}
                     />
-                    {errors.first_name && <span className="text-xs text-red-500">Please enter first name</span>}
-                  </div>
-
-                  <div className="flex flex-col gap-1">
-                    <h4 className="text-sm">Last name</h4>
-
-                    <Controller
-                      control={control}
-                      name="last_name"
-                      render={({ field: { value, onChange, ref } }) => (
-                        <Input
-                          id="last_name"
-                          name="last_name"
-                          type="text"
-                          value={value}
-                          onChange={onChange}
-                          ref={ref}
-                          hasError={Boolean(errors.last_name)}
-                          placeholder="Enter your last name"
-                          className="w-full rounded-md"
-                          maxLength={24}
-                        />
-                      )}
-                    />
-                  </div>
-
-                  <div className="flex flex-col gap-1">
-                    <h4 className="text-sm">
-                      Email<span className="text-red-500">*</span>
-                    </h4>
-                    <Controller
-                      control={control}
-                      name="email"
-                      rules={{
-                        required: "Email is required.",
-                      }}
-                      render={({ field: { value, ref } }) => (
-                        <Input
-                          id="email"
-                          name="email"
-                          type="email"
-                          value={value}
-                          ref={ref}
-                          hasError={Boolean(errors.email)}
-                          placeholder="Enter your email"
-                          className={`w-full cursor-not-allowed rounded-md !bg-custom-background-80 ${
-                            errors.email ? "border-red-500" : ""
-                          }`}
-                          disabled
-                        />
-                      )}
-                    />
-                  </div>
-
-                  <div className="flex flex-col gap-1">
-                    <h4 className="text-sm">
-                      Role<span className="text-red-500">*</span>
-                    </h4>
-                    <Controller
-                      name="role"
-                      control={control}
-                      rules={{ required: "Role is required." }}
-                      render={({ field: { value, onChange } }) => (
-                        <CustomSelect
-                          value={value}
-                          onChange={onChange}
-                          label={value ? value.toString() : "Select your role"}
-                          buttonClassName={errors.role ? "border-red-500" : "border-none"}
-                          className="rounded-md border-[0.5px] !border-custom-border-200"
-                          optionsClassName="w-full"
-                          input
-                        >
-                          {USER_ROLES.map((item) => (
-                            <CustomSelect.Option key={item.value} value={item.value}>
-                              {item.label}
-                            </CustomSelect.Option>
-                          ))}
-                        </CustomSelect>
-                      )}
-                    />
-                    {errors.role && <span className="text-xs text-red-500">Please select a role</span>}
-                  </div>
-
-                  <div className="flex flex-col gap-1">
-                    <h4 className="text-sm">
-                      Display name<span className="text-red-500">*</span>
-                    </h4>
-                    <Controller
-                      control={control}
-                      name="display_name"
-                      rules={{
-                        required: "Display name is required.",
-                        validate: (value) => {
-                          if (value.trim().length < 1) return "Display name can't be empty.";
-
-                          if (value.split("  ").length > 1) return "Display name can't have two consecutive spaces.";
-
-                          if (value.replace(/\s/g, "").length < 1)
-                            return "Display name must be at least 1 characters long.";
-
-                          if (value.replace(/\s/g, "").length > 20)
-                            return "Display name must be less than 20 characters long.";
-
-                          return true;
-                        },
-                      }}
-                      render={({ field: { value, onChange, ref } }) => (
-                        <Input
-                          id="display_name"
-                          name="display_name"
-                          type="text"
-                          value={value}
-                          onChange={onChange}
-                          ref={ref}
-                          hasError={Boolean(errors?.display_name)}
-                          placeholder="Enter your display name"
-                          className={`w-full ${errors?.display_name ? "border-red-500" : ""}`}
-                          maxLength={24}
-                        />
-                      )}
-                    />
-                    {errors?.display_name && <span className="text-xs text-red-500">Please enter display name</span>}
-                  </div>
-
-                  <div className="flex flex-col gap-1">
-                    <h4 className="text-sm">
-                      Timezone<span className="text-red-500">*</span>
-                    </h4>
-
-                    <Controller
-                      name="user_timezone"
-                      control={control}
-                      rules={{ required: "Time zone is required" }}
-                      render={({ field: { value, onChange } }) => (
-                        <CustomSearchSelect
-                          value={value}
-                          label={
-                            value ? TIME_ZONES.find((t) => t.value === value)?.label ?? value : "Select a timezone"
-                          }
-                          options={timeZoneOptions}
-                          onChange={onChange}
-                          optionsClassName="w-full"
-                          buttonClassName={errors.user_timezone ? "border-red-500" : "border-none"}
-                          className="rounded-md border-[0.5px] !border-custom-border-200"
-                          input
-                        />
-                      )}
-                    />
-                    {errors.role && <span className="text-xs text-red-500">Please select a time zone</span>}
-                  </div>
-
-                  <div className="flex items-center justify-between py-2">
-                    <Button variant="primary" type="submit" loading={isLoading}>
-                      {isLoading ? "Saving..." : "Save changes"}
-                    </Button>
-                  </div>
-                </div>
+                  )}
+                />
+                {errors.first_name && <span className="text-xs text-red-500">Please enter first name</span>}
               </div>
-            </form>
-            <Disclosure as="div" className="border-t border-custom-border-100 md:px-8">
-              {({ open }) => (
-                <>
-                  <Disclosure.Button
-                    as="button"
-                    type="button"
-                    className="flex w-full items-center justify-between py-4"
-                  >
-                    <span className="text-lg tracking-tight">Deactivate account</span>
-                    <ChevronDown className={`h-5 w-5 transition-all ${open ? "rotate-180" : ""}`} />
-                  </Disclosure.Button>
-                  <Transition
-                    show={open}
-                    enter="transition duration-100 ease-out"
-                    enterFrom="transform opacity-0"
-                    enterTo="transform opacity-100"
-                    leave="transition duration-75 ease-out"
-                    leaveFrom="transform opacity-100"
-                    leaveTo="transform opacity-0"
-                  >
-                    <Disclosure.Panel>
-                      <div className="flex flex-col gap-8">
-                        <span className="text-sm tracking-tight">
-                          The danger zone of the profile page is a critical area that requires careful consideration and
-                          attention. When deactivating an account, all of the data and resources within that account
-                          will be permanently removed and cannot be recovered.
-                        </span>
-                        <div>
-                          <Button variant="danger" onClick={() => setDeactivateAccountModal(true)}>
-                            Deactivate account
-                          </Button>
-                        </div>
-                      </div>
-                    </Disclosure.Panel>
-                  </Transition>
-                </>
-              )}
-            </Disclosure>
+
+              <div className="flex flex-col gap-1">
+                <h4 className="text-sm">Last name</h4>
+
+                <Controller
+                  control={control}
+                  name="last_name"
+                  render={({ field: { value, onChange, ref } }) => (
+                    <Input
+                      id="last_name"
+                      name="last_name"
+                      type="text"
+                      value={value}
+                      onChange={onChange}
+                      ref={ref}
+                      hasError={Boolean(errors.last_name)}
+                      placeholder="Enter your last name"
+                      className="w-full rounded-md"
+                      maxLength={24}
+                    />
+                  )}
+                />
+              </div>
+
+              <div className="flex flex-col gap-1">
+                <h4 className="text-sm">
+                  Email<span className="text-red-500">*</span>
+                </h4>
+                <Controller
+                  control={control}
+                  name="email"
+                  rules={{
+                    required: "Email is required.",
+                  }}
+                  render={({ field: { value, ref } }) => (
+                    <Input
+                      id="email"
+                      name="email"
+                      type="email"
+                      value={value}
+                      ref={ref}
+                      hasError={Boolean(errors.email)}
+                      placeholder="Enter your email"
+                      className={`w-full cursor-not-allowed rounded-md !bg-custom-background-80 ${
+                        errors.email ? "border-red-500" : ""
+                      }`}
+                      disabled
+                    />
+                  )}
+                />
+              </div>
+
+              <div className="flex flex-col gap-1">
+                <h4 className="text-sm">
+                  Role<span className="text-red-500">*</span>
+                </h4>
+                <Controller
+                  name="role"
+                  control={control}
+                  rules={{ required: "Role is required." }}
+                  render={({ field: { value, onChange } }) => (
+                    <CustomSelect
+                      value={value}
+                      onChange={onChange}
+                      label={value ? value.toString() : "Select your role"}
+                      buttonClassName={errors.role ? "border-red-500" : "border-none"}
+                      className="rounded-md border-[0.5px] !border-custom-border-200"
+                      optionsClassName="w-full"
+                      input
+                    >
+                      {USER_ROLES.map((item) => (
+                        <CustomSelect.Option key={item.value} value={item.value}>
+                          {item.label}
+                        </CustomSelect.Option>
+                      ))}
+                    </CustomSelect>
+                  )}
+                />
+                {errors.role && <span className="text-xs text-red-500">Please select a role</span>}
+              </div>
+
+              <div className="flex flex-col gap-1">
+                <h4 className="text-sm">
+                  Display name<span className="text-red-500">*</span>
+                </h4>
+                <Controller
+                  control={control}
+                  name="display_name"
+                  rules={{
+                    required: "Display name is required.",
+                    validate: (value) => {
+                      if (value.trim().length < 1) return "Display name can't be empty.";
+
+                      if (value.split("  ").length > 1) return "Display name can't have two consecutive spaces.";
+
+                      if (value.replace(/\s/g, "").length < 1)
+                        return "Display name must be at least 1 characters long.";
+
+                      if (value.replace(/\s/g, "").length > 20)
+                        return "Display name must be less than 20 characters long.";
+
+                      return true;
+                    },
+                  }}
+                  render={({ field: { value, onChange, ref } }) => (
+                    <Input
+                      id="display_name"
+                      name="display_name"
+                      type="text"
+                      value={value}
+                      onChange={onChange}
+                      ref={ref}
+                      hasError={Boolean(errors?.display_name)}
+                      placeholder="Enter your display name"
+                      className={`w-full ${errors?.display_name ? "border-red-500" : ""}`}
+                      maxLength={24}
+                    />
+                  )}
+                />
+                {errors?.display_name && <span className="text-xs text-red-500">Please enter display name</span>}
+              </div>
+
+              <div className="flex flex-col gap-1">
+                <h4 className="text-sm">
+                  Timezone<span className="text-red-500">*</span>
+                </h4>
+
+                <Controller
+                  name="user_timezone"
+                  control={control}
+                  rules={{ required: "Time zone is required" }}
+                  render={({ field: { value, onChange } }) => (
+                    <CustomSearchSelect
+                      value={value}
+                      label={value ? TIME_ZONES.find((t) => t.value === value)?.label ?? value : "Select a timezone"}
+                      options={timeZoneOptions}
+                      onChange={onChange}
+                      optionsClassName="w-full"
+                      buttonClassName={errors.user_timezone ? "border-red-500" : "border-none"}
+                      className="rounded-md border-[0.5px] !border-custom-border-200"
+                      input
+                    />
+                  )}
+                />
+                {errors.role && <span className="text-xs text-red-500">Please select a time zone</span>}
+              </div>
+
+              <div className="flex items-center justify-between py-2">
+                <Button variant="primary" type="submit" loading={isLoading}>
+                  {isLoading ? "Saving..." : "Save changes"}
+                </Button>
+              </div>
+            </div>
           </div>
-        </div>
-      </div>
+        </form>
+        <Disclosure as="div" className="border-t border-custom-border-100 md:px-8">
+          {({ open }) => (
+            <>
+              <Disclosure.Button as="button" type="button" className="flex w-full items-center justify-between py-4">
+                <span className="text-lg tracking-tight">Deactivate account</span>
+                <ChevronDown className={`h-5 w-5 transition-all ${open ? "rotate-180" : ""}`} />
+              </Disclosure.Button>
+              <Transition
+                show={open}
+                enter="transition duration-100 ease-out"
+                enterFrom="transform opacity-0"
+                enterTo="transform opacity-100"
+                leave="transition duration-75 ease-out"
+                leaveFrom="transform opacity-100"
+                leaveTo="transform opacity-0"
+              >
+                <Disclosure.Panel>
+                  <div className="flex flex-col gap-8">
+                    <span className="text-sm tracking-tight">
+                      The danger zone of the profile page is a critical area that requires careful consideration and
+                      attention. When deactivating an account, all of the data and resources within that account will be
+                      permanently removed and cannot be recovered.
+                    </span>
+                    <div>
+                      <Button variant="danger" onClick={() => setDeactivateAccountModal(true)}>
+                        Deactivate account
+                      </Button>
+                    </div>
+                  </div>
+                </Disclosure.Panel>
+              </Transition>
+            </>
+          )}
+        </Disclosure>
+      </ProfileSettingContentWrapper>
     </>
   );
 });

web/app/profile/security/page.tsx

@@ -11,7 +11,7 @@ import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
 import { PasswordStrengthMeter } from "@/components/account";
 import { LogoSpinner } from "@/components/common";
 import { PageHead } from "@/components/core";
-import { SidebarHamburgerToggle } from "@/components/core/sidebar";
+import { ProfileSettingContentHeader, ProfileSettingContentWrapper } from "@/components/profile";
 // helpers
 import { authErrorHandler } from "@/helpers/authentication.helper";
 import { getPasswordStrength } from "@/helpers/password.helper";
@@ -130,15 +130,9 @@ const SecurityPage = observer(() => {
   return (
     <>
       <PageHead title="Profile - Change Password" />
-      <div className="flex h-full flex-col">
-        <div className="block flex-shrink-0 border-b border-custom-border-200 p-4 md:hidden">
-          <SidebarHamburgerToggle />
-        </div>
-        <form
-          onSubmit={handleSubmit(handleChangePassword)}
-          className="mx-auto md:mt-16 mt-10 flex h-full w-full flex-col gap-8 px-4 md:px-8 pb-8 lg:w-3/5"
-        >
-          <h3 className="text-xl font-medium">Change password</h3>
+      <ProfileSettingContentWrapper>
+        <ProfileSettingContentHeader title="Change password" />
+        <form onSubmit={handleSubmit(handleChangePassword)} className="flex flex-col gap-8 py-6">
           <div className="flex flex-col gap-10 w-full max-w-96">
             <div className="space-y-1">
               <h4 className="text-sm">Current password</h4>
@@ -262,7 +256,7 @@ const SecurityPage = observer(() => {
             </Button>
           </div>
         </form>
-      </div>
+      </ProfileSettingContentWrapper>
     </>
   );
 });

web/core/components/profile/index.ts

@@ -3,3 +3,5 @@ export * from "./overview";
 export * from "./profile-issues-filter";
 export * from "./sidebar";
 export * from "./time";
+export * from "./profile-setting-content-wrapper"
+export * from "./profile-setting-content-header"

web/core/components/profile/notification/email-notification-form.tsx

@@ -59,7 +59,7 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
 
   return (
     <>
-      <div className="pt-2 text-lg font-medium text-custom-text-100">Notify me when:</div>
+      <div className="pt-6 text-lg font-medium text-custom-text-100">Notify me when:</div>
       {/* Notification Settings */}
       <div className="flex flex-col py-2">
         <div className="flex gap-2 items-center pt-6">

web/core/components/profile/profile-setting-content-header.tsx

@@ -0,0 +1,17 @@
+"use client";
+import React, { FC } from "react";
+
+type Props = {
+  title: string;
+  description?: string;
+};
+
+export const ProfileSettingContentHeader: FC<Props> = (props) => {
+  const { title, description } = props;
+  return (
+    <div className="flex flex-col gap-1 py-4 border-b border-custom-border-100">
+      <div className="text-xl font-medium text-custom-text-100">{title}</div>
+      {description && <div className="text-sm font-normal text-custom-text-300">{description}</div>}
+    </div>
+  );
+};

web/core/components/profile/profile-setting-content-wrapper.tsx

@@ -0,0 +1,30 @@
+"use client";
+import React, { FC } from "react";
+// helpers
+import { cn } from "@/helpers/common.helper";
+import { SidebarHamburgerToggle } from "../core";
+
+type Props = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+export const ProfileSettingContentWrapper: FC<Props> = (props) => {
+  const { children, className = "" } = props;
+  return (
+    <div className="flex h-full flex-col">
+      <div className="block flex-shrink-0 border-b border-custom-border-200 p-4 md:hidden">
+        <SidebarHamburgerToggle />
+      </div>
+
+      <div
+        className={cn(
+          "vertical-scrollbar scrollbar-md mx-auto h-full w-full flex flex-col px-8 md:px-20 lg:px-36 xl:px-56 py-10 md:py-16",
+          className
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};