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 sriram veeraghanta
parent 44bc199385
commit d71ba47262
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",
"js-cookie": "^3.0.1",
"lowlight": "^2.9.0",
"lucide-react": "^0.263.1",
"lucide-react": "^0.293.0",
"mobx": "^6.10.0",
"mobx-react-lite": "^4.0.3",
"next": "12.3.2",

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

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

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

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

293
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 Link from "next/link";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import { useTheme } from "next-themes";
import { Menu, Transition } from "@headlessui/react";
// icons
import { LogIn, LogOut, MoveLeft, Plus, User, UserPlus } from "lucide-react";
import { Activity, ChevronLeft, CircleUser, KeyRound, LogOut, MoveLeft, Plus, Settings2, UserPlus } from "lucide-react";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// ui
import { Avatar, Tooltip } from "@plane/ui";
import { Tooltip } from "@plane/ui";
// hooks
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",
Icon: Plus,
name: "Create workspace",
label: "Create workspace",
href: "/create-workspace",
},
{
key: "invitations",
Icon: UserPlus,
name: "Invitations",
label: "Invitations",
href: "/invitations",
},
];
export const ProfileLayoutSidebar = observer(() => {
// states
const [isScrolled, setIsScrolled] = useState(false); // scroll animation state
// refs
const containerRef = useRef<HTMLDivElement | null>(null);
const [isSigningOut, setIsSigningOut] = useState(false);
// router
const router = useRouter();
// next themes
const { setTheme } = useTheme();
// toast
const { setToastAlert } = useToast();
const {
theme: { sidebarCollapsed, toggleSidebar },
workspace: { workspaces },
user: { currentUser, currentUserSettings, isUserInstanceAdmin, signOut },
user: { currentUser, currentUserSettings, signOut },
} = useMobxStore();
// redirect url for normal mode
@ -54,6 +77,8 @@ export const ProfileLayoutSidebar = observer(() => {
"";
const handleSignOut = async () => {
setIsSigningOut(true);
await signOut()
.then(() => {
mutate("CURRENT_USER_DETAILS", null);
@ -66,144 +91,67 @@ export const ProfileLayoutSidebar = observer(() => {
title: "Error!",
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 (
<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 ${
sidebarCollapsed ? "" : "md:w-[280px]"
} ${sidebarCollapsed ? "left-0" : "-left-full md:left-0"}`}
>
<div className="h-full w-full flex flex-col">
<div className="flex items-center gap-x-3 gap-y-2 px-4 pt-4">
<div className="w-full h-full truncate">
<div
className={`flex flex-grow items-center gap-x-2 rounded p-1 truncate ${
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>
<div className="h-full w-full flex flex-col gap-y-4">
<div
className={`flex-shrink-0 flex items-center gap-2 px-4 pt-4 truncate ${
sidebarCollapsed ? "justify-center" : ""
}`}
>
<Link href={`/${redirectWorkspaceSlug}`}>
<a className="flex-shrink-0 grid place-items-center h-5 w-5">
<ChevronLeft className="h-5 w-5" strokeWidth={1} />
</a>
</Link>
{!sidebarCollapsed && (
<Tooltip position="bottom-left" tooltipContent="Go back to your workspace">
<div className="flex-shrink-0">
<Link href={`/${redirectWorkspaceSlug}`}>
<a>
<LogIn className="h-5 w-5 text-custom-text-200 rotate-180" />
<h4 className="text-custom-text-200 font-semibold text-lg truncate">Profile settings</h4>
)}
</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;
return (
<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 ${
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" />}
{!sidebarCollapsed && link.label}
</div>
</Tooltip>
</a>
</Link>
</div>
</Tooltip>
)}
);
})}
</div>
</div>
<div className="flex flex-col overflow-x-hidden px-4">
{!sidebarCollapsed && (
<Menu as="div" className="relative flex-shrink-0 ">
<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>
<h6 className="rounded text-custom-sidebar-text-400 px-1.5 text-sm font-semibold">Workspaces</h6>
)}
</div>
<div className="w-full cursor-pointer space-y-1 p-4 flex-shrink-0">
{SIDEBAR_LINKS.map((link) => (
<Link key={link.key} href={link.href}>
<a className="block w-full">
<Tooltip tooltipContent={link.name} 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.name}
</div>
</Tooltip>
</a>
</Link>
))}
</div>
{workspaces && workspaces.length > 0 && (
<div className="flex flex-col h-full overflow-x-hidden px-4">
{!sidebarCollapsed && (
<div className="rounded text-custom-sidebar-text-400 px-1.5 text-sm font-semibold">Your workspaces</div>
)}
<div
ref={containerRef}
className={`space-y-2 mt-2 pt-2 h-full overflow-y-auto ${
isScrolled ? "border-t border-custom-sidebar-border-300" : ""
}`}
>
{workspaces && workspaces.length > 0 && (
<div className="space-y-1.5 mt-2 h-full overflow-y-auto">
{workspaces.map((workspace) => (
<Link
key={workspace.id}
@ -213,7 +161,7 @@ export const ProfileLayoutSidebar = observer(() => {
}`}
>
<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" : ""
}`}
>
@ -239,25 +187,58 @@ export const ProfileLayoutSidebar = observer(() => {
</Link>
))}
</div>
)}
<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 className="flex-grow flex items-end px-4 py-2 border-t border-custom-border-200">
<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"
onClick={() => toggleSidebar()}
>
<MoveLeft className="h-3.5 w-3.5" />
</button>
<button
type="button"
className={`hidden md: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 ml-auto ${
sidebarCollapsed ? "w-full" : ""
</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"
}`}
onClick={() => toggleSidebar()}
>
<MoveLeft className={`h-3.5 w-3.5 duration-300 ${sidebarCollapsed ? "rotate-180" : ""}`} />
</button>
<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
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"
onClick={() => toggleSidebar()}
>
<MoveLeft className="h-3.5 w-3.5" />
</button>
<button
type="button"
className={`hidden md: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 ml-auto ${
sidebarCollapsed ? "w-full" : ""
}`}
onClick={() => toggleSidebar()}
>
<MoveLeft className={`h-3.5 w-3.5 duration-300 ${sidebarCollapsed ? "rotate-180" : ""}`} />
</button>
</div>
</div>
</div>
</div>

2
web/package.json
View File

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

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

@ -9,7 +9,6 @@ import { ProfileSettingsLayout } from "layouts/settings-layout";
// components
import { ActivityIcon, ActivityMessage } from "components/core";
import { RichReadOnlyEditor } from "@plane/rich-text-editor";
import { ProfileSettingsHeader } from "components/headers";
// icons
import { History, MessageSquare } from "lucide-react";
// ui
@ -30,12 +29,12 @@ const ProfileActivityPage: NextPageWithLayout = () => {
const { data: userActivity } = useSWR(USER_ACTIVITY, () => userService.getUserActivity());
return (
<section className="pr-9 py-8 w-full overflow-y-auto">
<div className="flex items-center py-3.5 border-b border-custom-border-100">
<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 pb-3.5 border-b border-custom-border-100">
<h3 className="text-xl font-medium">Activity</h3>
</div>
{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">
{userActivity.results.map((activityItem: any) => {
if (activityItem.field === "comment") {
@ -191,7 +190,7 @@ const ProfileActivityPage: NextPageWithLayout = () => {
};
ProfileActivityPage.getLayout = function getLayout(page: ReactElement) {
return <ProfileSettingsLayout header={<ProfileSettingsHeader title="Activity" />}>{page}</ProfileSettingsLayout>;
return <ProfileSettingsLayout>{page}</ProfileSettingsLayout>;
};
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";
// layout
import { ProfileSettingsLayout } from "layouts/settings-layout";
// components
import { ProfileSettingsHeader } from "components/headers";
// ui
import { Button, Input, Spinner } from "@plane/ui";
// types
@ -99,7 +97,11 @@ const ChangePasswordPage: NextPageWithLayout = observer(() => {
);
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="flex flex-col gap-1 ">
<h4 className="text-sm">Current password</h4>
@ -181,9 +183,7 @@ const ChangePasswordPage: NextPageWithLayout = observer(() => {
});
ChangePasswordPage.getLayout = function getLayout(page: ReactElement) {
return (
<ProfileSettingsLayout header={<ProfileSettingsHeader title="Change Password" />}>{page}</ProfileSettingsLayout>
);
return <ProfileSettingsLayout>{page}</ProfileSettingsLayout>;
};
export default ChangePasswordPage;

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

@ -11,7 +11,6 @@ import useToast from "hooks/use-toast";
import { ProfileSettingsLayout } from "layouts/settings-layout";
// components
import { ImagePickerPopover, UserImageUploadModal } from "components/core";
import { ProfileSettingsHeader } from "components/headers";
import { DeactivateAccountModal } from "components/account";
// ui
import { Button, CustomSelect, CustomSearchSelect, Input, Spinner } from "@plane/ui";
@ -169,10 +168,10 @@ const ProfileSettingsPage: NextPageWithLayout = () => {
)}
/>
<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)}>
<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
src={watch("cover_image") ?? "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"}
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="flex flex-col gap-1">
<h4 className="text-sm">First Name</h4>
<h4 className="text-sm">First name</h4>
<Controller
control={control}
name="first_name"
@ -250,14 +249,14 @@ const ProfileSettingsPage: NextPageWithLayout = () => {
ref={ref}
hasError={Boolean(errors.first_name)}
placeholder="Enter your first name"
className="rounded-md font-medium w-full"
className="rounded-md w-full"
/>
)}
/>
</div>
<div className="flex flex-col gap-1">
<h4 className="text-sm">Last Name</h4>
<h4 className="text-sm">Last name</h4>
<Controller
control={control}
@ -272,7 +271,7 @@ const ProfileSettingsPage: NextPageWithLayout = () => {
ref={ref}
hasError={Boolean(errors.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}
ref={ref}
hasError={Boolean(errors.email)}
placeholder="Enter your last name"
className="rounded-md font-medium w-full"
placeholder="Enter your email"
className="rounded-md w-full"
disabled
/>
)}
@ -312,7 +311,7 @@ const ProfileSettingsPage: NextPageWithLayout = () => {
onChange={onChange}
label={value ? value.toString() : "Select your role"}
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"
input
>
@ -328,7 +327,7 @@ const ProfileSettingsPage: NextPageWithLayout = () => {
</div>
<div className="flex flex-col gap-1">
<h4 className="text-sm">Display name </h4>
<h4 className="text-sm">Display name</h4>
<Controller
control={control}
name="display_name"
@ -365,7 +364,7 @@ const ProfileSettingsPage: NextPageWithLayout = () => {
</div>
<div className="flex flex-col gap-1">
<h4 className="text-sm">Timezone </h4>
<h4 className="text-sm">Timezone</h4>
<Controller
name="user_timezone"
@ -378,8 +377,8 @@ const ProfileSettingsPage: NextPageWithLayout = () => {
options={timeZoneOptions}
onChange={onChange}
optionsClassName="w-full"
buttonClassName={"border-none"}
className="rounded-md border !border-custom-border-200"
buttonClassName="border-none"
className="rounded-md border-[0.5px] !border-custom-border-200"
input
/>
)}
@ -389,7 +388,7 @@ const ProfileSettingsPage: NextPageWithLayout = () => {
<div className="flex items-center justify-between py-2">
<Button variant="primary" type="submit" loading={isSubmitting}>
{isSubmitting ? "Updating Profile..." : "Update Profile"}
{isSubmitting ? "Saving..." : "Save changes"}
</Button>
</div>
</div>
@ -399,8 +398,7 @@ const ProfileSettingsPage: NextPageWithLayout = () => {
{({ open }) => (
<>
<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>
{/* <Icon iconName={open ? "expand_less" : "expand_more"} className="!text-2xl" /> */}
<span className="text-lg tracking-tight">Deactivate account</span>
<ChevronDown className={`h-5 w-5 transition-all ${open ? "rotate-180" : ""}`} />
</Disclosure.Button>
@ -437,7 +435,7 @@ const ProfileSettingsPage: NextPageWithLayout = () => {
};
ProfileSettingsPage.getLayout = function getLayout(page: ReactElement) {
return <ProfileSettingsLayout header={<ProfileSettingsHeader title="Settings" />}>{page}</ProfileSettingsLayout>;
return <ProfileSettingsLayout>{page}</ProfileSettingsLayout>;
};
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";
// components
import { CustomThemeSelector, ThemeSwitch } from "components/core";
import { ProfileSettingsHeader } from "components/headers";
// ui
import { Spinner } from "@plane/ui";
// constants
@ -50,8 +49,8 @@ const ProfilePreferencesPage: NextPageWithLayout = observer(() => {
return (
<>
{currentUser ? (
<div className="pr-9 py-8 w-full overflow-y-auto">
<div className="flex items-center py-3.5 border-b border-custom-border-100">
<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 pb-3.5 border-b border-custom-border-100">
<h3 className="text-xl font-medium">Preferences</h3>
</div>
<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) {
return <ProfileSettingsLayout header={<ProfileSettingsHeader title="Preferences" />}>{page}</ProfileSettingsLayout>;
return <ProfileSettingsLayout>{page}</ProfileSettingsLayout>;
};
export default ProfilePreferencesPage;

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

@ -14,6 +14,7 @@ export interface IUser {
is_email_verified: boolean;
is_managed: boolean;
is_onboarded: boolean;
is_password_autoset: boolean;
is_tour_completed: boolean;
mobile_number: 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"
integrity sha512-PeDVbx5PlIRrVvdxiuSxPfBo7sK5qrL3LbvvRoGVNiHYRAkBm/48lKqoioxcmp0bgsyJs9lMw7CdtGFvnMJbVg==
lucide-react@^0.263.1:
version "0.263.1"
resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.263.1.tgz#a456ee0d171aa373929bd3ee20d6f9fb4429c301"
integrity sha512-keqxAx97PlaEN89PXZ6ki1N8nRjGWtDa4021GFYLNj0RgruM5odbpl8GHTExj0hhPq3sF6Up0gnxt6TSHu+ovw==
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==
lucide-react@^0.293.0:
version "0.293.0"
resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.293.0.tgz#02703dbcc56bb38779f4e576cc03be8cc0046fcc"
integrity sha512-g3AN0EYITCpAjNgLHrKrFWvIJzZy0Y9OPBaonyKw1cM+nZE6piOM+TiuQdYfha7oa76TMiDaWXQHE44CEqsrzw==
magic-string@^0.25.0, magic-string@^0.25.7:
version "0.25.9"