From d34f44008ab338d529ebd3e5472dfdfd82d6a555 Mon Sep 17 00:00:00 2001
From: Badal Khatri <badal.khatri0924@gmail.com>
Date: Thu, 28 Dec 2023 09:35:32 +0530
Subject: [PATCH 1/5] Minor Bug Fixes

---
 .../app/[locale]/settings/personal/page.tsx   |  2 -
 .../blocks/task-estimations-info.tsx          |  1 +
 apps/web/lib/components/dropdown.tsx          | 28 +++++-----
 .../user-team-block-header.tsx                | 54 +++++++++----------
 4 files changed, 43 insertions(+), 42 deletions(-)

diff --git a/apps/web/app/[locale]/settings/personal/page.tsx b/apps/web/app/[locale]/settings/personal/page.tsx
index 49f506a81..c30ecf250 100644
--- a/apps/web/app/[locale]/settings/personal/page.tsx
+++ b/apps/web/app/[locale]/settings/personal/page.tsx
@@ -17,8 +17,6 @@ const Personal = () => {
 	const t = useTranslations();
 	const [user] = useRecoilState(userState);
 	const breadcrumb = [...JSON.parse(t('pages.settings.BREADCRUMB'))];
-	console.log(JSON.parse(t('pages.settings.BREADCRUMB')));
-
 
 	return (
 		<>
diff --git a/apps/web/components/pages/task/details-section/blocks/task-estimations-info.tsx b/apps/web/components/pages/task/details-section/blocks/task-estimations-info.tsx
index aef2d64cb..7c7be7f80 100644
--- a/apps/web/components/pages/task/details-section/blocks/task-estimations-info.tsx
+++ b/apps/web/components/pages/task/details-section/blocks/task-estimations-info.tsx
@@ -49,6 +49,7 @@ const TaskEstimationsInfo = () => {
 													key={member.id}
 													profilePicSrc={member.user?.imageUrl}
 													names={member.fullName}
+													userId={member.userId}
 													//@ts-ignore
 													time={
 														<TaskEstimate
diff --git a/apps/web/lib/components/dropdown.tsx b/apps/web/lib/components/dropdown.tsx
index b048afcce..5d8fe915d 100644
--- a/apps/web/lib/components/dropdown.tsx
+++ b/apps/web/lib/components/dropdown.tsx
@@ -113,18 +113,22 @@ export function Dropdown<T extends DropdownItem>({
 									/>
 								</div>
 							)}
-							<section className={"max-h-[9.125rem] overflow-y-auto"}>
-							{items.map((Item, index) => (
-								<Listbox.Option
-									key={Item.key ? Item.key : index}
-									value={Item}
-									disabled={!!Item.disabled}
-								>
-									{({ active, selected }) => {
-										return Item.Label ? <Item.Label active={active} selected={selected} /> : <></>;
-									}}
-								</Listbox.Option>
-							))}
+							<section className={'max-h-[80vh] overflow-y-auto'}>
+								{items.map((Item, index) => (
+									<Listbox.Option
+										key={Item.key ? Item.key : index}
+										value={Item}
+										disabled={!!Item.disabled}
+									>
+										{({ active, selected }) => {
+											return Item.Label ? (
+												<Item.Label active={active} selected={selected} />
+											) : (
+												<></>
+											);
+										}}
+									</Listbox.Option>
+								))}
 							</section>
 
 							{/* Additional content */}
diff --git a/apps/web/lib/features/team/user-team-block/user-team-block-header.tsx b/apps/web/lib/features/team/user-team-block/user-team-block-header.tsx
index e8d944ca6..a81e0b8d2 100644
--- a/apps/web/lib/features/team/user-team-block/user-team-block-header.tsx
+++ b/apps/web/lib/features/team/user-team-block/user-team-block-header.tsx
@@ -53,27 +53,26 @@ export function UserTeamBlockHeader() {
 	return (
 		<>
 			<div className="hidden sm:flex row font-normal pt-4 justify-between hidde dark:text-[#7B8089]">
-				<div className="flex items-center w-3/4">
+				<div className="flex items-center w-5/6">
 					<div
 						className={clsxm(
-							'w-1/6 text-center flex items-center justify-center gap-2 py-4 cursor-pointer',
-							activeFilter == 'all' &&
-								'border-b-4 border-primary dark:border-white  text-primary dark:text-white'
+							'w-1/6 text-center flex items-center justify-center gap-2 py-4 cursor-pointer border-b-4 border-transparent',
+							activeFilter === 'all' && 'border-primary dark:border-white text-primary dark:text-white'
 						)}
 						onClick={() => setActiveFilter('all')}
 					>
 						<StopCircleIcon
 							className={clsxm(
 								'w-8 h-8 p-1 !text-gray-300 !fill-gray-400 dark:!text-white',
-								activeFilter == 'all' &&
-									'!text-primary !fill-primary  dark:!text-white dark:!fill-white'
+								activeFilter === 'all' &&
+									'!text-primary !fill-primary dark:!text-white dark:!fill-white'
 							)}
 						/>
 						<p>All members </p>
 						<span
 							className={clsxm(
 								' bg-gray-500/40 p-1 px-2 text-xs rounded-md',
-								activeFilter == 'all' && 'bg-primary dark:bg-[#47484D] text-white'
+								activeFilter === 'all' && 'bg-primary dark:bg-[#47484D] text-white'
 							)}
 						>
 							{members?.length}
@@ -81,23 +80,23 @@ export function UserTeamBlockHeader() {
 					</div>
 					<div
 						className={clsxm(
-							'w-1/6 text-center flex items-center justify-center gap-2 py-4 cursor-pointer',
-							activeFilter == 'idle' &&
-								'border-b-4 border-primary dark:border-white  text-primary dark:text-white'
+							'w-1/6 text-center flex items-center justify-center gap-2 py-4 cursor-pointer border-b-4 border-transparent',
+							activeFilter === 'idle' && 'border-primary dark:border-white  text-primary dark:text-white'
 						)}
 						onClick={() => setActiveFilter('idle')}
 					>
 						<NotWorkingIcon
 							className={clsxm(
 								'w-8 h-8 p-1 !text-gray-300  dark:!text-white',
-								activeFilter == 'idle' && '!text-primary !fill-white  dark:!text-white dark:!fill-white'
+								activeFilter === 'idle' &&
+									'!text-primary !fill-white  dark:!text-white dark:!fill-white'
 							)}
 						/>
 						<p>Not working </p>
 						<span
 							className={clsxm(
 								' bg-gray-500/40 p-1 px-2 text-xs rounded-md',
-								activeFilter == 'idle' && 'bg-primary dark:bg-[#47484D] text-white'
+								activeFilter === 'idle' && 'bg-primary dark:bg-[#47484D] text-white'
 							)}
 						>
 							{membersStatusNumber.idle}
@@ -105,16 +104,16 @@ export function UserTeamBlockHeader() {
 					</div>
 					<div
 						className={clsxm(
-							'w-1/6 text-center flex items-center justify-center gap-2 py-4 cursor-pointer',
-							activeFilter == 'running' &&
-								'border-b-4 border-primary dark:border-white  text-primary dark:text-white'
+							'w-1/6 text-center flex items-center justify-center gap-2 py-4 cursor-pointer border-b-4 border-transparent',
+							activeFilter === 'running' &&
+								'border-primary dark:border-white  text-primary dark:text-white'
 						)}
 						onClick={() => setActiveFilter('running')}
 					>
 						<TimerPlayIcon
 							className={clsxm(
 								'w-8 h-8 p-1 !text-gray-300 !fill-gray-400 dark:!text-white',
-								activeFilter == 'running' &&
+								activeFilter === 'running' &&
 									'!text-primary !fill-primary  dark:!text-white dark:!fill-white'
 							)}
 						/>
@@ -122,7 +121,7 @@ export function UserTeamBlockHeader() {
 						<span
 							className={clsxm(
 								' bg-gray-500/40 p-1 px-2 text-xs rounded-md',
-								activeFilter == 'running' && 'bg-primary dark:bg-[#47484D] text-white'
+								activeFilter === 'running' && 'bg-primary dark:bg-[#47484D] text-white'
 							)}
 						>
 							{membersStatusNumber.running}
@@ -130,16 +129,15 @@ export function UserTeamBlockHeader() {
 					</div>
 					<div
 						className={clsxm(
-							'w-1/6 text-center flex items-center justify-center gap-2 py-4 cursor-pointer',
-							activeFilter == 'pause' &&
-								'border-b-4 border-primary dark:border-white  text-primary dark:text-white'
+							'w-1/6 text-center flex items-center justify-center gap-2 py-4 cursor-pointer border-b-4 border-transparent',
+							activeFilter === 'pause' && 'border-primary dark:border-white  text-primary dark:text-white'
 						)}
 						onClick={() => setActiveFilter('pause')}
 					>
 						<PauseIcon
 							className={clsxm(
 								'w-8 h-8 p-1 !text-gray-300 !fill-gray-400 dark:!text-white',
-								activeFilter == 'pause' &&
+								activeFilter === 'pause' &&
 									'!text-primary !fill-primary  dark:!text-white dark:!fill-white'
 							)}
 						/>
@@ -147,7 +145,7 @@ export function UserTeamBlockHeader() {
 						<span
 							className={clsxm(
 								' bg-gray-500/40 p-1 px-2 text-xs rounded-md',
-								activeFilter == 'pause' && 'bg-primary dark:bg-[#47484D] text-white'
+								activeFilter === 'pause' && 'bg-primary dark:bg-[#47484D] text-white'
 							)}
 						>
 							{membersStatusNumber.pause}
@@ -155,16 +153,16 @@ export function UserTeamBlockHeader() {
 					</div>
 					<div
 						className={clsxm(
-							'w-1/6 text-center flex items-center justify-center gap-2 py-4 cursor-pointer',
-							activeFilter == 'online' &&
-								'border-b-4 border-primary dark:border-white  text-primary dark:text-white'
+							'w-1/6 text-center flex items-center justify-center gap-2 py-4 cursor-pointer border-b-4 border-transparent',
+							activeFilter === 'online' &&
+								'border-primary dark:border-white  text-primary dark:text-white'
 						)}
 						onClick={() => setActiveFilter('online')}
 					>
 						<OnlineIcon
 							className={clsxm(
 								'w-8 h-8 p-1 !text-gray-400  dark:!text-white',
-								activeFilter == 'online' &&
+								activeFilter === 'online' &&
 									'!text-primary !fill-white  dark:!text-primary dark:!fill-white'
 							)}
 						/>
@@ -172,14 +170,14 @@ export function UserTeamBlockHeader() {
 						<span
 							className={clsxm(
 								' bg-gray-500/40 p-1 px-2 text-xs rounded-md',
-								activeFilter == 'online' && 'bg-primary dark:bg-[#47484D] text-white'
+								activeFilter === 'online' && 'bg-primary dark:bg-[#47484D] text-white'
 							)}
 						>
 							{membersStatusNumber.online}
 						</span>
 					</div>
 				</div>
-				<div className="w-1/4 flex justify-end gap-2	items-center">
+				<div className="w-1/6 flex justify-end gap-2 items-center">
 					{/* <Invite /> */}
 					<button
 						ref={hook.outclickFilterCard.ignoreElementRef}

From fe03c569352564fc346d4476a10d734b220e7bc3 Mon Sep 17 00:00:00 2001
From: Badal Khatri <badal.khatri0924@gmail.com>
Date: Thu, 28 Dec 2023 10:17:19 +0530
Subject: [PATCH 2/5] fix: Tooltip Font

---
 apps/web/lib/components/tooltip.tsx | 9 ++++++++-
 apps/web/styles/globals.css         | 4 ++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/apps/web/lib/components/tooltip.tsx b/apps/web/lib/components/tooltip.tsx
index 5961aedf0..7c1a08e80 100644
--- a/apps/web/lib/components/tooltip.tsx
+++ b/apps/web/lib/components/tooltip.tsx
@@ -47,7 +47,14 @@ export function Tooltip({
 						{...getTooltipProps()}
 						className={clsx('tooltip-container w-1/3 md:w-fit', labelContainerClassName)}
 					>
-						<span className={clsx(labelClassName, 'text-xs')}>{label}</span>
+						<span
+							className={clsx(labelClassName, 'text-xs font-poppins')}
+							// style={{
+							// 	fontFamily: 'poppins'
+							// }}
+						>
+							{label}
+						</span>
 						<div {...getArrowProps()} className="tooltip-arrow" />
 					</Transition>
 				</>
diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css
index 3645fa0be..81354db4f 100644
--- a/apps/web/styles/globals.css
+++ b/apps/web/styles/globals.css
@@ -17,6 +17,10 @@ html.dark {
 	--tooltipBackground: #000;
 }
 
+.font-poppins {
+	font-family: 'Poppins';
+}
+
 @layer base {
 	html {
 		font-family: 'Poppins', sans-serif;

From 76dd58c5ffdc5828a184f19586c111904ff77b14 Mon Sep 17 00:00:00 2001
From: Badal Khatri <badal.khatri0924@gmail.com>
Date: Thu, 28 Dec 2023 13:54:54 +0530
Subject: [PATCH 3/5] fix: Theme not changing issue

---
 apps/web/app/[locale]/layout.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/apps/web/app/[locale]/layout.tsx b/apps/web/app/[locale]/layout.tsx
index 8e091f809..b5da7c677 100644
--- a/apps/web/app/[locale]/layout.tsx
+++ b/apps/web/app/[locale]/layout.tsx
@@ -10,6 +10,7 @@ import { AppState } from 'lib/app/init-state';
 
 import 'react-loading-skeleton/dist/skeleton.css';
 import '../../styles/globals.css';
+import { ThemeProvider } from 'next-themes';
 
 const locales = ['en', 'de', 'ar', 'bg', 'zh', 'nl', 'de', 'he', 'it', 'pl', 'pt', 'ru', 'es', 'fr'];
 
@@ -56,10 +57,12 @@ export default function LocaleLayout({ children, params: { locale } }: Props) {
 				)}
 			</head> */}
 			<NextIntlClientProvider locale={locale} messages={messages} timeZone="Asia/Kolkata">
-				<body className={clsx('flex h-full flex-col')}>
+				<body className={clsx('flex h-full flex-col dark:bg-[#191A20]')}>
 					<RecoilRoot>
-						<AppState />
-						{children}
+						<ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
+							<AppState />
+							{children}
+						</ThemeProvider>
 					</RecoilRoot>
 				</body>
 			</NextIntlClientProvider>

From cdbd5c7d61254e540ba91076fcb6922847be4f16 Mon Sep 17 00:00:00 2001
From: Badal Khatri <badal.khatri0924@gmail.com>
Date: Thu, 28 Dec 2023 16:11:40 +0530
Subject: [PATCH 4/5] Updated Card UI Header Search UI

---
 apps/web/components/ui/data-table.tsx         |  36 ++++---
 apps/web/lib/features/task/task-filters.tsx   |   6 +-
 .../user-team-block-header.tsx                | 101 ++++++++++--------
 3 files changed, 81 insertions(+), 62 deletions(-)

diff --git a/apps/web/components/ui/data-table.tsx b/apps/web/components/ui/data-table.tsx
index 0351af56c..c93105431 100644
--- a/apps/web/components/ui/data-table.tsx
+++ b/apps/web/components/ui/data-table.tsx
@@ -21,13 +21,14 @@ interface DataTableProps<TData, TValue> {
 	data: TData[];
 	footerRows?: React.ReactNode[];
 	isError?: boolean;
+	isHeader?: boolean;
 	noResultsMessage?: {
 		heading: string;
 		content: string;
 	};
 }
 
-function DataTable<TData, TValue>({ columns, data, footerRows }: DataTableProps<TData, TValue>) {
+function DataTable<TData, TValue>({ columns, data, footerRows, isHeader }: DataTableProps<TData, TValue>) {
 	const [rowSelection, setRowSelection] = React.useState({});
 	const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
 	const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
@@ -57,21 +58,24 @@ function DataTable<TData, TValue>({ columns, data, footerRows }: DataTableProps<
 
 	return (
 		<Table className="border-transparent bg-light--theme-light dark:bg-dark--theme-light mt-8 w-full rounded-2xl">
-			<TableHeader>
-				{table.getHeaderGroups().map((headerGroup) => (
-					<TableRow key={headerGroup.id}>
-						{headerGroup.headers.map((header) => {
-							return (
-								<TableHead key={header.id}>
-									{header.isPlaceholder
-										? null
-										: flexRender(header.column.columnDef.header, header.getContext())}
-								</TableHead>
-							);
-						})}
-					</TableRow>
-				))}
-			</TableHeader>
+			{isHeader && (
+				<TableHeader>
+					{table.getHeaderGroups().map((headerGroup) => (
+						<TableRow key={headerGroup.id}>
+							{headerGroup.headers.map((header) => {
+								return (
+									<TableHead key={header.id}>
+										{header.isPlaceholder
+											? null
+											: flexRender(header.column.columnDef.header, header.getContext())}
+									</TableHead>
+								);
+							})}
+						</TableRow>
+					))}
+				</TableHeader>
+			)}
+
 			<TableBody className="divide-y divide-gray-200">
 				{table.getRowModel().rows?.length ? (
 					table.getRowModel().rows.map((row) => (
diff --git a/apps/web/lib/features/task/task-filters.tsx b/apps/web/lib/features/task/task-filters.tsx
index 0b330739a..e1c95629a 100644
--- a/apps/web/lib/features/task/task-filters.tsx
+++ b/apps/web/lib/features/task/task-filters.tsx
@@ -436,15 +436,15 @@ export function TaskNameFilter({
 	};
 
 	return (
-		<div className={clsxm('flex flex-row w-full md:w-1/2 gap-2 mt-3 ml-auto', fullWidth && '!w-full')}>
+		<div className={clsxm('flex flex-row w-full md:w-1/2 gap-2 mt-0 ml-auto', fullWidth && '!w-full')}>
 			<InputField
 				value={tempValue}
 				autoFocus={true}
 				onChange={(e) => handleInputChange(e)}
 				placeholder={t('common.TYPE_SOMETHING') + '...'}
-				wrapperClassName="mb-0 dark:bg-transparent"
+				wrapperClassName="mb-0 dark:bg-transparent !w-full rounded-xl"
 			/>
-			<Button className="py-2 md:px-3 px-2 min-w-[6.25rem] rounded-xl" variant="outline-danger" onClick={close}>
+			<Button className="py-1 md:px-3 px-1 min-w-[5rem] rounded-xl" variant="outline-danger" onClick={close}>
 				{t('common.CLOSE')}
 			</Button>
 		</div>
diff --git a/apps/web/lib/features/team/user-team-block/user-team-block-header.tsx b/apps/web/lib/features/team/user-team-block/user-team-block-header.tsx
index a81e0b8d2..a002b7221 100644
--- a/apps/web/lib/features/team/user-team-block/user-team-block-header.tsx
+++ b/apps/web/lib/features/team/user-team-block/user-team-block-header.tsx
@@ -56,23 +56,24 @@ export function UserTeamBlockHeader() {
 				<div className="flex items-center w-5/6">
 					<div
 						className={clsxm(
-							'w-1/6 text-center flex items-center justify-center gap-2 py-4 cursor-pointer border-b-4 border-transparent',
-							activeFilter === 'all' && 'border-primary dark:border-white text-primary dark:text-white'
+							'w-1/6 text-center flex items-center justify-center gap-2 py-4 cursor-pointer',
+							activeFilter == 'all' &&
+								'border-b-4 border-primary dark:border-white  text-primary dark:text-white'
 						)}
 						onClick={() => setActiveFilter('all')}
 					>
 						<StopCircleIcon
 							className={clsxm(
 								'w-8 h-8 p-1 !text-gray-300 !fill-gray-400 dark:!text-white',
-								activeFilter === 'all' &&
-									'!text-primary !fill-primary dark:!text-white dark:!fill-white'
+								activeFilter == 'all' &&
+									'!text-primary !fill-primary  dark:!text-white dark:!fill-white'
 							)}
 						/>
 						<p>All members </p>
 						<span
 							className={clsxm(
 								' bg-gray-500/40 p-1 px-2 text-xs rounded-md',
-								activeFilter === 'all' && 'bg-primary dark:bg-[#47484D] text-white'
+								activeFilter == 'all' && 'bg-primary dark:bg-[#47484D] text-white'
 							)}
 						>
 							{members?.length}
@@ -80,23 +81,23 @@ export function UserTeamBlockHeader() {
 					</div>
 					<div
 						className={clsxm(
-							'w-1/6 text-center flex items-center justify-center gap-2 py-4 cursor-pointer border-b-4 border-transparent',
-							activeFilter === 'idle' && 'border-primary dark:border-white  text-primary dark:text-white'
+							'w-1/6 text-center flex items-center justify-center gap-2 py-4 cursor-pointer',
+							activeFilter == 'idle' &&
+								'border-b-4 border-primary dark:border-white  text-primary dark:text-white'
 						)}
 						onClick={() => setActiveFilter('idle')}
 					>
 						<NotWorkingIcon
 							className={clsxm(
 								'w-8 h-8 p-1 !text-gray-300  dark:!text-white',
-								activeFilter === 'idle' &&
-									'!text-primary !fill-white  dark:!text-white dark:!fill-white'
+								activeFilter == 'idle' && '!text-primary !fill-white  dark:!text-white dark:!fill-white'
 							)}
 						/>
 						<p>Not working </p>
 						<span
 							className={clsxm(
 								' bg-gray-500/40 p-1 px-2 text-xs rounded-md',
-								activeFilter === 'idle' && 'bg-primary dark:bg-[#47484D] text-white'
+								activeFilter == 'idle' && 'bg-primary dark:bg-[#47484D] text-white'
 							)}
 						>
 							{membersStatusNumber.idle}
@@ -104,16 +105,16 @@ export function UserTeamBlockHeader() {
 					</div>
 					<div
 						className={clsxm(
-							'w-1/6 text-center flex items-center justify-center gap-2 py-4 cursor-pointer border-b-4 border-transparent',
-							activeFilter === 'running' &&
-								'border-primary dark:border-white  text-primary dark:text-white'
+							'w-1/6 text-center flex items-center justify-center gap-2 py-4 cursor-pointer',
+							activeFilter == 'running' &&
+								'border-b-4 border-primary dark:border-white  text-primary dark:text-white'
 						)}
 						onClick={() => setActiveFilter('running')}
 					>
 						<TimerPlayIcon
 							className={clsxm(
 								'w-8 h-8 p-1 !text-gray-300 !fill-gray-400 dark:!text-white',
-								activeFilter === 'running' &&
+								activeFilter == 'running' &&
 									'!text-primary !fill-primary  dark:!text-white dark:!fill-white'
 							)}
 						/>
@@ -121,7 +122,7 @@ export function UserTeamBlockHeader() {
 						<span
 							className={clsxm(
 								' bg-gray-500/40 p-1 px-2 text-xs rounded-md',
-								activeFilter === 'running' && 'bg-primary dark:bg-[#47484D] text-white'
+								activeFilter == 'running' && 'bg-primary dark:bg-[#47484D] text-white'
 							)}
 						>
 							{membersStatusNumber.running}
@@ -129,15 +130,16 @@ export function UserTeamBlockHeader() {
 					</div>
 					<div
 						className={clsxm(
-							'w-1/6 text-center flex items-center justify-center gap-2 py-4 cursor-pointer border-b-4 border-transparent',
-							activeFilter === 'pause' && 'border-primary dark:border-white  text-primary dark:text-white'
+							'w-1/6 text-center flex items-center justify-center gap-2 py-4 cursor-pointer',
+							activeFilter == 'pause' &&
+								'border-b-4 border-primary dark:border-white  text-primary dark:text-white'
 						)}
 						onClick={() => setActiveFilter('pause')}
 					>
 						<PauseIcon
 							className={clsxm(
 								'w-8 h-8 p-1 !text-gray-300 !fill-gray-400 dark:!text-white',
-								activeFilter === 'pause' &&
+								activeFilter == 'pause' &&
 									'!text-primary !fill-primary  dark:!text-white dark:!fill-white'
 							)}
 						/>
@@ -145,7 +147,7 @@ export function UserTeamBlockHeader() {
 						<span
 							className={clsxm(
 								' bg-gray-500/40 p-1 px-2 text-xs rounded-md',
-								activeFilter === 'pause' && 'bg-primary dark:bg-[#47484D] text-white'
+								activeFilter == 'pause' && 'bg-primary dark:bg-[#47484D] text-white'
 							)}
 						>
 							{membersStatusNumber.pause}
@@ -153,16 +155,16 @@ export function UserTeamBlockHeader() {
 					</div>
 					<div
 						className={clsxm(
-							'w-1/6 text-center flex items-center justify-center gap-2 py-4 cursor-pointer border-b-4 border-transparent',
-							activeFilter === 'online' &&
-								'border-primary dark:border-white  text-primary dark:text-white'
+							'w-1/6 text-center flex items-center justify-center gap-2 py-4 cursor-pointer',
+							activeFilter == 'online' &&
+								'border-b-4 border-primary dark:border-white  text-primary dark:text-white'
 						)}
 						onClick={() => setActiveFilter('online')}
 					>
 						<OnlineIcon
 							className={clsxm(
 								'w-8 h-8 p-1 !text-gray-400  dark:!text-white',
-								activeFilter === 'online' &&
+								activeFilter == 'online' &&
 									'!text-primary !fill-white  dark:!text-primary dark:!fill-white'
 							)}
 						/>
@@ -170,36 +172,49 @@ export function UserTeamBlockHeader() {
 						<span
 							className={clsxm(
 								' bg-gray-500/40 p-1 px-2 text-xs rounded-md',
-								activeFilter === 'online' && 'bg-primary dark:bg-[#47484D] text-white'
+								activeFilter == 'online' && 'bg-primary dark:bg-[#47484D] text-white'
 							)}
 						>
 							{membersStatusNumber.online}
 						</span>
 					</div>
 				</div>
-				<div className="w-1/6 flex justify-end gap-2 items-center">
+
+				<div className="1/6 flex justify-end gap-2 items-center">
 					{/* <Invite /> */}
-					<button
-						ref={hook.outclickFilterCard.ignoreElementRef}
-						className={clsxm('outline-none')}
-						onClick={() => hook.toggleFilterType('search')}
-					>
-						<SearchNormalIcon
-							className={clsxm(
-								'dark:stroke-white',
-								hook.filterType === 'search' && ['stroke-primary-light dark:stroke-primary-light']
-							)}
+					{hook.filterType === 'search' ? (
+						<TaskNameFilter
+							fullWidth={true}
+							value={hook.taskName}
+							setValue={hook.setTaskName}
+							close={() => {
+								hook.toggleFilterType('search');
+							}}
 						/>
-					</button>
+					) : (
+						<>
+							<button
+								ref={hook.outclickFilterCard.ignoreElementRef}
+								className={clsxm('outline-none')}
+								onClick={() => hook.toggleFilterType('search')}
+							>
+								<SearchNormalIcon
+									className={clsxm(
+										'dark:stroke-white'
+										// hook.filterType === 'search' && ['stroke-primary-light dark:stroke-primary-light']
+									)}
+								/>
+							</button>
+							<VerticalSeparator />
 
-					<VerticalSeparator />
-
-					<Button className="py-3.5 px-4 gap-3 rounded-xl outline-none" onClick={openModal}>
-						Invite
-					</Button>
+							<Button className="py-3.5 px-4 gap-3 rounded-xl outline-none" onClick={openModal}>
+								Invite
+							</Button>
+						</>
+					)}
 				</div>
 			</div>
-			<div className="hidden sm:flex w-1/2 row font-normal  justify-end hidde dark:text-[#7B8089]">
+			{/* <div className="hidden sm:flex w-1/2 row font-normal  justify-end hidde dark:text-[#7B8089]">
 				<Transition
 					show={hook.filterType !== undefined}
 					enter="transition duration-100 ease-out"
@@ -222,7 +237,7 @@ export function UserTeamBlockHeader() {
 						/>
 					)}
 				</Transition>
-			</div>
+			</div> */}
 			<InviteFormModal open={isOpen && !!user?.isEmailVerified} closeModal={closeModal} />
 		</>
 	);

From dc0665430811924596215fc4f5ca438faec7c083 Mon Sep 17 00:00:00 2001
From: Badal Khatri <badal.khatri0924@gmail.com>
Date: Thu, 28 Dec 2023 16:13:37 +0530
Subject: [PATCH 5/5] fix: Deepscan issue

---
 .../lib/features/team/user-team-block/user-team-block-header.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/web/lib/features/team/user-team-block/user-team-block-header.tsx b/apps/web/lib/features/team/user-team-block/user-team-block-header.tsx
index a002b7221..99f629688 100644
--- a/apps/web/lib/features/team/user-team-block/user-team-block-header.tsx
+++ b/apps/web/lib/features/team/user-team-block/user-team-block-header.tsx
@@ -11,7 +11,6 @@ import {
 	NotWorkingIcon,
 	OnlineIcon
 } from 'lib/components/svgs';
-import { Transition } from '@headlessui/react';
 import { Button, VerticalSeparator } from 'lib/components';
 import { useTaskFilter, TaskNameFilter } from 'lib/features';
 import { useRecoilState } from 'recoil';