From 96222850829a88f6bc81844db78368acb4c37b92 Mon Sep 17 00:00:00 2001
From: Yehualashet <yehualashetab@gmail.com>
Date: Thu, 26 Oct 2023 14:45:57 +0200
Subject: [PATCH] fix ui related issue

---
 apps/web/components/ui/data-table.tsx      |  8 +++++---
 apps/web/components/ui/table.tsx           | 19 ++++++++++---------
 apps/web/lib/features/team-member-cell.tsx |  5 +++--
 apps/web/pages/index.tsx                   |  4 ++--
 4 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/apps/web/components/ui/data-table.tsx b/apps/web/components/ui/data-table.tsx
index ff5c167bb..cae448f7f 100644
--- a/apps/web/components/ui/data-table.tsx
+++ b/apps/web/components/ui/data-table.tsx
@@ -72,7 +72,7 @@ function DataTable<TData, TValue>({
 	})
 
 	return (
-		<Table>
+		<Table className='border-transparent bg-light--theme-light dark:bg-dark--theme-light mt-8 w-full'>
 			<TableHeader>
 				{table.getHeaderGroups().map((headerGroup) => (
 					<TableRow key={headerGroup.id}>
@@ -97,10 +97,12 @@ function DataTable<TData, TValue>({
 						<TableRow
 							key={row.id}
 							data-state={row.getIsSelected() && "selected"}
-							className="mb-4 border-b border-gray-200"
+							className='my-4'
 						>
 							{row.getVisibleCells().map((cell) => (
-								<TableCell key={cell.id}>
+								<TableCell key={cell.id}
+								className="rounded-[16px] my-4">
+
 									{flexRender(
 										cell.column.columnDef.cell,
 										cell.getContext()
diff --git a/apps/web/components/ui/table.tsx b/apps/web/components/ui/table.tsx
index 87b4af4ad..e59990b4f 100644
--- a/apps/web/components/ui/table.tsx
+++ b/apps/web/components/ui/table.tsx
@@ -1,6 +1,7 @@
 import * as React from "react"
 
-import { cn } from "lib/utils"
+import { clsxm } from '@app/utils';
+
 
 const Table = React.forwardRef<
   HTMLTableElement,
@@ -9,7 +10,7 @@ const Table = React.forwardRef<
   <div className="relative w-full overflow-auto">
     <table
       ref={ref}
-      className={cn("w-full caption-bottom text-sm", className)}
+      className={clsxm("w-full caption-bottom text-sm", className)}
       {...props}
     />
   </div>
@@ -20,7 +21,7 @@ const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+  <thead ref={ref} className={clsxm("[&_tr]:border-b", className)} {...props} />
 ))
 TableHeader.displayName = "TableHeader"
 
@@ -30,7 +31,7 @@ const TableBody = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <tbody
     ref={ref}
-    className={cn("[&_tr:last-child]:border-0", className)}
+    className={clsxm("[&_tr:last-child]:border-0", className)}
     {...props}
   />
 ))
@@ -42,7 +43,7 @@ const TableFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <tfoot
     ref={ref}
-    className={cn("bg-primary font-medium text-primary-foreground", className)}
+    className={clsxm("bg-primary font-medium text-primary-foreground", className)}
     {...props}
   />
 ))
@@ -54,7 +55,7 @@ const TableRow = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <tr
     ref={ref}
-    className={cn(
+    className={clsxm(
       "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
       className
     )}
@@ -69,7 +70,7 @@ const TableHead = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <th
     ref={ref}
-    className={cn(
+    className={clsxm(
       "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
       className
     )}
@@ -84,7 +85,7 @@ const TableCell = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <td
     ref={ref}
-    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    className={clsxm("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
     {...props}
   />
 ))
@@ -96,7 +97,7 @@ const TableCaption = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <caption
     ref={ref}
-    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    className={clsxm("mt-4 text-sm text-muted-foreground", className)}
     {...props}
   />
 ))
diff --git a/apps/web/lib/features/team-member-cell.tsx b/apps/web/lib/features/team-member-cell.tsx
index bc456ff67..84a60ee98 100644
--- a/apps/web/lib/features/team-member-cell.tsx
+++ b/apps/web/lib/features/team-member-cell.tsx
@@ -52,7 +52,7 @@ export function WorkedOnTaskCell({ row }: { row: any }) {
 			memberInfo={memberInfo}
 			task={memberInfo?.memberTask}
 			isAuthUser={memberInfo?.isAuthUser}
-			className="2xl:w-48 3xl:w-[12rem] w-1/5 lg:px-4 px-2 flex flex-col gap-y-[1.125rem] justify-center"
+			className="2xl:w-32 3xl:w-[8rem] w-1/5  flex flex-col gap-y-[1.125rem] justify-center"
 		/>
 	);
 }
@@ -95,7 +95,8 @@ export function ActionMenuCell ({ cell }: {  cell: any}) {
 					checked={user_selected()}
 					className={clsxm(
 						'border-none w-4 h-4 mr-1 accent-primary-light',
-						'border-2 border-primary-light'
+						'border-2 border-primary-light',
+						'2xl:w-[2rem] w-1/5'
 					)}
 					noWrapper={true}
 					onChange={onUserSelect}
diff --git a/apps/web/pages/index.tsx b/apps/web/pages/index.tsx
index cc02032f5..92d3c94ec 100644
--- a/apps/web/pages/index.tsx
+++ b/apps/web/pages/index.tsx
@@ -16,7 +16,7 @@ import { MainHeader, MainLayout } from 'lib/layout';
 import { useTranslation } from 'react-i18next';
 import { useState } from 'react';
 import { IssuesView } from '@app/constants';
-import { TableCellsIcon, ListBulletIcon } from '@heroicons/react/24/solid';
+import { TableCellsIcon, QueueListIcon } from '@heroicons/react/24/solid';
 
 function MainPage() {
 	const { t } = useTranslation();
@@ -55,7 +55,7 @@ function MainPage() {
 							)}
 							onClick={() => setView(IssuesView.TABLE)}
 						>
-							<ListBulletIcon className="w-5 h-5 inline -ml-1 mr-1" />
+							<QueueListIcon className="w-5 h-5 inline -ml-1 mr-1" />
 						</button>
 					</div>
 				</div>