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

style: project card ui improvement (#2466)

Browse Source 
* style: project card ui improvement

* style: project card ui improvement
This commit is contained in:
Anmol Singh Bhatia 2023-10-17 20:43:25 +05:30 committed by GitHub
parent 90776237f3
commit e9cc578cca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 18 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
web/components/project/card.tsx
View File

@ -5,13 +5,12 @@ import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider"; import { useMobxStore } from "lib/mobx/store-provider";
import { RootStore } from "store/root"; import { RootStore } from "store/root";
// icons // icons
import { Globe2, LinkIcon, Lock, Pencil, Star } from "lucide-react"; import { LinkIcon, Lock, Pencil, Star } from "lucide-react";
// hooks // hooks
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
// ui // ui
import { Button, Tooltip } from "@plane/ui"; import { Button, Tooltip } from "@plane/ui";
// helpers // helpers
import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
import { copyTextToClipboard } from "helpers/string.helper"; import { copyTextToClipboard } from "helpers/string.helper";
import { renderEmoji } from "helpers/emoji.helper"; import { renderEmoji } from "helpers/emoji.helper";
// types // types
@ -97,11 +96,11 @@ export const ProjectCard: React.FC<ProjectCardProps> = observer((props) => {
)} )}
{/* Card Information */} {/* Card Information */}
<div className="flex flex-col rounded bg-custom-background-100 shadow-custom-shadow-xs"> <div className="flex flex-col rounded bg-custom-background-100 border border-custom-border-200">
<Link href={`/${workspaceSlug as string}/projects/${project.id}/issues`}> <Link href={`/${workspaceSlug as string}/projects/${project.id}/issues`}>
<a> <a>
<div className="relative h-[118px] w-full rounded-t "> <div className="relative h-[118px] w-full rounded-t ">
<div className="absolute z-[1] inset-0 bg-gradient-to-t from-black/50 to-transparent" /> <div className="absolute z-[1] inset-0 bg-gradient-to-t from-black/60 to-transparent" />
<img <img
src={ src={
@ -124,24 +123,18 @@ export const ProjectCard: React.FC<ProjectCardProps> = observer((props) => {
</span> </span>
</div> </div>
<div className="flex flex-col justify-center h-9"> <div className="flex flex-col gap-0.5 justify-center h-9">
<h3 className="text-sm text-white font-semibold line-clamp-1">{project.name}</h3> <h3 className="text-white font-semibold line-clamp-1">{project.name}</h3>
<span className="flex items-center gap-1.5"> <span className="flex items-center gap-1.5">
<p className="text-xs text-white"> <p className="text-xs font-medium text-white">{project.identifier} </p>
Created on {renderShortDateWithYearFormat(project?.created_at)} {project.network === 0 && <Lock className="h-2.5 w-2.5 text-white " />}
</p>
{project.network === 0 ? (
<Lock className="h-3 w-3 text-white" />
) : (
<Globe2 className="h-3 w-3 text-white" />
)}
</span> </span>
</div> </div>
</div> </div>
<div className="flex items-center h-full gap-2"> <div className="flex items-center h-full gap-2">
<button <button
className="flex items-center justify-center h-6 w-6 rounded bg-white/30" className="flex items-center justify-center h-6 w-6 rounded bg-white/10"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
@ -151,7 +144,7 @@ export const ProjectCard: React.FC<ProjectCardProps> = observer((props) => {
<LinkIcon className="h-3 w-3 text-white" /> <LinkIcon className="h-3 w-3 text-white" />
</button> </button>
<button <button
className="flex items-center justify-center h-6 w-6 rounded bg-white/30" className="flex items-center justify-center h-6 w-6 rounded bg-white/10"
onClick={(e) => { onClick={(e) => {
if (project.is_favorite) { if (project.is_favorite) {
e.preventDefault(); e.preventDefault();
@ -165,21 +158,15 @@ export const ProjectCard: React.FC<ProjectCardProps> = observer((props) => {
}} }}
> >
<Star <Star
className={`h-3 w-3 ${project.is_favorite ? "fill-orange-400 text-transparent" : "text-white"} `} className={`h-3 w-3 ${project.is_favorite ? "fill-amber-400 text-transparent" : "text-white"} `}
/> />
</button> </button>
</div> </div>
</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>
<div className="h-[104px] w-full flex flex-col justify-between p-4 rounded-b"> <div className="h-[104px] w-full flex flex-col justify-between p-4 rounded-b">
<p className="text-xs text-custom-text-200 break-words line-clamp-2">{project.description}</p> <p className="text-sm text-custom-text-300 font-medium break-words line-clamp-2">{project.description}</p>
<div className="flex item-center justify-between"> <div className="flex item-center justify-between">
<Tooltip <Tooltip
tooltipHeading="Members" tooltipHeading="Members"
@ -188,9 +175,13 @@ export const ProjectCard: React.FC<ProjectCardProps> = observer((props) => {
} }
position="top" position="top"
> >
<div className="flex items-center cursor-pointer gap-2 text-custom-text-200"> {projectMembersIds.length > 0 ? (
<AssigneesList userIds={projectMembersIds} length={3} showLength={true} /> <div className="flex items-center cursor-pointer gap-2 text-custom-text-200">
</div> <AssigneesList userIds={projectMembersIds} length={3} showLength={true} />
</div>
) : (
<span className="text-sm italic text-custom-text-400">No Member Yet</span>
)}
</Tooltip> </Tooltip>
{(isOwner || isMember) && ( {(isOwner || isMember) && (
<Link href={`/${workspaceSlug}/projects/${project.id}/settings`}> <Link href={`/${workspaceSlug}/projects/${project.id}/settings`}>