Skip to content

Commit

Permalink
[Feat]: Improve Task title block UI (#3559)
Browse files Browse the repository at this point in the history 
* feat: improve task title block UI and styling

- Enhance task number badge with consistent height and rounded corners
- Adjust parent task badges height and alignment
- Fix task input dependency array
- Maintain dark mode compatibility
- Improve overall spacing and alignment in title block

* fix: adjust task title block styling and layout

* fix

* fix: improve task title block spacing and alignment

- Fix height consistency of all elements to h-7
- Adjust spacing between Change Parent and Like button
- Improve gaps between parent task badges
- Standardize text sizes and padding
- Refine button styles for better visual harmony
  • Loading branch information
@Innocent-Akim
Innocent-Akim authored Feb 2, 2025
1 parent e57da13 commit aaacb90
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 50 deletions.
85 changes: 42 additions & 43 deletions apps/web/components/pages/task/title-block/task-title-block.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ const TaskTitleBlock = () => {
/>

{edit ? (
<div className="flex flex-col justify-start gap-1 transition-all">
<div className="flex flex-col gap-1 justify-start transition-all">
<button
ref={saveButton}
onClick={() => saveTitle(title)}
Expand All @@ -141,7 +141,7 @@ const TaskTitleBlock = () => {
</button>
</div>
) : (
<div className="flex flex-col items-center justify-start gap-2">
<div className="flex flex-col gap-2 justify-start items-center">
<button ref={editButton} onClick={() => setEdit(true)}>
<Image
src="/assets/svg/edit-header-pencil.svg"
Expand Down Expand Up @@ -173,73 +173,71 @@ const TaskTitleBlock = () => {
)}

<div className="flex flex-col items-start">
<div className="flex flex-row items-center justify-start h-5 gap-2">
<div className="flex flex-row gap-[0.3125rem]">
<div className="flex flex-row gap-3 justify-start items-center">
<div className="flex flex-row gap-2">
{/* Task number */}
<div className="bg-[#D6D6D6] rounded-[0.1875rem] text-center min-w-48 flex justify-center items-center h-5 py-[0.0625rem] px-2.5 3xl:h-6">
<span className="text-[#293241] font-medium text-xs">#{task?.taskNumber}</span>
<div className="bg-gray-200 dark:bg-slate-600 rounded text-center flex justify-center items-center h-7 py-1 px-2.5">
<span className="text-xs font-medium text-gray-700 dark:text-gray-200">#{task?.taskNumber}</span>
</div>

{/* Type of Issue */}
<ActiveTaskIssuesDropdown
key={task?.id}
task={task}
showIssueLabels={true}
sidebarUI={true}
forParentChildRelationship={true}
taskStatusClassName="h-5 3xl:h-6 text-[0.5rem] 3xl:text-xs rounded-[0.1875rem] border-none"
taskStatusClassName="h-7 text-xs rounded-full border-none bg-red-100 text-red-700 dark:bg-dark--theme-light dark:text-red-400"
className="h-7"
/>
</div>
{task?.issueType !== 'Epic' && task && <div className="w-[0.0625rem] h-5 bg-[#DBDBDB]"></div>}
<div className="w-[1px] h-7 bg-gray-200 dark:bg-gray-600"></div>

<div className="flex flex-row gap-1">
{/* Creator Name */}
{/* {task?.creator && (
<div className="bg-[#E4ECF5] rounded-[0.1875rem] text-center min-w-48 h-5 flex justify-center items-center py-[0.0625rem] px-2.5">
<span className="text-[#538ed2] font-medium text-[0.5rem]">
{task.creator?.name}
</span>
</div>
)} */}
{/* Parent Issue/Task Name */}
{task?.issueType !== 'Epic' && task && (
<div className="flex gap-3 items-center">
{/* Current Issue Type is Task|Bug and Parent Issue is Not an Epic */}
{(!task?.issueType || task?.issueType === 'Task' || task?.issueType === 'Bug') &&
task?.rootEpic &&
task?.parentId !== task?.rootEpic.id && (
<ParentTaskBadge
task={{
...task,
parentId: task?.rootEpic.id,
parent: task?.rootEpic
}}
/>
)}

{/* Current Issue Type is Task|Bug and Parent Issue is Not an Epic */}
{(!task?.issueType || task?.issueType === 'Task' || task?.issueType === 'Bug') &&
task?.rootEpic &&
task?.parentId !== task?.rootEpic.id && (
<ParentTaskBadge
task={{
...task,
parentId: task?.rootEpic.id,
parent: task?.rootEpic
}}
/>
)}
<ParentTaskBadge task={task} />
<ParentTaskInput task={task} />
</div>
)}

<ParentTaskBadge task={task} />
<ParentTaskInput task={task} />
</div>
{/* Favorites */}
{task ? (
{task && (
<button
className="flex items-center gap-1 cursor-pointer w-fit h-fit"
className={clsxm(
"flex justify-center items-center w-7 h-7 rounded-full transition-colors ml-1",
isFavoriteTask
? "text-red-600 bg-red-50 hover:bg-red-100"
: "text-gray-400 hover:text-gray-600 hover:bg-gray-100"
)}
onClick={() => toggleFavorite(task)}
>
{isFavoriteTask ? (
<svg
className="w-5 h-5"
className="w-4 h-4"
fill="currentColor"
width={20}
height={20}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M14 20.408c-.492.308-.903.546-1.192.709-.153.086-.308.17-.463.252h-.002a.75.75 0 01-.686 0 16.709 16.709 0 01-.465-.252 31.147 31.147 0 01-4.803-3.34C3.8 15.572 1 12.331 1 8.513 1 5.052 3.829 2.5 6.736 2.5 9.03 2.5 10.881 3.726 12 5.605 13.12 3.726 14.97 2.5 17.264 2.5 20.17 2.5 23 5.052 23 8.514c0 3.818-2.801 7.06-5.389 9.262A31.146 31.146 0 0114 20.408z" />
</svg>
) : (
<Heart className="w-5 h-5" />
<Heart className="w-4 h-4" />
)}
</button>
) : null}
)}
</div>

<CopyTooltip text={task?.taskNumber || ''}>
Expand All @@ -260,14 +258,15 @@ const ParentTaskBadge = ({ task }: { task: ITeamTask | null }) => {
<HoverCard>
<HoverCardTrigger asChild>
<Link

href={`/task/${task.parentId}`}
target="_blank"
className={clsxm(
task.parent.issueType === 'Epic' && 'bg-[#8154BA]',
task.parent.issueType === 'Story' && 'bg-[#54BA951A]',
task.parent.issueType === 'Bug' && 'bg-[#C24A4A1A]',
(task.parent.issueType === 'Task' || !task.parent.issueType) && 'bg-[#5483ba]',
'rounded-[0.1875rem] text-center h-5 3xl:h-6 flex justify-center items-center py-[0.25rem] px-2.5'
'rounded-[0.1875rem] text-center !h-7 3xl:h-6 flex justify-center items-center py-[0.25rem] px-2.5'
)}
>
<span
Expand Down Expand Up @@ -313,10 +312,10 @@ const ParentTaskInput = ({ task }: { task: ITeamTask | null }) => {
const t = useTranslations();

return task && task.issueType !== 'Epic' ? (
<div className="box-border flex items-center justify-center h-5 text-center bg-transparent rounded cursor-pointer min-w-48 3xl:h-6">
<div className="box-border flex justify-center items-center h-7 text-center bg-transparent rounded cursor-pointer">
<Button
variant="outline-danger"
className="text-[#f07258] font-medium text-[0.5rem] 3xl:text-xs py-[0.25rem] px-2.5 min-w-[4.75rem] outline-none h-5 3xl:h-6 rounded-[0.1875rem]"
className="text-[#f07258] font-medium text-xs py-1 px-2.5 min-w-[4.75rem] outline-none h-7 rounded"
onClick={modal.openModal}
>
{task.parentId ? t('common.CHANGE_PARENT') : `+ ${t('common.ADD_PARENT')}`}
Expand Down
6 changes: 3 additions & 3 deletions apps/web/lib/features/task/task-input.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -265,7 +265,7 @@ export function TaskInput(props: Props) {
}

return updatedTaskList;
}, [props.task, datas.filteredTasks]);
}, [props.forParentChildRelationship, props.task?.issueType, props.task?.children, datas.filteredTasks]);

useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
Expand Down Expand Up @@ -762,8 +762,8 @@ function AssigneesSelect(props: ITeamMemberSelectProps): JSX.Element {
>
<Combobox multiple={true}>
<div className="relative my-auto h-full">
<div className="overflow-hidden w-full h-full text-left rounded-lg cursor-default focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 sm:text-sm">
<Combobox.Button className="flex justify-between items-center w-40 h-full hover:transition-all">
<div className="overflow-hidden w-full h-full text-left rounded-lg cursor-default focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 sm:text-sm">
<Combobox.Button className="flex justify-between items-center w-40 h-full hover:transition-all">
<div
className={cn(
'flex gap-1 items-center !text-default dark:!text-white',
Expand Down
8 changes: 4 additions & 4 deletions apps/web/lib/features/task/task-issue.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,7 @@ export function TaskIssueStatus({
{...taskIssues[task?.issueType || 'Task']}
showIssueLabels={showIssueLabels}
issueType="issue"
className={clsxm('rounded-md px-2 text-white', className)}
className={clsxm('px-2 text-white rounded-md', className)}
/>
);
}
Expand All @@ -188,12 +188,12 @@ export function CreateTaskIssueModal({ open, closeModal }: { open: boolean; clos
<Modal isOpen={open} closeModal={closeModal}>
<form className="w-[98%] md:w-[430px]" autoComplete="off" onSubmit={handleSubmit}>
<Card className="w-full" shadow="custom">
<div className="flex flex-col items-center justify-between">
<div className="flex flex-col justify-between items-center">
<Text.Heading as="h3" className="text-center">
{t('common.CREATE_ISSUE')}
</Text.Heading>

<div className="w-full mt-5">
<div className="mt-5 w-full">
<InputField
name="name"
autoCustomFocus
Expand All @@ -202,7 +202,7 @@ export function CreateTaskIssueModal({ open, closeModal }: { open: boolean; clos
/>
</div>

<div className="flex items-center justify-between w-full mt-3">
<div className="flex justify-between items-center mt-3 w-full">
<BackButton onClick={closeModal} />
<Button type="submit">{t('common.CREATE')}</Button>
</div>
Expand Down

0 comments on commit aaacb90

Please sign in to comment.