From f3988ea98bef52df1f5091dc2fcdb192dfabb4fd Mon Sep 17 00:00:00 2001
From: CREDO23 <thierrybakera12@gmail.com>
Date: Thu, 12 Sep 2024 22:48:25 +0200
Subject: [PATCH 1/2] fix overlap on team member card| table view

---
 apps/web/components/ui/data-table.tsx         | 63 ++++++++++---------
 apps/web/components/ui/table.tsx              |  6 +-
 apps/web/lib/features/team-member-cell.tsx    | 16 ++---
 .../team/user-team-card/task-estimate.tsx     |  2 +-
 .../team/user-team-card/task-info.tsx         |  5 +-
 .../team/user-team-card/user-info.tsx         |  2 +-
 6 files changed, 45 insertions(+), 49 deletions(-)

diff --git a/apps/web/components/ui/data-table.tsx b/apps/web/components/ui/data-table.tsx
index 2baa8f34c..8a9ceaf8e 100644
--- a/apps/web/components/ui/data-table.tsx
+++ b/apps/web/components/ui/data-table.tsx
@@ -78,7 +78,7 @@ function DataTable<TData, TValue>({ columns, data, footerRows, isHeader }: DataT
 											style={{
 												textAlign: index === 0 ? 'left' : 'center'
 											}}
-											className="!w-40  text-base"
+											className="!w-40 text-base"
 											key={header.id}
 										>
 											<Tooltip label={isTooltip as string} className="" enabled={!!isTooltip}>
@@ -86,9 +86,9 @@ function DataTable<TData, TValue>({ columns, data, footerRows, isHeader }: DataT
 													{header.isPlaceholder
 														? null
 														: flexRender(
-															header.column.columnDef.header,
-															header.getContext()
-														)}
+																header.column.columnDef.header,
+																header.getContext()
+															)}
 												</div>
 											</Tooltip>
 										</TableHead>
@@ -98,32 +98,39 @@ function DataTable<TData, TValue>({ columns, data, footerRows, isHeader }: DataT
 						))}
 					</TableHeader>
 				)}
