github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: profile settings, activity theming (#951)

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-04-24 18:53:30 +05:30 committed by GitHub
parent 7d96adcb70
commit c9f866e538
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 33 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
apps/app/components/core/feeds.tsx
View File

@ -67,15 +67,19 @@ const activityDetails: {
}, },
name: { name: {
message: "set the name to", message: "set the name to",
icon: <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />, icon: (
<ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />
),
}, },
description: { description: {
message: "updated the description.", message: "updated the description.",
icon: <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />, icon: (
<ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />
),
}, },
estimate_point: { estimate_point: {
message: "set the estimate point to", message: "set the estimate point to",
icon: <PlayIcon className="h-3 w-3 text-gray-500 -rotate-90" aria-hidden="true" />, icon: <PlayIcon className="h-3 w-3 -rotate-90 text-gray-500" aria-hidden="true" />,
}, },
target_date: { target_date: {
message: "set the due date to", message: "set the due date to",
@ -91,7 +95,7 @@ const activityDetails: {
}, },
estimate: { estimate: {
message: "updated the estimate", message: "updated the estimate",
icon: <PlayIcon className="h-3 w-3 text-gray-500 -rotate-90" aria-hidden="true" />, icon: <PlayIcon className="h-3 w-3 -rotate-90 text-gray-500" aria-hidden="true" />,
}, },
link: { link: {
message: "updated the link", message: "updated the link",
@ -153,11 +157,11 @@ export const Feeds: React.FC<any> = ({ activities }) => (
) { ) {
const { workspace_detail, project, issue } = activity; const { workspace_detail, project, issue } = activity;
value = ( value = (
<span className="text-gray-600"> <span className="text-brand-secondary">
created{" "} created{" "}
<Link href={`/${workspace_detail.slug}/projects/${project}/issues/${issue}`}> <Link href={`/${workspace_detail.slug}/projects/${project}/issues/${issue}`}>
<a className="inline-flex items-center hover:underline"> <a className="inline-flex items-center hover:underline">
this issue. <ArrowTopRightOnSquareIcon className="h-3.5 w-3.5 ml-1" /> this issue. <ArrowTopRightOnSquareIcon className="ml-1 h-3.5 w-3.5" />
</a> </a>
</Link> </Link>
</span> </span>
@ -198,7 +202,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
if (activity.field === "comment") { if (activity.field === "comment") {
return ( return (
<div key={activity.id}> <div key={activity.id} className="mt-2">
<div className="relative flex items-start space-x-3"> <div className="relative flex items-start space-x-3">
<div className="relative px-1"> <div className="relative px-1">
{activity.actor_detail.avatar && activity.actor_detail.avatar !== "" ? ( {activity.actor_detail.avatar && activity.actor_detail.avatar !== "" ? (
@ -219,7 +223,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
<span className="absolute -bottom-0.5 -right-1 rounded-tl bg-brand-surface-2 px-0.5 py-px"> <span className="absolute -bottom-0.5 -right-1 rounded-tl bg-brand-surface-2 px-0.5 py-px">
<ChatBubbleLeftEllipsisIcon <ChatBubbleLeftEllipsisIcon
className="h-3.5 w-3.5 text-gray-400" className="h-3.5 w-3.5 text-brand-secondary"
aria-hidden="true" aria-hidden="true"
/> />
</span> </span>
@ -242,9 +246,8 @@ export const Feeds: React.FC<any> = ({ activities }) => (
: activity.old_value : activity.old_value
} }
editable={false} editable={false}
onBlur={() => ({})}
noBorder noBorder
customClassName="text-xs bg-brand-surface-1" customClassName="text-xs border border-brand-base bg-brand-base"
/> />
</div> </div>
</div> </div>
@ -268,7 +271,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
<div> <div>
<div className="relative px-1.5"> <div className="relative px-1.5">
<div className="mt-1.5"> <div className="mt-1.5">
<div className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-brand-surface-1 ring-white"> <div className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-brand-surface-2 ring-white">
{activity.field ? ( {activity.field ? (
activityDetails[activity.field as keyof typeof activityDetails]?.icon activityDetails[activity.field as keyof typeof activityDetails]?.icon
) : activity.actor_detail.avatar && ) : activity.actor_detail.avatar &&

4
apps/app/components/issues/activity.tsx
View File

@ -110,9 +110,7 @@ const activityDetails: {
}, },
}; };
type Props = {}; export const IssueActivitySection: React.FC = () => {
export const IssueActivitySection: React.FC<Props> = () => {
const router = useRouter(); const router = useRouter();
const { workspaceSlug, projectId, issueId } = router.query; const { workspaceSlug, projectId, issueId } = router.query;

9
apps/app/components/issues/comment/comment-card.tsx
View File

@ -68,7 +68,10 @@ export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentD
)} )}
<span className="absolute -bottom-0.5 -right-1 rounded-tl bg-brand-surface-2 px-0.5 py-px"> <span className="absolute -bottom-0.5 -right-1 rounded-tl bg-brand-surface-2 px-0.5 py-px">
<ChatBubbleLeftEllipsisIcon className="h-3.5 w-3.5 text-gray-400" aria-hidden="true" /> <ChatBubbleLeftEllipsisIcon
className="h-3.5 w-3.5 text-brand-secondary"
aria-hidden="true"
/>
</span> </span>
</div> </div>
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
@ -110,10 +113,6 @@ export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentD
</div> </div>
</form> </form>
) : ( ) : (
// <div
// className="mt-2 mb-6 text-sm text-gray-700"
// dangerouslySetInnerHTML={{ __html: comment.comment_html }}
// />
<RemirrorRichTextEditor <RemirrorRichTextEditor
value={comment.comment_html} value={comment.comment_html}
editable={false} editable={false}

26
apps/app/pages/[workspaceSlug]/me/profile/index.tsx
View File

@ -147,8 +147,8 @@ const Profile: NextPage = () => {
<div className="space-y-8 sm:space-y-12"> <div className="space-y-8 sm:space-y-12">
<div className="grid grid-cols-12 gap-4 sm:gap-16"> <div className="grid grid-cols-12 gap-4 sm:gap-16">
<div className="col-span-12 sm:col-span-6"> <div className="col-span-12 sm:col-span-6">
<h4 className="text-xl font-semibold text-brand-base">Profile Picture</h4> <h4 className="text-lg font-semibold text-brand-base">Profile Picture</h4>
<p className="text-brand-secondary"> <p className="text-sm text-brand-secondary">
Max file size is 5MB. Supported file types are .jpg and .png. Max file size is 5MB. Supported file types are .jpg and .png.
</p> </p>
</div> </div>
@ -156,7 +156,7 @@ const Profile: NextPage = () => {
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<button type="button" onClick={() => setIsImageUploadModalOpen(true)}> <button type="button" onClick={() => setIsImageUploadModalOpen(true)}>
{!watch("avatar") || watch("avatar") === "" ? ( {!watch("avatar") || watch("avatar") === "" ? (
<div className="bg-brand-surface-2 h-12 w-12 p-2 rounded-md"> <div className="h-12 w-12 rounded-md bg-brand-surface-2 p-2">
<UserIcon className="h-full w-full text-brand-secondary" /> <UserIcon className="h-full w-full text-brand-secondary" />
</div> </div>
) : ( ) : (
@ -195,12 +195,12 @@ const Profile: NextPage = () => {
</div> </div>
<div className="grid grid-cols-12 gap-4 sm:gap-16"> <div className="grid grid-cols-12 gap-4 sm:gap-16">
<div className="col-span-12 sm:col-span-6"> <div className="col-span-12 sm:col-span-6">
<h4 className="text-xl font-semibold text-brand-base">Full Name</h4> <h4 className="text-lg font-semibold text-brand-base">Full Name</h4>
<p className="text-brand-secondary"> <p className="text-sm text-brand-secondary">
This name will be reflected on all the projects you are working on. This name will be reflected on all the projects you are working on.
</p> </p>
</div> </div>
<div className="col-span-12 sm:col-span-6 flex items-center gap-2"> <div className="col-span-12 flex items-center gap-2 sm:col-span-6">
<Input <Input
name="first_name" name="first_name"
id="first_name" id="first_name"
@ -224,8 +224,8 @@ const Profile: NextPage = () => {
</div> </div>
<div className="grid grid-cols-12 gap-4 sm:gap-16"> <div className="grid grid-cols-12 gap-4 sm:gap-16">
<div className="col-span-12 sm:col-span-6"> <div className="col-span-12 sm:col-span-6">
<h4 className="text-xl font-semibold text-brand-base">Email</h4> <h4 className="text-lg font-semibold text-brand-base">Email</h4>
<p className="text-brand-secondary">The email address that you are using.</p> <p className="text-sm text-brand-secondary">The email address that you are using.</p>
</div> </div>
<div className="col-span-12 sm:col-span-6"> <div className="col-span-12 sm:col-span-6">
<Input <Input
@ -241,8 +241,8 @@ const Profile: NextPage = () => {
</div> </div>
<div className="grid grid-cols-12 gap-4 sm:gap-16"> <div className="grid grid-cols-12 gap-4 sm:gap-16">
<div className="col-span-12 sm:col-span-6"> <div className="col-span-12 sm:col-span-6">
<h4 className="text-xl font-semibold text-brand-base">Role</h4> <h4 className="text-lg font-semibold text-brand-base">Role</h4>
<p className="text-brand-secondary">Add your role.</p> <p className="text-sm text-brand-secondary">Add your role.</p>
</div> </div>
<div className="col-span-12 sm:col-span-6"> <div className="col-span-12 sm:col-span-6">
<Controller <Controller
@ -270,8 +270,10 @@ const Profile: NextPage = () => {
</div> </div>
<div className="grid grid-cols-12 gap-4 sm:gap-16"> <div className="grid grid-cols-12 gap-4 sm:gap-16">
<div className="col-span-12 sm:col-span-6"> <div className="col-span-12 sm:col-span-6">
<h4 className="text-xl font-semibold text-brand-base">Theme</h4> <h4 className="text-lg font-semibold text-brand-base">Theme</h4>
<p className="text-brand-secondary">Select or customize your interface color scheme.</p> <p className="text-sm text-brand-secondary">
Select or customize your interface color scheme.
</p>
</div> </div>
<div className="col-span-12 sm:col-span-6"> <div className="col-span-12 sm:col-span-6">
<ThemeSwitch /> <ThemeSwitch />