thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

chore: update profile settings layout (#2925)

Browse Source 
* chore: update profile layout

* fix: multiple workspaces

* chore: removed breadcrumbs

* chore: fix sidebar collapsed state
This commit is contained in:
Aaryan Khandelwal 2023-11-29 13:48:07 +05:30 committed by GitHub
parent 537901f046
commit 4f64f431a7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 176 additions and 284 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
space/package.json
View File

@ -25,7 +25,7 @@
"clsx": "^2.0.0", "clsx": "^2.0.0",
"js-cookie": "^3.0.1", "js-cookie": "^3.0.1",
"lowlight": "^2.9.0", "lowlight": "^2.9.0",
"lucide-react": "^0.263.1", "lucide-react": "^0.293.0",
"mobx": "^6.10.0", "mobx": "^6.10.0",
"mobx-react-lite": "^4.0.3", "mobx-react-lite": "^4.0.3",
"next": "12.3.2", "next": "12.3.2",

1
web/layouts/settings-layout/profile/index.ts
View File

@ -1,3 +1,2 @@
export * from "./layout"; export * from "./layout";
export * from "./settings-sidebar";
export * from "./sidebar"; export * from "./sidebar";

11
web/layouts/settings-layout/profile/layout.tsx
View File

@ -1,13 +1,13 @@
import { FC, ReactNode } from "react"; import { FC, ReactNode } from "react";
// layout // layout
import { UserAuthWrapper } from "layouts/auth-layout"; import { UserAuthWrapper } from "layouts/auth-layout";
import { ProfileLayoutSidebar } from "layouts/settings-layout";
// components // components
import { ProfileLayoutSidebar, ProfileSettingsSidebar } from "layouts/settings-layout";
import { CommandPalette } from "components/command-palette"; import { CommandPalette } from "components/command-palette";
interface IProfileSettingsLayout { interface IProfileSettingsLayout {
children: ReactNode; children: ReactNode;
header: ReactNode; header?: ReactNode;
} }
export const ProfileSettingsLayout: FC<IProfileSettingsLayout> = (props) => { export const ProfileSettingsLayout: FC<IProfileSettingsLayout> = (props) => {
@ -21,12 +21,7 @@ export const ProfileSettingsLayout: FC<IProfileSettingsLayout> = (props) => {
<ProfileLayoutSidebar /> <ProfileLayoutSidebar />
<main className="relative flex flex-col h-full w-full overflow-hidden bg-custom-background-100"> <main className="relative flex flex-col h-full w-full overflow-hidden bg-custom-background-100">
{header} {header}
<div className="flex gap-2 h-full w-full overflow-x-hidden overflow-y-scroll"> <div className="h-full w-full overflow-x-hidden overflow-y-scroll">{children}</div>
<div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
<ProfileSettingsSidebar />
</div>
{children}
</div>
</main> </main>
</div> </div>
</UserAuthWrapper> </UserAuthWrapper>

75
web/layouts/settings-layout/profile/settings-sidebar.tsx
View File

@ -1,75 +0,0 @@
import React from "react";
import { useRouter } from "next/router";
import Link from "next/link";
import { observer } from "mobx-react-lite";
// mobx
import { useMobxStore } from "lib/mobx/store-provider";
const PROFILE_LINKS: Array<{
key: string;
label: string;
href: string;
}> = [
{
key: "profile",
label: "Profile",
href: `/profile`,
},
{
key: "change-password",
label: "Change password",
href: `/profile/change-password`,
},
{
key: "activity",
label: "Activity",
href: `/profile/activity`,
},
{
key: "preferences",
label: "Preferences",
href: `/profile/preferences`,
},
];
export const ProfileSettingsSidebar = observer(() => {
const router = useRouter();
const {
appConfig: { envConfig },
} = useMobxStore();
const enableEmailPassword =
envConfig &&
(envConfig?.email_password_login ||
!(
envConfig?.email_password_login ||
envConfig?.magic_login ||
envConfig?.google_client_id ||
envConfig?.github_client_id
));
return (
<div className="flex flex-col gap-2 w-80 px-5">
<span className="text-xs text-custom-sidebar-text-400 font-semibold">My Account</span>
<div className="flex flex-col gap-1 w-full">
{PROFILE_LINKS.map((link) => {
if (link.key === "change-password" && !enableEmailPassword) return;
return (
<Link key={link.key} href={link.href}>
<a>
<div
className={`px-4 py-2 text-sm font-medium rounded-md ${
router.asPath === link.href
? "bg-custom-primary-100/10 text-custom-primary-100"
: "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
}`}
>
{link.label}
</div>
</a>
</Link>
);
})}
</div>
</div>
);
});

229
web/layouts/settings-layout/profile/sidebar.tsx
View File

@ -1,50 +1,73 @@
import { Fragment, useEffect, useRef, useState } from "react";
import { mutate } from "swr"; import { mutate } from "swr";
import Link from "next/link"; import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { useTheme } from "next-themes"; import { useTheme } from "next-themes";
import { Menu, Transition } from "@headlessui/react"; import { Activity, ChevronLeft, CircleUser, KeyRound, LogOut, MoveLeft, Plus, Settings2, UserPlus } from "lucide-react";
// icons
import { LogIn, LogOut, MoveLeft, Plus, User, UserPlus } from "lucide-react";
// mobx store // mobx store
import { useMobxStore } from "lib/mobx/store-provider"; import { useMobxStore } from "lib/mobx/store-provider";
// ui // ui
import { Avatar, Tooltip } from "@plane/ui"; import { Tooltip } from "@plane/ui";
// hooks // hooks
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
import { useState } from "react";
const SIDEBAR_LINKS = [ const PROFILE_ACTION_LINKS = [
{
key: "profile",
label: "Profile",
href: `/profile`,
Icon: CircleUser,
},
{
key: "change-password",
label: "Change password",
href: `/profile/change-password`,
Icon: KeyRound,
},
{
key: "activity",
label: "Activity",
href: `/profile/activity`,
Icon: Activity,
},
{
key: "preferences",
label: "Preferences",
href: `/profile/preferences`,
Icon: Settings2,
},
];
const WORKSPACE_ACTION_LINKS = [
{ {
key: "create-workspace", key: "create-workspace",
Icon: Plus, Icon: Plus,
name: "Create workspace", label: "Create workspace",
href: "/create-workspace", href: "/create-workspace",
}, },
{ {
key: "invitations", key: "invitations",
Icon: UserPlus, Icon: UserPlus,
name: "Invitations", label: "Invitations",
href: "/invitations", href: "/invitations",
}, },
]; ];
export const ProfileLayoutSidebar = observer(() => { export const ProfileLayoutSidebar = observer(() => {
// states // states
const [isScrolled, setIsScrolled] = useState(false); // scroll animation state const [isSigningOut, setIsSigningOut] = useState(false);
// refs // router
const containerRef = useRef<HTMLDivElement | null>(null);
const router = useRouter(); const router = useRouter();
// next themes
const { setTheme } = useTheme(); const { setTheme } = useTheme();
// toast
const { setToastAlert } = useToast(); const { setToastAlert } = useToast();
const { const {
theme: { sidebarCollapsed, toggleSidebar }, theme: { sidebarCollapsed, toggleSidebar },
workspace: { workspaces }, workspace: { workspaces },
user: { currentUser, currentUserSettings, isUserInstanceAdmin, signOut }, user: { currentUser, currentUserSettings, signOut },
} = useMobxStore(); } = useMobxStore();
// redirect url for normal mode // redirect url for normal mode
@ -54,6 +77,8 @@ export const ProfileLayoutSidebar = observer(() => {
""; "";
const handleSignOut = async () => { const handleSignOut = async () => {
setIsSigningOut(true);
await signOut() await signOut()
.then(() => { .then(() => {
mutate("CURRENT_USER_DETAILS", null); mutate("CURRENT_USER_DETAILS", null);
@ -66,144 +91,67 @@ export const ProfileLayoutSidebar = observer(() => {
title: "Error!", title: "Error!",
message: "Failed to sign out. Please try again.", message: "Failed to sign out. Please try again.",
}) })
); )
.finally(() => setIsSigningOut(false));
}; };
/**
* Implementing scroll animation styles based on the scroll length of the container
*/
useEffect(() => {
const handleScroll = () => {
if (containerRef.current) {
const scrollTop = containerRef.current.scrollTop;
setIsScrolled(scrollTop > 0);
}
};
const currentContainerRef = containerRef.current;
if (currentContainerRef) {
currentContainerRef.addEventListener("scroll", handleScroll);
}
return () => {
if (currentContainerRef) {
currentContainerRef.removeEventListener("scroll", handleScroll);
}
};
}, []);
return ( return (
<div <div
className={`fixed md:relative inset-y-0 flex flex-col bg-custom-sidebar-background-100 h-full flex-shrink-0 flex-grow-0 border-r border-custom-sidebar-border-200 z-20 duration-300 ${ className={`fixed md:relative inset-y-0 flex flex-col bg-custom-sidebar-background-100 h-full flex-shrink-0 flex-grow-0 border-r border-custom-sidebar-border-200 z-20 duration-300 ${
sidebarCollapsed ? "" : "md:w-[280px]" sidebarCollapsed ? "" : "md:w-[280px]"
} ${sidebarCollapsed ? "left-0" : "-left-full md:left-0"}`} } ${sidebarCollapsed ? "left-0" : "-left-full md:left-0"}`}
> >
<div className="h-full w-full flex flex-col"> <div className="h-full w-full flex flex-col gap-y-4">
<div className="flex items-center gap-x-3 gap-y-2 px-4 pt-4">
<div className="w-full h-full truncate">
<div <div
className={`flex flex-grow items-center gap-x-2 rounded p-1 truncate ${ className={`flex-shrink-0 flex items-center gap-2 px-4 pt-4 truncate ${
sidebarCollapsed ? "justify-center" : "" sidebarCollapsed ? "justify-center" : ""
}`} }`}
> >
<div
className={`flex-shrink-0 flex items-center justify-center h-6 w-6 bg-custom-sidebar-background-80 rounded`}
>
<User className="h-5 w-5 text-custom-text-200" />
</div>
{!sidebarCollapsed && <h4 className="text-custom-text-200 font-medium text-base truncate">My Profile</h4>}
</div>
</div>
{!sidebarCollapsed && (
<Tooltip position="bottom-left" tooltipContent="Go back to your workspace">
<div className="flex-shrink-0">
<Link href={`/${redirectWorkspaceSlug}`}> <Link href={`/${redirectWorkspaceSlug}`}>
<a> <a className="flex-shrink-0 grid place-items-center h-5 w-5">
<LogIn className="h-5 w-5 text-custom-text-200 rotate-180" /> <ChevronLeft className="h-5 w-5" strokeWidth={1} />
</a> </a>
</Link> </Link>
</div>
</Tooltip>
)}
{!sidebarCollapsed && ( {!sidebarCollapsed && (
<Menu as="div" className="relative flex-shrink-0 "> <h4 className="text-custom-text-200 font-semibold text-lg truncate">Profile settings</h4>
<Menu.Button className="flex gap-4 place-items-center outline-none">
<Avatar
name={currentUser?.display_name}
src={currentUser?.avatar}
size={24}
shape="square"
className="!text-base"
/>
</Menu.Button>
<Transition
as={Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="absolute left-0 z-20 mt-1 w-52 rounded-md border border-custom-sidebar-border-200 bg-custom-sidebar-background-100 px-1 py-2 shadow-custom-shadow-rg text-xs space-y-2 outline-none">
<span className="px-2 text-custom-sidebar-text-200">{currentUser?.email}</span>
<Menu.Item
as="button"
type="button"
className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80"
onClick={handleSignOut}
>
<LogOut className="h-4 w-4 stroke-[1.5]" />
Sign out
</Menu.Item>
{isUserInstanceAdmin && (
<div className="p-2 pb-0 border-t border-custom-border-100">
<Menu.Item as="button" type="button" className="w-full">
<Link href="/god-mode">
<a className="flex w-full items-center justify-center rounded px-2 py-1 text-sm font-medium text-custom-primary-100 hover:text-custom-primary-200 bg-custom-primary-100/20 hover:bg-custom-primary-100/30">
Enter God Mode
</a>
</Link>
</Menu.Item>
</div>
)}
</Menu.Items>
</Transition>
</Menu>
)} )}
</div> </div>
<div className="flex-shrink-0 flex flex-col overflow-x-hidden px-4">
{!sidebarCollapsed && (
<h6 className="rounded text-custom-sidebar-text-400 px-1.5 text-sm font-semibold">Your account</h6>
)}
<div className="space-y-1.5 mt-2 h-full overflow-y-auto">
{PROFILE_ACTION_LINKS.map((link) => {
if (link.key === "change-password" && currentUser?.is_password_autoset) return null;
<div className="w-full cursor-pointer space-y-1 p-4 flex-shrink-0"> return (
{SIDEBAR_LINKS.map((link) => (
<Link key={link.key} href={link.href}> <Link key={link.key} href={link.href}>
<a className="block w-full"> <a className="block w-full">
<Tooltip tooltipContent={link.name} position="right" className="ml-2" disabled={!sidebarCollapsed}> <Tooltip tooltipContent={link.label} position="right" className="ml-2" disabled={!sidebarCollapsed}>
<div <div
className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80 ${ className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
sidebarCollapsed ? "justify-center" : "" router.pathname === link.href
}`} ? "bg-custom-primary-100/10 text-custom-primary-100"
: "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
} ${sidebarCollapsed ? "justify-center" : ""}`}
> >
{<link.Icon className="h-4 w-4" />} {<link.Icon className="h-4 w-4" />}
{!sidebarCollapsed && link.name} {!sidebarCollapsed && link.label}
</div> </div>
</Tooltip> </Tooltip>
</a> </a>
</Link> </Link>
))} );
})}
</div> </div>
{workspaces && workspaces.length > 0 && ( </div>
<div className="flex flex-col h-full overflow-x-hidden px-4"> <div className="flex flex-col overflow-x-hidden px-4">
{!sidebarCollapsed && ( {!sidebarCollapsed && (
<div className="rounded text-custom-sidebar-text-400 px-1.5 text-sm font-semibold">Your workspaces</div> <h6 className="rounded text-custom-sidebar-text-400 px-1.5 text-sm font-semibold">Workspaces</h6>
)} )}
<div {workspaces && workspaces.length > 0 && (
ref={containerRef} <div className="space-y-1.5 mt-2 h-full overflow-y-auto">
className={`space-y-2 mt-2 pt-2 h-full overflow-y-auto ${
isScrolled ? "border-t border-custom-sidebar-border-300" : ""
}`}
>
{workspaces.map((workspace) => ( {workspaces.map((workspace) => (
<Link <Link
key={workspace.id} key={workspace.id}
@ -213,7 +161,7 @@ export const ProfileLayoutSidebar = observer(() => {
}`} }`}
> >
<a <a
className={`flex items-center flex-grow w-full truncate gap-x-2 px-2 py-1 hover:bg-custom-sidebar-background-80 rounded-md ${ className={`flex items-center flex-grow w-full truncate gap-x-2 px-3 py-1 hover:bg-custom-sidebar-background-80 rounded-md ${
sidebarCollapsed ? "justify-center" : "" sidebarCollapsed ? "justify-center" : ""
}`} }`}
> >
@ -239,9 +187,41 @@ export const ProfileLayoutSidebar = observer(() => {
</Link> </Link>
))} ))}
</div> </div>
</div>
)} )}
<div className="flex-grow flex items-end px-4 py-2 border-t border-custom-border-200"> <div className="mt-1.5">
{WORKSPACE_ACTION_LINKS.map((link) => (
<Link key={link.key} href={link.href}>
<a className="block w-full">
<Tooltip tooltipContent={link.label} position="right" className="ml-2" disabled={!sidebarCollapsed}>
<div
className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80 ${
sidebarCollapsed ? "justify-center" : ""
}`}
>
{<link.Icon className="h-4 w-4" />}
{!sidebarCollapsed && link.label}
</div>
</Tooltip>
</a>
</Link>
))}
</div>
</div>
<div className="flex-shrink-0 flex-grow flex items-end px-6 py-2">
<div
className={`flex w-full ${
sidebarCollapsed ? "flex-col justify-center gap-2" : "items-center justify-between gap-2"
}`}
>
<button
type="button"
onClick={handleSignOut}
className="text-sm text-red-500 flex items-center justify-center gap-2 font-medium"
disabled={isSigningOut}
>
<LogOut className="h-3.5 w-3.5" />
{!sidebarCollapsed && <span>{isSigningOut ? "Signing out..." : "Sign out"}</span>}
</button>
<button <button
type="button" type="button"
className="grid place-items-center rounded-md p-1.5 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90 outline-none md:hidden" className="grid place-items-center rounded-md p-1.5 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90 outline-none md:hidden"
@ -261,5 +241,6 @@ export const ProfileLayoutSidebar = observer(() => {
</div> </div>
</div> </div>
</div> </div>
</div>
); );
}); });

2
web/package.json
View File

@ -39,7 +39,7 @@
"js-cookie": "^3.0.1", "js-cookie": "^3.0.1",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"lodash.debounce": "^4.0.8", "lodash.debounce": "^4.0.8",
"lucide-react": "^0.274.0", "lucide-react": "^0.293.0",
"mobx": "^6.10.0", "mobx": "^6.10.0",
"mobx-react-lite": "^4.0.3", "mobx-react-lite": "^4.0.3",
"next": "12.3.2", "next": "12.3.2",

9
web/pages/profile/activity.tsx
View File

@ -9,7 +9,6 @@ import { ProfileSettingsLayout } from "layouts/settings-layout";
// components // components
import { ActivityIcon, ActivityMessage } from "components/core"; import { ActivityIcon, ActivityMessage } from "components/core";
import { RichReadOnlyEditor } from "@plane/rich-text-editor"; import { RichReadOnlyEditor } from "@plane/rich-text-editor";
import { ProfileSettingsHeader } from "components/headers";
// icons // icons
import { History, MessageSquare } from "lucide-react"; import { History, MessageSquare } from "lucide-react";
// ui // ui
@ -30,12 +29,12 @@ const ProfileActivityPage: NextPageWithLayout = () => {
const { data: userActivity } = useSWR(USER_ACTIVITY, () => userService.getUserActivity()); const { data: userActivity } = useSWR(USER_ACTIVITY, () => userService.getUserActivity());
return ( return (
<section className="pr-9 py-8 w-full overflow-y-auto"> <section className="h-full w-full lg:w-3/5 mx-auto px-8 pb-8 mt-16 flex flex-col overflow-hidden">
<div className="flex items-center py-3.5 border-b border-custom-border-100"> <div className="flex items-center pb-3.5 border-b border-custom-border-100">
<h3 className="text-xl font-medium">Activity</h3> <h3 className="text-xl font-medium">Activity</h3>
</div> </div>
{userActivity ? ( {userActivity ? (
<div className="flex flex-col gap-2 pb-4 w-full"> <div className="flex flex-col gap-2 h-full w-full overflow-y-auto">
<ul role="list" className="-mb-4"> <ul role="list" className="-mb-4">
{userActivity.results.map((activityItem: any) => { {userActivity.results.map((activityItem: any) => {
if (activityItem.field === "comment") { if (activityItem.field === "comment") {
@ -191,7 +190,7 @@ const ProfileActivityPage: NextPageWithLayout = () => {
}; };
ProfileActivityPage.getLayout = function getLayout(page: ReactElement) { ProfileActivityPage.getLayout = function getLayout(page: ReactElement) {
return <ProfileSettingsLayout header={<ProfileSettingsHeader title="Activity" />}>{page}</ProfileSettingsLayout>; return <ProfileSettingsLayout>{page}</ProfileSettingsLayout>;
}; };
export default ProfileActivityPage; export default ProfileActivityPage;

12
web/pages/profile/change-password.tsx
View File

@ -10,8 +10,6 @@ import { UserService } from "services/user.service";
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
// layout // layout
import { ProfileSettingsLayout } from "layouts/settings-layout"; import { ProfileSettingsLayout } from "layouts/settings-layout";
// components
import { ProfileSettingsHeader } from "components/headers";
// ui // ui
import { Button, Input, Spinner } from "@plane/ui"; import { Button, Input, Spinner } from "@plane/ui";
// types // types
@ -99,7 +97,11 @@ const ChangePasswordPage: NextPageWithLayout = observer(() => {
); );
return ( return (
<form onSubmit={handleSubmit(handleChangePassword)} className="flex flex-col gap-8 my-10 w-full mr-9"> <form
onSubmit={handleSubmit(handleChangePassword)}
className="flex flex-col gap-8 h-full w-full lg:w-3/5 mx-auto px-8 pb-8 mt-16"
>
<h3 className="text-xl font-medium">Change password</h3>
<div className="grid grid-col grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 items-center justify-between gap-10 w-full"> <div className="grid grid-col grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 items-center justify-between gap-10 w-full">
<div className="flex flex-col gap-1 "> <div className="flex flex-col gap-1 ">
<h4 className="text-sm">Current password</h4> <h4 className="text-sm">Current password</h4>
@ -181,9 +183,7 @@ const ChangePasswordPage: NextPageWithLayout = observer(() => {
}); });
ChangePasswordPage.getLayout = function getLayout(page: ReactElement) { ChangePasswordPage.getLayout = function getLayout(page: ReactElement) {
return ( return <ProfileSettingsLayout>{page}</ProfileSettingsLayout>;
<ProfileSettingsLayout header={<ProfileSettingsHeader title="Change Password" />}>{page}</ProfileSettingsLayout>
);
}; };
export default ChangePasswordPage; export default ChangePasswordPage;

30
web/pages/profile/index.tsx
View File

@ -11,7 +11,6 @@ import useToast from "hooks/use-toast";
import { ProfileSettingsLayout } from "layouts/settings-layout"; import { ProfileSettingsLayout } from "layouts/settings-layout";
// components // components
import { ImagePickerPopover, UserImageUploadModal } from "components/core"; import { ImagePickerPopover, UserImageUploadModal } from "components/core";
import { ProfileSettingsHeader } from "components/headers";
import { DeactivateAccountModal } from "components/account"; import { DeactivateAccountModal } from "components/account";
// ui // ui
import { Button, CustomSelect, CustomSearchSelect, Input, Spinner } from "@plane/ui"; import { Button, CustomSelect, CustomSearchSelect, Input, Spinner } from "@plane/ui";
@ -169,10 +168,10 @@ const ProfileSettingsPage: NextPageWithLayout = () => {
)} )}
/> />
<DeactivateAccountModal isOpen={deactivateAccountModal} onClose={() => setDeactivateAccountModal(false)} /> <DeactivateAccountModal isOpen={deactivateAccountModal} onClose={() => setDeactivateAccountModal(false)} />
<div className="h-full w-full flex flex-col py-9 pr-9 space-y-10 overflow-y-auto"> <div className="h-full w-full lg:w-3/5 mx-auto flex flex-col px-8 pb-8 mt-16 space-y-10 overflow-y-auto">
<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)}>
<div className="flex flex-col gap-8 w-full"> <div className="flex flex-col gap-8 w-full">
<div className="relative h-44 w-full mt-6"> <div className="relative h-44 w-full">
<img <img
src={watch("cover_image") ?? "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"} src={watch("cover_image") ?? "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"}
className="h-44 w-full rounded-lg object-cover" className="h-44 w-full rounded-lg object-cover"
@ -236,7 +235,7 @@ const ProfileSettingsPage: NextPageWithLayout = () => {
<div className="grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 gap-6 px-8"> <div className="grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 gap-6 px-8">
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<h4 className="text-sm">First Name</h4> <h4 className="text-sm">First name</h4>
<Controller <Controller
control={control} control={control}
name="first_name" name="first_name"
@ -250,14 +249,14 @@ const ProfileSettingsPage: NextPageWithLayout = () => {
ref={ref} ref={ref}
hasError={Boolean(errors.first_name)} hasError={Boolean(errors.first_name)}
placeholder="Enter your first name" placeholder="Enter your first name"
className="rounded-md font-medium w-full" className="rounded-md w-full"
/> />
)} )}
/> />
</div> </div>
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<h4 className="text-sm">Last Name</h4> <h4 className="text-sm">Last name</h4>
<Controller <Controller
control={control} control={control}
@ -272,7 +271,7 @@ const ProfileSettingsPage: NextPageWithLayout = () => {
ref={ref} ref={ref}
hasError={Boolean(errors.last_name)} hasError={Boolean(errors.last_name)}
placeholder="Enter your last name" placeholder="Enter your last name"
className="rounded-md font-medium w-full" className="rounded-md w-full"
/> />
)} )}
/> />
@ -292,8 +291,8 @@ const ProfileSettingsPage: NextPageWithLayout = () => {
onChange={onChange} onChange={onChange}
ref={ref} ref={ref}
hasError={Boolean(errors.email)} hasError={Boolean(errors.email)}
placeholder="Enter your last name" placeholder="Enter your email"
className="rounded-md font-medium w-full" className="rounded-md w-full"
disabled disabled
/> />
)} )}
@ -312,7 +311,7 @@ const ProfileSettingsPage: NextPageWithLayout = () => {
onChange={onChange} onChange={onChange}
label={value ? value.toString() : "Select your role"} label={value ? value.toString() : "Select your role"}
buttonClassName={errors.role ? "border-red-500 bg-red-500/10" : "border-none"} buttonClassName={errors.role ? "border-red-500 bg-red-500/10" : "border-none"}
className="rounded-md border !border-custom-border-200" className="rounded-md border-[0.5px] !border-custom-border-200"
width="w-full" width="w-full"
input input
> >
@ -378,8 +377,8 @@ const ProfileSettingsPage: NextPageWithLayout = () => {
options={timeZoneOptions} options={timeZoneOptions}
onChange={onChange} onChange={onChange}
optionsClassName="w-full" optionsClassName="w-full"
buttonClassName={"border-none"} buttonClassName="border-none"
className="rounded-md border !border-custom-border-200" className="rounded-md border-[0.5px] !border-custom-border-200"
input input
/> />
)} )}
@ -389,7 +388,7 @@ const ProfileSettingsPage: NextPageWithLayout = () => {
<div className="flex items-center justify-between py-2"> <div className="flex items-center justify-between py-2">
<Button variant="primary" type="submit" loading={isSubmitting}> <Button variant="primary" type="submit" loading={isSubmitting}>
{isSubmitting ? "Updating Profile..." : "Update Profile"} {isSubmitting ? "Saving..." : "Save changes"}
</Button> </Button>
</div> </div>
</div> </div>
@ -399,8 +398,7 @@ const ProfileSettingsPage: NextPageWithLayout = () => {
{({ open }) => ( {({ open }) => (
<> <>
<Disclosure.Button as="button" type="button" className="flex items-center justify-between w-full py-4"> <Disclosure.Button as="button" type="button" className="flex items-center justify-between w-full py-4">
<span className="text-lg tracking-tight">Deactivate Account</span> <span className="text-lg tracking-tight">Deactivate account</span>
{/* <Icon iconName={open ? "expand_less" : "expand_more"} className="!text-2xl" /> */}
<ChevronDown className={`h-5 w-5 transition-all ${open ? "rotate-180" : ""}`} /> <ChevronDown className={`h-5 w-5 transition-all ${open ? "rotate-180" : ""}`} />
</Disclosure.Button> </Disclosure.Button>
@ -437,7 +435,7 @@ const ProfileSettingsPage: NextPageWithLayout = () => {
}; };
ProfileSettingsPage.getLayout = function getLayout(page: ReactElement) { ProfileSettingsPage.getLayout = function getLayout(page: ReactElement) {
return <ProfileSettingsLayout header={<ProfileSettingsHeader title="Settings" />}>{page}</ProfileSettingsLayout>; return <ProfileSettingsLayout>{page}</ProfileSettingsLayout>;
}; };
export default ProfileSettingsPage; export default ProfileSettingsPage;

7
web/pages/profile/preferences.tsx
View File

@ -8,7 +8,6 @@ import useToast from "hooks/use-toast";
import { ProfileSettingsLayout } from "layouts/settings-layout"; import { ProfileSettingsLayout } from "layouts/settings-layout";
// components // components
import { CustomThemeSelector, ThemeSwitch } from "components/core"; import { CustomThemeSelector, ThemeSwitch } from "components/core";
import { ProfileSettingsHeader } from "components/headers";
// ui // ui
import { Spinner } from "@plane/ui"; import { Spinner } from "@plane/ui";
// constants // constants
@ -50,8 +49,8 @@ const ProfilePreferencesPage: NextPageWithLayout = observer(() => {
return ( return (
<> <>
{currentUser ? ( {currentUser ? (
<div className="pr-9 py-8 w-full overflow-y-auto"> <div className="h-full w-full lg:w-3/5 mx-auto px-8 pb-8 mt-16 overflow-y-auto">
<div className="flex items-center py-3.5 border-b border-custom-border-100"> <div className="flex items-center pb-3.5 border-b border-custom-border-100">
<h3 className="text-xl font-medium">Preferences</h3> <h3 className="text-xl font-medium">Preferences</h3>
</div> </div>
<div className="grid grid-cols-12 gap-4 sm:gap-16 py-6"> <div className="grid grid-cols-12 gap-4 sm:gap-16 py-6">
@ -75,7 +74,7 @@ const ProfilePreferencesPage: NextPageWithLayout = observer(() => {
}); });
ProfilePreferencesPage.getLayout = function getLayout(page: ReactElement) { ProfilePreferencesPage.getLayout = function getLayout(page: ReactElement) {
return <ProfileSettingsLayout header={<ProfileSettingsHeader title="Preferences" />}>{page}</ProfileSettingsLayout>; return <ProfileSettingsLayout>{page}</ProfileSettingsLayout>;
}; };
export default ProfilePreferencesPage; export default ProfilePreferencesPage;

1
web/types/users.d.ts vendored
View File

@ -14,6 +14,7 @@ export interface IUser {
is_email_verified: boolean; is_email_verified: boolean;
is_managed: boolean; is_managed: boolean;
is_onboarded: boolean; is_onboarded: boolean;
is_password_autoset: boolean;
is_tour_completed: boolean; is_tour_completed: boolean;
mobile_number: string | null; mobile_number: string | null;
role: string | null; role: string | null;

13
yarn.lock
View File

@ -6049,15 +6049,10 @@ lucide-react@^0.244.0:
resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.244.0.tgz#9626f44881830280012dad23afda7ddbcffff24b" resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.244.0.tgz#9626f44881830280012dad23afda7ddbcffff24b"
integrity sha512-PeDVbx5PlIRrVvdxiuSxPfBo7sK5qrL3LbvvRoGVNiHYRAkBm/48lKqoioxcmp0bgsyJs9lMw7CdtGFvnMJbVg== integrity sha512-PeDVbx5PlIRrVvdxiuSxPfBo7sK5qrL3LbvvRoGVNiHYRAkBm/48lKqoioxcmp0bgsyJs9lMw7CdtGFvnMJbVg==
lucide-react@^0.263.1: lucide-react@^0.293.0:
version "0.263.1" version "0.293.0"
resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.263.1.tgz#a456ee0d171aa373929bd3ee20d6f9fb4429c301" resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.293.0.tgz#02703dbcc56bb38779f4e576cc03be8cc0046fcc"
integrity sha512-keqxAx97PlaEN89PXZ6ki1N8nRjGWtDa4021GFYLNj0RgruM5odbpl8GHTExj0hhPq3sF6Up0gnxt6TSHu+ovw== integrity sha512-g3AN0EYITCpAjNgLHrKrFWvIJzZy0Y9OPBaonyKw1cM+nZE6piOM+TiuQdYfha7oa76TMiDaWXQHE44CEqsrzw==
lucide-react@^0.274.0:
version "0.274.0"
resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.274.0.tgz#d3b54dcb972b12f1292061448d61d422ef2e269d"
integrity sha512-qiWcojRXEwDiSimMX1+arnxha+ROJzZjJaVvCC0rsG6a9pUPjZePXSq7em4ZKMp0NDm1hyzPNkM7UaWC3LU2AA==
magic-string@^0.25.0, magic-string@^0.25.7: magic-string@^0.25.0, magic-string@^0.25.7:
version "0.25.9" version "0.25.9"