style: project list and setting page ui improvement (#2464)

This commit is contained in:
Anmol Singh Bhatia 2023-10-17 17:25:32 +05:30 committed by GitHub
parent b0c1af2b25
commit 4b51d9ed6c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 6 deletions

View File

@ -125,7 +125,7 @@ export const ProjectCard: React.FC<ProjectCardProps> = observer((props) => {
</div>
<div className="flex flex-col justify-center h-9">
<h3 className="text-sm text-white font-medium line-clamp-1">{project.name}</h3>
<h3 className="text-sm text-white font-semibold line-clamp-1">{project.name}</h3>
<span className="flex items-center gap-1.5">
<p className="text-xs text-white">
Created on {renderShortDateWithYearFormat(project?.created_at)}
@ -170,6 +170,12 @@ export const ProjectCard: React.FC<ProjectCardProps> = observer((props) => {
</button>
</div>
</div>
<div className="absolute top-3 right-3">
<Button variant="primary" size="sm" className="text-[0.6rem] !py-0.5 rounded-full">
Joined
</Button>
</div>
</div>
<div className="h-[104px] w-full flex flex-col justify-between p-4 rounded-b">
@ -178,13 +184,11 @@ export const ProjectCard: React.FC<ProjectCardProps> = observer((props) => {
<Tooltip
tooltipHeading="Members"
tooltipContent={
project.members && project.members.length > 0
? project.members.map((member) => member?.member__display_name).join(", ")
: "No Assignee"
project.members && project.members.length > 0 ? `${project.members.length} Members` : "No Member"
}
position="top"
>
<div className="flex items-center cursor-pointer w-full gap-2 text-custom-text-200">
<div className="flex items-center cursor-pointer gap-2 text-custom-text-200">
<AssigneesList userIds={projectMembersIds} length={3} showLength={true} />
</div>
</Tooltip>

View File

@ -113,8 +113,10 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
return (
<form onSubmit={handleSubmit(onSubmit)}>
<div className="relative h-44 w-full mt-6">
<div className="absolute z-[1] inset-0 bg-gradient-to-t from-black/50 to-transparent" />
<img src={watch("cover_image")!} alt={watch("cover_image")!} className="h-44 w-full rounded-md object-cover" />
<div className="flex items-end justify-between gap-3 absolute bottom-4 w-full px-4">
<div className="flex items-end z-10 justify-between gap-3 absolute bottom-4 w-full px-4">
<div className="flex gap-3 flex-grow truncate">
<div className="flex items-center justify-center flex-shrink-0 bg-custom-background-90 h-[52px] w-[52px] rounded-lg">
<div className="h-7 w-7 grid place-items-center">