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: {
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: {
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: {
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: {
message: "set the due date to",
@ -91,7 +95,7 @@ const activityDetails: {
},
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: {
message: "updated the link",
@ -153,11 +157,11 @@ export const Feeds: React.FC<any> = ({ activities }) => (
) {
const { workspace_detail, project, issue } = activity;
value = (
<span className="text-gray-600">
<span className="text-brand-secondary">
created{" "}
<Link href={`/${workspace_detail.slug}/projects/${project}/issues/${issue}`}>
<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>
</Link>
</span>
@ -198,7 +202,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
if (activity.field === "comment") {
return (
<div key={activity.id}>
<div key={activity.id} className="mt-2">
<div className="relative flex items-start space-x-3">
<div className="relative px-1">
{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">
<ChatBubbleLeftEllipsisIcon
className="h-3.5 w-3.5 text-gray-400"
className="h-3.5 w-3.5 text-brand-secondary"
aria-hidden="true"
/>
</span>
@ -242,9 +246,8 @@ export const Feeds: React.FC<any> = ({ activities }) => (
: activity.old_value
}
editable={false}
onBlur={() => ({})}
noBorder
customClassName="text-xs bg-brand-surface-1"
customClassName="text-xs border border-brand-base bg-brand-base"
/>
</div>
</div>
@ -268,7 +271,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
<div>
<div className="relative px-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 ? (
activityDetails[activity.field as keyof typeof activityDetails]?.icon
) : 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<Props> = () => {
export const IssueActivitySection: React.FC = () => {
const router = useRouter();
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">
<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>
</div>
<div className="min-w-0 flex-1">
@ -110,10 +113,6 @@ export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentD
</div>
</form>
) : (
// <div
// className="mt-2 mb-6 text-sm text-gray-700"
// dangerouslySetInnerHTML={{ __html: comment.comment_html }}
// />
<RemirrorRichTextEditor
value={comment.comment_html}
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="grid grid-cols-12 gap-4 sm:gap-16">
<div className="col-span-12 sm:col-span-6">
<h4 className="text-xl font-semibold text-brand-base">Profile Picture</h4>
<p className="text-brand-secondary">
<h4 className="text-lg font-semibold text-brand-base">Profile Picture</h4>
<p className="text-sm text-brand-secondary">
Max file size is 5MB. Supported file types are .jpg and .png.
</p>
</div>
@ -156,7 +156,7 @@ const Profile: NextPage = () => {
<div className="flex items-center gap-4">
<button type="button" onClick={() => setIsImageUploadModalOpen(true)}>
{!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" />
</div>
) : (
@ -195,12 +195,12 @@ const Profile: NextPage = () => {
</div>
<div className="grid grid-cols-12 gap-4 sm:gap-16">
<div className="col-span-12 sm:col-span-6">
<h4 className="text-xl font-semibold text-brand-base">Full Name</h4>
<p className="text-brand-secondary">
<h4 className="text-lg font-semibold text-brand-base">Full Name</h4>
<p className="text-sm text-brand-secondary">
This name will be reflected on all the projects you are working on.
</p>
</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
name="first_name"
id="first_name"
@ -224,8 +224,8 @@ const Profile: NextPage = () => {
</div>
<div className="grid grid-cols-12 gap-4 sm:gap-16">
<div className="col-span-12 sm:col-span-6">
<h4 className="text-xl font-semibold text-brand-base">Email</h4>
<p className="text-brand-secondary">The email address that you are using.</p>
<h4 className="text-lg font-semibold text-brand-base">Email</h4>
<p className="text-sm text-brand-secondary">The email address that you are using.</p>
</div>
<div className="col-span-12 sm:col-span-6">
<Input
@ -241,8 +241,8 @@ const Profile: NextPage = () => {
</div>
<div className="grid grid-cols-12 gap-4 sm:gap-16">
<div className="col-span-12 sm:col-span-6">
<h4 className="text-xl font-semibold text-brand-base">Role</h4>
<p className="text-brand-secondary">Add your role.</p>
<h4 className="text-lg font-semibold text-brand-base">Role</h4>
<p className="text-sm text-brand-secondary">Add your role.</p>
</div>
<div className="col-span-12 sm:col-span-6">
<Controller
@ -270,8 +270,10 @@ const Profile: NextPage = () => {
</div>
<div className="grid grid-cols-12 gap-4 sm:gap-16">
<div className="col-span-12 sm:col-span-6">
<h4 className="text-xl font-semibold text-brand-base">Theme</h4>
<p className="text-brand-secondary">Select or customize your interface color scheme.</p>
<h4 className="text-lg font-semibold text-brand-base">Theme</h4>
<p className="text-sm text-brand-secondary">
Select or customize your interface color scheme.
</p>
</div>
<div className="col-span-12 sm:col-span-6">
<ThemeSwitch />