Merge pull request #2324 from ever-co/stage

Release
ever-co · Mar 22, 2024 · 290ad9e · 290ad9e
2 parents 1776c78 + 34415c9
commit 290ad9e
Show file tree

Hide file tree

Showing 11 changed files with 128 additions and 64 deletions.
diff --git a/apps/web/app/[locale]/page-component.tsx b/apps/web/app/[locale]/page-component.tsx
@@ -7,7 +7,7 @@ import { useOrganizationTeams } from '@app/hooks';
 import { clsxm } from '@app/utils';
 import NoTeam from '@components/pages/main/no-team';
 import { withAuthentication } from 'lib/app/authenticator';
-import { Breadcrumb, Card, Container } from 'lib/components';
+import { Breadcrumb, Card } from 'lib/components';
 import { AuthUserTaskInput, TeamInvitations, TeamMembers, Timer, UnverifiedEmail } from 'lib/features';
 import { MainHeader, MainLayout } from 'lib/layout';
 import { IssuesView } from '@app/constants';
@@ -28,6 +28,7 @@ import HeaderTabs from '@components/pages/main/header-tabs';
 import { headerTabs } from '@app/stores/header-tabs';
 import { usePathname } from 'next/navigation';
 import { PeoplesIcon } from 'assets/svg';
