improvements: address feedback 1

frontend/src/components/features/WishForm.tsx

@@ -63,14 +63,14 @@ export const WishForm = () => {
       open={isOpen}
     >
       <PopoverTrigger asChild>
-        <div className="text-md mb-3 w-full pl-5 duration-200 hover:text-mineshaft-200">
+        <div className="mb-3 w-full cursor-pointer pl-5 text-sm whitespace-nowrap text-mineshaft-400 duration-200 hover:text-mineshaft-200">
           <FontAwesomeIcon icon={faRocketchat} className="mr-2" />
           Request a feature
         </div>
       </PopoverTrigger>
       <PopoverContent
         hideCloseBtn
-        align="start"
+        align="end"
         alignOffset={20}
         className="mb-1 w-auto border border-mineshaft-600 bg-mineshaft-900 p-4 drop-shadow-2xl"
         sticky="always"

frontend/src/components/v2/PageHeader/PageHeader.tsx

@@ -13,7 +13,7 @@ type Props = {
   description?: ReactNode;
   children?: ReactNode;
   className?: string;
-  scope: "org" | "namespace" | "instance" | ProjectType;
+  scope: "org" | "namespace" | "instance" | ProjectType | null;
 };
 
 const SCOPE_NAME: Record<NonNullable<Props["scope"]>, { label: string; icon: IconDefinition }> = {

frontend/src/layouts/OrganizationLayout/components/OrgNavBar/OrgNavBar.tsx

@@ -24,7 +24,6 @@ export const OrgNavBar = ({ isHidden }: Props) => {
             animate={{ x: 0 }}
             exit={{ x: -150 }}
             transition={{ duration: 0.2 }}
-            className=""
           >
             <nav className="w-full">
               <Tabs value="selected">

frontend/src/layouts/PersonalSettingsLayout/PersonalSettingsLayout.tsx

@@ -4,6 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Link, Outlet } from "@tanstack/react-router";
 
 import { WishForm } from "@app/components/features/WishForm";
+import { Navbar } from "@app/layouts/OrganizationLayout/components/NavBar";
 
 import { InsecureConnectionBanner } from "../OrganizationLayout/components/InsecureConnectionBanner";
 
@@ -12,27 +13,10 @@ export const PersonalSettingsLayout = () => {
 
   return (
     <>
-      <div className="dark hidden h-screen w-full flex-col overflow-x-hidden md:flex">
+      <div className="dark hidden h-screen w-full flex-col overflow-x-hidden bg-bunker-800 md:flex">
         {!window.isSecureContext && <InsecureConnectionBanner />}
         <div className="flex grow flex-col overflow-y-hidden md:flex-row">
-          <aside className="dark w-full border-r border-mineshaft-600 bg-linear-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 md:w-60">
-            <nav className="items-between flex h-full flex-col justify-between overflow-y-auto dark:scheme-dark">
-              <div className="grow">
-                <Link to="/organization/projects">
-                  <div className="my-6 flex cursor-default items-center justify-center pr-2 text-sm text-mineshaft-300 hover:text-mineshaft-100">
-                    <FontAwesomeIcon icon={faArrowLeft} className="pr-3" />
-                    Back to organization
-                  </div>
-                </Link>
-              </div>
-              <div className="relative mt-10 flex w-full cursor-default flex-col items-center px-3 text-sm text-mineshaft-400">
-                {(window.location.origin.includes("https://app.infisical.com") ||
-                  window.location.origin.includes("https://gamma.infisical.com")) && <WishForm />}
-              </div>
-              )
-            </nav>
-          </aside>
-          <main className="flex-1 overflow-x-hidden overflow-y-auto bg-bunker-800 dark:scheme-dark">
+          <main className="flex-1 overflow-x-hidden overflow-y-auto bg-bunker-800 px-12 pt-10 pb-4 dark:scheme-dark">
             <Outlet />
           </main>
         </div>

frontend/src/pages/organization/BillingPage/components/BillingTabGroup/BillingTabGroup.tsx

@@ -25,7 +25,7 @@ export const BillingTabGroup = withPermission(
       <Tabs orientation="vertical" defaultValue={tabs[0].key}>
         <TabList>
           {tabs.map((tab) => (
-            <Tab variant="org" value={tab.key}>
+            <Tab variant="org" key={tab.key} value={tab.key}>
               {tab.name}
             </Tab>
           ))}

frontend/src/pages/organization/IdentityDetailsByIDPage/IdentityDetailsByIDPage.tsx

@@ -12,7 +12,6 @@ import { ROUTE_PATHS } from "@app/const/routes";
 import { OrgPermissionIdentityActions, OrgPermissionSubjects, useOrganization } from "@app/context";
 import { useDeleteIdentity, useGetIdentityById } from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
-import { TabSections } from "@app/pages/organization/GroupDetailsByIDPage/GroupDetailsByIDPage";
 import { ViewIdentityAuthModal } from "@app/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityAuthModal";
 import { OrgAccessControlTabSections } from "@app/types/org";
 
@@ -81,7 +80,7 @@ const Page = () => {
           <Link
             to="/organization/access-management"
             search={{
-              selectedTab: TabSections.Identities
+              selectedTab: OrgAccessControlTabSections.Identities
             }}
             className="mb-4 flex items-center gap-x-2 text-sm text-mineshaft-400"
           >

frontend/src/pages/organization/RoleByIDPage/RoleByIDPage.tsx

@@ -19,7 +19,6 @@ import { ROUTE_PATHS } from "@app/const/routes";
 import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
 import { useDeleteOrgRole, useGetOrgRole } from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
-import { TabSections } from "@app/pages/organization/GroupDetailsByIDPage/GroupDetailsByIDPage";
 import { DuplicateOrgRoleModal } from "@app/pages/organization/RoleByIDPage/components/DuplicateOrgRoleModal";
 import { OrgAccessControlTabSections } from "@app/types/org";
 
@@ -84,7 +83,7 @@ export const Page = () => {
           <Link
             to="/organization/access-management"
             search={{
-              selectedTab: TabSections.Roles
+              selectedTab: OrgAccessControlTabSections.Roles
             }}
             className="mb-4 flex items-center gap-x-2 text-sm text-mineshaft-400"
           >

frontend/src/pages/organization/UserDetailsByIDPage/UserDetailsByIDPage.tsx

@@ -32,7 +32,6 @@ import {
   useUpdateOrgMembership
 } from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
-import { TabSections } from "@app/pages/organization/GroupDetailsByIDPage/GroupDetailsByIDPage";
 import { OrgAccessControlTabSections } from "@app/types/org";
 
 import { UserAuditLogsSection } from "./components/UserProjectsSection/UserAuditLogsSection";
@@ -124,7 +123,7 @@ const Page = withPermission(
             <Link
               to="/organization/access-management"
               search={{
-                selectedTab: TabSections.Member
+                selectedTab: OrgAccessControlTabSections.Member
               }}
               className="mb-4 flex items-center gap-x-2 text-sm text-mineshaft-400"
             >

frontend/src/pages/pam/PamAccountsPage/components/FolderBreadCrumbs.tsx

@@ -8,7 +8,7 @@ type Props = {
 
 export const FolderBreadCrumbs = ({ path = "/" }: Props) => {
   const navigate = useNavigate({
-    from: "/projects/secret-management/$projectId/overview"
+    from: "/projects/pam/$projectId/accounts"
   });
 
   const onFolderCrumbClick = (index: number) => {
@@ -29,7 +29,12 @@ export const FolderBreadCrumbs = ({ path = "/" }: Props) => {
       <div
         className="breadcrumb relative z-20 border-solid border-mineshaft-600 bg-mineshaft-800 py-1 pr-2 pl-5 text-sm hover:bg-mineshaft-600"
         onClick={() => onFolderCrumbClick(0)}
-        onKeyDown={() => null}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onFolderCrumbClick(0);
+          }
+        }}
         role="button"
         tabIndex={0}
       >
@@ -45,7 +50,12 @@ export const FolderBreadCrumbs = ({ path = "/" }: Props) => {
               index + 1 === arr.length ? "cursor-default" : "cursor-pointer"
             } border-solid border-mineshaft-600 py-1 pr-2 pl-5 text-sm text-mineshaft-200`}
             onClick={() => onFolderCrumbClick(index + 1)}
-            onKeyDown={() => null}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onFolderCrumbClick(index + 1);
+              }
+            }}
             role="button"
             tabIndex={0}
           >

frontend/src/pages/project/GroupDetailsByIDPage/GroupDetailsByIDPage.tsx

@@ -55,7 +55,7 @@ const Page = () => {
           <PageHeader
             scope={currentProject.type}
             title={groupMembership.group.name}
-            description={`Group joined on ${groupMembership?.createdAt && formatRelative(new Date(groupMembership?.createdAt || ""), new Date())}`}
+            description={`Group joined on ${formatRelative(new Date(groupMembership.createdAt || ""), new Date())}`}
           />
           <div className="flex">
             <div className="mr-4 w-96">

frontend/src/pages/project/SettingsPage/components/DeleteProjectProtection/DeleteProjectProtection.tsx

@@ -35,7 +35,7 @@ export const DeleteProjectProtection = () => {
       <p className="mb-3 text-xl font-medium">Delete Protection</p>
       <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Settings}>
         {(isAllowed) => (
-          <div className="w-max">
+          <div>
             <Checkbox
               id="hasDeleteProtection"
               isDisabled={!isAllowed}
@@ -43,6 +43,7 @@ export const DeleteProjectProtection = () => {
               onCheckedChange={(state) => {
                 handleToggleDeleteProjectProtection(state as boolean);
               }}
+              allowMultilineLabel
             >
               Protects the project from being deleted accidentally. While this option is enabled,
               you can&apos;t delete the project.

frontend/src/pages/secret-manager/SettingsPage/components/AutoCapitalizationSection/AutoCapitalizationSection.tsx

@@ -40,7 +40,7 @@ export const AutoCapitalizationSection = () => {
       <p className="mb-3 text-xl font-medium">{t("settings.project.enforce-capitalization")}</p>
       <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Settings}>
         {(isAllowed) => (
-          <div className="w-max">
+          <div>
             <Checkbox
               id="autoCapitalization"
               isDisabled={!isAllowed}
@@ -48,6 +48,7 @@ export const AutoCapitalizationSection = () => {
               onCheckedChange={(state) => {
                 handleToggleCapitalizationToggle(state as boolean);
               }}
+              allowMultilineLabel
             >
               {t("settings.project.enforce-capitalization-description")}
             </Checkbox>

frontend/src/pages/user/PersonalSettingsPage/PersonalSettingsPage.tsx

@@ -1,5 +1,11 @@
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
+import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Link } from "@tanstack/react-router";
+
+import { WishForm } from "@app/components/features/WishForm";
+import { PageHeader } from "@app/components/v2";
 
 import { PersonalTabGroup } from "./components/PersonalTabGroup";
 
@@ -7,16 +13,30 @@ export const PersonalSettingsPage = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="h-full bg-bunker-800 text-white">
+    <div className="h-full bg-bunker-800 pt-10 text-white">
       <Helmet>
         <title>{t("common.head-title", { title: t("settings.personal.title") })}</title>
         <link rel="icon" href="/infisical.ico" />
       </Helmet>
-      <div className="flex w-full justify-center bg-bunker-800 px-6 text-white">
-        <div className="w-full max-w-6xl">
-          <div className="mt-6 mb-6">
-            <p className="text-3xl font-medium text-gray-200">{t("settings.personal.title")}</p>
-          </div>
+      <div className="flex w-full justify-center px-6 text-white">
+        <div className="w-full max-w-8xl">
+          <Link
+            to="/organization/projects"
+            className="mb-4 flex items-center gap-x-2 text-sm text-mineshaft-400"
+          >
+            <FontAwesomeIcon icon={faChevronLeft} />
+            Back to Organization
+          </Link>
+          <PageHeader
+            title="Personal Settings"
+            scope={null}
+            description="Configure settings for your account"
+          >
+            <div>
+              {window.location.origin.includes("https://app.infisical.com") ||
+                window.location.origin.includes("https://gamma.infisical.com") || <WishForm />}
+            </div>
+          </PageHeader>
           <PersonalTabGroup />
         </div>
       </div>

frontend/src/pages/user/PersonalSettingsPage/components/PersonalTabGroup/PersonalTabGroup.tsx

@@ -15,10 +15,12 @@ const tabs = [
 
 export const PersonalTabGroup = () => {
   return (
-    <Tabs defaultValue={tabs[0].key}>
+    <Tabs orientation="vertical" defaultValue={tabs[0].key}>
       <TabList>
         {tabs.map((tab) => (
-          <Tab value={tab.key}>{tab.name}</Tab>
+          <Tab value={tab.key} key={tab.key} variant="instance">
+            {tab.name}
+          </Tab>
         ))}
       </TabList>
       <TabPanel value={tabs[0].key}>