-				<div className="mt-8 "></div>
+				<div className="mt-8"></div>
 				<TableBody className="divide-y h-40 overflow-y-auto divide-gray-200 bg-light--theme-light dark:bg-dark--theme-light">
 					{table.getRowModel().rows?.length ? (
-						table.getRowModel().rows.map((row, i) => (
-							<TableRow
-								key={row.id}
-								data-state={row.getIsSelected() && 'selected'}
-								className={clsxm(
-									'my-4 hover:bg-[#00000008] dark:hover:bg-[#26272C]/40',
-									i == 1 && 'max-w-[615px]'
-								)}
-							>
-								{row.getVisibleCells().map((cell, index) => (
-									<TableCell
-										key={cell.id}
-										style={{
-											textAlign: index === 0 ? 'left' : 'center'
-										}}
-										// className="!w-36"
-										className="my-4 !w-fit xl:!w-fit border-r border-b border-[#00000008] border-[0.125rem] dark:border-[#26272C] "
-									>
-										{flexRender(cell.column.columnDef.cell, cell.getContext())}
-									</TableCell>
-								))}
-							</TableRow>
-						))
+						table.getRowModel().rows.map((row, i) => {
+							return (
+								<TableRow
+									key={row.id}
+									data-state={row.getIsSelected() && 'selected'}
+									className={clsxm(
+										'my-4 hover:bg-[#00000008] dark:hover:bg-[#26272C]/40',
+										i == 1 && 'max-w-[615px]'
+									)}
+								>
+									{row.getVisibleCells().map((cell, index) => {
+										return (
+											<TableCell
+												key={cell.id}
+												style={{
+													textAlign: index === 0 ? 'left' : 'center',
+													width: index === 4 ? '2rem' : '13rem'
+												}}
+												// className="!w-36"
+												className={clsxm(
+													'my-4 border-r border-b border-[#00000008] border-[0.125rem] dark:border-[#26272C]'
+												)}
+											>
+												{flexRender(cell.column.columnDef.cell, cell.getContext())}
+											</TableCell>
+										);
+									})}
+								</TableRow>
+							);
+						})
 					) : (
 						<TableRow>
 							<TableCell colSpan={columns.length} className="h-24 text-center">
diff --git a/apps/web/components/ui/table.tsx b/apps/web/components/ui/table.tsx
index 9f104cba0..fbf5986c2 100644
--- a/apps/web/components/ui/table.tsx
+++ b/apps/web/components/ui/table.tsx
@@ -57,11 +57,7 @@ TableHead.displayName = 'TableHead';
 
 const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
 	({ className, ...props }, ref) => (
-		<td
-			ref={ref}
-			className={clsxm('p-4 align-middle [&:has([role=checkbox])]:pr-0 !w-full', className)}
-			{...props}
-		/>
+		<td ref={ref} className={clsxm('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)} {...props} />
 	)
 );
 TableCell.displayName = 'TableCell';
diff --git a/apps/web/lib/features/team-member-cell.tsx b/apps/web/lib/features/team-member-cell.tsx
index 1476c38ec..5a6620985 100644
--- a/apps/web/lib/features/team-member-cell.tsx
+++ b/apps/web/lib/features/team-member-cell.tsx
@@ -24,8 +24,8 @@ export function TaskCell({ row }: { row: any }) {
 			edition={taskEdition}
 			memberInfo={memberInfo}
 			className={clsxm(
-				'flex-1 flex justify-center items-center  w-full px-2',
-				fullWidth ? 'max-w-[40vw]' : 'max-w-[30vw]'
+				'flex-1 flex justify-center items-center px-2',
+				fullWidth ? 'max-w-[40rem]' : 'max-w-[30rem]'
 			)}
 			publicTeam={publicTeam}
 		/>
@@ -38,13 +38,12 @@ export function UserInfoCell({ cell }: { cell: any }) {
 	const publicTeam = get(cell, 'column.columnDef.meta.publicTeam', false);
 	const memberInfo = useTeamMemberCard(member);
 
-	return <UserInfo memberInfo={memberInfo} className="" publicTeam={publicTeam} />;
+	return <UserInfo memberInfo={memberInfo} className="w-fit" publicTeam={publicTeam} />;
 }
 
 export function WorkedOnTaskCell({ row }: { row: any }) {
 	const member = row.original as OT_Member;
 	const memberInfo = useTeamMemberCard(member);
-	const fullWidth = useRecoilValue(fullWidthState);
 
 	return (
 		<TaskTimes
@@ -52,10 +51,7 @@ export function WorkedOnTaskCell({ row }: { row: any }) {
 			memberInfo={memberInfo}
 			task={memberInfo.memberTask}
 			isAuthUser={memberInfo.isAuthUser}
-			className={clsxm(
-				'flex flex-col justify-center items-center mx-auto',
-				fullWidth ? '2xl:w-[7rem] 3xl:w-[11rem]' : '2xl:w-[7rem]  3xl:w-[10rem]'
-			)}
+			className={clsxm('flex flex-col justify-center items-center mx-auto')}
 		/>
 	);
 }
@@ -70,9 +66,7 @@ export function TaskEstimateInfoCell({ row }: { row: any }) {
 			memberInfo={memberInfo}
 			edition={taskEdition}
 			activeAuthTask={true}
-			className={clsxm(
-				'flex flex-col justify-center items-center 2xl:w-[7rem]  3xl:w-[10rem]'
-			)}
+			className={clsxm('flex flex-col justify-center items-center')}
 		/>
 	);
 }
diff --git a/apps/web/lib/features/team/user-team-card/task-estimate.tsx b/apps/web/lib/features/team/user-team-card/task-estimate.tsx
index 511bdf2c2..5dbc9b695 100644
--- a/apps/web/lib/features/team/user-team-card/task-estimate.tsx
+++ b/apps/web/lib/features/team/user-team-card/task-estimate.tsx
@@ -34,7 +34,7 @@ export function TaskEstimateInfo({ className, activeAuthTask, showTime = true, r
 
 	return (
 		<div className={className}>
-			<div className="flex items-center flex-col gap-y-[2rem] justify-center">
+			<div className="flex items-center flex-col gap-y-[2rem] min-w-[3.3rem] justify-center">
 				{showTime && (
 					<div className="flex space-x-2 items-center font-normal lg:text-sm text-xs">
 						<span className={clsxm('text-gray-500', hasEditMode && ['hidden'])}>
diff --git a/apps/web/lib/features/team/user-team-card/task-info.tsx b/apps/web/lib/features/team/user-team-card/task-info.tsx
index 36b291c9d..f2cb9187b 100644
--- a/apps/web/lib/features/team/user-team-card/task-info.tsx
+++ b/apps/web/lib/features/team/user-team-card/task-info.tsx
@@ -19,9 +19,8 @@ export function TaskInfo({ className, memberInfo, edition, publicTeam, tab, dayP
 
 			<div
 				className={clsxm(
-					'h-full w-full flex flex-col items-start justify-start gap-[1.0620rem] max-h-full overflow-hidden',
-					className,
-					'!min-w-[461px] !max-w-[461px]'
+					'h-full min-w-[20rem] w-fit flex flex-col items-start justify-start gap-[1.0620rem] max-h-full overflow-hidden',
+					className
 				)}
 			>
 				{/* task */}
diff --git a/apps/web/lib/features/team/user-team-card/user-info.tsx b/apps/web/lib/features/team/user-team-card/user-info.tsx
index 3860a3e4b..09bb4fb92 100644
--- a/apps/web/lib/features/team/user-team-card/user-info.tsx
+++ b/apps/web/lib/features/team/user-team-card/user-info.tsx
@@ -33,7 +33,7 @@ export function UserInfo({ className, memberInfo, publicTeam = false }: Props) {
 	return (
 		<Link
 			href={publicTeam ? '#' : `/profile/${memberInfo.memberUser?.id}?name=${fullname}`}
-			className={clsxm('flex items-center lg:space-x-4 space-x-2', className)}
+			className={clsxm('flex items-center lg:space-x-4 space-x-2 w-fit', className)}
 		>
 			<div
 				className={clsxm(

From 793bd0cbcc77de08b13bdda3b90c15eb1cb45fe1 Mon Sep 17 00:00:00 2001
From: Landry Bitege <141019256+land-bit@users.noreply.github.com>
Date: Tue, 17 Sep 2024 21:56:49 +0200
Subject: [PATCH 2/2] feat: adapt sub-menus of 'Team' & 'Personal' menus UI
 (#3023)

---
 apps/web/lib/components/sidebar-accordian.tsx |  4 +--
 .../lib/settings/left-side-setting-menu.tsx   | 26 ++++++-------------
 2 files changed, 10 insertions(+), 20 deletions(-)

diff --git a/apps/web/lib/components/sidebar-accordian.tsx b/apps/web/lib/components/sidebar-accordian.tsx
index d71f0f60f..cae994279 100644
--- a/apps/web/lib/components/sidebar-accordian.tsx
+++ b/apps/web/lib/components/sidebar-accordian.tsx
@@ -19,7 +19,7 @@ export const SidebarAccordian = ({ children, title, className, wrapperClassName,
 					{({ open }) => (
 						<>
 							<Disclosure.Button
-								className={`flex w-full justify-between rounded-lg px-4 py-2 text-left font-medium items-center ${wrapperClassName} pt-[0.15rem] pb-0`}
+								className={`flex w-full justify-between rounded-lg px-4 py-2 text-left font-medium items-center ${wrapperClassName} pt-[0.15rem] pb-0 ${open ? 'text-[#3826a6] border-l-solid border-l-primary bg-[#E9E5F9] dark:bg-[#6755C9]' : 'border-l-transparent'}`}
 							>
 								<Text
 									className={`text-base dark:text-white  text-center sm:text-left flex items-center gap-2 ${textClassName}`}
@@ -34,7 +34,7 @@ export const SidebarAccordian = ({ children, title, className, wrapperClassName,
 								/>
 							</Disclosure.Button>
 							{children && (
-								<Disclosure.Panel className="px-4 pt-4 pb-2 text-sm text-gray-500 ">
+								<Disclosure.Panel className="px-4 pt-4 pb-2 text-sm text-gray-500 dark:bg-dark--theme shadow-[0px 14px 34px rgba(0, 0, 0, 0.05)] bg-light--theme-light dark:bg-dark--theme-light ">
 									{children}
 								</Disclosure.Panel>
 							)}
diff --git a/apps/web/lib/settings/left-side-setting-menu.tsx b/apps/web/lib/settings/left-side-setting-menu.tsx
index d145a0182..cf6b3d1d2 100644
--- a/apps/web/lib/settings/left-side-setting-menu.tsx
+++ b/apps/web/lib/settings/left-side-setting-menu.tsx
@@ -99,14 +99,9 @@ export const LeftSideSettingMenu = ({ className }: { className?: string }) => {
 								: 'border-l-transparent font-normal dark:text-[#7E7991]'
 						}
 						`}
-						wrapperClassName={`w-full border-t-0 border-r-0 border-b-0 rounded-none
-                font-normal text-[#7e7991] justify-start  pt-[24px] pb-[24px] pl-[24px]
-				border-l-[5px] ${
-					activePage === '/settings/personal'
-						? 'text-[#3826a6] border-l-solid border-l-primary bg-[#E9E5F9] dark:bg-[#6755C9]'
-						: 'border-l-transparent'
-				}
-                `}
+						wrapperClassName={
+							'w-full border-t-0 border-r-0 border-b-0 rounded-none font-normal text-[#7e7991] justify-start  pt-[24px] pb-[24px] pl-[24px]	border-l-[5px]'
+						}
 					>
 						<div className="flex flex-col">
 							{PersonalAccordianData.map((ad, index) => {
@@ -117,7 +112,7 @@ export const LeftSideSettingMenu = ({ className }: { className?: string }) => {
 										key={index}
 									>
 										<Text
-											className={`text-[${ad.color}] text-lg font-normal flex items-center p-4 pr-1 pl-5`}
+											className={`text-[${ad.color}] text-lg font-normal flex items-center p-4 pr-1 pl-12`}
 											key={index}
 											style={{ color: ad.color }}
 										>
@@ -146,14 +141,9 @@ export const LeftSideSettingMenu = ({ className }: { className?: string }) => {
 								? ' text-[#3826a6] text-primary font-semibold'
 								: ' border-l-transparent font-normal dark:text-[#7E7991]'
 						}`}
-						wrapperClassName={`w-full border-t-0 border-r-0 border-b-0 rounded-none
-						font-normal text-[#7e7991] justify-start text-sm pt-[24px] pb-[24px] pl-[24px]
-	border-l-[5px] ${
-		activePage === '/settings/team'
-			? ' text-[#3826a6] border-l-solid border-l-primary bg-primary/5 text-primary dark:bg-[#6755C9]'
-			: ' border-l-transparent'
-	}
-						`}
+						wrapperClassName={
+							'w-full border-t-0 border-r-0 border-b-0 rounded-none	font-normal text-[#7e7991] justify-start text-sm pt-[24px] pb-[24px] pl-[24px] border-l-[5px]'
+						}
 					>
 						<div className="flex flex-col">
 							{TeamAccordianData.filter((ad) => (!isTeamManager && !ad.managerOnly) || isTeamManager).map(
@@ -165,7 +155,7 @@ export const LeftSideSettingMenu = ({ className }: { className?: string }) => {
 											key={index}
 										>
 											<Text
-												className={`text-[${ad.color}] text-lg font-normal flex items-center p-4 pr-1 pl-5 `}
+												className={`text-[${ad.color}] text-lg font-normal flex items-center p-4 pr-1 pl-12 `}
 												key={index}
 												style={{
 													color: ad.color,