Merge pull request #2064 from ever-co/fix/cards

Fix: cards columns style and width and breadcumbs links
ever-co · Jan 5, 2024 · 3f7520a · 3f7520a
2 parents cf9af23 + 8f3a7c3
commit 3f7520a
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 18 deletions.
diff --git a/apps/web/app/[locale]/profile/[memberId]/page.tsx b/apps/web/app/[locale]/profile/[memberId]/page.tsx
@@ -19,15 +19,18 @@ import stc from 'string-to-color';
 import { useRecoilValue } from 'recoil';
 import { fullWidthState } from '@app/stores/fullWidth';
 
-const Profile = () => {
+const Profile = ({ params }: { params: { memberId: string } }) => {
 	const profile = useUserProfilePage();
 	const { isTrackingEnabled, activeTeam } = useOrganizationTeams();
 	const fullWidth = useRecoilValue(fullWidthState);
 
 	const hook = useTaskFilter(profile);
 
 	const t = useTranslations();
-	const breadcrumb = [{ title: activeTeam?.name || '', href: '/' }, ...JSON.parse(t('pages.profile.BREADCRUMB'))];
+	const breadcrumb = [
+		{ title: activeTeam?.name || '', href: '/' },
+		{ title: JSON.parse(t('pages.profile.BREADCRUMB')) || '', href: `/profile/${params.memberId}` }
+	];
 
 	const profileIsAuthUser = useMemo(() => profile.isAuthUser, [profile.isAuthUser]);
 	const hookFilterType = useMemo(() => hook.filterType, [hook.filterType]);

diff --git a/apps/web/app/[locale]/task/[id]/page.tsx b/apps/web/app/[locale]/task/[id]/page.tsx
@@ -29,7 +29,10 @@ const TaskDetails = () => {
 
 	const id = params?.id;
 
-	const breadcrumb = [{ title: activeTeam?.name || '', href: '/' }, ...JSON.parse(t('pages.taskDetails.BREADCRUMB'))];
+	const breadcrumb = [
+		{ title: activeTeam?.name || '', href: '/' },
+		{ title: JSON.parse(t('pages.taskDetails.BREADCRUMB')), href: `/task/${id}` }
+	];
 
 	useEffect(() => {
 		if (

diff --git a/apps/web/lib/features/task/task-card.tsx b/apps/web/lib/features/task/task-card.tsx
@@ -108,7 +108,7 @@ export function TaskCard(props: Props) {
 			<Card
 				shadow="bigger"
 				className={clsxm(
-					'lg:flex items-center justify-between py-3 px-4 md:px-4 hidden min-h-[7rem] dark:bg-[#101217] border-[0.125rem] dark:border-[#FFFFFF0D] relative',
+					'lg:flex items-center justify-between py-3 px-4 md:px-4 hidden min-h-[7rem] dark:bg-[#1E2025] border-[0.125rem] dark:border-[#FFFFFF0D] relative',
 					active && ['border-primary-light dark:bg-[#1E2025]'],
 					'gap-5',
 					className
@@ -118,11 +118,11 @@ export function TaskCard(props: Props) {
 					<DraggerIcon className="fill-[#CCCCCC] dark:fill-[#4F5662]" />
 				</div>
 
-				<div className="w-[35%] flex flex-row justify-between">
+				<div className="flex-1 flex flex-row justify-between">
 					{/* Task information */}
 					<TaskInfo
 						task={task}
-						className="px-4 2xl:w-96 md:w-80"
+						className="px-4 w-full"
 						taskBadgeClassName={clsxm(taskBadgeClassName)}
 						taskTitleClassName={clsxm(taskTitleClassName)}
 					/>
@@ -145,7 +145,7 @@ export function TaskCard(props: Props) {
 				<VerticalSeparator />
 
 				{/* TaskTimes */}
-				<div className="flex items-center justify-between gap-[1.125rem] w-[25%] px-5">
+				<div className="flex items-center justify-between gap-[1.125rem]  px-5 w-1/5 lg:px-3 2xl:w-52 3xl:w-72">
 					<TaskTimes
 						activeAuthTask={activeAuthTask}
 						task={task}
@@ -172,13 +172,15 @@ export function TaskCard(props: Props) {
 				</div>
 				<VerticalSeparator />
 
-				<div className="flex flex-row justify-between items-center w-[25%]">
+				<div className="flex flex-row justify-between items-center w-1/5 lg:px-3 2xl:w-52 3xl:w-80">
 					{/* Active Task Status Dropdown (It's a dropdown that allows the user to change the status of the task.)*/}
-					<ActiveTaskStatusDropdown
-						task={task}
-						onChangeLoading={(load) => setLoading(load)}
-						className="min-w-[10.625rem]"
-					/>
+					<div className="w-full flex items-center justify-center">
+						<ActiveTaskStatusDropdown
+							task={task}
+							onChangeLoading={(load) => setLoading(load)}
+							className="min-w-[10.625rem]"
+						/>
+					</div>
 
 					{/* TaskCardMenu */}
 					{task && memberInfo && currentMember && (
@@ -203,10 +205,10 @@ export function TaskCard(props: Props) {
 					)} */}
 				</div>
 				<div className="flex flex-wrap items-start justify-between pb-4 border-b">
-					<TaskInfo task={task} className="px-4 mb-4 w-80" />{' '}
+					<TaskInfo task={task} className="px-4 mb-4 w-full" />{' '}
 					{viewType === 'default' && (
 						<>
-							<div className="flex items-end space-x-2">
+							<div className="flex items-end mx-auto py-4 space-x-2">
 								<TaskEstimateInfo
 									memberInfo={memberInfo}
 									edition={taskEdition}
@@ -220,7 +222,7 @@ export function TaskCard(props: Props) {
 
 				{viewType === 'unassign' && (
 					<>
-						<UsersTaskAssigned className="px-3 w-52" task={task} />
+						<UsersTaskAssigned className="px-3 mx-auto w-full py-4" task={task} />
 					</>
 				)}
 				<div className="flex justify-between items-center mt-4 mb-4 space-x-5">

diff --git a/apps/web/lib/features/team/user-team-card/index.tsx b/apps/web/lib/features/team/user-team-card/index.tsx
@@ -147,7 +147,7 @@ export function UserTeamCard({
 				<TaskInfo
 					edition={taskEdition}
 					memberInfo={memberInfo}
-					className="2xl:w-80 3xl:w-[32rem] w-1/5 lg:px-4 px-2 overflow-y-hidden"
+					className="flex-1 lg:px-4 px-2 overflow-y-hidden"
 					publicTeam={publicTeam}
 				/>
 				<VerticalSeparator className="ml-2" />
@@ -174,7 +174,7 @@ export function UserTeamCard({
 				{/* TodayWorkedTime */}
 				<TodayWorkedTime
 					isAuthUser={memberInfo.isAuthUser}
-					className="flex-1 lg:text-base text-xs 3xl:w-[12rem]"
+					className="w-1/5 lg:px-3 2xl:w-52 3xl:w-64"
 					memberInfo={memberInfo}
 				/>