Merge pull request #3032 from ever-co/develop

Stage
ever-co · Sep 17, 2024 · 68082e0 · 68082e0
2 parents a27f0b9 + 793bd0c
commit 68082e0
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 69 deletions.
diff --git a/apps/web/components/ui/data-table.tsx b/apps/web/components/ui/data-table.tsx
@@ -78,17 +78,17 @@ 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}>
  <div className="">
  {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
@@ -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/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/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,24 +38,20 @@ 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
  activeAuthTask={true}
  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
@@ -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
@@ -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
@@ -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(

diff --git 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,