2139 fix home page design and skeleton structure (#2155)

* working on home page * working on home page ui * fix the auth code issue * fix the home-page design and responsive * fix(Home): fixing the homepage design * fix(Home): fixing the homepage design * fix(Home): fixing the homepage design * fix(Home): align and size fix of dropdowns * fix(Home): align and size fix of dropdowns * fix(Timer): remove the timer default value * Update useTaskEstimation.ts * Update auth-user-task-input.tsx * fix the hidden value of inputs * fixed the css of auth input * fixed the css of auth input * fix the header of table in home page * fix(Header): ui of header and added <br/> * fix(Header): ui of header and added <br/> * fix(Header): ui of header and added <br/> * fix(Header): ui of header and added <br/> * deep scan issues fix --------- Co-authored-by: Ruslan K <[email protected]>
ever-co · Feb 8, 2024 · fe605d9 · fe605d9
1 parent c30aea0
commit fe605d9
Show file tree

Hide file tree

Showing 9 changed files with 113 additions and 92 deletions.
diff --git a/apps/web/app/[locale]/page.tsx b/apps/web/app/[locale]/page.tsx
@@ -37,6 +37,7 @@ import '../../styles/globals.css';
 
 import { useRecoilValue } from 'recoil';
 import { fullWidthState } from '@app/stores/fullWidth';
+import { ChevronDown } from 'lucide-react';
 
 function MainPage() {
 	const t = useTranslations();
@@ -60,14 +61,14 @@ function MainPage() {
 			<MainLayout>
 				<ChatwootWidget />
 				<MainHeader className="pb-1" fullWidth={fullWidth}>
-					<div className="flex flex-col md:flex-row items-start justify-between h-12 md:h-5">
-						<div className="flex  items-center gap-8">
+					<div className="flex flex-row items-start justify-between ">
+						<div className="flex justify-center items-center gap-8 h-10">
 							<PeopleIcon className="stroke-dark dark:stroke-[#6b7280] h-6 w-6" />
 							<Breadcrumb paths={breadcrumb} className="text-sm" />
 						</div>
 
 						{/* <Collaborative /> */}
-						<div className="flex w-full md:w-max items-center justify-center py-4 md:py-0 gap-1">
+						<div className="flex h-10 w-max items-center justify-center   gap-1">
 							<Tooltip label={'Cards'} placement="top-start">
 								<button
 									className={clsxm(
@@ -127,11 +128,7 @@ function MainPage() {
 					<TeamInvitations />
 				</MainHeader>
 
-				<div
-					className={`sticky top-20 z-50 bg-white dark:bg-[#191A20] pt-5 ${
-						view !== IssuesView.CARDS ? 'pb-7' : ''
-					}`}
-				>
+				<div className={`z-50 bg-white dark:bg-[#191A20] pt-5 ${view !== IssuesView.CARDS ? 'pb-7' : ''}`}>
 					<Container fullWidth={fullWidth}>
 						{isTeamMember ? <TaskTimerSection isTrackingEnabled={isTrackingEnabled} /> : null}
 						{view === IssuesView.CARDS && isTeamMember ? (
@@ -163,22 +160,30 @@ function TaskTimerSection({ isTrackingEnabled }: { isTrackingEnabled: boolean })
 		<Card
 			shadow="bigger"
 			className={clsxm(
-				'w-full flex md:flex-row flex-col-reverse justify-center md:justify-between items-center py-4',
+				'w-full flex lg:flex-row flex-col-reverse justify-center md:justify-between items-center py-4',
 				'border-[#00000008]  border-[0.125rem] dark:border-[#26272C] dark:shadow-lg dark:bg-[#1B1D22]'
 			)}
 		>
-			{/* Task inputs */}
-			{/* {showInput && ( */}
 			<AuthUserTaskInput
-				className={clsxm('mx-auto w-full md:w-1/2 2xl:w-full lg:mr-10', !showInput && '!hidden md:!flex')}
+				className={clsxm(
+					'mx-auto w-full lg:w-3/4 lg:mr-10',
+					!showInput && '!hidden md:!flex',
+					!isTrackingEnabled && 'md:w-full'
+				)}
 			/>
-			{/* )}  */}
-
-			<button className="border rounded py-1 px-2 md:hidden" onClick={() => setShowInput((p) => !p)}>
-				{showInput ? 'hide the issue input' : 'show the issue input'}
-			</button>
-			{/* Timer  */}
-			{isTrackingEnabled ? <Timer /> : null}
+			<div
+				onClick={() => setShowInput((p) => !p)}
+				className="border dark:border-[#26272C] w-full rounded p-2 md:hidden flex justify-center mt-2"
+			>
+				<ChevronDown className={clsxm('h-12  transition-all', showInput && 'rotate-180')}>
+					{showInput ? 'hide the issue input' : 'show the issue input'}
+				</ChevronDown>
+			</div>
+			{isTrackingEnabled ? (
+				<div className="w-full lg:w-1/4">
+					<Timer />
+				</div>
+			) : null}
 		</Card>
 	);
 }

diff --git a/apps/web/app/hooks/features/useTaskEstimation.ts b/apps/web/app/hooks/features/useTaskEstimation.ts
@@ -17,7 +17,7 @@ export function useTaskEstimation(task?: Nullable<ITeamTask>) {
 	useEffect(() => {
 		const { h, m } = secondsToTime($task?.estimate || 0);
 		setValue({
-			hours: h.toString(),
+			hours: h ? h.toString() : '',
 			minutes: pad(m).toString()
 		});
 	}, [$task?.estimate]);

diff --git a/apps/web/app/services/client/api/public-organization-team.ts b/apps/web/app/services/client/api/public-organization-team.ts
@@ -26,8 +26,9 @@ export function getPublicOrganizationTeamsAPI(profile_link: string, team_id: str
 		params[`relations[${i}]`] = rl;
 	});
 
-	const queries = qs.stringify(params);
 
+	const queries = qs.stringify(params);
+
 	const endpoint = GAUZY_API_BASE_SERVER_URL.value
 		? `/public/team/${profile_link}/${team_id}?${queries}`
 		: `/public/team/${profile_link}/${team_id}?type=team`;
@@ -48,6 +49,7 @@ export function getPublicOrganizationTeamsMiscDataAPI(profile_link: string, team
 		params[`relations[${i}]`] = rl;
 	});
 
+
 	const queries = qs.stringify(params);
 
 	const endpoint = GAUZY_API_BASE_SERVER_URL.value

diff --git a/apps/web/app/services/server/requests/public-organization-team.ts b/apps/web/app/services/server/requests/public-organization-team.ts
@@ -31,6 +31,7 @@ export function getPublicOrganizationTeamRequest({
 		params[`relations[${i}]`] = rl;
 	});
 
+
 	const queries = qs.stringify(params || {});
 
 	return serverFetch<IOrganizationTeamWithMStatus>({

diff --git a/apps/web/lib/components/inputs/input.tsx b/apps/web/lib/components/inputs/input.tsx
@@ -136,7 +136,7 @@ export const TimeInputField = forwardRef<HTMLInputElement, ITimeProps>(
 					/>
 					<span className="absolute left-0 w-full text-center -z-10 dark:text-[#7E7991] mt-1">{dash}</span>
 				</div>
-				<span className="pl-1">{!loading ? label : <SpinnerLoader size={15} />}</span>
+				<span className="">{!loading ? label : <SpinnerLoader size={15} />}</span>
 			</div>
 		);
 	}

diff --git a/apps/web/lib/features/auth-user-task-input.tsx b/apps/web/lib/features/auth-user-task-input.tsx
@@ -23,40 +23,39 @@ export function AuthUserTaskInput({ className }: IClassName) {
 				showTaskNumber={true}
 				autoAssignTaskAuth={isTrackingEnabled}
 			/>
-
-			<div className="flex flex-col justify-between gap-5 lg:flex-row lg:items-center">
-				<div className="flex mb-4 lg:mb-0">
-					<span className="font-normal text-gray-500">{t('common.ESTIMATE')}:</span>
+			<div className="flex gap-5 flex-row lg:items-center justify-between ml-2">
+				<div className="xl:flex mb-4 lg:mb-0">
+					<span className="font-normal text-gray-500 pr-2">{t('common.ESTIMATE')}:</span>
 					<TaskEstimate />
 				</div>
 
-				<div className="justify-end flex-1 hidden gap-2 md:flex">
+				<div className="flex-grow justify-end hidden flex-1 gap-2 md:flex">
 					<ActiveTaskStatusDropdown
-						className="lg:min-w-[170px]"
+						className="lg:max-w-[190px] w-full"
 						disabled={!activeTeamTask}
-						taskStatusClassName="h-7 text-xs"
+						taskStatusClassName="text-xs py-1.5 w-full"
 					/>
 
 					<ActiveTaskPropertiesDropdown
-						className="lg:min-w-[170px]"
+						className="lg:max-w-[190px] w-full"
 						disabled={!activeTeamTask}
-						taskStatusClassName="h-7 text-xs"
+						taskStatusClassName="w-full py-1.5 text-xs"
 					/>
 
 					<ActiveTaskSizesDropdown
-						className="lg:min-w-[170px]"
+						className="lg:max-w-[190px] w-full"
 						disabled={!activeTeamTask}
-						taskStatusClassName="h-7 text-xs"
+						taskStatusClassName="w-full py-1.5 text-xs"
 					/>
 
 					<TaskLabels
 						task={activeTeamTask}
-						className="lg:min-w-[170px] text-xs"
+						className="lg:max-w-[170px] w-full text-xs"
 						forDetails={false}
-						taskStatusClassName="dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33] h-7 text-xs"
+						taskStatusClassName="dark:bg-[#1B1D22] dark:border py-[7px] dark:border-[#FFFFFF33] text-xs"
 					/>
 				</div>
-				<div className="grid justify-items-center md:hidden">
+				{/* <div className="grid justify-items-center md:hidden">
 					<div className="flex">
 						<ActiveTaskStatusDropdown className="w-32 mr-2" disabled={!activeTeamTask} />
 						<ActiveTaskPropertiesDropdown className="w-32" disabled={!activeTeamTask} />
@@ -65,7 +64,7 @@ export function AuthUserTaskInput({ className }: IClassName) {
 						<ActiveTaskSizesDropdown className="w-32 mr-2" disabled={!activeTeamTask} />
 						<TaskLabels task={activeTeamTask} className="lg:min-w-[170px]" forDetails={false} />
 					</div>
-				</div>
+				</div> */}
 			</div>
 		</div>
 	);

diff --git a/apps/web/lib/features/task/task-estimate.tsx b/apps/web/lib/features/task/task-estimate.tsx
@@ -29,7 +29,6 @@ export function TaskEstimate({ _task, onCloseEdition, className, loadingRef, clo
 		updateLoading,
 		editableMode
 	} = useTaskEstimation(_task);
-
 	const onCloseEditionRef = useCallbackRef(onCloseEdition);
 	const closeable_fcRef = useCallbackRef(closeable_fc);
 

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
@@ -43,29 +43,36 @@ export function InviteUserTeamSkeleton() {
 export function UserTeamCardHeader() {
 	const t = useTranslations();
 	return (
-		<div className="hidden sm:flex row font-normal justify-between pb-5 pt-8 hidde dark:text-[#7B8089]">
-			{/* <li className="pr-[50px]">{t('common.STATUS')}</li> */}
-			<div className="2xl:w-[20.625rem] text-center">{t('common.NAME')}</div>
-			<div className="w-1"></div>
-			<div className="2xl:w-80 3xl:w-[32rem] w-1/5 text-center">{t('common.TASK')}</div>
-			<div className="w-1"></div>
-			<Tooltip label={t('task.taskTableHead.TOTAL_WORKED_TODAY_HEADER_TOOLTIP')}>
-				<div className="2xl:w-48 3xl:w-[12rem] w-1/5 lg:px-4 px-2 flex flex-col justify-center text-center">
-					{t('task.taskTableHead.TASK_WORK.TITLE')}
-					<br />
-					{t('common.TASK')}
+		<div className="my-6 dark:text-[#7B8089] font-normal">
+			<div className="relative m-0 flex items-center">
+				<div className="flex w-1/4 justify-center items-center space-x-2 lg:space-x-4 2xl:w-[20.625rem]">
+					<p>{t('common.NAME')}</p>
 				</div>
-			</Tooltip>
-			<div className="w-1"></div>
-			<div className=" text-center w-1/5 lg:px-3 2xl:w-52 3xl:w-64">{t('common.ESTIMATE')}</div>
-			<div className="w-1"></div>
-			<Tooltip label={t('task.taskTableHead.WORKED_ON_TASK_HEADER_TOOLTIP')}>
-				<div className="w-1/5 lg:px-3 2xl:w-52 3xl:w-64 text-center">
-					{t('task.taskTableHead.TOTAL_WORK.TITLE')}
-					<br />
-					{t('common.TODAY')}
+
+				<div className="flex-grow self-stretch flex justify-end items-center">{t('common.TASK')}</div>
+
+				<div className="flex flex-1 w-[100%-_20px]"></div>
+
+				<div className="3xl:w-[12rem] flex w-1/5 flex-col justify-center gap-y-[1.125rem] 2xl:w-48">
+					<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">
+								{t('task.taskTableHead.TASK_WORK.TITLE')}
+								<br />
+								<span>{t('common.TASK')}</span>
+							</div>
+						</Tooltip>
+					</div>
+				</div>
+				<div className="3xl:w-80 w-1/5 lg:px-4 2xl:w-52 lg:text-center text-right">{t('common.ESTIMATE')}</div>
+				<div className="3xl:w-64 flex w-1/5 cursor-pointer items-center justify-center mt-1.5 gap-4 lg:px-3 2xl:w-52">
+					<Tooltip label={t('task.taskTableHead.WORKED_ON_TASK_HEADER_TOOLTIP')}>
+						{t('task.taskTableHead.TOTAL_WORK.TITLE')}
+						<br />
+						<span className="ml-6">{t('common.TODAY')}</span>
+					</Tooltip>
 				</div>
-			</Tooltip>
+			</div>
 		</div>
 	);
 }
diff --git a/apps/web/lib/features/timer/timer.tsx b/apps/web/lib/features/timer/timer.tsx
@@ -58,43 +58,51 @@ export function Timer({ className }: IClassName) {
 	useHotkeys(HostKeys.START_STOP_TIMER, handleStartSTOPTimer);
 
 	return (
-		<div className={clsxm('flex flex-row mb-6 md:mb-12 2xl:mb-0', className)}>
-			<div className="flex items-start justify-between border-r-[2px] dark:border-r-[#28292F] pr-5">
-				<div className="w-[11rem]">
-					<Text.Heading
-						as="h3"
-						className={`lg:text-4xl text-2xl tracking-wide font-normal ${
-							timerStatus?.running &&
-							timerStatus?.lastLog?.source &&
-							timerStatus?.lastLog?.source !== TimerSource.TEAMS
-								? 'text-[#888] dark:text-[#888]'
-								: ''
-						} `}
-					>
-						{pad(hours)}:{pad(minutes)}:{pad(seconds)}
-						<span className="text-sm">:{pad(ms_p)}</span>
-					</Text.Heading>
-
-					<ProgressBar width="100%" className="mt-2" progress={`${activeTaskEstimation}%`} />
-				</div>
-				<div className="w-[0.625rem]">
-					{timerStatus && timerStatus.running && (
-						<Tooltip
-							label={`The time tracker is already running in the ${(
-								timerStatus?.lastLog?.source || TimerSource.TEAMS
-							)
-								.split('_')
-								.join(' ')
-								.toLowerCase()}`}
-							placement="bottom-start"
+		<div
+			className={clsxm(
+				'flex space-x-2 lg:flex-col xl:flex-row justify-center items-center p-2 xl:space-y-0 space-y-5',
+				className
+			)}
+		>
+			<div className="xl:w-4/5 space-x-2 w-full flex justify-center items-center pr-2">
+				<div className="flex items-start justify-between w-full">
+					<div className="w-full mx-auto">
+						<Text.Heading
+							as="h3"
+							className={`text-4xl lg:text-center tracking-wide font-normal ${
+								timerStatus?.running &&
+								timerStatus?.lastLog?.source &&
+								timerStatus?.lastLog?.source !== TimerSource.TEAMS
+									? 'text-[#888] dark:text-[#888]'
+									: ''
+							} `}
 						>
-							<TimerRunningSourceIcon source={timerStatus?.lastLog?.source || TimerSource.TEAMS} />
-						</Tooltip>
-					)}
+							{pad(hours)}:{pad(minutes)}:{pad(seconds)}
+							<span className="text-sm">:{pad(ms_p)}</span>
+						</Text.Heading>
+
+						<ProgressBar width="100%" className="mt-2" progress={`${activeTaskEstimation}%`} />
+					</div>
+					<div>
+						{timerStatus && timerStatus.running && (
+							<Tooltip
+								label={`The time tracker is already running in the ${(
+									timerStatus?.lastLog?.source || TimerSource.TEAMS
+								)
+									.split('_')
+									.join(' ')
+									.toLowerCase()}`}
+								placement="bottom-start"
+							>
+								<TimerRunningSourceIcon source={timerStatus?.lastLog?.source || TimerSource.TEAMS} />
+							</Tooltip>
+						)}
+					</div>
 				</div>
 			</div>
 
-			<div className="ml-5 z-[50]">
+			<VerticalSeparator />
+			<div className="w-1/4 xl:w-2/5 h-fit flex justify-center items-center">
 				<Tooltip
 					label={!canRunTimer ? t('timer.START_TIMER') : osSpecificTimerTooltipLabel}
 					placement="top-start"
-Original file line number
+Diff line change
@@ Expand Up / @@ -31,6 +31,7 @@ export function getPublicOrganizationTeamRequest({ @@
     		params[`relations[${i}]`] = rl;
     	});
     	const queries = qs.stringify(params || {});
     	return serverFetch<IOrganizationTeamWithMStatus>({
@@ Expand Down @@