From 4b51d9ed6ca874cc27875a7fc5297af0967ed336 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Tue, 17 Oct 2023 17:25:32 +0530
Subject: [PATCH] style: project list and setting page ui improvement (#2464)

---
 web/components/project/card.tsx | 14 +++++++++-----
 web/components/project/form.tsx |  4 +++-
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/web/components/project/card.tsx b/web/components/project/card.tsx
index aa93dca3b..b7a6931ed 100644
--- a/web/components/project/card.tsx
+++ b/web/components/project/card.tsx
@@ -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>
diff --git a/web/components/project/form.tsx b/web/components/project/form.tsx
index bd3ed8452..8fbef4e9d 100644
--- a/web/components/project/form.tsx
+++ b/web/components/project/form.tsx
@@ -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">