+import TeamMemberHeader from 'lib/features/team-member-header';
 
 function MainPage() {
 	const t = useTranslations();
@@ -60,7 +61,7 @@ function MainPage() {
 		<>
 			<MainLayout>
 				<ChatwootWidget />
-				<MainHeader className="pb-1" fullWidth={fullWidth}>
+				<MainHeader className="!pb-0" fullWidth={fullWidth}>
 					<div className="flex flex-row items-start justify-between ">
 						<div className="flex justify-center items-center gap-8 h-10">
 							<PeoplesIcon className="text-dark dark:text-[#6b7280] h-6 w-6" />
@@ -73,14 +74,12 @@ function MainPage() {
 
 					<UnverifiedEmail />
 					<TeamInvitations />
+					{isTeamMember ? <TaskTimerSection isTrackingEnabled={isTrackingEnabled} /> : null}
+					<TeamMemberHeader view={view} />
 				</MainHeader>
 
 				{/* <div className={`z-50 bg-white dark:bg-[#191A20] `}> */}
-					<Container fullWidth={fullWidth}>
-					{isTeamMember ? <TaskTimerSection isTrackingEnabled={isTrackingEnabled} /> : null}
-					{isTeamMember ? <TeamMembers kanbanView={view} /> : <NoTeam />}
-					</Container>
-
+				{isTeamMember ? <TeamMembers kanbanView={view} /> : <NoTeam />}
 			</MainLayout>
 
 			<Analytics />

diff --git a/apps/web/components/ui/data-table.tsx b/apps/web/components/ui/data-table.tsx
@@ -61,9 +61,9 @@ function DataTable<TData, TValue>({ columns, data, footerRows, isHeader }: DataT
 		getFacetedUniqueValues: getFacetedUniqueValues()
 	});
 	return (
-		<Table className="border-transparent mt-8 w-full rounded-2xl">
+		<Table className="border-transparent mt-0 w-full rounded-2xl">
 			{isHeader && (
-				<TableHeader className=" border-b-[3px] border-b-[#FFFFFF14] ">
+				<TableHeader className=" border-b-[3px] bg-white border-b-[#FFFFFF14] ">
 					{table.getHeaderGroups().map((headerGroup) => (
 						<TableRow className="hover:bg-transparent h-[74px] border-none" key={headerGroup.id}>
 							{headerGroup.headers.map((header, index) => {

diff --git a/apps/web/lib/features/team-member-header.tsx b/apps/web/lib/features/team-member-header.tsx
@@ -0,0 +1,34 @@
+import { IssuesView } from '@app/constants';
+import React from 'react';
+import { UserTeamCardHeader } from './team/user-team-card/task-skeleton';
+import { UserTeamBlockHeader } from './team/user-team-block/user-team-block-header';
+import { Container } from 'lib/components';
+import { useRecoilValue } from 'recoil';
+import { fullWidthState } from '@app/stores/fullWidth';
+import UserTeamTableHeader from './team/user-team-table/user-team-table-header';
+
+function TeamMemberHeader({ view }: { view: IssuesView }) {
+	const fullWidth = useRecoilValue(fullWidthState);
+	let header;
+	switch (true) {
+		case view == IssuesView.CARDS:
+			header = <UserTeamCardHeader />;
+			break;
+		case view == IssuesView.TABLE:
+			header = <UserTeamTableHeader />;
+			break;
+		case view == IssuesView.BLOCKS:
+			header = <UserTeamBlockHeader />;
+			break;
+		default:
+			header = <UserTeamCardHeader />;
+			break;
+	}
+	return (
+		<Container fullWidth={fullWidth} className="!p-0">
+			{header}
+		</Container>
+	);
+}
+
+export default TeamMemberHeader;
diff --git a/apps/web/lib/features/team-members-block-view.tsx b/apps/web/lib/features/team-members-block-view.tsx
@@ -5,7 +5,6 @@ import { UserTeamBlock } from './team/user-team-block';
 import { useRecoilValue } from 'recoil';
 import { taskBlockFilterState } from '@app/stores/task-filter';
 import { UserTeamCardSkeleton } from './team/user-team-card/task-skeleton';
-import { UserTeamBlockHeader } from './team/user-team-block/user-team-block-header';
 
 interface Props {
 	teamMembers: OT_Member[];
@@ -41,9 +40,6 @@ const TeamMembersBlockView: React.FC<Props> = ({
 
 	return (
 		<>
-			<UserTeamBlockHeader />
-			<div className="h-0.5 bg-[#FFFFFF14]"></div>
-
 			<div className="mt-7">
 				{/* Current authenticated user members */}
 				<Transition

diff --git a/apps/web/lib/features/team-members-card-view.tsx b/apps/web/lib/features/team-members-card-view.tsx
@@ -2,7 +2,7 @@ import { useAuthenticateUser, useModal, useOrganizationEmployeeTeams, useTeamInv
 import { Transition } from '@headlessui/react';
 import { InviteFormModal } from './team/invite/invite-form-modal';
 import { InvitedCard, InviteUserTeamCard } from './team/invite/user-invite-card';
-import { InviteUserTeamSkeleton, UserTeamCard, UserTeamCardHeader, UserTeamCardSkeleton } from '.';
+import { InviteUserTeamSkeleton, UserTeamCard, UserTeamCardSkeleton } from '.';
 import { OT_Member } from '@app/interfaces';
 import React from 'react';
 
@@ -47,10 +47,6 @@ const TeamMembersCardView: React.FC<Props> = ({
 
 	return (
 		<>
-			<div className={`z-50 bg-white dark:bg-[#191A20] `}>
-				<UserTeamCardHeader />
-				<div className="h-0.5 bg-[#FFFFFF14]"></div>
-			</div>
 			<ul className="mt-7">
 				{/* Current authenticated user members */}
 				<Transition

diff --git a/apps/web/lib/features/team-members-table-view.tsx b/apps/web/lib/features/team-members-table-view.tsx
@@ -73,7 +73,7 @@ const TeamMembersTableView = ({
 	return (
 		<>
 			<DataTable
-				isHeader={true}
+				isHeader={false}
 				columns={columns as Column<OT_Member>[]}
 				data={sortedTeamMembers}
 				noResultsMessage={{

diff --git a/apps/web/lib/features/team-members.tsx b/apps/web/lib/features/team-members.tsx
@@ -10,6 +10,8 @@ import TeamMembersBlockView from './team-members-block-view';
 import { useRecoilValue } from 'recoil';
 import { taskBlockFilterState } from '@app/stores/task-filter';
 import { OT_Member } from '@app/interfaces';
+import { Container } from 'lib/components';
+import { fullWidthState } from '@app/stores/fullWidth';
 
 type TeamMembersProps = {
 	publicTeam?: boolean;
@@ -19,6 +21,7 @@ type TeamMembersProps = {
 export function TeamMembers({ publicTeam = false, kanbanView: view = IssuesView.CARDS }: TeamMembersProps) {
 	const { user } = useAuthenticateUser();
 	const activeFilter = useRecoilValue(taskBlockFilterState);
+	const fullWidth = useRecoilValue(fullWidthState);
 	const { activeTeam } = useOrganizationTeams();
 	const { teamsFetching } = useOrganizationTeams();
 	const members = activeTeam?.members || [];
@@ -45,7 +48,7 @@ export function TeamMembers({ publicTeam = false, kanbanView: view = IssuesView.
 	switch (true) {
 		case members.length === 0:
 			teamMembersView = (
-				<div className="">
+				<Container fullWidth={fullWidth}>
 					<div className="hidden lg:block">
 						<UserTeamCardSkeletonCard />
 						<InviteUserTeamCardSkeleton />
@@ -55,58 +58,66 @@ export function TeamMembers({ publicTeam = false, kanbanView: view = IssuesView.
 						<UserCard />
 						<UserCard />
 					</div>
-				</div>
+				</Container>
 			);
 			break;
 		case view === IssuesView.CARDS:
 			teamMembersView = (
-				<TeamMembersCardView
-					teamMembers={$members}
-					currentUser={currentUser}
-					publicTeam={publicTeam}
-					teamsFetching={$teamsFetching}
-				/>
-			);
-			break;
-		case view === IssuesView.TABLE:
-			teamMembersView = (
-				<Transition
-					show={!!currentUser}
-					enter="transition-opacity duration-75"
-					enterFrom="opacity-0"
-					enterTo="opacity-100"
-					leave="transition-opacity duration-150"
-					leaveFrom="opacity-100"
-					leaveTo="opacity-0"
-				>
-					<TeamMembersTableView
+				<Container fullWidth={fullWidth}>
+					<TeamMembersCardView
 						teamMembers={$members}
 						currentUser={currentUser}
 						publicTeam={publicTeam}
-						active={user?.isEmailVerified}
+						teamsFetching={$teamsFetching}
 					/>
-				</Transition>
+				</Container>
+			);
+			break;
+		case view === IssuesView.TABLE:
+			teamMembersView = (
+				<Container fullWidth={fullWidth}>
+					<Transition
+						show={!!currentUser}
+						enter="transition-opacity duration-75"
+						enterFrom="opacity-0"
+						enterTo="opacity-100"
+						leave="transition-opacity duration-150"
+						leaveFrom="opacity-100"
+						leaveTo="opacity-0"
+					>
+						<TeamMembersTableView
+							teamMembers={$members}
+							currentUser={currentUser}
+							publicTeam={publicTeam}
+							active={user?.isEmailVerified}
+						/>
+					</Transition>
+				</Container>
 			);
 			break;
 
 		case view == IssuesView.BLOCKS:
 			teamMembersView = (
-				<TeamMembersBlockView
-					teamMembers={blockViewMembers}
-					currentUser={currentUser}
-					publicTeam={publicTeam}
-					teamsFetching={$teamsFetching}
-				/>
+				<Container fullWidth={fullWidth}>
+					<TeamMembersBlockView
+						teamMembers={blockViewMembers}
+						currentUser={currentUser}
+						publicTeam={publicTeam}
+						teamsFetching={$teamsFetching}
+					/>
+				</Container>
 			);
 			break;
 		default:
 			teamMembersView = (
-				<TeamMembersCardView
-					teamMembers={$members}
-					currentUser={currentUser}
-					publicTeam={publicTeam}
-					teamsFetching={$teamsFetching}
-				/>
+				<Container fullWidth={fullWidth}>
+					<TeamMembersCardView
+						teamMembers={$members}
+						currentUser={currentUser}
+						publicTeam={publicTeam}
+						teamsFetching={$teamsFetching}
+					/>
+				</Container>
 			);
 	}
 	return teamMembersView;

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
@@ -46,7 +46,7 @@ export function UserTeamBlockHeader() {
 
 	return (
 		<>
-			<div className="hidden sm:flex row font-normal pt-4 justify-between hidde dark:text-[#7B8089]">
+			<div className="hidden sm:flex row font-normal pt-4 mt-4 justify-between hidde dark:text-[#7B8089]">
 				<div className="flex items-center w-9/12">
 					<div
 						className={clsxm(

diff --git a/apps/web/lib/features/team/user-team-card/task-skeleton.tsx b/apps/web/lib/features/team/user-team-card/task-skeleton.tsx
@@ -1,5 +1,8 @@
+import { fullWidthState } from '@app/stores/fullWidth';
+import { clsxm } from '@app/utils';
 import { Tooltip } from 'lib/components';
 import { useTranslations } from 'next-intl';
+import { useRecoilValue } from 'recoil';
 
 export function UserTeamCardSkeleton() {
 	return (
@@ -41,9 +44,10 @@ export function InviteUserTeamSkeleton() {
 }
 
 export function UserTeamCardHeader() {
+	const fullWidth = useRecoilValue(fullWidthState);
 	const t = useTranslations();
 	return (
-		<div className="my-6 dark:text-[#7B8089] font-normal">
+		<div className="my-6 dark:text-[#7B8089] font-normal pb-4">
 			<div className="relative m-0 flex items-center">
 				<div className="flex 2xl:w-[20.625rem] w-1/4 justify-center items-center space-x-2 lg:space-x-4">
 					<p>{t('common.NAME')}</p>
@@ -53,7 +57,12 @@ export function UserTeamCardHeader() {
 
 				{/* <div className="flex w-[100%-_20px]"></div> */}
 
-				<div className="w-1/5 gap-4 lg:px-3 2xl:w-52 max-w-[13rem] flex flex-col justify-center gap-y-[1.125rem]">
+				<div
+					className={clsxm(
+						'w-1/5 lg:px-3  lg:text-center text-right',
+						fullWidth ? '2xl:w-52 3xl:w-64' : '2xl:w-36 3xl:w-44'
+					)}
+				>
 					<div className="lg:text-center text-left w-full mt-1.5">
 						<Tooltip label={t('task.taskTableHead.TOTAL_WORKED_TODAY_HEADER_TOOLTIP')}>
 							<div className="text-center">
@@ -64,7 +73,14 @@ export function UserTeamCardHeader() {
 						</Tooltip>
 					</div>
 				</div>
-				<div className="w-1/5 lg:px-3 2xl:w-52 3xl:w-64 lg:text-center text-right">{t('common.ESTIMATE')}</div>
+				<div
+					className={clsxm(
+						'w-1/5 lg:px-3  lg:text-center text-right',
+						fullWidth ? '2xl:w-52 3xl:w-64' : '2xl:w-40 3xl:w-48'
+					)}
+				>
+					{t('common.ESTIMATE')}
+				</div>
 				<div className="w-1/5 gap-4 lg:px-3 2xl:w-52 max-w-[13rem] flex cursor-pointer items-center justify-center mt-1.5 ">
 					<Tooltip label={t('task.taskTableHead.WORKED_ON_TASK_HEADER_TOOLTIP')}>
 						{t('task.taskTableHead.TOTAL_WORK.TITLE')}

diff --git a/apps/web/lib/features/team/user-team-table/user-team-table-header.tsx b/apps/web/lib/features/team/user-team-table/user-team-table-header.tsx
@@ -1,13 +1,19 @@
+import { fullWidthState } from '@app/stores/fullWidth';
+import { clsxm } from '@app/utils';
 import React from 'react';
+import { useRecoilValue } from 'recoil';
 
 function UserTeamTableHeader() {
+	const fullWidth = useRecoilValue(fullWidthState);
 	return (
-		<div className="flex overflow-y-auto px-4 text-center items-center pt-4">
+		<div className="flex overflow-y-auto px-0 pb-4 mt-10 text-center items-center pt-4">
 			<p className="min-w-[8rem] 2xl:w-[20.625rem] w-1/4">Name</p>
 			<p className="min-w-[8rem] flex-1 ">Task</p>
-			<p className="min-w-[8rem] w-1/5 2xl:w-48 3xl:w-[12rem]">Worked on Task</p>
-			<p className="min-w-[8rem] w-1/5 2xl:w-52 3xl:w-[14rem] text-center">Estimate</p>
-			<p className="min-w-[8rem] w-28 self-end text-end">Action</p>
+			<p className={clsxm('min-w-[8rem] w-1/5', fullWidth ? '2xl:w-52 3xl:w-[17rem]' : '2xl:w-48 3xl:w-[12rem]')}>
+				Worked on Task
+			</p>
+			<p className="min-w-[8rem] w-1/5 2xl:w-48 3xl:w-[12rem] text-center">Estimate</p>
+			<p className="self-end text-end">Action</p>
 		</div>
 	);
 }

diff --git a/apps/web/lib/layout/main-header.tsx b/apps/web/lib/layout/main-header.tsx
@@ -6,7 +6,13 @@ import { PropsWithChildren } from 'react';
 export function MainHeader({ children, className, fullWidth }: PropsWithChildren<IClassName>) {
 	return (
 		<>
-			<div className={clsxm('bg-white dark:bg-dark--theme pt-20 -mt-8 pb-4', className)}>
+			<div
+				className={clsxm(
+					'bg-white dark:bg-dark-high  pt-20 -mt-8 pb-4',
+					className,
+					'border-[#eeeeeee9]  border-b-[0.125rem] dark:border-b-[#26272cd6] dark:shadow-lg '
+				)}
+			>
 				<Container fullWidth={fullWidth}>{children}</Container>
 			</div>
 			{/* <Divider /> */}